<h1>–<h6>: Os elementos HTML de cabeçalho da seção
Os elementos HTML <h1>
–<h6>
representam seis níveis de título de seção. <h1>
é o nível de seção mais alto e <h6>
é o mais baixo.
Experimente
Sumário
Elementos de cabeçalho são implementados em seis níveis, <h1>
é o mais importante e <h6>
é o de menor importância. Um elemento de cabeçalho descreve brevemente o tópico da seção em que ele está. As informações de cabeçalho podem ser usadas por agentes de usuário, por exemplo, para construir uma tabela de conteúdos para um documento automaticamente.
- Categorias do conteúdo Conteúdos de fluxo, conteúdos de cabeçalho, conteúdos palpáveis.
- Conteúdo permitido Conteúdo com texto.
- Omissão de tag Não há, porém, as tags de abertura e fechamento são obrigatórias.
- Elementos pais permitidos Qualquer elemento que aceite conteúdos de fluxo; ou como um elemento filho do grupo de elementos de cabeçalho
<hgroup>
- Interface DOM
HTMLHeadingElement
Atributos
Esses elementos incluem os atributos globais.
O atributo align está Deprecated no HTML 4 e no HTML 5.
Exemplos
Todos os cabeçalhos
O seguinte código mostra, em uso, todos os níveis de cabeçalho.
<h1>Cabeçalho nível 1</h1>
<h2>Cabeçalho nível 2</h2>
<h3>Cabeçalho nível 3</h3>
<h4>Cabeçalho nível 4</h4>
<h5>Cabeçalho nível 5</h5>
<h6>Cabeçalho nível 6</h6>
Aqui está o resultado deste código:
Página de exemplo
O código seguinte mostra alguns cabeçalhos com um pouco de conteúdo abaixo deles.
<h1>Elementos de cabeçalho</h1>
<h2>Sumário</h2>
<p>Algum texto aqui...</p>
<h2>Exemplos</h2>
<h3>Exemplo 1</h3>
<p>Algum texto aqui...</p>
<h3>Exemplo 2</h3>
<p>Algum texto aqui...</p>
<h2>Veja também</h2>
<p>Algum texto aqui...</p>
Aqui está o resultado deste código:
Notas
Não use níveis menores para diminuir o tamanho da fonte do cabeçalho: use a propriedade CSS font-size
.
Evite pular níveis de cabeçalhos: sempre comece com <h1>
, depois <h2>
e assim por diante. Tente, também, ter pelo menos um cabeçalho de primeiro nível em uma página..
Em HTML 5, use o elemento <section>
para definir o outline de um documento. Cabeçalhos fornecem títulos para secções e subsecções. Você também pode agrupar um cabeçalho e seu conteúdo usando o elemento <div>
.
Especificações
Specification |
---|
HTML # the-h1,-h2,-h3,-h4,-h5,-and-h6-elements |
Compatibilidade com navegadores
html.elements.h1
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
h1 |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
html.elements.h2
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
h2 |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
html.elements.h3
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
h3 |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
html.elements.h4
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
h4 |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
html.elements.h5
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
h5 |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
html.elements.h6
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
h6 |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support