HTML attribute – Cách sử dụng thuộc tính trong HTML hiệu quả

HTML attribute là những thuộc tính giúp bổ sung thông tin cho phần tử HTML, điều chỉnh cách hiển thị và hành vi của chúng trên trình duyệt. Việc hiểu và sử dụng đúng các attribute không chỉ giúp mã HTML trở nên rõ ràng hơn mà còn tối ưu trải nghiệm người dùng và khả năng tương thích của trang web. Trong bài viết này, chúng ta sẽ tìm hiểu về cấu trúc attribute, các quy tắc sử dụng, cũng như những thuộc tính quan trọng như id, class, style, title… Ngoài ra, bài viết cũng đề cập đến các boolean attributes, thuộc tính hỗ trợ đa ngôn ngữ và một số attribute hữu ích khác trong HTML.

Điểm chính cần nắm

• HTML attribute – Thuộc tính trong HTML là gì?: HTML attribute cung cấp thông tin bổ sung cho phần tử HTML, giúp kiểm soát hiển thị và hành vi của trang web.
• Quy tắc và đặc điểm sử dụng attribute: Attribute luôn được đặt trong thẻ mở, có dạng cặp tên-giá trị và ảnh hưởng đến cách hoạt động của phần tử.
• Các thuộc tính cốt lõi trong HTML: id, class, title, style giúp tổ chức, định dạng và quản lý nội dung trên trang web.
• Các thuộc tính hỗ trợ đa ngôn ngữ: dir, lang, translate hỗ trợ hiển thị nội dung theo nhiều ngôn ngữ và tối ưu trải nghiệm người dùng.
• Boolean attributes (Thuộc tính không cần giá trị): Những thuộc tính có mặt trong thẻ HTML là “true”, nếu không có thì mặc định “false”, như checked, disabled, readonly.
• Một số thuộc tính chung trong HTML: align, bgcolor, width, height, title hỗ trợ căn chỉnh, màu nền và kích thước phần tử.
• Vietnix – Dịch vụ lưu trữ tốc độ cao, bảo mật vượt trội: Cung cấp giải pháp máy chủ, hosting, VPS chất lượng cao với hiệu suất và bảo mật tối ưu.
• FAQ: Trả lời các câu hỏi thường gặp về HTML attributes, cách sử dụng và ứng dụng thực tế trong phát triển web.

HTML attribute – Thuộc tính trong HTML là gì?

HTML attribute là các thuộc tính giúp cung cấp thông tin bổ sung hoặc tùy chỉnh cách hiển thị của một phần tử HTML. Chúng luôn được đặt trong thẻ mở của element HTML và có cấu trúc gồm tên thuộc tính và giá trị của nó. Hầu hết các thẻ trong HTML như <h1>, <p>, <br>,… đều có thể đi kèm với các thuộc tính để điều chỉnh cách phần tử hoạt động trên trang.

• Tên thuộc tính: Là từ khóa xác định đặc điểm cụ thể của phần tử. Ví dụ, thẻ <p> có thể sử dụng thuộc tính align để xác định cách căn chỉnh văn bản.
• Giá trị thuộc tính: Là dữ liệu hoặc thông tin được gán cho thuộc tính, thường đặt trong dấu ngoặc kép. Ví dụ, align="left", align="center", align="right" giúp căn chỉnh văn bản theo từng hướng tương ứng.

Cấu trúc chung của một attribute

Mỗi HTML attribute đều có cấu trúc gồm tên thuộc tính và giá trị, được đặt bên trong thẻ mở của phần tử.

Cú pháp:

<tag_name attribute_name="attribute_value">Nội dung</tag_name>

Ví dụ minh họa

Thẻ <img> dùng để hiển thị hình ảnh trên trang web, nhưng bản thân nó không thể chứa nội dung văn bản như các thẻ <p> hay <h1>. Vì vậy, để xác định nguồn hình ảnh và thêm mô tả, ta cần sử dụng các thuộc tính như src và alt:

<img src="https://image.vietnix.vn/wp-content/uploads/2022/07/logo-vietnix-2.png" alt="Logo Vietnix">

