Thuộc tính HTML
Trong hướng dẫn này, bạn sẽ học cách sử dụng các thuộc tính để cung cấp thêm ý nghĩa cho các thẻ HTML.
Thuộc tính trong HTML là gì?
Các thuộc tính xác định các đặc điểm hoặc thuộc tính bổ sung của phần tử như chiều rộng và chiều cao của hình ảnh. Các thuộc tính luôn được chỉ định trong thẻ bắt đầu (hoặc thẻ mở) và thường bao gồm các name/value (cặp tên / giá trị) như name="value". Các giá trị thuộc tính phải luôn được đặt trong dấu ngoặc kép.
Ngoài ra, một số thuộc tính được yêu cầu cho các phần tử nhất định. Ví dụ: một thẻ <img> phải chứa các thuộc tính src và alt. Hãy xem một số ví dụ về cách sử dụng thuộc tính:
Ví dụ
<img src="images/smiley.png" width="30" height="30" alt="Smiley">
<a href="https://www.google.com/" title="Search Engine">Google</a>
<abbr title="Hyper Text Markup Language">HTML</abbr>
<input type="text" value="Tam Nguyen">Trong ví dụ trên, <strong>src </strong>bên trong thẻ <img> là một thuộc tính và đường dẫn hình ảnh được cung cấp là giá trị của nó. Tương tự, href bên trong thẻ <a> là một thuộc tính và liên kết được cung cấp là giá trị của nó, ...
Mẹo: Cả dấu ngoặc đơn và dấu ngoặc kép đều có thể được sử dụng để trích dẫn các giá trị thuộc tính. Tuy nhiên, dấu ngoặc kép là phổ biến nhất. Trong các tình huống mà bản thân giá trị thuộc tính chứa dấu ngoặc kép, cần phải đặt giá trị trong dấu ngoặc đơn, ví dụ:value='Tam "Nguyen" Mr.'
Có một số thuộc tính trong HTML5 không bao gồm các name/value mà chỉ bao gồm tên. Các thuộc tính như vậy được gọi là thuộc tính Boolean. Ví dụ về một số thuộc tính Boolean thường được sử dụng là checked, disabled, readonly, required ...
Ví dụ
<input type="email" required>
<input type="submit" value="Submit" disabled>
<input type="checkbox" checked>
<input type="text" value="Read only text" readonly>Bạn sẽ tìm hiểu chi tiết về tất cả các yếu tố này trong các chương sắp tới.
Ghi chú: Các giá trị thuộc tính thường không phân biệt chữ hoa chữ thường, ngoại trừ một số giá trị thuộc tính nhất định, như thuộc tính id và class. Tuy nhiên, World Wide Web Consortium (W3C) khuyến nghị viết thường cho các giá trị thuộc tính trong đặc tả của chúng.
Thuộc tính toàn cục
Có một số thuộc tính, chẳng hạn như id, title, class, style, ... mà bạn có thể sử dụng trên phần lớn các phần tử HTML. Phần sau đây mô tả cách sử dụng của họ.
Thuộc tính id
Các thuộc tính id được sử dụng để cung cấp cho một tên duy nhất hoặc định danh cho một phần tử trong một tài liệu. Điều này giúp bạn dễ dàng chọn phần tử bằng CSS hoặc JavaScript.
Ví dụ
<input type="text" id="firstName">
<div id="container">Some content</div>
<p id="infoText">This is a paragraph.</p>Ghi chú: Thuộc tính id của mỗi phần tử phải là duy nhất trong một tài liệu. Không thể đặt tên cho hai phần tử trong cùng một tài liệu có trùng id và mỗi phần tử chỉ có thể có một id.
Thuộc tính của class
Giống như thuộc tính id, thuộc tính class cũng được sử dụng để xác định các phần tử. Nhưng không giống như id, thuộc tính class không nhất thiết phải là duy nhất trong tài liệu. Điều này có nghĩa là bạn có thể áp dụng cùng một class cho nhiều phần tử trong một tài liệu, như được hiển thị trong ví dụ sau:
Ví dụ
<input type="text" class="highlight">
<div class="box highlight">Some content</div>
<p class="highlight">This is a paragraph.</p>Mẹo: Vì một thuộc tính class có thể được áp dụng cho nhiều phần tử, do đó bất kỳ quy tắc kiểu (css style) nào được viết cho thuộc tính class đó sẽ được áp dụng cho tất cả các phần tử có class đó.
Thuộc tính tiêu đề (title)
Thuộc tính title được sử dụng để cung cấp văn bản giải thích về một yếu tố hoặc nội dung của nó. Hãy thử ví dụ sau để hiểu cách thức hoạt động của thuộc tính này.
Ví dụ
<abbr title="World Wide Web Consortium">W3C</abbr>
<a href="images/kites.jpg" title="Click to view a larger image">
<img src="images/kites-thumb.jpg" alt="kites">
</a>Mẹo: Giá trị của thuộc tính title (tức là văn bản tiêu đề) được trình duyệt web hiển thị dưới dạng chú giải công cụ khi người dùng di chuyển con trỏ chuột lên trên phần tử.
Thuộc tính kiểu (style)
Thuộc tính style cho phép bạn xác định quy tắc phong cách CSS như màu sắc, font chữ, viền , .. trực tiếp trong phần tử. Hãy xem một ví dụ để xem nó hoạt động như thế nào:
Ví dụ
<p style="color: blue;">This is a paragraph.</p>
<img src="images/sky.jpg" style="width: 300px;" alt="Cloudy Sky">
<div style="border: 1px solid red;">Some content</div>Bạn sẽ tìm hiểu thêm về cách tạo kiểu các phần tử HTML trong chương kiểu HTML .
Các thuộc tính chúng ta đã thảo luận ở trên còn được gọi là các thuộc tính toàn cục. Để biết thêm các thuộc tính toàn cục, vui lòng xem thêm các thuộc tính toàn cầu HTML5.
Danh sách đầy đủ các thuộc tính cho từng phần tử HTML được liệt kê bên trong tham chiếu thẻ HTML5 .