Bài 5. Các thuộc tính trong HTML
- Thứ ba - 30/07/2024 10:19
- In ra
- Đóng cửa sổ này
Đặc điểm của thuộc tính HTML
- Tất cả các phần tử HTML đều có thuộc tính
- Thuộc tính bổ sung thông tin cho phần tử
- Thuộc tính thường được chỉ định trong thẻ mở
- Thuộc tính thường đi theo cặp tên-giá trị, ví dụ như ten="giatri"
Thuộc tính href
Đường dẫn trong HTML được xác định bằng thẻ <a> và địa chỉ đường dẫn được xác định bằng thuộc tính href.
Ví dụ
<a href="https://quantrimang.com">Quản trị mạng</a>
Thuộc tính src
Hình ảnh trong HTML được xác định bằng thẻ <img>, tên tập tin của nguồn ảnh được xác định bằng thuộc tính src.
Ví dụ
<img src="img_quantrimang.jpg">
Thuộc tính chiều rộng và chiều cao
Hình ảnh trong HTML còn có thuộc tính xác định kích thước, chiều rộng và chiều cao.
Ví dụ
<img src="img_quantrimang.jpg" width="540" height="200">
Kích thước ảnh được xác định bằng đơn vị pixel, với chiều cao là 200 pixel và chiều rộng là 540 pixel. Sẽ có bài viết riêng về hình ảnh trong HTML sau để bạn hiểu hơn.
Thuộc tính alt
Thuộc tính alt xác định đoạn văn bản thay thế được sử dụng khi bức ảnh không thể hiển thị. Giá trị của thuộc tính này có thể đọc được trên thiết bị đọc màn hình (screen reader). Nhờ vậy, người ta có thể “nghe" được trang web, ví dụ như người khiếm thị có thể “nghe" được phần tử HTML.
Ví dụ
<img src="img_quantrimang.jpg" alt="Trang tin tức, thủ thuật công nghệ">
Thuộc tính alt cũng rất hữu ích nếu hình ảnh không tồn tại. Ví dụ như:
<img src="img_hinhanh.jpg" alt="Cùng nhau học HTML">
Thuộc tính style
Thuộc tính style được dùng để xác định kiểu cách cho một phần tử, như màu sắc, font chữ, kích thước…
Ví dụ
<p style="color:red">Tôi thích đọc Quản trị mạng</p>
Thuộc tính lang
Ngôn ngữ văn bản được xác định từ thẻ <html> Ngôn ngữ được xác định bằng thuộc tính lang. Việc xác định ngôn ngữ là rất quan trọng với các ứng dụng hỗ trợ khả năng truy cập (như screen reader) và các bộ tìm kiếm.
<!DOCTYPE html><html lang-"en-US"><body>…</body></html>
Hai chữ cái đầu tiên xác định ngôn ngữ (en), còn nếu muốn chỉ cụ thể phương ngữ thì dùng 2 chữ cái sau (US). Đây cho biết văn bản dùng tiếng Anh Mỹ.
Thuộc tính title
Thuộc tính title được thêm vào phần tử <p> với giá trị của thuộc tính hiển thị như một chú thích khi bạn rê chuột qua văn bản.
Ví dụ
<p title="Tôi là chú thích">Tôi đang học HTML trên Quản trị mạng. </p>
Một vài lưu ý khác
Dùng dấu trích dẫn cho giá trị
Dù HTML5 không bắt buộc phải có dấu trích dẫn cho giá trị thuộc tính nhưng W3C khuyến khích bạn nên sử dụng dấu này. Đôi khi việc dùng dấu trích dẫn là bắt buộc, như ở ví dụ dưới đây, tiêu đề sẽ không hiển thị đúng nếu không có dấu trích dẫn, vì có chứa khoảng trắng.
<p title=Học HTML>
Nên dùng dấu trích dẫn kép hay đơn?
Có thể dùng dấu trích dẫn đơn nhưng dấu trích dẫn kép vẫn là phổ biến hơn trong HTML. Trong một số trường hợp, khi ngay trong giá trị thuộc tính đã chứa dấu trích dẫn kép, thì nên dùng dấu trích dẫn đơn bên ngoài, và ngược lại.
<p title='Thủy "Đại ca" đi đâu?'>
hoặc
<p title="Thủy 'Đại ca' đi đâu?">
Bài trước: Bài 4. Các phần tử trong HTML
Bài sau: Bài 6. Thẻ tiêu đề trong HTML