HTML semântico

O que esta verificação faz

Analisa o DOM renderizado e conta elementos HTML5 semânticos — <article>, <section>, <nav>, <header>, <footer>, <aside>, <main>, <figure>, <figcaption>, <time> — face à contagem total de elementos. Páginas construídas quase inteiramente de <div> e <span> aninhados pontuam baixo; páginas com um esqueleto semântico claro pontuam alto.

Porque é importante

HTML semântico é a diferença entre markup que uma máquina consegue fazer parse e markup que uma máquina consegue entender. Um <div class="header"> é invisível para qualquer coisa que não leia as tuas classes CSS. Um <header> é inequívoco: cada navegador, leitor de ecrã, crawler de busca e agente LLM sabe que papel esse bloco joga na página.

Três audiências leem o teu HTML:

• Agentes de IA (ChatGPT, Perplexity, Google AI Overviews) extraem e citam conteúdo. Puxam fiavelmente de tags <article>, <main> e <time datetime>. Adivinham dentro de sopa de divs.
• Leitores de ecrã geram um mapa de landmarks da página para que os utilizadores possam saltar diretamente para navegação, conteúdo principal ou rodapé. Sem tags semânticas, sem landmarks. Combina esta verificação com regiões landmark ARIA.
• Motores de busca ponderam conteúdo dentro de <article> e <main> mais alto do que conteúdo em containers genéricos — e ignoram fiavelmente boilerplate dentro de <nav> e <footer>.

A correção é barata. O custo de não o fazer compõe-se em cada página do site.

Como corrigir

Substitui containers genéricos pelo elemento que descreve o seu papel.

Chrome da página:

<!-- Antes -->
<div class="site-header">
  <div class="nav">...</div>
</div>
<div class="main-content">...</div>
<div class="site-footer">...</div>

<!-- Depois -->
<header>
  <nav>...</nav>
</header>
<main>...</main>
<footer>...</footer>

Posts de blog e artigos: envolve cada post em <article> e marca datas com <time datetime>. O atributo datetime é legível por máquinas e aparece em citações de IA e auto-extração Schema.org.

<article>
  <header>
    <h1>Título do post</h1>
    <time datetime="2026-05-11">11 de maio de 2026</time>
  </header>
  <p>Corpo do post...</p>
</article>

Imagens com legendas: usa <figure> + <figcaption> quando a legenda faz parte do conteúdo (não apenas um tooltip de hover).

<figure>
  <img src="chart.png" alt="Crescimento de receita 2024-2026" />
  <figcaption>Receita trimestral, Q1 2024 até Q1 2026.</figcaption>
</figure>

Quando usar <section> vs <div>: usa <section> para uma região nomeada da página — uma que teria um cabeçalho num outline (Preços, Funcionalidades, FAQ). Usa <div> para agrupamento puramente apresentacional (um wrapper flex, uma borda de card). Se não consegues escrever um cabeçalho de uma linha para isso, é um <div>.

Cruza o resultado com regiões landmark ARIA e texto de ligação descritivo — essas verificações reforçam-se mutuamente.

Perguntas frequentes

Importa se uso <div role="main"> em vez de <main>?

Para acessibilidade, são equivalentes — ambos expõem um landmark main. Para todos os outros (agentes de IA, crawlers de busca, revisores de código), <main> é mais claro e mais curto. Usa o elemento nativo. Os papéis ARIA existem para remendar elementos que não conseguem expressar o seu papel, não para substituir os que conseguem.

Posso ter múltiplos <header> e <footer> por página?

Sim. <header> e <footer> têm âmbito ao seu ancestral seccionador mais próximo (<article>, <section>, <main> ou o documento). Um post de blog pode ter o seu próprio <header> (título + data) dentro de <article>, mais o <header> do site no topo da página. O <main> é a exceção — apenas um por documento.

O tema do meu CMS usa divs em todo o lado. Vale a pena reescrever?

Se controlas o template, sim — é uma edição única que melhora acessibilidade, SEO e extratibilidade por IA para cada página que o usa. Se não controlas (um tema alojado no Shopify/Squarespace), foca-te no slot de conteúdo onde tens controlo: envolve posts em <article>, marca datas com <time>, usa <figure> para imagens com legenda. O chrome melhorará quando o tema atualizar.