Neste artigo, aprenderemos sobre a tag hgroup em HTML5, que é uma tag usada para agrupar um ou mais elementos de cabeçalho em um grupo. Os elementos de cabeçalho usados para fazer o título são as tags de h1 -> h6.

1. O que é a tag hgroup em HTML5?

hgroup é uma tag adicionada desde a versão HTML5. Seu uso é usado para agrupar tags de h1 -> h6, desde que essas tags h devam estar na mesma tag de cabeçalho.

A sintaxe da tag hgroup é a seguinte :

 <hgroup> ... </hgroup>

Se houver apenas uma tag h dentro do cabeçalho, você não precisa declarar a tag hgroup .

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

2. Quando usar a tag hgroup?

Como eu disse na parte 1, só usamos a tag hgroup caso a tag de cabeçalho tenha muitas tags h dentro.

Conforme o exemplo abaixo, não uso hgroup, pois dentro da tag header existe apenas uma tag h1 .

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

Mas o exemplo abaixo é diferente, tenho que usar hgroup porque dentro do cabeçalho tem duas tags h1 e h2.

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

Caso haja uma descrição dentro do cabeçalho, você não precisa incluir essa linha de descrição no 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>

Em resumo, você precisa ter em mente as seguintes questões:

• A tag hgroup está sempre dentro da tag header, que é um padrão HTML5.
• A tag hgroup contém apenas o conteúdo dentro do qual estão as tags de h1 -> h6.
• Todos os outros cartões devem ser colocados do lado de fora.

Então, terminei de instruir como usar a tag hgroup em HTML5. Este cartão é relativamente simples e também raramente usado. Vejo você na próxima postagem.