HTML semântico: 10 erros comuns e as tags que os corrigem

Uma página HTML pode aparecer perfeita e estar mal escrita. div por todo o lado, negrito posto com b, títulos escolhidos pelo tamanho: o navegador mostra tudo sem se queixar, mas os leitores de ecrã, os motores de busca e os teus colegas perdem a informação que as tags deviam transportar. É a isto que se chama HTML semântico: usar a tag que diz o que o conteúdo é, não apenas o aspeto que deve ter. Aqui ficam os dez erros mais comuns e a respetiva correção.

Porque é que a semântica conta

• Acessibilidade. Um leitor de ecrã propõe saltar diretamente para a navegação, para o conteúdo principal ou para o rodapé. Só o consegue fazer se existirem nav, main e footer. Com div, o utilizador ouve uma página plana.
• SEO. Os motores apoiam-se na estrutura para identificar o conteúdo principal, os títulos e as relações entre secções. Uma hierarquia limpa é compreendida à primeira; uma sopa de div tem de ser adivinhada.
• Manutenção. <nav> lê-se sem comentário; <div class="nv2"> obriga a abrir o CSS. O código semântico volta a ler-se seis meses depois.
• Comportamentos de graça. Um button dispara com o teclado, um a abre num novo separador com o clique da roda do rato, um label aumenta a zona clicável de uma caixa de verificação. Tudo isso fica por reprogramar à mão se fizeres batota com div.

Erro 1: div em vez de header, nav, main e footer

A estrutura de uma página tem tags próprias. Uma div com o identificador header não é uma delas para o navegador.

Não faças isto:

<div id="header">…</div>
<div id="menu">…</div>
<div id="content">…</div>
<div id="footer">…</div>

Faz isto:

<header>…</header>
<nav aria-label="Navigation principale">…</nav>
<main>…</main>
<footer>…</footer>

Cada uma destas tags tem um papel implícito (banner, navigation, main, contentinfo) que as tecnologias de apoio reconhecem. main deve ser único na página; header e footer podem repetir-se dentro de um article.

Erro 2: a legenda de uma imagem dentro de um parágrafo

Uma imagem e a sua legenda formam uma unidade. A tag figure associa as duas, figcaption leva a legenda.

Não faças isto:

<img src="montagne.jpg" alt="Le mont Blanc au lever du soleil">
<p>Le mont Blanc, juillet 2026</p>

Faz isto:

<figure>
  <img src="montagne.jpg" alt="Le mont Blanc au lever du soleil">
  <figcaption>Le mont Blanc, juillet 2026</figcaption>
</figure>

figure serve também para um bloco de código, um gráfico ou uma citação acompanhados de legenda.

Erro 3: b e i para dar ênfase

b e i descrevem uma aparência. strong e em descrevem uma intenção: importância forte, ênfase colocada numa palavra. Um leitor de ecrã pode mudar de entoação num em, nunca num i.

Não faças isto:

<b>Attention</b> : ce réglage est <i>irréversible</i>.

Faz isto:

<strong>Attention</strong> : ce réglage est <em>irréversible</em>.

b e i não são proibidos: mantêm um uso preciso, uma palavra-chave destacada sem importância especial no caso de b, um termo estrangeiro ou o nome de um navio no caso de i. Se só queres negrito decorativo, isso é CSS: font-weight: 700.

Erro 4: uma hierarquia de títulos partida

As tags h1 a h6 formam o plano do documento. Escolher um h4 porque tem «o tamanho certo» parte esse plano: os leitores de ecrã navegam de título em título e os motores deduzem daí a estrutura.

Não faças isto:

<h1>Nos services</h1>
<h4>Développement</h4>     <!-- saut de h1 à h4 -->
<h1>Hébergement</h1>       <!-- second h1 pour une sous-partie -->

Faz isto:

<h1>Nos services</h1>
  <h2>Développement</h2>
    <h3>Sites vitrine</h3>
  <h2>Hébergement</h2>

Um único h1 por página, sem saltar níveis, e o tamanho regula-se em CSS. Se um título tiver de ser pequeno visualmente, isso é h2 { font-size: 1.1rem }, não h5.

Erro 5: section e article confundidos, ou usados para tudo

article designa um conteúdo autónomo, que mantém o sentido fora da página: um artigo de blogue, um comentário, uma ficha de produto. section agrupa um conteúdo temático dentro de um conjunto e devia ter sempre um título. Uma div continua a ser a escolha certa para um simples agrupamento de layout.

Não faças isto:

