📘 Aula 8: Explicando Hierarquia de Títulos 📘
Explicação de Cada Nível
No HTML, os títulos são definidos pelas tags <h1> até <h6>. Cada uma dessas tags representa um nível de importância e hierarquia do conteúdo, ajudando tanto o usuário quanto os motores de busca a entenderem a estrutura do site.
<h1> – Título mais importante da página, geralmente usado apenas uma vez.
<h2> – Subtítulo principal, usado para seções importantes do conteúdo.
<h3> – Subtítulo de <h2> , para subseções.
<h4> – Subtítulo de <h3> , nível mais detalhado.
<h5> – Subtítulo de <h4> , nível ainda mais específico.
<h6> – Menor nível de título, raramente usado, mas útil para detalhes finais.
Boas Práticas
- Use apenas um <h1> por página.
- Mantenha a sequência hierárquica: <h2> após <h1> , <h3> após <h2> , e assim por diante.
- Evite pular níveis sem necessidade, para não confundir leitores e motores de busca.
- Títulos ajudam na acessibilidade e organização do conteúdo.
Exemplo de Estrutura e Resultados Visuais
Exemplo 1- <h1>Curso de Front-End</h1>
Curso de Front-End (Título principal)
Exemplo 2- <h2>Módulo 1: HTML Básico</h2>
Módulo 1: HTML Básico (Subtítulo)
Exemplo 3- <h3>Aula 1: Estrutura HTML</h3>
Aula 1: Estrutura HTML (Subtítulo dentro de um <h2>)
Exemplo 4- <h4>Exemplo de Parágrafo</h4>
Exemplo de Parágrafo (Subtítulo dentro de um <h3>)
Exemplo 5- <h5>Detalhes Adicionais</h5>
Detalhes Adicionais (Subtítulo dentro de um <h4>)
Exemplo 6- <h6>Notas Finais</h6>
Notas Finais (Subtítulo dentro de um <h5>)
Resumo
A hierarquia de títulos organiza o conteúdo: h1 é o título principal, h2 subtítulos, e h3 a h6 subdividem seções menores. Mantê-la clara melhora a leitura, a estrutura e a acessibilidade do site.