Estrutura semântica é a organização do código de uma página de acordo com o significado de cada conteúdo. Ela identifica o que é título, parágrafo, navegação, conteúdo principal e informação complementar. Essa organização ajuda a tornar o site mais compreensível para navegadores, tecnologias assistivas e mecanismos de busca.
Neste artigo
O que significa dar sentido ao código?
Ao acessar um site, você percebe diferenças pelo visual: um título maior, um menu no topo e um texto dividido em assuntos. No código, essas funções também precisam estar representadas. Uma frase pode parecer um título e, ainda assim, estar marcada apenas como um parágrafo.
O HTML oferece elementos com funções específicas. O elemento nav identifica uma área de navegação; main delimita o conteúdo principal; article representa um conteúdo independente; e section agrupa um assunto. Os elementos p, ul e ol identificam parágrafos e listas.
Isso não significa usar o maior número possível de elementos. Uma divisão criada apenas para aplicar um fundo pode continuar sendo uma div. A escolha deve acompanhar a função do conteúdo.
Como organizar H1, H2 e H3?
Uma organização prática é usar um H1 para identificar o assunto principal, H2 para as divisões desse assunto e H3 para os desdobramentos dentro de uma divisão. Em uma página sobre criação de sites, “Como funciona o desenvolvimento” pode ser um H2, enquanto “Planejamento do conteúdo” é um H3 dentro dessa seção.
O nível do título representa sua posição no conteúdo, não o tamanho desejado para a letra. A aparência é ajustada pelo CSS. Escolher H4 apenas porque ele já vem menor no tema mistura apresentação e significado.
Exemplo simplificado de hierarquia no HTML:
<main>
<article>
<h1>Criação de sites para empresas</h1>
<h2>Como funciona o desenvolvimento</h2>
<h3>Planejamento do conteúdo</h3>
<p>Explicação desta etapa do projeto.</p>
<h3>Design e programação</h3>
<p>Explicação sobre a construção do site.</p>
<h2>O que está incluído no projeto</h2>
</article>
</main>Um título pequeno pode ser o principal?
Sim. O H1 não precisa ocupar metade da tela. Também é possível ter uma frase visualmente destacada que não funciona como título de seção. A separação entre estrutura e aparência permite criar um site elegante sem perder coerência.
Quando todos os destaques viram subtítulos, a página pode apresentar uma sequência confusa. Antes de escolher o elemento, pergunte se aquela frase abre um assunto ou apenas enfatiza uma informação.
Por que isso importa para a acessibilidade?
Quem utiliza um leitor de tela pode navegar pelos títulos para localizar um assunto. Se os subtítulos foram construídos como parágrafos em letras grandes, as divisões visuais podem não estar disponíveis nessa navegação.
Uma hierarquia coerente ajuda a representar as relações entre os assuntos. A ordem do documento também precisa fazer sentido quando a disposição visual muda no celular ou quando o conteúdo é percorrido sem o layout.
Qual é a relação com SEO?
Títulos descritivos e seções coerentes ajudam a apresentar o conteúdo, mas acertar a sequência de H1, H2 e H3 não garante posições melhores. O Google esclarece que a ordem semântica é importante para leitores de tela, sem tratá-la como uma exigência de posicionamento.
A estrutura sustenta a qualidade do projeto. Ela não substitui uma resposta útil, não corrige uma página bloqueada e não resolve informações incompletas. O trabalho precisa considerar esses elementos em conjunto.
Estrutura semântica é igual a dados estruturados?
São recursos diferentes. O HTML semântico organiza a própria página. Os dados estruturados descrevem informações em um formato específico, como autoria e organização, frequentemente por meio de JSON-LD e Schema.org.
Adicionar schema não corrige títulos mal organizados. Em um site já publicado, revise primeiro a correspondência entre o visual e o código: assunto principal, divisões, listas, navegação e conteúdo. Um site bem construído comunica sua organização tanto na tela quanto no documento.
Perguntas frequentes
Posso mudar o tamanho do H1 sem trocar a marcação?
Sim. A aparência deve ser ajustada pelo CSS, preservando o papel do título na página.
Preciso usar todos os níveis de título?
Não. Utilize apenas os níveis necessários para representar as divisões reais do conteúdo.