<section>
  <section><img src="logo.svg" alt="Gekkode"></section>
  <section>Du texte sans titre</section>
</section>

Faz isto:

<article>
  <h2>Titre du billet</h2>
  <section>
    <h3>Première partie</h3>
    …
  </section>
</article>

<div class="colonnes">…</div> <!-- pure mise en page : div -->

Erro 6: um link que faz de botão, e o contrário

Um link (a) leva a algum lado. Um botão (button) desencadeia uma ação: enviar, abrir um menu, mostrar uma janela. Um a href="#" com um handler de clique não é nem uma coisa nem outra, e uma div clicável não é acessível nem pelo teclado nem pelos leitores de ecrã.

Não faças isto:

<a href="#" onclick="ouvrirMenu()">Menu</a>
<div class="btn" onclick="envoyer()">Envoyer</div>

Faz isto:

<button type="button" aria-expanded="false" aria-controls="menu">Menu</button>
<button type="submit">Envoyer</button>
<a href="https://www.gekkode.com/pt/tarifs/">Voir les tarifs</a>

O button nativo reage ao Enter e ao Espaço, recebe o foco pelo teclado e anuncia o seu papel. Tudo isso se perde com uma div.

Erro 7: links que dizem «clica aqui»

O texto de um link deve anunciar o destino sozinho: os leitores de ecrã propõem a lista dos links da página fora de contexto e os motores usam a âncora para qualificar a página de destino.

Não faças isto:

Pour nos tarifs, <a href="https://www.gekkode.com/pt/tarifs/">cliquez ici</a>.

Faz isto:

Consultez <a href="https://www.gekkode.com/pt/tarifs/">nos tarifs 2026</a>.

Erro 8: imagens sem alt

O atributo alt descreve a imagem para quem não a vê: leitor de ecrã, imagem que não carregou, motor de busca. É obrigatório. Uma imagem puramente decorativa leva um alt vazio, não ausente.

Não faças isto:

<img src="graphique-ventes.png">
<img src="separateur.png" alt="separateur.png">

Faz isto:

<img src="graphique-ventes.png" alt="Ventes trimestrielles 2026 : hausse de 12 % au T2">
<img src="separateur.png" alt=""> <!-- décorative : alt vide -->

O nome do ficheiro nunca é uma descrição. Descreve o que a imagem traz ao texto.

Erro 9: campos de formulário sem label

Um texto colocado ao lado de um campo não fica ligado a ele. A tag label, associada por for e id, anuncia o campo ao leitor de ecrã e torna o texto clicável para dar o foco.

Não faças isto:

Adresse e-mail <input type="email" name="email">
<input type="text" placeholder="Votre nom">

Faz isto:

<label for="email">Adresse e-mail</label>
<input id="email" type="email" name="email" autocomplete="email">

<label for="nom">Votre nom</label>
<input id="nom" type="text" name="nom" autocomplete="name">

O placeholder não substitui o label: desaparece assim que se escreve e o seu contraste é muitas vezes insuficiente. Outras boas práticas para os formulários HTML completam esta.

Erro 10: estilos inline e listas simuladas

Dois maus hábitos que misturam estrutura e apresentação. O estilo inline impede que a aparência evolua sem tocar no HTML; a lista simulada com traços e br não é uma lista para o navegador, que assim não a consegue anunciar nem contar.

Não faças isto:

<h1 style="font-size: 24px; color: #333;">Titre</h1>
<p>- Pommes<br>- Poires<br>- Cerises</p>

Faz isto:

<h1 class="titre-page">Titre</h1>
<ul>
  <li>Pommes</li>
  <li>Poires</li>
  <li>Cerises</li>
</ul>

.titre-page {
  font-size: 1.5rem;
  color: #333;
}

Verificar o teu HTML

Três verificações rápidas, por esta ordem:

1. O validador do W3C assinala as tags mal fechadas, os atributos desconhecidos e os alt em falta.
2. O separador Acessibilidade das ferramentas de programador (Chrome, Firefox) mostra a árvore tal como um leitor de ecrã a percebe: se os teus header, nav e main aparecerem aí como regiões, a estrutura está boa.
3. A navegação pelo teclado: percorre a página com Tab. Tudo o que é clicável tem de receber o foco, por uma ordem lógica. Uma div clicável falha aqui.

Para a lista completa das tags de estrutura e de conteúdo, vê 20 tags HTML5 a conhecer. E, com a página estruturada, o CSS toma o relevo, por exemplo para centrar os elementos sem tocar no HTML.