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

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

Trong HTML có 6 thẻ tiêu đề từ h1 - h6. Con số trong tên thẻ thể hiện cấp độ (Level) của thẻ, cấp độ ở đây là việc ưu tiên thứ tự sử dụng thẻ. Trong đó cấp 1 là ưu tiên cao nhất, cấp 6 là ưu tiên thấp nhất.

Thẻ <h1> được sử dụng làm tiêu đề chính cho trang web. Đây là phần tiêu đề nổi bật nhất, dễ thấy nhất, mang thông điệp ngắn gọn giúp người dùng và công cụ tìm kiếm hiểu trang web của bạn nói về điều gì.

Giúp công cụ tìm kiếm hiểu nội dung trang web

John Mueller của Google nói rằng thẻ <h1> giúp Google hiểu cấu trúc & nội dung của một trang web. Vì vậy, bạn nên sử dụng thẻ <h1> cho tiêu đề chính cho trang web của bạn nhé.

Tham khảo thêm: Đề xuất sử dụng thẻ H1 từ Google

Nâng cao trải nghiệm người dùng

Trong nhiều trường hợp, thẻ <h1> là một phần trong cấu trúc phân cấp của trang web. Trong đó thẻ <h1> là tiêu đề nổi bật nhất, sau đó là: <h2>h3, …

Nâng cao khả năng tiếp cận

Khả năng tiếp cận cho trang web (Web accessibility) đề cập đến việc thiết kế các trang web đáp ứng cho mọi người, bao gồm cả người khuyết tật.

Vì vậy, ta có thể hiểu ngắn gọn “Web Accessibility” là các phương án để làm cho mọi người, bao gồm cả người khuyết tật, đều có thể dễ dàng truy cập và sử dụng trang web.

Theo nghiên cứu này của webAIM, 60% người dùng trình đọc màn hình thích tiêu đề trang web là 1 thẻ <h1>.

Ở gần cuối khóa học, mình có một chương nói riêng về “Web accessibility” các bạn nhé.

Tóm tắt

  • Nội dung thẻ <h1> giúp Google hiểu về cấu trúc & nội dung trang web
  • Chỉ nên sử dụng tối đa 1 thẻ <h1> trong 1 trang
  • Nên sử dụng thẻ <h1> cho tất cả các trang quan trọng
  • Thẻ <h1> giúp nâng cao trải nghiệm người dùng và khả năng tiếp cận (Web accessibility) cho trang web. Giúp mọi người, bao gồm cả người khuyết tật có thể dễ dàng sử dụng trang web.

Nhận xét

Mới hơn Cũ hơn