HTML Attributes là gì?
Attribute href
Thẻ <a> xác định một hyperlink (siêu liên kết). Attribute href chỉ định URL của trang mà liên kết chuyển đến:
Ví dụ:
<a href="https://truonghoclaptrinh.com">Đến truonghoclaptrinh.com</a>
Attribute src
Thẻ <img> được sử dụng để nhúng hình ảnh vào trang HTML. Thuộc tính src chỉ định đường dẫn đến hình ảnh sẽ được hiển thị:
Ví dụ:
<img src="img_girl.jpg">
Có hai cách để chỉ định src attribute:
1. Absolute URL (URL tuyệt đối) - Liên kết tới một đường dẫn hình ảnh nằm bên ngoài website trên một đường dẫn khác. Ví dụ: src="https://www.w3schools.com/images/img_girl.jpg".
Lưu ý: Hình ảnh bên ngoài có thể chứa bản quyền. Nếu bạn không có quyền sử dụng nó, bạn có thể vi phạm bản quyền. Mặc khác bạn không thể kiếm soát hình ảnh bên ngoài, nó có thể bị thay đổi hoặc xoá bất cứ lúc nào.
2. Relative URL (URL tương đối) - Liên kết tới một hình ảnh được lưu trữ trên website của bạn. URL sẽ không bao gồm tên miền. Nếu URL mà bắt đầu mà không có dấu gạch chéo, nó sẽ dẫn đến trang hiện tại. Ví dụ: src="img_girl.jpg". Nếu URL bắt đầu với dấu gạch chéo nó sẽ dẫn đến tên miền hiện tại. Ví dụ: src="/images/img_girl.jpg".
Mẹo: Sử dụng đường dẫn tương đối là lựa chọn tốt nhất vì chúng ta không phải lo lắng việc bị thay đổi tên miền. Nó sẽ không bị lỗi nếu bạn thay đổi tên miền.
Attribute width và height
Thẻ <img> nên chứa các attribute width và height, nó chỉ định chiều dài và chiều rộng của ảnh (đơn vị pixels):
<img src="img_girl.jpg" width="500" height="600">
Attribute alt
Attribute alt là attribute bắt buộc cho thẻ <img> nó sẽ chỉ định cho hình ảnh một đoạn văn bản hiển thị thay thể nếu một cách nào đó mà hình ảnh bị lỗi hoặc không hiển thị được. Điều này có thể do kết nối chậm hoặc lỗi ở src attribute, hoặc có thể người dùng đang ở chế độ screen reader.
Ví dụ:
<img src="img_girl.jpg" alt="Girl with a jacket">
Ví dụ
Bạn sẽ thấy điều gì xảy ra nếu hình ảnh bị lỗi:
<img src="img_typo.jpg" alt="Girl with a jacket">
Attribute style
Attribute style được dùng để thêm styles cho element, như màu sắc, font chữ, và hơn thế nữa.
Ví dụ:
<p style="color:red;">Đây là một đoạn văn chữ đỏ</p>
Attribute lang
Bạn nên cung cấp attribute lang bên trong thẻ <html> để khai báo ngôn ngữ trong website và hỗ trợ cho các công cụ tìm kiếm.
Ví dụ chỉ định Tiếng Anh làm ngôn ngữ :
<!DOCTYPE html> <html lang="en"> <body> ... </body> </html>
Mã quốc gia có thể được thêm vào trong attribute lang. Vì vậy, hai kí tự đầu sẽ xác định ngôn ngữ được dùng trong website và hai kí tự cuối cùng xác định quốc gia.
Ví dụ chỉ đinh Tiếng Anh làm ngôn ngữ và Hoa Kỳ làm quốc gia:
<!DOCTYPE html> <html lang="en-US"> <body> ... </body> </html>
Attribute title
Attribute title xác định một số thông tin bổ sung về element.
Giá trị của title attribute sẽ được hiển thị dưới dạng tooltip khi bạn di chuột trên element:
Ví dụ:
<p title="Tôi là tooltip">Đây là văn bản</p>
Luôn sử dụng chữ thường cho các Attribute
Mặc định trong HTML không bắt buộc sử dụng chữ thường để đặt tên cho.
Attribute title (và tất cả attribute khác) có thể viết dưới dạng chữ thường title hoặc chữ hoa TITLE.
Tuy nhiên, W3C khuyến nghị nên dùng chữ thường cho các attribute trong HTML, và yêu cầu chữ thường cho các tài liệu chặt chẽ như XHTML
Luôn dùng dấu ngoặc kép cho giá trị Attribute
Mặc định trong HTML không bắt buộc dùng dấu ngoặc kép cho giá trị Attribute.
Tuy nhiên, W3C khuyến nghị dùng dấu ngoặc kép, và yêu cầu dấu ngoặc kép cho các tài liệu chặt chẽ như XHTML.
Nên:
<a href="https://truonghoclaptrinh.com">Đến truonghoclaptrinh.com</a>
Không nên:
<a href=https://truonghoclaptrinh.com>Đến truonghoclaptrinh.com</a>
Thỉnh thoảng bạn bắt buộc phải sử dụng dấy ngoặc kép. Ví dụ dưới đây sẽ không hiển thị attribute một cách chính xác do có chứa khoảng trắng:
<p title=About truonghoclaptrinh>
Sử dụng dấu ngoặc đơn hay dấu ngoặc kép
Dấu ngoặc kép được sử dụng phổ biến hơn trong HTML, tuy vậy dấu ngoặc đơn cũng có thể dùng để thay thế.
Trong một số trường hợp, khi giá trị attribute có chứa dấu ngoặc kép thì việc sử dụng dấu ngoặc đơn là cần thiết:
<p title='John "ShotGun" Nelson'>
Hoặc ngược lại:
<p title="John 'ShotGun' Nelson">