Títulos no HTML

HTML possui seis níveis de títulos:

• <h1>
• <h2>
• <h3>
• <h4>
• <h5>
• <h6>

Eles representam uma hierarquia. O h1 é o título principal. Os demais vão descendo em importância.

Exemplo

Carregando...

Perceba a lógica: cada nível aprofunda o assunto do nível anterior.

Não é só uma questão de tamanho

Muita gente olha para os títulos e pensa: “vou usar h1 porque fica maior”. Porém, o tamanho visual é apenas um detalhe. O mais importante é a semântica.

As tags de título existem para dar significado ao conteúdo, e não apenas aparência. O tamanho visual pode ser alterado depois com CSS.

Exemplo mais realista

Carregando...

Aqui o h1 apresenta a página e os h2 dividem as seções principais.

O que evitar

Evite pular níveis sem necessidade.

Em vez de sair de h1 direto para h4, normalmente faz mais sentido seguir uma ordem lógica:

Carregando...

Nem sempre a página vai usar todos os níveis, e está tudo bem. O importante é manter a hierarquia coerente.

Resumindo a ideia

Quando você usa títulos corretamente, o conteúdo fica mais organizado para:

• o navegador;
• mecanismos de busca;
• tecnologias de acessibilidade, como leitores de tela.