Tag HTML <hgroup>
A tag HTML <hgroup> agrupa um título com seu subtítulo ou slogan. Aprenda o modelo de conteúdo, a sintaxe e exemplos com W3docs.
A tag HTML <hgroup> agrupa um único título (um dos <h1>–<h6>) junto com um ou mais elementos <p> que funcionam como seu subtítulo, slogan ou título alternativo. Sua função é manter esse texto de apoio associado ao título em vez de se tornar um item separado no esboço do documento.
Por exemplo, o título de uma página e seu slogan pertencem juntos. Sem <hgroup>, você marcaria o slogan como um título de nível inferior (sobrecarregando o esboço) ou como um parágrafo simples (perdendo a associação visual/semântica). <hgroup> resolve isso: o título define a entrada no esboço, e o conteúdo do <p> acompanha-o.
<hgroup>
<h1>Welcome to W3Docs</h1>
<p>Learn HTML, CSS, and JavaScript online for free.</p>
</hgroup>Modelo de conteúdo
Esta é a parte que a maioria dos tutoriais mais antigos erra. O <hgroup> atual não envolve vários irmãos <h1>–<h6>. Seu modelo de conteúdo é:
- exatamente um elemento de título (
<h1>,<h2>,<h3>,<h4>,<h5>ou<h6>), mais - zero ou mais elementos
<p>antes e/ou depois desse título.
Os elementos <p> carregam o subtítulo, título alternativo ou slogan. Apenas o título único contribui para o esboço da página; os parágrafos estão associados a ele, mas não criam títulos próprios.
Status na especificação
O elemento <hgroup> foi removido da especificação HTML por vários anos, razão pela qual muitas documentações mais antigas o rotulam como não suportado e desaconselham seu uso. Esse conselho está desatualizado: <hgroup> foi restaurado ao WHATWG HTML Living Standard em 2022 com o modelo de conteúdo mais simples de título-mais-parágrafos descrito acima. É um elemento válido hoje.
<hgroup> é um elemento válido no atual WHATWG HTML Living Standard (restaurado em 2022). Todos os navegadores modernos renderizam seu conteúdo corretamente. Observe que ele não possui semântica de acessibilidade integrada especial — as tecnologias assistivas expõem o título dentro dele como um título normal, e os elementos <p> como texto comum.
Sintaxe
A tag <hgroup> vem em pares: tanto a tag de abertura <hgroup> quanto a de fechamento </hgroup> são obrigatórias.
Exemplo da tag HTML <hgroup>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<hgroup>
<h1>Welcome to W3Docs</h1>
<p>Here you can learn the HTML basics.</p>
</hgroup>
</body>
</html>Exemplo da tag HTML <hgroup> usada com propriedades CSS
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
hgroup {
text-align: right;
font-family: Arial, sans-serif;
padding-right: 30px;
border-right: 15px solid #42c73a;
}
h1 {
font-size: 30px;
}
hgroup p {
margin: 0;
font-size: 18px;
color: #555;
}
p {
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
}
</style>
</head>
<body>
<hgroup>
<h1>Welcome to W3Docs</h1>
<p>Learn online</p>
</hgroup>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
</body>
</html>Atributos
A tag <hgroup> não possui atributos específicos do elemento. Ela suporta os Atributos Globais e os atributos de evento padrão.
Suporte a navegadores
<hgroup> é suportado em todos os navegadores modernos — Chrome, Firefox, Safari e Edge — e faz parte do atual WHATWG HTML Living Standard. Como não possui estilização padrão além de ser um contêiner de bloco, o suporte significa efetivamente que o navegador renderiza o título e seus parágrafos conforme o esperado.
Tags relacionadas
- Tag HTML
<header>— conteúdo introdutório de uma página ou seção, onde um bloco de título<hgroup>geralmente se encontra. - Tags HTML
<h1>–<h6>— os elementos de título que você coloca dentro do<hgroup>. - Títulos HTML — visão geral de como os títulos moldam a estrutura do documento.