A tag < hgroup > - Agrupando Tags de Cabeçalho H1, H2, H3, H4, H5 e H6 (Tutorial de HTML5)

Neste simples tutorial de HTML5, vamos falar de uma tag que tem por função agrupar os headings, ou tags cabeçalhos (h1, h2, h3, h4, h5 e h6), que é o elemento hgroup.

• Estude offline: Apostila HTML + CSS

O que é a Tag <hgroup> em HTML5

Bem no início de nosso curso, ainda na seção de HTML 4.01, falamos da hierarquia de um documento .html, e citamos a importância das tags de cabeçalho h1, h2, h3, h4, h5 e h6, também conhecidas por headings.

Ainda neste tutorial, explicamos a importância de estruturar as páginas de seu site com essas tags de cabeçalho, onde a H1 é a mais importante (e maior), e H6 é a menos importante, na hierarquia.

Isso é tão útil, que até o Google usa as headings em seu complexo sistema de rankeamento dos resultados de busca, pois ele entende que as keywords em tags H1 e H2 são muito importantes e refletem um resumo do conteúdo do artigo.
(Veremos mais sobre rankeamento em sistemas de buscas em nossa seção sobre SEO)

No HTML5, existe um elemento que tem por função agrupar essas tags de cabeçalho, que é a tag hgroup, especialmente voltada para as headings.

Quando usar a tag <hgroup> em HTML5

Usamos o elemento "hgroup" para englobar uma ou mais tags de cabeçalho.

Seu uso mais comum é, por exemplo, quando temos um título (geralmente em <h1>) e um subtítulo (em <h2>).

Sintaxe:

<hgroup>
 <h1>Tutorial HTML Progressivo</h1>
 <h2>Como criar sites com HTML5 e CSS</h2>
</hgroup>

O "h", de "hgroup" é de headings, ou seja, está relacionado com as tags h1, h2, h3, h4, h5 e h6, devendo englobar somente estas tags.

Seu uso também é comum dentro da tag/elemento <article>:

<article>
  <hgroup>
    <h1>Título principal do artigo</h1>
    <h2>Subtítulo do artigo</h2>
  </hgroup>
  <p>Aqui vem o escopo do conteúdo do artigo</p>
</article>

Isso no caso do cabeçalho do artigo usar somente as tags de cabeçalho.
As vezes é preciso usar outras tags, como alguma citação, informação do autor ou uma imagem (logotipo).

Nesse último caso, colocamos a tag hgroup dentro da tag header:

<article>
  <header>
    <hgroup>
      <h1>Título principal da página</h1>
      <h2>Título secundoário</h2>
    </hgroup>
    <img>, <p> e outras informações do cabeçalho
  </header>                

  <p>Aqui começa o conteúdo do artigo</p>
</article>