Thẻ <a> (anchor) được sử dụng để tạo liên kết đến một trang web khác, một tài liệu hoặc một phần tử trong cùng trang. Để xác định đích đến của liên kết, ta sử dụng thuộc tính href, và để kiểm soát cách mở liên kết, ta có thể dùng thuộc tính target. Ví dụ, nếu muốn tạo một liên kết đến trang web Vietnix và yêu cầu trình duyệt mở liên kết này trong một tab mới, ta có thể viết như sau:

<a href="https://vientix.vn" target="_blank">Truy cập Vietnix</a>

Ví dụ:

<input type="checkbox" checked>

Ở đây, checked là Boolean attribute, chỉ cần có mặt là đủ, không cần giá trị.

Quy tắc và đặc điểm sử dụng attribute

• Thuộc tính tùy chọn, giúp cung cấp thông tin bổ sung cho phần tử HTML.
• Một phần tử có thể có nhiều thuộc tính, cách nhau bằng dấu cách.
• Luôn đặt trong thẻ mở theo cú pháp: tên_thuộc_tính="giá_trị".
• Một số thuộc tính không cần giá trị (Boolean attributes), ví dụ: checked, disabled.
• Không phân biệt chữ hoa chữ thường, nhưng nên viết bằng chữ thường.
• Có thể dùng chung trên nhiều phần tử, ví dụ: id, class, title.
• Không phải mọi thẻ đều có thể có thuộc tính, một số thẻ như <head>, <title>, <script> không sử dụng attribute.
• W3C khuyến nghị viết thuộc tính bằng chữ thường và đặt giá trị trong dấu ngoặc kép.le.

Các thuộc tính cốt lõi trong HTML

Trong HTML, các thuộc tính giúp kiểm soát nội dung, định dạng và hành vi của phần tử. Dưới đây là một số thuộc tính quan trọng mà bạn cần biết khi làm việc với HTML.

id attribute

Thuộc tính id được sử dụng để gán một định danh duy nhất cho phần tử, giúp truy xuất dễ dàng bằng CSS hoặc JavaScript. Một trang HTML không nên có hai phần tử có cùng một id, vì điều này có thể gây lỗi khi xử lý bằng JavaScript.

Ví dụ:

<p id="intro">Giới thiệu về Vietnix</p>

Trong CSS, bạn có thể sử dụng id để thay đổi cách thông tin hiển thị. Trong CSS, để chọn phần tử có id, sử dụng dấu #.

#intro {
    font-weight: bold;
    color: blue;
    font-size: 22px;
}

title attribute

Thuộc tính title giúp hiển thị nội dung chú thích khi người dùng di chuột vào phần tử. Điều này hữu ích khi cần cung cấp thêm thông tin mà không chiếm nhiều không gian trên giao diện.

Ví dụ:

<p title="Thông tin quan trọng">Di chuột để xem tooltip</p>

class attribute

Thuộc tính class giúp nhóm nhiều phần tử có cùng kiểu CSS, giúp viết code gọn gàng hơn. Một phần tử có thể có nhiều lớp (class), các lớp này được phân tách bằng dấu cách.

Ví dụ:

<p class="highlight">Nội dung quan trọng</p>
<p class="highlight bold-text">Nội dung rất quan trọng</p>

Trong CSS, bạn có thể sử dụng .highlight và .bold-text để áp dụng định dạng tùy chỉnh theo mong muốn. Và để chọn phần tử theo class, bạn sử dụng dấu ..

.highlight {
    background-color: yellow;
}
.bold-text {
    font-weight: bold;
}

style attribute

Thuộc tính style cho phép áp dụng CSS trực tiếp vào phần tử HTML. Tuy nhiên, việc sử dụng style trong HTML không được khuyến khích vì ảnh hưởng đến khả năng bảo trì mã nguồn.

Ví dụ:

<p style="color: red;">Nội dung có màu đỏ</p>

Các thuộc tính hỗ trợ đa ngôn ngữ

dir attribute – Xác định hướng văn bản

