In this article we will learn about the hgroup tag in HTML5, which is a tag used to wrap one or more heading elements into a group. The heading elements used to make the title are the tags from h1 -> h6.

1. What is the hgroup tag in HTML5?

hgroup is a tag added since HTML5 version. Its use is used to group tags from h1 -> h6 together, provided that these h tags must be in the same header tag.

The syntax of the hgroup tag is as follows :

 <hgroup> ... </hgroup>

If there is only one h tag inside the header, you do not need to declare the hgroup tag.

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

2. When to use hgroup tag?

As part 1 I said, we only use hgroup tag in case the header tag has many h tags inside.

As the example below, I do not use hgroup, because inside the header tag there is only one h1 tag.

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

But the example below is different, I have to use hgroup because inside the header there are two tags h1 and h2.

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

In case there is a description inside the header, you do not need to include that description line in the 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>

In summary, you need to keep in mind the following issues:

• The hgroup tag is always inside the header tag, which is an HTML5 standard.
• The hgroup tag contains only the content inside which is the tags from h1 -> h6.
• All other cards must be placed outside.

So, I have finished instructing how to use hgroup tag in HTMl5. This card is relatively simple and also rarely used. See you in the next post.