Phần tử Heading <h>
Phần tử heading (đề mục) được tổ chức thành sáu mức: h1 đến h6. Text được chứa trong một phần
tử heading được duyệt như là một “block” (khối) text bởi trình duyệt (được nhắc đến như là block
display) và hiển thị với không gian trắng ở trên và ở dưới. Kích cỡ của text là lớn nhất cho
h1 (được gọi là thẻ heading 1) và nhỏ nhất cho h6 (được gọi là thẻ heading 6). Phụ thuộc vào
font được sử dụng, text chứa trong thẻ <h4>, <h5> và <h6> có thể được hiển thị nhỏ hơn kích
cỡ text mặc định. Tất cả text được chứa trong thẻ heading được hiển thị với font weight
đậm.
Thực hành với thẻ heading
HTML 5 viết :
<!DOCTYPE html>
<html>
<head>
<title>Heading example</title>
<meta charset=”utf-8″>
</head>
<body>
<h1>Heading Level 1</h1>
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>
</body>
</html>
Trình duyệt hiển thị:
Tính truy cập được và heading
Thẻ heading có thể giúp trang web của bạn tăng tính truy cập và sử dụng. Nó là thực hành code tốt khi
sử dụng thẻ heading để phác thảo cấu trúc nội dung trang web của bạn. Để chỉ các vùng bên trong một
trang một cách có thứ bậc, code thẻ heading theo số phù hợp (h1, h2, h3 ..vv..) và bao gồm nội dung
trang trong các phần tử khối (block display elements) như paragraphs (đoạn văn) và lists (danh sách)
. Trong ảnh ví dụ, thẻ <h1> chứa tên của website trong vùng logo của header tại đỉnh của trang web,
thẻ <h2> chứa chủ đề hay tên của trang web trong vùng nội dung, các phần tử heading khác được code
trong vùng nội dung khi cần để nhận dạng chủ đề chính và chủ đề phụ.
Khách ghé thăm khiếm thị sử dụng các loại màn hình đọc có thể chuyển hướng phần mềm để hiển thị danh sách
các đề mục được sử dụng trên một trang để tập trung vào chủ đề họ quan tâm. Trang web được tổ chức tốt
của bạn có thể tăng tính sử dụng cho khách ghé thăm site bao gồm những khách khiếm thị.