O que é HTML semântico e por que ele importa

Você já aprendeu a usar <div> e <span> para agrupar elementos e id e class para identificá-los. Isso é ótimo para estilização e JavaScript! Mas e se eu te disser que existe uma forma de agrupar e identificar elementos que também adiciona significado ao seu conteúdo?

Bem-vindo ao mundo do HTML Semântico!

HTML semântico significa usar as tags HTML de forma que elas descrevam o propósito ou o significado do conteúdo que elas envolvem, e não apenas como elas devem aparecer visualmente.

O problema do "div soup"

No passado, e ainda hoje em muitos sites, era comum ver páginas HTML construídas quase que inteiramente com <div>s:

<div id="header">
  <div class="logo">...</div>
  <div class="menu">...</div>
</div>

<div id="content">
  <div class="article">
    <div class="title">...</div>
    <div class="author">...</div>
    <div class="text">...</div>
  </div>
  <div class="sidebar">...</div>
</div>

<div id="footer">...</div>

Isso é o que chamamos de "div soup" (sopa de divs). Funciona visualmente, mas para o navegador, para os mecanismos de busca e, principalmente, para pessoas com deficiência, é apenas um monte de caixas genéricas.

A solução: tags semânticas

Com o HTML5, foram introduzidas diversas tags semânticas que nos permitem descrever melhor a estrutura e o conteúdo da nossa página. Em vez de usar uma <div> com id="header", usamos a tag <header>. Em vez de div class="menu", usamos <nav>.

<header>
  <div class="logo">...</div>
  <nav>...</nav>
</header>

<main>
  <article>
    <h2>...</h2>
    <p>...</p>
  </article>
  <aside>...</aside>
</main>

<footer>...</footer>

Percebe a diferença? Mesmo sem CSS, a segunda estrutura já nos diz muito mais sobre o que cada parte da página representa.

Por que o HTML semântico importa?

O HTML semântico não é apenas uma "boa prática" — ele traz benefícios reais e tangíveis para seus projetos:

1. Acessibilidade

Para leitores de tela: Pessoas com deficiência visual usam leitores de tela que "leem" o conteúdo da página. Com tags semânticas, o leitor de tela pode anunciar: "Cabeçalho da página", "Navegação principal", "Conteúdo principal", "Artigo", "Rodapé". Isso permite que o usuário navegue pela página de forma muito mais eficiente, pulando diretamente para a seção de interesse, em vez de ter que ouvir todo o conteúdo de uma "sopa de divs".
Para navegação por teclado: Elementos semânticos muitas vezes vêm com comportamentos padrão de acessibilidade (ex: <a> é focável).

2. SEO (Search Engine Optimization)

Para mecanismos de busca: Google, Bing e outros mecanismos de busca usam "robôs" para rastrear e indexar o conteúdo da sua página. Eles entendem o significado das tags semânticas.
Se o seu conteúdo principal está dentro de <main> e <article>, os robôs entendem que aquilo é o mais relevante na sua página, o que pode melhorar seu posicionamento nos resultados de busca.
Eles conseguem diferenciar o conteúdo principal de um menu de navegação ou de um rodapé.

3. Manutenção e Organização do Código

Para desenvolvedores: Um código semântico é muito mais fácil de ler e entender. Ao olhar para <nav>, você sabe imediatamente que ali está a navegação. Com div class="menu", você precisa adivinhar ou procurar o CSS para entender o propósito.
Facilita a colaboração em equipes e a manutenção futura do projeto.

4. Compatibilidade Futura

À medida que novas tecnologias e dispositivos surgem, o HTML semântico garante que seu conteúdo seja interpretado corretamente, mesmo em contextos que você não previu.

HTML semântico não é sobre aparência

É importante lembrar que as tags semânticas, por si só, não alteram a aparência visual da sua página (ou alteram muito pouco, com estilos padrão mínimos do navegador). Elas são sobre significado e estrutura. A estilização ainda é feita com CSS.

<!-- Ambos são visualmente iguais sem CSS, mas o segundo é semântico -->

<!-- Não semântico -->
<div id="header">
  <h1>Meu Site</h1>
</div>

<!-- Semântico -->
<header>
  <h1>Meu Site</h1>
</header>

Resumindo

HTML Semântico: Usar tags HTML que descrevem o propósito ou significado do conteúdo que elas envolvem.
"Div Soup": O uso excessivo de <div>s genéricas sem significado, prejudicando a acessibilidade e o SEO.
Por que importa:
- Acessibilidade: Facilita a navegação para usuários de leitores de tela.
- SEO: Ajuda mecanismos de busca a entenderem o conteúdo da sua página, melhorando o ranqueamento.
- Manutenção: Torna o código mais legível e fácil de manter para desenvolvedores.
- Compatibilidade: Garante que o conteúdo seja interpretado corretamente por novas tecnologias.
Sempre prefira tags semânticas a <div> ou <span> quando houver uma tag que descreva melhor o conteúdo.