HTML attributes định nghĩa thuộc tính bổ sung cho element HTML. Chúng được chỉ định trong thẻ mở của element, và một số element bắt buộc phải có attribute mới hoạt động.
HTML attributes là gì, và cách dùng như thế nào? Khi học HTML, bạn có thể gặp thuật ngữ attributes. Attribute dùng để cung cấp thông tin bổ sung về element cụ thể trên trang HTML.
Attribute được chỉ định trong thẻ mở của tài liệu HTML, thường theo cặp name/value (tên/giá trị). Ví dụ: attribute tên name với giá trị value viết như: name=value.
Hướng dẫn này thảo luận cơ bản attribute HTML và tại sao dùng, kèm ví dụ. Cũng bàn về một vài attribute chung (global attributes) áp dụng cho hầu hết element, và bạn thường gặp khi code.
HTML Attributes là gì?
Mọi element trong ngôn ngữ đánh dấu HTML có thể có attribute – định nghĩa thuộc tính bổ sung cho element đó.
Ví dụ: muốn chỉ định attribute định nghĩa chiều cao ảnh, hoặc giá trị lưu bởi form element. Attribute này specific cho element – dùng để tùy chỉnh cách element hoạt động trên trang.
Trường hợp nhất định, attribute là bắt buộc. Ví dụ: làm việc với thẻ <a>, cần định nghĩa attribute href để tag biết URL nào để trỏ khi click.
Attribute HTML có 2 thành phần:
81% người tham gia cảm thấy tự tin hơn về cơ hội việc làm tech sau bootcamp. Được match bootcamp ngay hôm nay.
Trung bình bootcamp grad mất dưới 6 tháng chuyển nghề, từ bắt đầu bootcamp đến việc đầu tiên.
- name (tên) – định nghĩa tên attribute bạn tạo.
- value (giá trị) – định nghĩa giá trị attribute giữ.
Giả sử muốn link trỏ đến homepage Career Karma. Dùng thẻ <a>. Nhưng muốn link đến homepage Career Karma, cũng cần attribute href.
Ví dụ thẻ <a> link đến Career Karma homepage:
<a href="https://careerkarma.com/">Career Karma</a>
Tag này dùng attribute href gán giá trị "https://careerkarma.com/" – URL homepage Career Karma.
Attribute HTML không phân biệt chữ hoa/thường (case insensitive), nhưng thường viết thường.
Dấu ngoặc đơn và kép trong HTML
Khi gán giá trị cho attribute, dùng được cả dấu ngoặc đơn (') và kép ("). Dùng ngoặc kép phổ biến hơn (và dùng trong ví dụ trước). Tuy nhiên cách tiếp cận tùy thuộc nội dung attribute.
Giả sử tạo form element giá trị John 'Rocketman' Smith. Giá trị chứa dấu ngoặc đơn → nên dùng ngoặc kép cho attribute name. Code:
<input type="text" value="John 'Rocketman' Smith">
Ngược lại, giá trị chứa ngoặc kép John "Rocketman" Smith → dùng ngoặc đơn cho attribute:
<input type="text" value='John "Rocketman" Smith'>
Cách dùng HTML Boolean Attributes
Một số attribute không dùng cấu trúc name/value pair. Gọi là boolean attributes. Chỉ có giá trị true-false, giá trị = true nếu được chỉ định, false nếu không.
Boolean attribute thường dùng trong HTML form. Ví dụ: tạo form field hỏi tên user. Muốn field này mandatory mặc định. Dùng boolean attribute required:
<input type="text" value="Name" required>
Ví dụ này: input tag có 3 attribute. 2 attribute đầu type và value dùng cấu trúc name/value. Attribute thứ 3 required là boolean. Vì chỉ định required, giá trị = true.
Cách dùng Standard HTML Attributes (Global Attributes)
Một vài HTML attribute áp dụng cho mọi element HTML. Gọi là global attributes.
Sẽ gặp nhiều trên webpage, nên quan trọng biết chúng là gì và cách hoạt động. Xem 4 global attribute phổ biến nhất.
HTML id Attribute
Attribute id cho element định danh duy nhất (unique identifier). id bản thân không ảnh hưởng hiển thị element, nhưng cho phép select element cụ thể để thao tác khi dùng CSS hoặc JavaScript.
id gán cho element bất kỳ phải duy nhất trong tài liệu.
Ví dụ id trong thẻ <p>:
<p id="secondParagraph">Hello, there! Welcome to my site.</p>
Đã gán <p> attribute id giá trị secondParagraph.
HTML title Attribute
Attribute title thường dùng giải thích element hoặc nội dung. Giá trị trong title hiển thị tooltip khi user hover chuột lên element.
Giả sử input field thu thập tên user. Muốn hiển thị "This field is required" khi hover. Làm bằng code:
<input type="text" title="This field is required">
Hover vào text field, tooltip hiện ra:
HTML style Attribute
Attribute style dùng chỉ định CSS style cho element cụ thể. Cách này gọi là inline style.
Giả sử tạo paragraph muốn màu xám. Dùng style chỉ định color. Code:
<p style="color: gray;">Hello, there! This is my website.</p>
Kết quả:
Text chuyển màu xám vì chỉ định style set color = gray.
Element-Specific HTML Attributes (Attribute riêng cho element)
Có nhiều attribute khác specific cho element. Vài ví dụ:
img src
<img src="source.png">
Chỉ định attribute src. Dùng với thẻ img trỏ đến file render trên webpage.
a href
<a href="https://careerkarma.com/">Career Karma homepage</a>
Attribute href báo cho thẻ <a> biết trang nào để điều hướng user khi click link.
img alt
<img src="source.png" alt="Image of a book">
Chỉ định attribute alt. Specific cho thẻ img – text thay thế xử lý bởi webpage nếu ảnh không hiển thị được.
Attribute alt có thể đọc bởi screen reader, giúp người khiếm thị phụ thuộc screen reader vẫn hiểu webpage.
Kết luận: Cách dùng HTML Attributes
Attribute là thuộc tính bổ sung áp dụng cho element cụ thể HTML. Luôn được chỉ định trong thẻ mở của element, thường dùng cặp name/value.
Hướng dẫn này đi qua cơ bản attribute HTML, boolean attribute, một vài global attribute, và một số attribute specific cho element. Bây giờ bạn biết cách dùng attribute trong HTML.