Tags HTML <h1>-<h6>
As tags <h1> a <h6> definem títulos HTML. <h1> é o mais importante; <h6> é o menos importante. Veja exemplos!
Os elementos <h1> a <h6> são usados para definir seis níveis de Títulos HTML, sendo <h1> o nível mais alto (ou mais importante) e <h6> o menos importante.
Cada página web deve ter apenas um título <h1>. Como os mecanismos de busca o utilizam para indexar a estrutura e o conteúdo dos documentos web, certifique-se de incluir palavras-chave nele.
Os agentes de usuário podem usar as informações dos títulos para criar automaticamente um índice de conteúdo para um documento.
Se quiser redimensionar texto, é melhor não usar tags de título. Você pode usar a propriedade CSS font-size em vez disso. Recomenda-se não pular níveis de título (<h1>, <h2>, <h3>, <h4>, <h5>, <h6>) e usar <h1> apenas uma vez por página.
As tags de título também têm valor para SEO. Um mecanismo de busca tenta descobrir duas coisas sobre sua página: sobre o que ela fala e quão boa ela é. Uma das principais coisas que os mecanismos de busca analisam para determinar o conteúdo da página são as palavras dentro das tags de título.
Quando uma página tem um único conteúdo, seu título principal deve estar em uma tag <h1>, as seções maiores devem ser incluídas em <h2> e assim por diante. Dessa forma, você pode tornar seu conteúdo mais organizado. Lembre-se de que ninguém lê cada palavra do conteúdo.
Existem dois tipos de páginas com conteúdo: páginas de conteúdo único e páginas de índice. Em páginas de conteúdo único, o título desse conteúdo deve estar em <h1> próximo ao topo do <body>. Em uma página de índice, o título do site ou o nome do índice geralmente é colocado em <h1>. Em seguida, os títulos de todas as partes individuais listadas devem usar tags <h2>.
Como as tags <h1> a <h6> são elementos de nível de bloco, elas sempre começam em uma nova linha e ocupam toda a largura disponível.
Por padrão, os navegadores renderizam as tags <h1>-<h6> com o seguinte CSS, onde o font-size diminui a cada nível enquanto o font-weight permanece em negrito:
margin-left: 0;
margin-right: 0;
font-weight: bold;
display: block;Sintaxe
As tags <h1>-<h6> aparecem em pares, portanto a tag de fechamento é obrigatória.
Exemplo das tags HTML <h1>-<h6>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>First-level heading</h1>
<h2>Second-level heading</h2>
<h3>Third-level heading</h3>
<h4>Fourth-level heading</h4>
<h5>Fifth-level heading</h5>
<h6>Sixth-level heading</h6>
</body>
</html>Os elementos <h1>-<h6> não devem ser usados para marcar subtítulos, legendas, títulos alternativos e slogans, a menos que se destinem a ser o título de uma nova seção ou subseção.
Como o atributo align não é suportado no HTML5, use a propriedade CSS text-align em vez disso.
Construindo a Estrutura de um Documento
Os títulos não são sobre tamanho — são sobre estrutura. Pense nos <h1>-<h6> como o sumário da sua página. O <h1> nomeia a página inteira, cada <h2> abre uma seção principal, e o <h3> (e mais profundos) aninham subseções dentro dela, como 1 → 1.1 → 1.1.1 em um esboço impresso.
No exemplo abaixo, um artigo tem um título <h1>, duas seções <h2> e uma subseção <h3> aninhada em uma delas. Leia apenas os títulos e você já entende o que a página aborda:
<!DOCTYPE html>
<html>
<head>
<title>Growing Tomatoes at Home</title>
</head>
<body>
<article>
<h1>Growing Tomatoes at Home</h1>
<p>A beginner's guide to a healthy tomato harvest.</p>
<h2>Choosing a Variety</h2>
<p>Cherry tomatoes are forgiving; beefsteak types need more care.</p>
<h2>Planting and Care</h2>
<p>Tomatoes need full sun and consistent watering.</p>
<h3>Watering Schedule</h3>
<p>Water deeply two to three times a week, more often in heat.</p>
<h3>Common Pests</h3>
<p>Watch for aphids and hornworms on the underside of leaves.</p>
</article>
</body>
</html>Os títulos <h3> pertencem ao <h2> "Planting and Care" porque aparecem depois dele e descrevem partes dele. Observe que o exemplo nunca salta de <h1> diretamente para <h3> — cada nível segue o anterior.
Estilizando títulos com CSS
Para alterar como um título aparece — sua cor, tamanho, alinhamento ou espaçamento — use CSS, não um nível de título diferente. Escolha a tag de título pelo seu lugar no esboço e estilize-a livremente:
<!DOCTYPE html>
<html>
<head>
<title>Styled headings</title>
<style>
h1 {
color: #224cc5;
text-align: center;
}
h2 {
color: #22c599;
font-size: 22px;
}
h3 {
color: #bc22c5;
text-transform: uppercase;
letter-spacing: 2px;
}
</style>
</head>
<body>
<h1>Growing Tomatoes at Home</h1>
<h2>Choosing a Variety</h2>
<h3>Watering Schedule</h3>
</body>
</html>Acessibilidade e Ordem dos Títulos
Usuários de leitores de tela raramente leem uma página de cima a baixo. Em vez disso, eles acessam uma lista de títulos e navegam entre eles, da mesma forma que um leitor com visão percorre os títulos em negrito. Isso só funciona quando seus títulos formam um esboço correto e sem lacunas.
Duas regras tornam os títulos acessíveis:
- Não pule níveis. Use
<h1>→<h2>→<h3>, não<h1>→<h3>. Um nível ignorado faz com que a tecnologia assistiva reporte uma seção sem pai. - Não escolha um título pelo seu tamanho visual. Se você quiser um título de seção pequeno, use o nível correto (por exemplo,
<h3>) e reduza-o com CSS font-size. Nunca use<h4>apenas porque ele parece menor.
Os dois trechos abaixo marcam o mesmo conteúdo. O primeiro quebra o esboço; o segundo o mantém intacto:
<!-- ❌ Bad: skips from h1 to h3, then jumps back to h2 -->
<h1>Page Title</h1>
<h3>Introduction</h3>
<h2>Main Section</h2>
<h5>A Detail</h5>
<!-- ✅ Good: every level follows the one above it -->
<h1>Page Title</h1>
<h2>Introduction</h2>
<h2>Main Section</h2>
<h3>A Detail</h3>Use apenas um <h1> por página. O <h1> responde "sobre o que é esta página?" — ter vários confunde essa resposta tanto para os mecanismos de busca quanto para os leitores de tela. (Você pode encontrar conselhos mais antigos que permitiam um <h1> por <article> ou <section>; isso dependia de um algoritmo de esboço de documento que nenhum navegador implementou, portanto, mantenha um único <h1> por página.) O título da página exibido na aba do navegador é definido separadamente com a tag <title> dentro do <head>.
Para uma visão mais ampla de como os seis níveis funcionam juntos, consulte o capítulo Títulos HTML.
Atributos
As tags <h1> a <h6> não possuem atributos específicos do elemento. Dois atributos do conjunto global são especialmente comuns em títulos:
| Atributo | Valor | Descrição |
|---|---|---|
| id | text | Fornece ao título um identificador único para que possa ser direcionado por um link âncora (#nome-da-secao) ou por CSS e JavaScript. |
| align | left, right, center, justify | Define o alinhamento horizontal do título. Obsoleto — não suportado no HTML5; use a propriedade CSS text-align em vez disso. |
Um uso comum de id é permitir que leitores pulem diretamente para uma seção:
<h2 id="planting">Planting and Care</h2>
<!-- Elsewhere on the page or site -->
<a href="#planting">Skip to Planting and Care</a>As tags <h1> a <h6> também suportam os Atributos Globais e os Atributos de Evento.