Trong bài này chúng ta sẽ tìm hiểu thẻ hgroup trong HTML5, đây là thẻ dùng để bọc một hoặc nhiều phần tử heading lại thành một nhóm. Các phần tử heading dùng để làm tiêu đề đó là các thẻ từ h1 -> h6.

1. Thẻ hgroup trong HTML5 là gì?

hgroup là một thẻ được thêm vào kể từ phiên bản HTML5. Công dụng của nó là dùng để gom nhóm các thẻ từ h1 -> h6 lại với nhau, với điều kiện là các thẻ h này phải nằm chung trong một thẻ header.

Cú pháp của thẻ hgroup như sau:

<hgroup>
    ...
</hgroup>

Nếu bên trong header chỉ có một thẻ h thì bạn không cần phải khai báo thẻ hgroup.

<article>
    <header>
        <h1>Tiêu đề</h1>
    </header>
</article>

2. Khi nào thì sử dụng thẻ hgroup?

Như phần 1 mình đã nói, chúng ta chỉ sử dụng thẻ hgroup trong trường hợp thẻ header có nhiều thẻ h nằm ở bên trong.

Như ví dụ dưới đây mình không sử dụng hroup, bởi vì bên trong thẻ header chỉ có một thẻ h1 mà thôi.

<article>
    <header>
        <h1>Tiêu đề</h1>
        <p>Đăng ngày 12 / 10 / 2021</p>
    </header>
</article>

Nhưng ví dụ dưới đây thì khác, mình phải sử dụng hgroup bởi vì bên trong header có hai thẻ h1 và h2.

<article>
    <header>
        <hgroup>
            <h1>TIêu đề chính</h1>
            <h2>Tiêu đề phụ</h2>
        </hgroup>
    </header>
</article>

Trường hợp bên trong header có thêm một dòng mô tả thì bạn không cần phải đưa dòng mô tả đó vào hgroup.

<article>
    <header>
        <hgroup>
            <h1>Tiêu đề chính</h1>
            <h2> Tiêu đề phụ</h2>
        </hgroup>
        <p>Mô tả bài viết</p>
    </header>
</article>

Tóm lại, bạn cần nhớ kỹ những vấn đề sau:

• Thẻ hgroup luôn nằm bên trong thẻ header, đó là một chuẩn HTML5.
• Thẻ hgroup chỉ chứa nội dung bên trong là các thẻ từ h1 -> h6.
• Còn tất cả các thẻ khác thì phải đặt ở bên ngoài.

Như vậy là mình đã hướng dẫn xong cách sử dụng thẻ hgroup trong HTMl5. Thẻ này tương đối đơn giản và cũng ít khi sử dụng. Hẹn gặp lại các bạn ở bài tiếp theo nhé.