Tiêu đề trong HTML5

Trong hướng dẫn này, bạn sẽ học cách tạo các tiêu đề trong HTML bằng cách sử dụng các thẻ tiêu đề h1, h2, h3, h4, h5 và h6.

Tổ chức nội dung với tiêu đề

Tiêu đề giúp xác định thứ bậc và cấu trúc của nội dung trang web.

HTML cung cấp sáu cấp độ của thẻ tiêu đề từ <h1> đến <h6>; cấp tiêu đề càng thấp, tầm quan trọng của nó càng lớn – do đó <h1> thẻ định nghĩa tiêu đề quan trọng nhất, trong khi thẻ <h6> định nghĩa tiêu đề ít quan trọng nhất trong tài liệu.

Theo mặc định, các trình duyệt hiển thị các tiêu đề bằng phông chữ lớn hơn và đậm hơn văn bản bình thường. Ngoài ra, tiêu đề của phần tử <h1> được hiển thị bằng phông chữ lớn nhất, trong khi  tiêu đề của phần tử <h6> được hiển thị bằng phông chữ nhỏ nhất.

<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>

Kết quả của ví dụ trên sẽ giống như sau:

Lưu ý: Mỗi khi bạn đặt thẻ tiêu đề trên một trang web, các style CSS tích hợp trong trình duyệt web sẽ tự động tạo ra một số không gian trống (được gọi là lề) trước và sau mỗi tiêu đề. Bạn có thể sử dụng thuộc tính CSS margin để ghi đè style CSS mặc định của trình duyệt.

Mẹo: Bạn có thể dễ dàng tùy chỉnh giao diện của các thẻ tiêu đề HTML như kích thước phông chữ, độ đậm, kiểu chữ, v.v. bằng cách sử dụng các thuộc tính font của CSS.

Tầm quan trọng của các tiêu đề

• Các tiêu đề HTML cung cấp thông tin có giá trị bằng cách làm nổi bật các chủ đề quan trọng và cấu trúc của tài liệu. Vì vậy hãy tối ưu hóa chúng một cách cẩn thận để cải thiện mức độ tương tác của người dùng.
• Không sử dụng các tiêu đề để làm cho văn bản của bạn trông LỚN hoặc đậm. Chỉ sử dụng chúng để làm nổi bật tiêu đề tài liệu của bạn và để hiển thị cấu trúc tài liệu.
• Vì các công cụ tìm kiếm, chẳng hạn như Google, sử dụng các tiêu đề để lập chỉ mục cấu trúc và nội dung của các trang web, vì vậy hãy sử dụng chúng một cách khôn ngoan trong trang web của bạn.
• Sử dụng các thẻ tiêu đề <h1> để làm tiêu đề chính của trang web của bạn, tiếp theo là các thẻ tiêu đề <h2>t, sau đó là các thẻ tiêu đề <h3> ít quan trọng hơn, v.v.

Mẹo: Sử dụng thẻ <h1> để đánh dấu tiêu đề quan trọng nhất thường nằm ở đầu trang. Một tài liệu HTML nói chung nên có chính xác một tiêu đề <h1>, tiếp theo là các tiêu đề cấp thấp hơn như <h2>, <h3>, <h4>, v.v.