Kết nối

[HTML/HTML5] Phần 5: Thuộc tính HTML

3.279 lượt xem 
 Cập nhật lần cuối: 18/06/2017 lúc 15:40:56
Thể loại: HTML/HTML5, Thiết kế Web 

Tất cả các phần tử HTML đều có thể có các thuộc tính. Các thuộc tính cung cấp thông tin thêm về các phần tử HTML. Thuộc tính luôn luôn được mô tả ở thẻ mở. Thuộc tính thường là cặp tên/giá trị, ví dụ như: name=”value”.

Thuộc tính lang
Thuộc tính này định nghĩa ngôn ngữ của tài liệu HTML được mô tả trong thẻ html. Mô tả ngôn ngữ cho tài liệu HTML rất quan trọng để các trình đọc màn hình và các cơ chế tìm kiếm nhận diện ngôn ngữ (Google). Điều này cũng ảnh hưởng đến SEO website, giúp cơ chế tìm kiếm định hướng và phân luồng người dùng đến với website.

<!DOCTYPE html>
<html lang="en-US">
<body>

...

</body>
</html>

Hai ký tự đầu tiên đặc tả ngôn ngữ (en). Nếu có thêm dạng tiếng địa phương, sử dụng thêm 2 ký tự viết hoa (US). Trong ví dụ: en-US có nghĩa là tiếng Anh (en) được dùng ở Hoa Kỳ (US). Với tiếng Việt ở Việt Nam, bạn có thể dùng vi-VN.

Thuộc tính title
Thuộc tính title được thêm vào phần tử p. Giá trị thuộc tính title sẽ được hiển thị dạng như chú thích (tooltip) khi bạn rê chuột lên đoạn văn bản:

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"></head>
<body>

<p title="Đây là chú thích">
Đây là dòng chữ, hãy rê chuột lên đây để nhìn thấy chú thích.
</p>

</body>
</html>

Thuộc tính href
Thuộc tính href dùng để mô tả địa chỉ liên kết trong các liên kết HTML được định nghĩa bằng thẻ a.

<a href="https://www.dammio.com">Đây là liên kết đến trang dammio.com</a>

Thuộc tính kích thước
Các hình ảnh HTML được định nghĩa với thẻ img. Nguồn tập tin (src), và kích thước hình ảnh (width và height) là các thuộc tính điển hình của 1 hình ảnh.

<img src="logo.jpg" width="200" height="150">

Trong ví dụ trên, chúng ta định nghĩa 1 hình ảnh có nguồn (src) là logo.jpg với kích thước chiều rộng là 200 pixel và chiều cao là 150 pixel.

Liên quan:  [HTML/HTML5] Phần 28: Các biểu tượng HTML

Thuộc tính alt
Thuộc tính alt mô tả một văn bản thay thế khi hình ảnh không thể hiển thị (thường do lỗi sai nguồn hình ảnh src). Người dùng có thể xem được giá trị thuộc tính. Theo cách này, một số người có thể “nghe” được trang web, ví dụ như người mù cho thể nghe được phần tử đó là gì.

<img src="logo.jpg" alt="dammio.com" width="200" height="150">

Khuyến cáo: Sử dụng thuộc tính viết thường
Chuẩn HTML không yêu cầu các tên thuộc tính cần phải viết thường. Tuy nhiên để thao tác HTML nhanh và thuận tiện, website dammio.com khuyên các bạn nên viết thường tên thuộc tính và cả tên thẻ.

Khuyến cáo: Dùng dấu nháy đôi/đơn cho các giá trị thuộc tính
Tương tự trên, HTML cũng không yêu cầu phải dùng nháy đôi/đơn cho các giá trị thuộc tính. Tuy nhiên, website dammio.com cũng nên khuyến cáo nên dùng nháy đôi cho giá trị thuộc tính và nháy đơn cho 1 số trường hợp đặc biệt. Ví dụ, thuộc tính href, có thể viết dưới dạng:

<a href=https://www.w3schools.com>

Tuy nhiên cách viết này đôi khi gây ra lỗi nếu giá trị chứa khoảng trắng giữa các từ, ví dụ như

<p title=About dammio>

Trong ví dụ trên, trình duyệt hiểu lầm giá trị thuộc tính title là “About”, còn dammio là tên thuộc tính nào đó chưa có giá trị.

Nháy đôi hay nháy đơn?
Như đã nói ở trên, bạn nên dùng nháy đôi bao quanh các giá trị thuộc tính trong HTML ở đa số trường hợp, nháy đơn chỉ được dùng trong vài trường hợp như ví dụ dưới đây.

<p title='John "ShotGun" Nelson'>

Hoặc dùng:

<p title="John 'ShotGun' Nelson">

Kết luận: Sau bài này, bạn đã hiểu rõ về 1 số thuộc tính cơ bản HTML và cách dùng các thuộc tính này.

Trích dẫn bài viết
  • APA:
    Dammio. (2017). [HTML/HTML5] Phần 5: Thuộc tính HTML. https://www.dammio.com/2017/06/16/htmlhtml5-phan-5-thuoc-tinh-html.
  • BibTeX:
    @misc{dammio,
    author = {Dammio},
    title = {[HTML/HTML5] Phần 5: Thuộc tính HTML},
    year = {2017},
    url = {https://www.dammio.com/2017/06/16/htmlhtml5-phan-5-thuoc-tinh-html},
    urldate = {2024-03-17}
    }
Theo dõi
Thông báo của
guest
2 Góp ý
Cũ nhất
Mới nhất Được bỏ phiếu nhiều nhất
Phản hồi nội tuyến
Xem tất cả bình luận
2
0
Rất thích suy nghĩ của bạn, hãy bình luận.x