O aspecto mais importante na criação de uma hierarquia estrutural é o uso adequado dos elementos de título. Elementos de título são numerados como h1, h2, h3 e assim por diante. Esses números representam o nível de título para esse elemento. Assim como em um documento de texto, você não deve usar níveis de título na ordem incorreta. Seu elemento h1 é seu título de nível superior. Você raramente terá mais de um destes em uma página e ele normalmente deve vir antes de todo o seu conteúdo. Seu elemento h2 é seu subtítulo. Deve sempre vir depois do seu h1 e pode vir depois de algum texto introdutório. Ao contrário de um elemento h1, você pode ter múltiplos elementos h2 na sua página. Você frequentemente faz isso para delimitar diferentes seções de conteúdo. Seguindo o padrão, seu elemento h3 deve sempre vir depois de um elemento h2. Ou seja, você nunca deve pular diretamente de h1 para h3. Você pode, no entanto, ter múltiplos elementos de título no mesmo nível. Por exemplo, este código está correto:

<section>
  <h1>G.E.A.R ACADEMY</h1>
  <h2>Learn Front-End Development</h2>
  <h2>Learn Back-End Development</h2>
</section>

Mas este código não estaria correto, porque h3 vem antes de h2. Mova o elemento h2 acima do h3 para que seja semanticamente correto. Para interagir com o código, você precisará ativar o editor interativo.

<section>
  <h1>G.E.A.R ACADEMY</h1>
  <h3>Introduction to HTML</h3>
  <h2>Learn Front-End Development</h2>
</section>

Pode ser tentador usar um elemento de título específico por causa do seu estilo, como h1 para texto grande:

<article>
  <p>
    Here is some
    <h1>Large Text</h1>
  </p>
</article>

Em vez disso, você deve escolher o elemento apropriado para a estrutura do seu documento e usar CSS para alcançar o estilo desejado. Usar a hierarquia correta é importante para acessibilidade. Tecnologias assistivas, como leitores de tela, dependem da estrutura de uma página web para determinar como analisar e anunciar essa página para o usuário. Usar um elemento h3 após um h1 pode fazer com que um usuário de leitor de tela acredite que ele acidentalmente pulou conteúdo importante, devido à falta de um elemento h2. A estrutura adequada também é importante para SEO. Motores de busca usam automação para analisar o conteúdo da sua página web e determinar quando e onde ela deve aparecer nos resultados. Se a sua estrutura estiver malformada, os motores de busca podem não conseguir ranqueá-lo muito bem nos resultados de busca relevantes. Finalmente, dependendo de quão incorreta sua estrutura está, seu HTML pode nem ser tecnicamente válido. Quando isso acontece, o navegador da web precisa efetivamente adivinhar o que você quis fazer. E o que ele supõe pode nem ser o que você quer de fato. Como você aprendeu hoje, existem muitas razões para usar a hierarquia estrutural adequada para sua página. Tenha isso em mente enquanto você desenvolve novos projetos.