Các thẻ tiêu đề

Trong HTML, thẻ tiêu đề (heading) được dùng để tổ chức nội dung thành từng phần rõ ràng. Nó vừa giúp người dùng đọc dễ hơn, vừa giúp công cụ tìm kiếm hiểu nội dung trang web. Có 6 cấp độ thẻ tiêu đề: từ <h1> đến <h6>, cấp độ càng nhỏ thì mức độ quan trọng càng cao.

Thẻ tiêu đề h1

• Là tiêu đề chính cho trang web, quan trọng nhất.
• Chỉ nên sử dụng 1 thẻ <h1> duy nhất trên mỗi trang.
• Nên chứa từ khóa chính, ngắn gọn, rõ ràng.
• Giúp Google và các công cụ tìm kiếm hiểu nội dung trang.
• Giúp nâng cao trải nghiệm và khả năng tiếp cận (Accessibility).

Ví dụ:

<h1>Đây là tiêu đề của bài viết</h1>

Thẻ tiêu đề h2

• Dùng để làm tiêu đề các phần chính trong một trang, là tiêu đề con của <h1>.
• Thường xuất hiện nhiều lần trên một trang, giúp phân chia nội dung.

Ví dụ:

<h1>Lộ trình học</h1>
<h2>Lộ trình học Frontend</h2>
<h2>Lộ trình học Backend</h2>

Thẻ tiêu đề h3 - h6

Tương tự như cách <h2> liên quan tới <h1>:

• <h3> là tiêu đề con của <h2>
• <h4> là tiêu đề con của <h3>
• <h5> là tiêu đề con của <h4>
• <h6> là tiêu đề con của <h5>

Ví dụ:

<h3>Thẻ h3 là tiêu đề con của thẻ h2</h3>
<h4>Thẻ h4 là tiêu đề con của thẻ h3</h4>
<h5>Thẻ h5 là tiêu đề con của thẻ h4</h5>
<h6>Thẻ h6 là tiêu đề con của thẻ h5</h6>

Các thẻ càng gần với h6 càng ít được sử dụng. Bạn cũng không cần phải sử dụng tất cả các thẻ h, nó tùy thuộc vào nội dung bạn muốn thể hiện.

Cấu trúc tiêu đề chuẩn

<!-- Đúng: đi theo cấp -->
<h1>Tiêu đề chính</h1>
<h2>Phần chính 1</h2>
<h3>Mục nhỏ 1.1</h3>
<h3>Mục nhỏ 1.2</h3>
<h2>Phần chính 2</h2>

<!-- Sai: bỏ qua cấp -->
<h1>Tiêu đề chính</h1>
<h3>Phần con</h3>

Lưu ý khi sử dụng các thẻ tiêu đề

• Không bỏ qua cấp độ tiêu đề: nếu dùng <h1> rồi nên tiếp đến <h2>, tránh nhảy thẳng xuống <h3>.
• Đặt tiêu đề theo ý nghĩa nội dung, không dựa vào kích thước mặc định (CSS có thể thay đổi kích thước).
• SEO: Tiêu đề là yếu tố quan trọng giúp công cụ tìm kiếm hiểu cấu trúc và nội dung trang. Sử dụng từ khóa tự nhiên, tránh nhồi nhét.
• Accessibility: Screen reader và các công cụ hỗ trợ dựa vào heading để người dùng điều hướng dễ dàng hơn.

Kết luận