Categories HTML

Thẻ H1 tới thẻ H6 trong HTML – từ vua quan cho đến thứ dân

Các thẻ từ h1, h2 cho đến h6 dùng để định nghĩa các tiêu đề, h1 dùng cho tiêu đề quan trọng nhất, h2 dùng cho tiêu đề quan trọng thứ hai, cho đến h6 dùng cho tiêu đề ít quan trọng nhất.

Dưới đây là đoạn code được chụp từ một bài viết từ trang Vnexpress:

Bạn có thế thấy tên của bài viết được sử dụng thẻ h1, đoạn xem trước nội dung sử dụng thẻ h2 ít quan trọng hơn.

Cách sử dụng thẻ tiêu đề h rất đơn giản, đây là code mẫu:

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

Đoạn ở trên sẽ hiển thị ra ngoài trình duyệt thế này:

Tiêu đề 1

Tiêu đề 2

Tiêu đề 3

Tiêu đề 4

Tiêu đề 5
Tiêu đề 6

Bạn có thể thấy tiêu đề h quan trọng hơn theo mặc định của trình duyệt sẽ có kích cỡ lớn hơn và tất cả các thẻ h đều được bôi đậm. Nếu muốn điều chỉnh style của thẻ h, ta thực hiện trong CSS.

Mục đích của các thẻ tiêu đề h là làm cho trang web của bạn có cấu trúc dễ quan sát với máy tìm kiếm, thông báo cho nó biết đâu là cái quan trọng, và cái nào là quan trọng hơn. Trong SEO người ta rất chú ý đến thẻ tiêu đề h1.

Tất nhiên bạn chỉ nên dùng thẻ tiêu đề với phần văn bản là tiêu đề, không nên dùng nó để làm chữ đậm hoặc to trong văn bản thông thường, văn bản thông thường nằm trong thẻ <p>, và để bôi đậm chữ ta dùng thẻ <b> hoặc thẻ <strong>.

Vai trò trong SEO

Các thẻ h2, h3 thường được dùng làm tiêu đề phụ trong các bài viết dài, nếu kết hợp với mục lục thì khi người dùng tìm kiếm trên Google, có khả năng các liên kết phụ đó sẽ xuất hiện trong kết quả tìm kiếm. Ví dụ:

liên kết của tiêu đề trong kết quả tìm kiếm

CSS cho thẻ h

Bất kỳ CSS nào thực hiện được với text đều thực hiện được với thẻ h ví dụ như text-indent, word-space. Ngoài ra là các lớp giả, ví dụ như first-letter.

Ví dụ:

Đây là ví dụ về CSS cho thẻ h

Code mẫu:

<style>
#demo1:first-letter
{
font-size:250%;
color:green;
font-weight:bold;
}
</style>
<h3 id="demo1" style="font-family:arial; font-size:20px;color:grey;word-space:5px;text-indent: 30px;">Đây là ví dụ về CSS cho thẻ h</h3>

Các thẻ h nào được sử dụng trong thực tế?

Thông thường thẻ h1 sử dụng cho tiêu đề chính.

Thẻ h2 sử dụng cho tiêu đề phụ.

Cùng lắm người ta dùng đến thẻ h3 bên trong h2 trong các bài viết lớn, còn h4, h5, h6 rất ít khi được dùng.

Thông tin cuối cùng: h là viết tắt của từ heading.

Back to Top