The hgroup tag in HTML5
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
<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
<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.