HTML/CSS | Thẻ tiêu đề h2

Học HTML, CSS từ Zero Tới Hero

Tìm hiểu thẻ h2

Thẻ <h2> được sử dụng làm tiêu đề các phần chính trong một trang web. Thẻ <h2> được sử dụng làm tiêu đề con của thẻ <h1>.

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>

Lưu ý, thẻ <h2> được dùng làm tiêu đề con của thẻ <h1> ở đây nghĩa là về mặt trình bày và ý nghĩa sử dụng, không phải đề cập tới việc đưa thẻ <h2> vào bên trong thẻ <h1>.

Ví dụ sử dụng sai:

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

Chúng ta sẽ không lồng các thẻ h vào nhau khi sử dụng.

Sử dụng thẻ <h2> trong thực tế (nhấn để xem video):

Cấu trúc phân cấp

Sự kết hợp của các thẻ h trong một trang web giúp tạo nên hệ thống phân cấp về mặt nội dung. Giúp người sử dụng và các công cụ tìm kiếm sẽ dễ dàng xác định được bố cục nội dung của một trang web.

Tham khảo:

• https://laravel.com/docs/9.x/eloquent-relationships

Để tự xác định được cấu trúc các thẻ h, đơn giản bạn chỉ cần nghĩ như lúc đang viết một bài blog:

• Tiêu đề chính của bài blog dùng thẻ h1
• Các phần chính trong bài blog dùng thẻ h2
• Các ý phụ trong mỗi phần dùng thẻ h3
• Tương tự như vậy cho tới thẻ h6

Trong thực tế, cũng hiếm khi chúng ta phải sử dụng tới thẻ h6. Vì các nội dung thông thường có từ 1 - 4 cấp độ, vậy nên chúng ta sẽ thường thấy thẻ h1 - h4 được sử dụng. Trong đó, thẻ h1 - h2 thường xuyên được sử dụng hơn cả.

Xác định các thẻ tiêu đề bằng ý nghĩa nội dung của nó, không phải dựa trên kích thước của nó. Bởi vì kích thước còn phụ thuộc vào thiết kế và cách sử dụng CSS, CSS có thể thay đổi kích thước của các thẻ.

Tóm tắt

• Sử dụng thẻ <h2> làm tiêu đề các phần chính trong trang web, đây được coi là tiêu đề con của tiêu đề <h1>
• Không sử dụng các thẻ h lồng nhau
• Các thẻ h được sử dụng để tạo hệ thống phân cấp nội dung
• Xác định các thẻ tiêu đề bằng ý nghĩa nội dung của nó, không phải dựa trên kích thước của nó