Các thẻ tiêu đề

Các thẻ tiêu đề đóng một vai trò quan trọng trong việc giới thiệu và phân chia trang web, giúp người sử dụng có cái nhìn khái quát về nội dung của trang trước khi quyết định có xem tiếp hay không.

Ngoài ra các robot tìm kiếm của Google hay Bing cũng sử dụng các tiêu đề để xây dựng mục lục cho trang web của bạn và thường hiển thị mục lục này trong kết quả tìm kiếm.

Các thẻ tiêu đề `<h1>` — `<h6>`

HTML định nghĩa 6 thẻ tiêu đề từ <h1> đến <h6>, với <h1> mang ý nghĩa quan trọng nhất, giảm dần đều cho đến <h6> mang ý nghĩa ít quan trọng nhất.

Cách sử dụng cũng tương tự như thẻ <p>:

<h1>Tiêu đề cấp 1</h1>
<h2>Tiêu đề cấp 2</h2>
<h3>Tiêu đề cấp 3</h3>
<h4>Tiêu đề cấp 4</h4>
<h5>Tiêu đề cấp 5</h5>
<h6>Tiêu đề cấp 6</h6>

Kết quả trên trình duyệt:

Bạn có thể thấy theo mặc định các thẻ tiêu đề có font chữ lớn hơn, và được in đậm để đánh dấu đây là phần văn bản quan trọng.

Thực hành

Trong index.html, hãy thêm vào một tiêu đề cấp 1 ngay đầu tập tin.
index.html
```
<h1>Trang chủ</h1>

<p>Xin chào!</p>

…
```
Kết quả sau khi tải lại trình duyệt:

Một số lưu ý

Chỉ sử dụng duy nhất một thẻ `<h1>` trong trang

Thẻ <h1> mô tả nội dung tổng quát nhất, do đó mỗi trang HTML chỉ nên có duy nhất một tiêu đề cấp 1 mà thôi.

Ví dụ với web cá nhân, trang giới thiệu bản thân sẽ có tiêu đề “Giới thiệu về Cún” hay “Tui là Cún”. Với một bài báo hay bài blog, tiêu đề <h1> nên là tựa của bài viết đó, hay với trang giới thiệu một sản phẩm, <h1> sẽ là tên của sản phẩm.

Không “nhảy cóc” khi định nghĩa tiêu đề

Bạn không nên bỏ qua một cấp nào đó khi khai báo tiêu đề. Ví dụ:

<h1>Thuốc mọc tóc siêu nhanh siêu hiệu quả</h1>

<h3>Giới thiệu</h3>

<h3>Thành phần</h3>

<h3>Liên hệ đặt mua</h3>

Đoạn HTML ở trên không khai báo thẻ <h2> mà sử dụng luôn thẻ <h3>. Người dùng chúng ta sẽ rất hiếm khi nhận ra sự thiếu sót này nhưng các chương trình tìm kiếm hay các phần mềm đặc biệt hỗ trợ người khuyết tật sẽ cảm thấy “khó hiểu” khi bỗng dưng không thấy tiêu đề cấp 2 đâu cả.

Do đó, bạn nên luôn sử dụng thẻ tiêu đề đúng cấp để chia trang thành từng phân đoạn nhỏ hơn.

<h1>Thuốc mọc tóc siêu nhanh siêu hiệu quả</h1>

<h2>Giới thiệu</h2>

<h2>Thành phần</h2>

<h2>Hướng dẫn sử dụng</h2>

<h2>Liên hệ đặt mua</h2>
<h3>Hệ thống cửa hàng</h3>
<h3>Đặt mua trực tuyến</h3>

<h2>Chính sách đổi trả</h2>

Trong ví dụ trên, chúng ta có thể hiểu cấu trúc của trang được chia như sau:

Giới thiệu
Thành phần
Hướng dẫn sử dụng
Liên hệ đặt mua
Chính sách đổi trả

Các thẻ tiêu đề không thể lồng nhau

Bên trong một thẻ tiêu đề không thể chứa một thẻ tiêu đề khác. Ví dụ như vầy là không được nè:

<h1>
  Thuốc mọc tóc
  <h2>siêu nhanh siêu hiệu quả</h2>
</h1>

Bài tập

Bài 1

Chỉnh sửa trang about.html và thêm vào một tiêu đề cấp 1 có nội dung “Giới thiệu” ở đầu trang.

Sau đó là một tiêu đề cấp 2 “Tên tuổi”, giới thiệu tên của bạn và ngày tháng năm sinh.

Cuối cùng là một tiêu đề cấp 2 “Sở thích” và mô tả bạn thích làm gì.

Click để xem lời giải

<h1>Giới thiệu</h1>

<p>Đây không phải là trang chủ mà là trang giới thiệu.</p>

<h2>Tên tuổi</h2>

<p>Mình tên là Cún. Năm nay mình 12 tuổi.</p>

<h2>Sở thích</h2>

<p>Mình thích ăn, ngủ, và viết HTML.</p>

<a href="index.html">Quay lại trang chủ</a>

Bạn có thể thêm vào tiêu đề cấp độ khác và nội dung tùy thích 😃

Bài 2

Tạo một trang mới cuisine.html nói về ẩm thực Việt Nam có các tiêu đề sau:

Tạo một liên kết có tên “Xem ẩm thực Việt Nam” ở trang index.html đến trang cuisine.html vừa tạo.

Lưu ý: Ví dụ trên đã chỉnh sửa các tiêu đề một chút để giúp bạn dễ phân biệt các cấp độ khác nhau. Kết quả trên trình duyệt của bạn có thể không giống hoàn toàn.