<hgroup>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Experimental: Esta é uma tecnologia experimental
Verifique a tabela de compatibilidade entre Navegadores cuidadosamente antes de usar essa funcionalidade em produção.

O **elemento HTML <hgroup> **destina-se a agrupar cabeçalhos de diferentes níveis para uma seção do documento. Ele agrupa (é um container para) um conjunto de elementos <h1>–<h6>.

Categorias de conteudo Flow content, heading content, palpable content.
Conteúdo permitido One or more <h1>, <h2>, <h3>, <h4>, <h5>, and/or <h6>.
Omissão de tag Nenhuma, tanto a tag inicial quanto a final são obrigatórias.

Elementos-pai permitidos
Any element that accepts flow content.
DOM interface HTMLElement

atributos

Esse elemento admite apenas os global attributes (atributos globais)

Notas sobre o uso

Nota: O elemento <hgroup> foi removido da especificação do W3C para a HTML5, mas ainda se encontra na especificação HTML do WHATWG. Foi parcialmente implementado na maioria dos navegadores, contudo é pouco provável que seja incluído na especificação. Considerando que a finalidade do elemento <hgroup> é a de definir a maneira como os títulos serão mostrados pelo outline algorithm definido na especificação da HTML e considerando ainda que o outline algorithm da HTML não está implementado em nenhum navegador, conclui-se que, na prática, a semântica do elemento <hgroup> é meramente teórica. A especificação do W3C para a HTML5 fornece algumas sugestões para a marcação de Subheadings, subtitles, alternative titles and taglines sem que se use o elemento <hgroup>.

O elemento <hgroup> permite que o cabeçalho principal de uma seção de documento seja agrupado com quaisquer cabeçalhos secundarios-como subtitulos ou titulos alternativos-para formatar um cabeçalho de varios niveis.

Em outras palavras o elemento <hgroup> impede que qualquer um dos seus filhos secundarios <h1>-<h6> crie seçoes separadas propias no esboço-como esses elementos <h1>-<h6> normalmene seriam se não fossem filhos de nenhum <hgroup>

Então, no esboço abstrato produzida pelo algortimo abstrato do HTML definido na especificação HTML, o <hgroup> como um todo forma uma posição lógica simples, com todo o conjunto de filhos <h1>-<h6> do <hgroup> entrando no esquema como uma unidade multinível, para compreender esse cabeçalho lógico único no resumo abstrato.

Para produzir alguma (não-abstrato) visualização não renderizada como um esboço, alguma escolhe deve ser feita no design para renderizar ferramentas sobre como renderizar <hgroup> cabeçalhos como um jeito para transmitir sua natureza multi-nível. Há uma varidade de jeitos que <hgroup> pode ser mostrado em um esboço renderizado; por exemplo:

  • um <hgroup> pode ser mostrado em um esboço renderizado com dois pontos e espaço (": ") ou outra pontuação após o cabeçalho principal e antes do primeiro cabeçalho secundário (e como a mesma pontuaçã, ou parecida, antes de qualquer cabeçalho secundário).
  • um <hgroup> pode ser mostrado em um esboço renderizado com o primeiro cabeçalho seguido de parênteses ao redor do segundo cabeçalho (s).

Considere o documento HTML a seguir:

html
<!doctype html>
<title>HTML Standard</title>
<body>
  <hgroup id="document-title">
    <h1>HTML</h1>
    <h2>Living Standard — Last Updated 12 August 2016</h2>
  </hgroup>
  <p>Some intro to the document.</p>
  <h2>Table of contents</h2>
  <ol id="toc">
    ...
  </ol>
  <h2>First section</h2>
  <p>Some intro to the first section.</p>
</body>

Um esboço renderizado para esse documento seria como:

Isso é, o esboço renderizado deve ser o título primário, HTML, seguido por dois pontos e espaço, seguido pelo título secundário, Living Standard - Last Update 12 August 2016.

Ou, o esboço renderizado para aquele documento poderia ser como:

Rendered outline that includes an 'hgroup' element, with parens around the secondary heading

Isso é, o esboço renderizado deve mostrar o título primário, HTML, seguido pelo título secundário mostrado entre parênteses: (Living Standard - Last Updated 12 August 2016).

Exemplos

html
<hgroup id="document-title">
  <h1>HTML</h1>
  <h2>Living Standard — Last Updated 12 August 2016</h2>
</hgroup>

Especificações

Specification
HTML
# the-hgroup-element

Compatibilidade com navegadores

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
hgroup

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

See also