Elementos semânticos de layout

HTML semântico usa tags que explicam o papel de cada parte da página. Isso ajuda leitores, navegadores, tecnologias assistivas e mecanismos de busca.

Elementos comuns

• <header> representa o topo de uma página ou seção.
• <nav> representa navegação.
• <main> representa o conteúdo principal.
• <section> agrupa uma parte do conteúdo.
• <article> representa um conteúdo independente.
• <footer> representa o rodapé.

Primeiro exemplo

<header>
  <h1>Meu blog</h1>
</header>

<nav>
  <a href="/">Início</a>
  <a href="/courses">Cursos</a>
</nav>

<main>
  <article>
    <h2>Primeiro artigo</h2>
    <p>Este é o conteúdo principal da página.</p>
  </article>
</main>

<footer>
  <p>Feito para praticar HTML.</p>
</footer>

Por que isso importa?

Tags semânticas deixam o código mais fácil de entender. Elas também ajudam ferramentas de acessibilidade a navegar pela página.

Mini tarefa

Adicione uma nova <section> dentro de <main> com um título e um parágrafo.

Pequeno quiz

Pergunta: Qual elemento deve envolver o conteúdo principal de uma página?

Resposta: <main>.

Pequeno desafio

Crie uma estrutura semântica simples para uma página de curso com header, main e footer.

<!-- coloque seu código abaixo -->

Resumo

• HTML semântico descreve o papel do conteúdo.
• Use <main> para o conteúdo principal.
• Use <nav> para links de navegação.
• Estrutura semântica melhora acessibilidade e SEO.