HTML Academy · Aula

Títulos h1-h6 e a sua hierarquia

Utilizar níveis de título para criar uma estrutura de documento significativa.

Títulos h1-h6 e a sua hierarquia é uma aula grátis de HTML Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de HTML Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de HTML Academy inclui 4 aulas no total.

Os seis níveis de título

HTML fornece seis elementos de título, de <h1> a <h6>:

h1 — Título principal da página (o mais importante)
h2 — Seções principais
h3 — Subseções
h4, h5, h6 — Subseções mais profundas (raramente necessárias)

Eles diminuem visualmente de tamanho, mas o tamanho é controlado por CSS — não pelo número.

Hierarquia semântica

Os títulos criam uma estrutura do documento — um índice para a sua página:

<h1>HTML Fundamentals</h1>
  <h2>Document Structure</h2>
    <h3>The html Element</h3>
    <h3>The head Element</h3>
  <h2>Text Elements</h2>
    <h3>Headings</h3>
    <h3>Paragraphs</h3>

A regra do h1

Boa prática para <h1>:

Use exatamente um <h1> por página
Ele deve corresponder ou estar estreitamente relacionado ao elemento <title>
Ele representa o tópico principal da página
Os mecanismos de busca atribuem grande peso a ele para a otimização para mecanismos de busca

Não pule níveis

Os níveis de título devem ser usados em ordem — não pule de h2 para h4:

<!-- Bad: skips h3 -->
<h2>Section</h2>
<h4>Subsection</h4>

<!-- Good: sequential order -->
<h2>Section</h2>
<h3>Subsection</h3>
<h4>Detail</h4>
<!-- Screen readers use outline order to navigate. Skipping breaks navigation. -->

Títulos para navegação

Usuários de leitores de tela dependem dos títulos para navegar por páginas longas:

Eles pulam entre os títulos usando a tecla H
Os leitores de tela listam todos os títulos como um índice
A hierarquia correta torna a página navegável sem o uso da visão

Estilo versus semântica

Não escolha um nível de título por causa do seu tamanho visual — use CSS para isso:

<!-- Bad: using h4 because it looks right -->
<h4 style="font-size: 2rem">Big Heading</h4>

<!-- Good: correct level, sized with CSS -->
<h1>Big Heading</h1>
<!-- CSS: h1 { font-size: 2rem; } -->

Títulos em seções

Ao usar elementos de seccionamento do HTML5, os títulos reiniciam sua hierarquia em cada seção:

<article>
  <h2>Article Title</h2>    <!-- h2 within article -->
  <section>
    <h3>Subtopic</h3>       <!-- h3 within section -->
  </section>
</article>

<aside>
  <h2>Related Links</h2>   <!-- h2 in aside, independent section -->
</aside>

Dicas de acessibilidade para títulos

Siga estas regras de títulos para garantir a acessibilidade:

Toda página deve ter pelo menos um título
A área de conteúdo principal deve começar com um <h1>
Não use títulos apenas para deixar o texto em negrito ou maior
Não use texto em negrito como substituto para títulos

Otimização para mecanismos de busca e títulos

Os mecanismos de busca usam os títulos para entender o conteúdo da página:

<h1> tem o maior peso na otimização para mecanismos de busca
Inclua palavras-chave alvo naturalmente nos títulos
Os títulos dividem o conteúdo e melhoram as métricas de legibilidade
Os mecanismos de busca exibem títulos nos resultados (trechos em destaque)

Estilos padrão do navegador

Os navegadores aplicam estilos padrão aos títulos:

/* Default browser heading sizes (approximate) */
h1 { font-size: 2em;   font-weight: bold; }
h2 { font-size: 1.5em; font-weight: bold; }
h3 { font-size: 1.17em;font-weight: bold; }
h4 { font-size: 1em;   font-weight: bold; }
h5 { font-size: 0.83em;font-weight: bold; }
h6 { font-size: 0.67em;font-weight: bold; }

Títulos na navegação

Os títulos também podem ser usados em regiões de referência de navegação:

<nav aria-labelledby="nav-heading">
  <h2 id="nav-heading">Main Navigation</h2>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>

Verificação rápida

Quantos elementos h1 uma página bem estruturada deve ter normalmente?

Recapitulação: títulos

Essenciais da hierarquia de títulos:

Seis níveis: h1 até h6
Um h1 por página — o título principal
Use os níveis em ordem — nunca pule um nível
Os títulos criam uma estrutura de documento acessível
Use CSS para o tamanho visual, não os números dos títulos

Perguntas Frequentes

A aula “Títulos h1-h6 e a sua hierarquia” é grátis?

Sim — o texto completo de “Títulos h1-h6 e a sua hierarquia” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de HTML Academy, atualize para CoddyKit PRO. O curso de HTML Academy inclui 4 aulas no total.

O que vou aprender em “Títulos h1-h6 e a sua hierarquia”?

Utilizar níveis de título para criar uma estrutura de documento significativa. Você pratica HTML Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar HTML Academy?

Nenhuma experiência prévia é necessária. HTML Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.

Quanto tempo leva a aula “Títulos h1-h6 e a sua hierarquia”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de HTML Academy?

Sim. Cada aula de HTML Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para HTML Academy