Đối với các ngôn ngữ sử dụng hướng viết từ phải sang trái (RTL) như tiếng Ả Rập hoặc tiếng Do Thái, thuộc tính dir đóng vai trò quan trọng trong việc hiển thị nội dung đúng cách.

Các giá trị của dir:

• ltr (left-to-right) – Văn bản hiển thị từ trái sang phải (mặc định).
• rtl (right-to-left) – Văn bản hiển thị từ phải sang trái.

Nếu một trang web có nội dung bằng tiếng Ả Rập nhưng không đặt thuộc tính dir="rtl", nội dung có thể bị hiển thị không đúng định dạng, gây khó đọc cho người dùng.

Ví dụ: Dòng thứ hai sẽ được căn phải và hiển thị theo hướng phải sang trái.

<p dir="ltr">This text is left-to-right.</p>
<p dir="rtl">هذا النص من اليمين إلى اليسار</p>

lang attribute – Xác định ngôn ngữ của nội dung

Thuộc tính lang được sử dụng để chỉ định ngôn ngữ chính của nội dung trong một phần tử HTML. Điều này giúp các công cụ tìm kiếm hiểu rõ hơn về nội dung của trang, đồng thời hỗ trợ trình đọc màn hình phát âm chính xác đối với người dùng khiếm thị. Ngoài ra, việc sử dụng lang cũng giúp trình duyệt hiển thị đúng các ký tự đặc biệt và điều chỉnh cách gạch chân lỗi chính tả khi soạn thảo văn bản.

Ví dụ:

<p lang="vi">Xin chào! Đây là nội dung tiếng Việt.</p>
<p lang="en">Hello! This is English content.</p>

Trong HTML5, lang vẫn là cách tiêu chuẩn để xác định ngôn ngữ. Trước đây, trong tài liệu XHTML, thuộc tính xml:lang được sử dụng, nhưng hiện tại HTML5 vẫn ưu tiên lang. Nếu cần hỗ trợ cả HTML và XHTML, có thể sử dụng cả hai như sau:

Ví dụ:

<html lang="vi" xml:lang="vi">

Tuy nhiên, trong hầu hết các trường hợp, bạn chỉ cần dùng lang là đủ. Các giá trị của thuộc tính lang là mã ngôn ngữ hai ký tự theo tiêu chuẩn ISO-639. Kiểm tra HTML Language Codes: ISO 639 để biết danh sách đầy đủ các mã ngôn ngữ.

Ví dụ: Trong ví dụ bên dưới, dòng đầu tiên được xác định là nội dung tiếng Việt, trong khi dòng thứ hai là tiếng Anh.

<p lang="vi">Xin chào! Đây là nội dung tiếng Việt.</p>
<p lang="en">Hello! This is English content.</p>

translate – Kiểm soát dịch tự động

Khi nội dung trang web được dịch bởi trình duyệt hoặc công cụ dịch tự động như Google Translate, một số phần nội dung không nên bị dịch, chẳng hạn như tên thương hiệu, thuật ngữ chuyên ngành hoặc nội dung đặc biệt.

Thuộc tính translate giúp kiểm soát việc dịch nội dung bằng cách có hai giá trị:

• translate="yes" – Cho phép dịch (mặc định).
• translate="no" – Ngăn chặn dịch nội dung.

Ví dụ: Trong ví dụ bên dưới, trình duyệt hoặc công cụ dịch sẽ không dịch từ “Vientix”, nhưng câu chào mừng vẫn có thể được dịch sang ngôn ngữ khác.

<p translate="no">Vientix</p> <!-- Tên thương hiệu không bị dịch -->
<p translate="yes">Chào mừng bạn đến với trang web!</p> <!-- Có thể dịch -->

Boolean attributes (Thuộc tính không cần giá trị)

Boolean attributes là các thuộc tính đặc biệt trong HTML không yêu cầu giá trị. Khi một boolean attribute có mặt trong phần tử HTML, trình duyệt sẽ tự động hiểu giá trị của nó là “true”. Nếu không có thuộc tính này, trình duyệt mặc định hiểu là “false” hoặc đơn giản là không áp dụng hiệu ứng của thuộc tính đó.

