Semântica no HTML5 — explicação didática

Por que a semântica é importante?

Ajuda na acessibilidade: leitores de tela conseguem navegar por áreas como cabeçalho, navegação e conteúdo principal.
Melhora o SEO: buscadores entendem melhor o tema e a hierarquia de informações.
Facilita a manutenção: o código fica autoexplicativo e organizado.

Exemplo 1: Estrutura geral da página

Antes (pouca semântica):
  <div id="topo">
    <div class="logo">Minha Marca</div>
    <div class="menu">... links ...</div>
  </div>
  <div id="conteudo">... artigos ...</div>
  <div id="rodape">© 2025</div>

Hoje (nomes que revelam o papel):

    <header>Minha Marca e navegação</header>
    <main>Conteúdo principal</main>
    <footer>© 2025 roda-pé</footer>

Exemplo 2: Navegação

Antes:
<div class="menu">Início, Artigos, Contato</div>

Hoje:
<nav>Início, Artigos, Contato</nav>

Exemplo 3: Um artigo

Antes:
<div class="post">
<h1>Título</h1>
Publicado em 22/08/2025
Texto do artigo...
</div>

Hoje:
<article>
<h1>Título</h1>
<time datetime="2025-08-22">22/08/2025</time>
Texto do artigo...
</article>

Exemplo 4: Conteúdo principal e lateral

Antes:
<div class="col-esq">links relacionados</div>
<div class="col-dir">texto principal</div>

Hoje:
<main>texto principal</main>
<aside>links relacionados</aside>

Exemplo 5: Mídia com descrição

Antes:

Gráfico de vendas

Hoje:
<figure>
  <img src="grafico.png" alt="Gráfico de vendas de jan a jun 2025">
  <figcaption>Gráfico de vendas (jan a jun 2025).</figcaption>
</figure>

Principais elementos semânticos do HTML5

<header> identifica o cabeçalho da página ou de uma seção.
<nav> indica um bloco de navegação com links importantes.
<main> marca o conteúdo principal único da página.
<section> agrupa conteúdo por tema dentro do principal.
<article> representa um conteúdo independente, como um post.
<aside> traz conteúdo complementar, como notas e links.
<footer> define o rodapé da página ou de uma seção.
<figure> e <figcaption> associam mídia e sua legenda.
<time> marca datas e horas, com atributo datetime legível por máquina.

Boas práticas simples

Usar apenas um <main> por página.
Reservar <nav> para navegação real do site.
Usar <article> quando o bloco fizer sentido sozinho.
Usar <section> para organizar partes temáticas.
Adicionar alt em imagens com significado.
Usar <time datetime="AAAA-MM-DD"> quando houver datas.

Tags obsoletas (não conformes)

Não devem ser usadas em novos projetos. Troque por elementos semânticos modernos ou por CSS/JS.

Site recomendados: W3Schools Obsolete Tags,

Site recomendado: Mozilla.org Obsolete Tags

Resumo final

A semântica no HTML5 torna o código mais claro para pessoas e máquinas. Trocar estruturas genéricas por elementos com significado melhora acessibilidade, SEO e manutenção.

📘 Aula 9: Semântica no HTML5 📘