Thuộc tính HTML
Thuộc tính HTML cung cấp thông tin bổ sung về các phần tử HTML.
Thuộc tính HTML
- Tất cả các phần tử HTML đều có thể có thuộc tính
- Thuộc tính cung cấp thông tin bổ sung về các phần tử
- Các thuộc tính luôn được chỉ định trong thẻ bắt đầu
- Các thuộc tính thường có cặp tên/giá trị như: name="value"
Thuộc tính href
Thẻ <a> xác định một siêu liên kết. Thuộc tính href chỉ định URL của trang mà liên kết tới:
Bạn sẽ tìm hiểu thêm về các liên kết trong chương Liên kết HTML của chúng tôi.
Thuộc tính 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ị:
Có hai cách để chỉ định URL trong thuộc tính src :
1. URL tuyệt đối - Liên kết tới hình ảnh bên ngoài được lưu trữ trên một trang web khác. Ví dụ: src="https://www.example.com.vn/images/img_girl.jpg" .
Lưu ý: Hình ảnh bên ngoài có thể có bản quyền. Nếu bạn không được phép sử dụng nó, bạn có thể vi phạm luật bản quyền. Ngoài ra, bạn không thể kiểm soát hình ảnh bên ngoài; nó có thể đột ngột bị loại bỏ hoặc thay đổi.
2. URL tương đối - Liên kết tới hình ảnh được lưu trữ trong trang web. Ở đây, URL không bao gồm tên miền. Nếu URL bắt đầu không có dấu gạch chéo, nó sẽ liên quan đến trang hiện tại. Ví dụ: src="img_girl.jpg". Nếu URL bắt đầu bằng dấu gạch chéo thì nó sẽ liên quan đến tên miền. Ví dụ: src="/images/img_girl.jpg".
Mẹo: Tốt nhất bạn nên sử dụng URL tương đối. Chúng sẽ không bị hỏng nếu bạn thay đổi tên miền.
Thuộc tính chiều rộng và chiều cao
Thẻ <img> cũng phải chứa thuộc tính width và height , xác định chiều rộng và chiều cao của hình ảnh (tính bằng pixel):
Thuộc tính alt
Thuộc tính alt bắt buộc cho thẻ <img> chỉ định văn bản thay thế cho hình ảnh, nếu hình ảnh vì lý do nào đó không thể hiển thị được. Điều này có thể do kết nối chậm hoặc lỗi trong thuộc tính src hoặc do người dùng sử dụng trình đọc màn hình.
Ví dụ
Hãy xem điều gì sẽ xảy ra nếu chúng ta cố gắng hiển thị một hình ảnh không tồn tại:
<img src="img_typo.jpg" alt="Girl
with a jacket">
Hãy tự mình thử »Bạn sẽ tìm hiểu thêm về hình ảnh trong chương Hình ảnh HTML của chúng tôi.
Thuộc tính phong cách
Thuộc tính style được sử dụng để thêm kiểu cho một phần tử, chẳng hạn như màu sắc, phông chữ, kích thước, v.v.
Bạn sẽ tìm hiểu thêm về các kiểu trong chương Kiểu HTML của chúng tôi.
Thuộc tính lang
Bạn phải luôn bao gồm thuộc tính lang bên trong thẻ <html> để khai báo ngôn ngữ của trang Web. Điều này nhằm hỗ trợ các 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 mã 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 cùng 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>
Bạn có thể xem tất cả các mã ngôn ngữ trong Tài liệu tham khảo mã ngôn ngữ HTML của chúng tôi.
Thuộc tính tiêu đề
Thuộc tính title xác định một số thông tin bổ sung về một phần tử.
Giá trị của thuộc tính tiêu đề sẽ được hiển thị dưới dạng chú giải công cụ khi bạn di chuột qua phần tử:
Chúng tôi đề xuất: Luôn sử dụng các thuộc tính chữ thường
Tiêu chuẩn HTML không yêu cầu tên thuộc tính viết thường.
Thuộc tính title (và tất cả các thuộc tính khác) có thể được viết bằng chữ hoa hoặc chữ thường như title hoặc TITLE .
Tuy nhiên, W3C khuyến nghị các thuộc tính chữ thường trong HTML và yêu cầu các thuộc tính chữ thường cho các loại tài liệu chặt chẽ hơn như XHTML.
Tại Example.com.vn chúng tôi luôn sử dụng tên thuộc tính chữ thường.
Chúng tôi đề xuất: Luôn trích dẫn các giá trị thuộc tính
Tiêu chuẩn HTML không yêu cầu dấu ngoặc kép xung quanh các giá trị thuộc tính.
Tuy nhiên, W3C khuyến nghị các trích dẫn bằng HTML và yêu cầu trích dẫn cho các loại tài liệu chặt chẽ hơn như XHTML.
Tốt:
<a href="https://www.example.com.vn/html/">Visit our HTML tutorial</a>Xấu:
<a href=https://www.example.com.vn/html/>Visit our HTML tutorial</a>Đôi khi bạn phải sử dụng dấu ngoặc kép. Ví dụ này sẽ không hiển thị chính xác thuộc tính tiêu đề vì nó chứa khoảng trắng:
Tại W3Schools, chúng tôi luôn sử dụng dấu ngoặc kép xung quanh các giá trị thuộc tính.
Báo giá đơn hay kép?
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 dấu ngoặc đơn cũng có thể được sử dụng.
Trong một số trường hợp, khi bản thân giá trị thuộc tính chứa dấu ngoặc kép thì cần sử dụng dấu ngoặc đơn:
<p title='John "ShotGun" Nelson'>
Hoặc ngược lại:
<p title="John 'ShotGun' Nelson"> Hãy tự mình thử »Tóm tắt chương
- Tất cả các phần tử HTML đều có thể có thuộc tính
- Thuộc tính
hrefcủa<a>chỉ định URL của trang mà liên kết tới - Thuộc tính
srccủa<img>chỉ định đường dẫn đến hình ảnh được hiển thị - Thuộc tính
widthvàheightcủa<img>cung cấp thông tin kích thước cho hình ảnh - Thuộc tính
altcủa<img>cung cấp văn bản thay thế cho hình ảnh - Thuộc tính
styleđược sử dụng để thêm kiểu cho một phần tử, chẳng hạn như màu sắc, phông chữ, kích thước, v.v. - Thuộc tính
langcủa thẻ<html>khai báo ngôn ngữ của trang Web - Thuộc tính
titlexác định một số thông tin bổ sung về một phần tử
Bài tập HTML
Tham chiếu thuộc tính HTML
Danh sách đầy đủ tất cả các thuộc tính cho từng thành phần HTML được liệt kê trong: Tham chiếu thuộc tính HTML của chúng tôi.
Video: Thuộc tính HTML