Đặc điểm của boolean attributes:

• Không cần chỉ định giá trị, chỉ cần khai báo thuộc tính là đủ.
• Khi xuất hiện, trình duyệt hiểu là “true”, nếu vắng mặt thì thuộc tính không có hiệu lực.
• Thường dùng cho các thuộc tính liên quan đến trạng thái của phần tử.

Ví dụ về boolean attributes:

1. Thuộc tính checked – Chọn sẵn checkbox hoặc radio button

<input type="checkbox" name="subscribe" checked> Đăng ký nhận tin tức

Ở đây, checkbox sẽ được chọn sẵn vì có thuộc tính checked.

2. Thuộc tính disabled – Vô hiệu hóa phần tử

<button disabled>Không thể nhấn</button>

Nút này sẽ bị vô hiệu hóa và không thể bấm được.

3. Thuộc tính required – Bắt buộc nhập dữ liệu

<input type="email" placeholder="Nhập email" required>

Nếu ô này không được điền, form sẽ không thể gửi đi.

4. Thuộc tính readonly – Ngăn chỉnh sửa nội dung input

<input type="text" value="Không thể chỉnh sửa" readonly>

Ô nhập liệu này sẽ chỉ hiển thị nội dung mà không thể chỉnh sửa.

5. Thuộc tính autofocus – Tự động đặt con trỏ vào input khi tải trang

<input type="text" placeholder="Nhập tên" autofocus>

Khi trang web mở ra, ô nhập liệu này sẽ tự động được chọn.

6. Thuộc tính inert – Vô hiệu hóa hoàn toàn phần tử HTML

<div inert>
    <button>Không thể nhấn</button>
    <p>Nội dung này cũng không thể chọn hoặc tương tác.</p>
</div>

Trong ví dụ này, cả nút và đoạn văn bản bên trong <div> sẽ bị vô hiệu hóa hoàn toàn.

7. Thuộc tính autocomplete giúp tự động điền dữ liệu vào các ô nhập liệu dựa trên thông tin người dùng đã nhập trước đó

<form>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" autocomplete="email">
    
    <label for="password">Mật khẩu:</label>
    <input type="password" id="password" name="password" autocomplete="current-password">
    
    <button type="submit">Đăng nhập</button>
</form>

Ở đây, trình duyệt sẽ tự động đề xuất thông tin email và mật khẩu nếu người dùng đã từng nhập vào trước đó.

Một số thuộc tính chung trong HTML

Vietnix – Dịch vụ lưu trữ tốc độ cao, bảo mật vượt trội

Vietnix là đơn vị hàng đầu tại Việt Nam trong lĩnh vực cho thuê server, hosting, VPS, domain. Với cam kết mang đến giải pháp lưu trữ ổn định, bảo mật cao, Vietnix phục vụ hơn 80.000 khách hàng, giúp tối ưu hiệu suất và bảo vệ dữ liệu doanh nghiệp. Đội ngũ kỹ thuật hỗ trợ 24/7, sẵn sàng đồng hành cùng bạn.

Thông tin liên hệ:

• Hotline: 18001093
• Email: sales@vietnix.com.vn
• Địa chỉ: 265 Hồng Lạc, Phường 10, Quận Tân Bình, Thành Phố Hồ Chí Minh.
• Website: https://vietnix.vn/

Lời kết

Nắm vững cách sử dụng HTML attribute giúp bạn kiểm soát tốt hơn giao diện và chức năng của website. Từ những thuộc tính cơ bản như id, class, style đến các boolean attributes hay attribute hỗ trợ đa ngôn ngữ, mỗi thuộc tính đều có vai trò quan trọng trong việc tối ưu hóa trải nghiệm người dùng. Nếu bạn có bất cứ thắc mắc hay cần hỗ trợ gì, hãy để lại bình luận bên dưới, mình sẽ hỗ trợ nhanh nhất. Cảm ơn bạn đã đọc!

Mọi người cũng xem: