Attribute trong HTML là gì? Nó có nhiệm vụ gì trong HTML. Hãy cùng Mẫu Website 24h tìm hiểu về khái niệm cũng như các Attribute trong HTML để có thể vận dụng nó một cách hợp lý nhé.
Attribute trong HTML là gì?
HTML Attributes là thuộc tính của thẻ HTML, nó bổ trợ các thông tin cho thẻ HTML đó:
- Các thẻ HTML đều có thể có các thuộc tính
- Những thuộc tính cung cấp thông tin bổ sung cho 1 thẻ HTML cụ thể
- Thuộc tính được chỉ định trong lúc mở thẻ HTML
- Những thuộc tính thường có các cặp tên / giá trị: name = “value”
Thuộc tính href
Thẻ <a>
dùng để biểu diễn đường dẫn đến trang khác từ trang web hiện tại, đích đến của trang web đó được biểu diễn trong thuộc tính href
của thẻ a này.
<a href="https://mauwebsite24h.com"> Mẫuwebsite24h</a>
Kết quả
Mẫuwebsite24h
Thuộc tính src
Thuộc tính src
được sử dụng khá phổ biến trong việc biểu diễn giá trị của file ảnh trong thẻ <img>. Ngoài ra nó cũng được sử dụng cho 1 số thẻ khác như <iframe>, <video>…
<img src="file_hinh_anh.jpg"/>
Các thuộc tính chiều rộng và chiều cao
Thẻ <img>
cũng cần chứa các thuộc tính width
và height
, việc này chỉ định chiều rộng và chiều cao của hình ảnh (tính bằng pixel):
<img src="file_hinh_anh
.jpg" width="500" height="600">
Thuộc tính alt
Thuộc tính alt
yêu cầu cho thẻ <img>
chỉ định văn bản thay thế cho hình ảnh, nếu hình ảnh có lý do nào đó không thể hiển thị. Có thể là do kết nối chậm hay lỗi trong thuộc tính src
hoặc nếu người dùng sử dụng trình đọc màn hình.
<img src="img_girl.jpg" alt="Girl with a cafedev">
Thuộc tính phong cách (style)
Thuộc tính style
được sử dụng để thêm kiểu vào một phần tử, chẳng hạn như màu sắc, phông chữ, kích thước và hơn thế nữa.
<p style="color:blue;">This is a blue paragraph.</p>
->This is a blue paragraph.
Thuộc tính lang
Cần đảm bảo rằn, thuộc tính lang
bên trong thẻ <html>
để khai báo ngôn ngữ của trang Web. Thuộc tính này hỗ trợ công cụ tìm kiếm và trình duyệt.
Ví dụ sau chỉ định tiếng Anh là ngôn ngữ:
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>
Mã quốc gia cũng có thể được thêm vào Code ngôn ngữ trong thuộc tính lang. Vì vậy, hai ký tự đầu tiên xác định ngôn ngữ của trang HTML và hai ký tự cuối xác định quốc gia.
Ví dụ sau chỉ định tiếng Anh là ngôn ngữ và Hoa Kỳ là quốc gia:
<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>
Thuộc tính tiêu đề
Thuộc tính title
định nghĩa một số thông tin bổ sung cho một phần tử.
Giá trị của thuộc tính title
sẽ được hiển thị dưới dạng chú giải khi bạn di chuột qua phần tử:
<p title="Mẫu website 24h">This is a paragraph.</p>
Một số kinh nghiệm
- Luôn sử dụng các thuộc tính bằng chữ thường
Ví dụ: Không nên ghi là TITLE hãy ghi là title
- Luôn trích dẫn giá trị thuộc tính
Nên
<a href="https://cafedev.vn/html/">Visit our HTML tutorial</a>
Không nên
<a href=https://cafedev.vn/html/>Visit our HTML tutorial</a>
Nên dùng dầu nháy đơn hay đôi?
Dấu ngoặc kép xung quanh các giá trị thuộc tính là phổ biến nhất trong HTML, nhưng cũng có thể sử dụng dấu ngoặc đơn.
Trong một vài trường hợp, khi chính giá trị thuộc tính chứa dấu ngoặc kép, cần sử dụng dấu ngoặc đơn
Ví dụ:
<p title='John "ShotGun" Nelson'>
<p title="John 'ShotGun' Nelson">
Lời kết
Bạn đã hiểu Attribute trong HTML là gì hay chưa?. Hi vọng sau bài viết mà Mẫu Website 24h chia sẻ có thể giải đáp được các thắc mắc của các bạn, và có thể sử dụng nó một cách thành công. Mọi thắc mắc hãy liên hệ với chúng tôi- Dịch vụ thiết kế website hàng đầu.