Por que usar os elementos de título HTML?

Os elementos de título HTML (<h1> a <h6>) são usados para definir cabeçalhos em uma página web. Eles servem para:

1. Estruturar o conteúdo, criando uma hierarquia de informações.
2. Melhorar a acessibilidade, ajudando leitores de tela a navegar pelo conteúdo.
3. Otimização para motores de busca (SEO). Os motores de busca usam os títulos para entender a estrutura do conteúdo na página.

Como funciona a hierarquia de títulos HTML?

Os elementos de título organizam o conteúdo de uma página HTML em diferentes níveis de importância, do mais importante ao menos importante. Aqui está como funciona:

1. <h1>: Título principal da página. Deve ser usado apenas uma vez por página para representar o tópico principal.
2. <h2>: Subtítulos diretos do <h1>. Usado para seções principais dentro do conteúdo.
3. <h3>: Subtítulos diretos do <h2>. Usado para subseções dentro das seções principais.
4. <h4>: Subtítulos diretos do <h3>. Usado para subdivisões dentro das subseções.
5. <h5>: Subtítulos diretos do <h4>. Usado para subdivisões menores.
6. <h6>: Subtítulos diretos do <h5>. Usado para as subdivisões mais específicas e menos importantes.

Exemplo de hierarquia:

<h1>Título Principal</h1>
<h2>Seção Principal 1</h2>
<h3>Subseção 1.1</h3>
<h4>Subsubseção 1.1.1</h4>
<h2>Seção Principal 2</h2>
<h3>Subseção 2.1</h3>
<h3>Subseção 2.2</h3>
<h4>Subsubseção 2.2.1</h4>
<h5>Subsubsubseção 2.2.1.1</h5>
<h6>Subsubsubsubseção 2.2.1.1.1</h6>

Essa estrutura ajuda a organizar o conteúdo de forma lógica e facilita a navegação tanto para usuários quanto para motores de busca.

Tabela com exemplos: