Thuộc tính trong HTML5

Thuộc tính trong HTML5

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 là gì

Các thuộc tính (attribute) 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 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ụ: thẻ <img> phải chứa thuộc tính srcalt. Hãy xem một số ví dụ về cách sử dụng thuộc tính:

<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="John Doe">

Trong ví dụ trên, src 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ó, v.v.

Mẹo: Cả dấu nháy đơn (') và dấu nháy 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 nháy 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 nháy kép, cần phải đặt giá trị trong dấu nháy đơn, ví dụ: value='John "Williams" Jr.'

Có một số thuộc tính trong HTML5 không bao gồm các cặp tên / giá trị 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.v.

<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.

Lưu ý: 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 idclass. 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.

Các thuộc tính phổ biến

Có một số thuộc tính, chẳng hạn như id, title, class, style, v.v. 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 chúng.

Thuộc tính id

Thuộc tính id được sử dụng để cung cấp 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.

<input type="text" id="firstName">
<div id="container">Some content</div>
<p id="infoText">This is a paragraph.</p>

Lưu ý: Giá trị thuộc tính id của 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 một tài liệu có cùng giá trị thuộc tính id và mỗi phần tử chỉ có thể có một thuộc tính id.

Thuộc tính 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:

<input type="text" class="highlight">
<div class="box highlight">Some content</div>
<p class="highlight">This is a paragraph.</p>

Mẹo: Vì thuộc tính class có thể được áp dụng cho nhiều phần tử, do đó bất kỳ style CSS nào được viết cho class sẽ được áp dụng cho tất cả các phần tử có thuộc tính class đó.

Thuộc tính title

Thuộc tính title được sử dụng để cung cấp văn bản mô tả về một phần 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 title.

<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 tooltip khi người dùng di chuột qua phần tử.

Thuộc tính style

Thuộc tính style cho phép bạn định nghĩa style CSS như màu sắc, font chữ, viền bao quanh, v.v. trực tiếp trong phần tử. Hãy xem một ví dụ để xem nó hoạt động như thế nào:

<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 style CSS cho 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 tham chiếu các thuộc tính toàn cục 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.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *