Học HTML, CSS từ Zero Tới Hero
Thuộc tính là gì?
✨ Thuộc tính (attribute) được sử dụng để bổ sung thêm thông tin và dữ liệu cho các thẻ HTML.Các thuộc tính có dạng key="value" và luôn được viết trong thẻ mở của các thẻ HTML (không bao giờ được viết trong thẻ đóng).
Thực tế, các bạn đã được làm quen với một số thuộc tính của các thẻ HTML rồi đó.
Thuộc tính lang trong thẻ <html>:
<html lang="vi">
...
</html>
Ví dụ trên có 1 thuộc tính là lang="vi", nó gồm 2 thành phần:
langvi
Trong đó, lang được gọi là khóa của thuộc tính, vi được gọi là giá trị của thuộc tính.
Cùng quan sát một số ví dụ sử dụng thuộc tính thường gặp khác:
Thuộc tính charset trong thẻ <meta>:
<meta charset="UTF-8" />
Thuộc tính href trong thẻ <a>:
<a href="https://fullstack.edu.vn/">Tới trang web F8</a>
Thuộc tính src trong thẻ <img>:
<img src="http://i3.ytimg.com/vi/1EBe-l1E3pM/maxresdefault.jpg" />
Nhiều thuộc tính
Bạn có thể sử dụng đồng thời nhiều thuộc tính trong một thẻ HTML, mỗi thuộc tính (mỗi cặp key="value") được cách nhau bởi một khoảng trắng.
Thuộc tính name và content trong thẻ <meta> viewport:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Trong ví dụ trên có 2 thuộc tính là:
name="viewport"content="width=device-width, initial-scale=1.0"
Trong thuộc tính thứ nhất có:
- key:
name - value:
viewport
Trong thuộc tính thứ hai có:
- key:
content - value:
width=device-width, initial-scale=1.0
Thuộc tính toàn cục
Các thuộc tính được đề cập trong phần này có thể sử dụng cho toàn bộ các thẻ HTML. Vì vậy, chúng được gọi là thuộc tính toàn cục (Global Attributes).
Thuộc tính lang
Mặc định thuộc tính lang không được sử dụng cho trang web. Khi bạn sử dụng thuộc tính này cho thẻ <html> thì mặc định các thẻ trong trang web sẽ thừa kế lại thuộc tính lang này.
Ví dụ:
<html lang="vi">
...
<body>
<!-- Các thẻ p này cũng sẽ có lang="vi" -->
<p>Hôm nay là một ngày đẹp trời</p>
<p>Hôm qua cũng là một ngày đẹp trời</p>
</body>
</html>
Chính vì điều này, nên nếu trang web của bạn có nội dung là tiếng Việt thì chỉ cần thêm <html lang="vi"> là đủ.
Tuy nhiên, có một số tình huống trang web của bạn vẫn đề cập tới một ngôn ngữ khác ngôn ngữ chính của trang web. Trường hợp này, bạn có thể sử dụng thêm thuộc tính lang cho thẻ chứa nội dung là ngôn ngữ khác.
Ví dụ:
<html lang="vi">
...
<body>
<!-- Thẻ p này có lang="vi" -->
<p>Hôm nay là một ngày đẹp trời</p>
<!-- Thẻ p này có lang="en" -->
<p lang="en">Yesterday was also a beautiful day</p>
</body>
</html>
Thuộc tính hidden
Các thẻ HTML có thuộc tính hidden sẽ được ẩn khỏi giao diện trang web (bao gồm cả các thẻ con và nội dung của nó).
Ví dụ:
Sau này, bạn có thể dùng JavaScript để thêm/bớt thuộc tính hidden để làm cho một thẻ HTML được ẩn/hiện trên giao diện trang web.
Thuộc tính title
Đây là thuộc tính bổ sung thông tin cho một thẻ HTML, nội dung của thuộc tính này sẽ hiển thị khi bạn đưa con trỏ chuột vào phần nội dung của nó.
Xem ví dụ sau:
Ví dụ:
Ngoài ra, còn một số thuộc tính toàn cục chưa được đề cập tới trong bài này. Bạn có thể tham khảo thêm tại: https://www.w3schools.com/tags/ref_standardattributes.asp
Tóm tắt
- Thuộc tính (attribute) được dùng để bổ sung thêm thông tin và dữ liệu cho các thẻ HTML.
- Các thuộc tính luôn luôn được thêm vào phần thẻ mở, không bao giờ được thêm vào phần thẻ đóng.
- Có thể sử dụng nhiều thuộc tính trong một thẻ HTML. Ví dụ:
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> - Các thuộc tính toàn cục có thể sử dụng cho mọi thẻ HTML. Ví dụ:
lang,hidden,title
Nhận xét