Hướng dẫn sử dụng HTML Heading

Xem thêm các chuyên mục:

Nhóm thành viên của o7planning đã xây dựng một website tuyệt vời và miễn phí giúp mọi người học tiếng Anh, học từ vựng dễ dàng hơn. Hãy truy cập để học tiếng Anh ngay bây giờ:

1- Section Heading

Cấu trúc một trang HTML bao gồm nhiều Section (đoạn), và chúng có thể lồng nhau. Một section cũng có thể có Section Heading (Đề mục) nó giúp người dùng biết được nội dung chính mà section này đề cập tới.

2- Heading Elements

Các phần tử HTML <h1> - <h6> đại diện cho 6 mức của các section heading. Trong đó <h1> là mức cao nhất, <h6> là mức thấp 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>
Một trang được thiết kế tốt có một cấu trúc Heading rõ ràng, giúp người dùng dễ dàng tìm được nội dung mà họ muốn. Ngoài ra Heading là một trong các tiêu chí đánh giá của các bộ máy tìm kiếm như Google, vì vậy nó có ích cho SEO.
Trong một trang bạn nên có duy nhất một phần tử <h1>, nó là Heading của toàn bộ trang. Cấu trúc Heading trong trang của bạn giống như một cấu trúc cây, sử dụng <h1> ở mức 1, sau đó là <h2> ở mức 2, sau đó là <h3> ở mức 3,...
Bạn cần tránh việc bỏ qua (skip) một mức nào đó, chẳng hạn: sử dụng <h1> ở mức 1, sau đó sử dụng <h3> ở mức 2, như vậy bạn đã bỏ qua <h2>. Một số thiết bị đọc màn hình (Screen Reader) dành cho người mù sử dụng kỹ thuật điều hướng (navigation technique) dựa trên các Heading, việc bỏ qua một mức Heading nào đó khiến họ bối rối, không biết tại sao nội dung bị mất mát.
<!-- GOOD: -->

<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>

<!-- BAD: -->

<h1>Heading level 1</h1>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
 
Ví dụ:
<h1>HTML Headings Tutorial</h1>
<i>Author: o7planning, Views: 500</i>

<h2>1 - What is section heading?</h2> Section Heading is ....
 

<h2>2 - Heading Elements</h2> The HTML &lt;h1&gt;–&lt;h6&gt;
elements represent six levels of section headings...

<h3>2.1 - H1 Element</h3> h1 is ....
<h3>2.2 - H2 Element</h3> h2 is ....

3- Kích thước

Mỗi một HTML Heading đều có một kích thước mặc định, nhưng bạn có thể sử dụng CSS font-size để thiết lập kích thước mới cho chúng.
<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5 style="font-size:20px;">Heading level 5 (font-size:20px)</h5>
<h6>Heading level 6</h6>

Xem thêm các chuyên mục: