Trang chủ » HTML và CSS » HTML » Thẻ tiêu đề h1 đến h6. Cách sử dụng thẻ tiêu đề trong website

Thẻ tiêu đề h1 đến h6. Cách sử dụng thẻ tiêu đề trong website

Mình mong rằng bài viết này sẽ hữu ích cho các bạn, sẽ giúp các bạn giải đáp thắc về các thẻ heading, thẻ tiêu đề khi mới tiếp cận website !!!

<h1>Đây là thẻ tiêu đề 1</h1>
<h2>Đây là thẻ tiêu đề 2</h2>
<h3>Đây là thẻ tiêu đề 3</h3>
<h4>Đây là thẻ tiêu đề 4</h4>
<h5>Đây là thẻ tiêu đề 5</h5>
<h6>Đây là thẻ tiêu đề 6</h6>

– Nói đến thẻ tiêu đề thì chắc hẳn nhiều bạn đã nghĩ rằng mình đã hiểu rõ về nó rồi. Nó được thể hiện ngay cơ cái tên cơ mà. Nhưng chưa hẳn, đa số mọi người chỉ biết 1 chút sơ qua về loại thẻ này. Còn chi tiết và cách sử dụng nó chắc hẳn ít trong số các bạn ở đây hiểu được. Đặc biệt nếu bạn muốn thiết kế 1 website chuẩn SEO thì phải hiểu được điều này. Hôm nay mình xin phép nói về loại thẻ này!!!

Thẻ tiêu đề là gì?

– Đầu tiên, thẻ tiêu đề ( heading ) bao gồm thẻ H1, H2, H3, H4, H5, H6. Các thẻ này nhằm thể hiện những nội dung chính trong trang. Trong đó nó cũng phân theo cấp quan trọng của các thẻ này từ H1 đến H6.

– Thẻ <h1> là quan trọng nhất, thẻ này sử dụng để bao quát được nội dung cho về phía người dùng hay robots quét biết là bài viết hay trang web này muốn viết về chủ đề gì? Hay còn gọi thẻ <h1> là thẻ “nhan đề” chính vì vậy chỉ có 1 thẻ <h1> trong 1 trang thôi các bạn nhé.

– Tiếp sau đó là các thẻ <h2>, <h3>, <h4>, <h5> rồi mới đến <h6>. Thông thường bạn chỉ nên sử dụng đến <h2>, <h3> là thể hiện được hết nội dung bài bạn muốn viết rồi, hay trang website đó rồi. Hạn chế dùng <h4>, <h5>, <h6> các bạn nhé!!!

Ví dụ về thẻ tiêu đề

Ví dụ nhé: trong bài viết mình nói về HTML là gì?

  • Thẻ H1 của mình ở đây là: “HTML là gì? Ngoài HTML bạn cần tìm hiểu thêm những ngôn ngữ nào?”
    Thẻ H1 ở bài HTML là gì?
    Thẻ H1 ở bài HTML là gì?
  • Các thẻ H2 bạn có thể ấn vào table of content ( bảng mục lục ) để đến các thẻ h2 của bài viết đó:
    Bảng mục lúc bài viết "HTML là gì?"
    Bảng mục lúc bài viết “HTML là gì?”

    Sau đó bạn sẽ thấy các đầu mục h2 của mình:

    1. Đầu mục h2
    1. Đầu mục h2
    2. Đầu mục h2
    2. Đầu mục h2
  • Vậy còn các thẻ h3 trong bài viết của mình? Bạn có thể nhìn thấy các dòng thụt vào trọng. Click vào đó bạn sẽ đến các mục h3 của bài viết
    1. Thẻ h3 trong bài viết
    1. Thẻ h3 trong bài viết
    2. Thẻ h3 trong bài viết
    2. Thẻ h3 trong bài viết

Cách sử dụng thẻ tiêu đề H1, H2, H3, H4, H5, H6

 – Đối với các bạn mà chuyên về làm SEO thì đa phần các bạn đã hiểu rõ phân bổ của các thẻ Heading như thế nào cho hợp lý. Nhưng nếu bạn không phải là 1 người làm SEO mà đang muốn hướng phát triển theo thiết kế Website, hay nhà phát triển Website thì bạn không thể bỏ qua những điều tưởng chừng như cơ bản mà lại rất quan trọng này.

Đầu tiên, bạn phải tuân thủ các nguyên tắc dưới đây:

  1. Chỉ có 1 thẻ H1 trong 1 trang, vì đây là thẻ “nhan đề” nó sẽ thể hiện tổng quát nhất nội dung bài viết, trang sản phẩm, danh mục …
  2. Sử dụng theo đúng mực độ ưu tiên từ h1, h2, h3, h4, h5, h6. Thường bạn sử dụng đến h3 là nội dung của bạn đã đủ chiều sâu rồi. Khuyến cao không nên dùng đến thẻ h4, h5, h6.
  3. Đúng theo cấu trúc phân nhánh rõ ràng: H1 thì bao gồm nhiều H2, H2 thì bao gồm nhiều H3… Như ví dụ bài viết trên của mình
  4. Không dùng thẻ Heading nhằm mục đích nhấn mạnh, bôi đậm mà hãy dùng các thẻ khác hoặc dùng CSS

Cách sử dụng thẻ Heading trong bài viết

– Trong bài viết, ngay từ khi bạn bắt đầu viết thì bạn phải biết rõ rằng chủ đề mình muốn viết là gì? Bạn phải xác định rõ là mình viết về chủ đề đó thì cần viết những gì? Sau đó phát triển những nội dung lớn bên trong. Chính là đoạn lên dàn bài và viết nội dung đó.

– Ở đây cũng vậy, các thẻ Heading tượng trưng cho dàn bài, dàn ý của bạn vậy, nó như 1 cái khung để bạn phát triển các nội dung bên trong của mình. Ví dụ:

<h1>HTML là gì? Ngoài HTML bạn cần tìm hiểu thêm những ngôn ngữ nào?</h1>
    <h2>HTML là gì?</h2>
    <h2>Lịch sử hình thành HTML?</h2>
        <h3>Các phiên bản của HTML</h3>
    <h2>Các phiên bản của HTML</h2>
    <h2>Cấu trúc của 1 file HTML</h2>
        <h3>Block-level</h3>
        <h3>Inline Tags</h3>
    <h2>Sự vượt trội của HTML5 so với những phiên bản trước đây</h2>
    <h2>Ngoài HTML, để thiết kế được 1 Website bạn cần tìm hiểu thêm những ngôn ngữ nào?</h2>

– Trên đây là ví dụ về cách mình trình bày bài “HTML là gì?“. Cách sắp xếp và bố cục thẻ heading. Bạn có thể thấy 1 bài viết chỉ có 1 thẻ H1 mà thôi. Trong đó có nhiều thẻ H2 nằm tại các đầu mục lớn. Phân cấp nhỏ hơn thẻ H2 là H3, các đầu mục con bên trong. Thường mình sẽ lập dàn bài trước khi sắp xếp bố cục này.

– Đơn giản bạn sẽ thấy: “Các phiên bản của HTML” có phải thuộc phần con của quá trình hình thành và phát triển của HTML không? nên mình sắp xếp nó vào mục “Lịch sử hình thành HTML?”. Và các phần khác cũng vậy.

Mình sẽ tổng hợp các thành các bước cho các bạn dễ dàng thực hiện hơn:

  • Bước 1: Xác định chủ đề muốn triển khai. Ví dụ bạn muốn triển khai về chủ đề thời trang nam chẳng hạn, thì “thời trang nam…” chính là H1 (nhan đề) của bạn
  • Bước 2: Tổng hợp xem với chủ đề thời trang nam thì bao gồm những thứ gì, ví dụ: giày nam, quần áo nam, thắt lưng nam… Đây chính là các đầu mục thẻ H2 của bạn
  • Bước 3: Phân nhánh các đầu mục H2 xem có những ý nhỏ nào mà mình phân cấp được không? ví dụ như trong giày nam: thì có giày thể thao, giày da nam, …
  • Bước 4: Phát triển nội dung các đầu mục đó

Ngoài ra, các trang như trang chủ, trang danh mục sản phẩm, trang chi tiết sản phẩm… bạn đều có thể làm như vậy.

Cách nhận biết và kiểm tra thẻ Heading trong Website

Kiểm tra code trực tiếp

– Bạn có thể kiểm tra phần tử đó có phải thẻ Heading hay không bằng cách trực tiếp xem mã code. (1) Bạn ấn f12, hoặc (2) sử dụng chuột phải click vào phần tử đó rồi ấn kiểm tra mã code. Sau đó bạn sẽ thấy 1 bảng như này ở dưới hoặc góc phải màn hình.

1. Mở bảng điều khiển bằng f12 hoặc chuột phải
1. Mở bảng điều khiển bằng f12 hoặc chuột phải

– Tiếp theo, bạn ấn vào nút mũi tên góc trái trên thanh tabs

2. Ấn vào nút mũi tên trên thành tabs
2. Ấn vào nút mũi tên trên thành tabs
3. Di chuột vào phần tử muốn kiểm tra
3. Di chuột vào phần tử muốn kiểm tra

– Bạn có thể nhìn thấy ở tabs Elements, đoạn code được bôi đen chính là tags html của phần tử đó. Ở đây là thẻ H1 của bài viết.

Kiểm tra bằng SEOQUAKE

– Bạn cần cài SEOQUAKE vào Chrome, bạn có thể vào link này: tại đây!

– Sau khi đã add vào Chrome thì trên góc phải trình duyệt của bạn sẽ xuất hiện biểu tượng của SEOQUAKE. Bạn ấn vào nó rồi ấn vào nút DIAGNOSIS.

Ấn vào DIAGNOSIS trong SEOQUAKE
Ấn vào DIAGNOSIS trong SEOQUAKE

– Sau đó bạn kéo xuống phần Headings, ấn view more thì sẽ thấy hết các thẻ heading trong trang.

Kéo xuống phần headings
Kéo xuống phần headings

Kiểm tra thẻ Heading bằng Web Developer

–  Cũng giống như SEOQUAKE bạn cần add Web Developer vào Chrome tại đây!

– Sau đó bạn ấn vào biểu tượng Web Developer

Chọn Outline Heading
Chọn Outline Heading

– Các thẻ Heading của Website sẽ hiển thị lên ngay trực tiếp trên trang

Sau khi chọn Outline Headings
Sau khi chọn Outline Headings

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *