Fundamentos e Semântica HTML5

Aula 1 de 6

Introdução ao HTML5

HTML5 é a quinta versão da linguagem de marcação da web. Diferente do HTML4, ela foi projetada com foco em semântica, acessibilidade e suporte nativo a multimídia.

Estrutura Base

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Minha Página</title>
</head>
<body>
  <h1>Olá, Mundo!</h1>
</body>
</html>

Elementos Semânticos

<body>
  <header>
    <nav>
      <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#sobre">Sobre</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <section>
      <article>
        <h2>Título do Artigo</h2>
        <p>Conteúdo principal.</p>
      </article>
    </section>

    <aside>
      <h3>Barra Lateral</h3>
      <p>Links relacionados.</p>
    </aside>
  </main>

  <footer>
    <p>&copy; 2026 - Todos os direitos reservados</p>
  </footer>
</body>

/* Reset básico com semântica */
header, nav, main, section, article, aside, footer {
  display: block;
}

nav ul {
  list-style: none;
  display: flex;
  gap: 1rem;
}

main {
  max-width: 1200px;
  margin: 0 auto;
}

HTML4 vs HTML5

<!-- HTML4: elementos genéricos -->
<div id="header">
  <div id="nav">
</div>

<!-- HTML5: elementos semânticos -->
<header>
  <nav>
</header>

Validadores W3C

# Validar via API W3C (requer curl)
curl -H "Content-Type: text/html; charset=utf-8" \
  --data-binary @index.html \
  https://validator.w3.org/nu/?out=json

# Ou use a extensão VS Code: HTML Hint
npx htmlhint index.html

Lab: Página Semântica Completa

Crie um documento HTML5 com header, nav, main, duas sections, aside e footer. Use elementos semânticos e valide com o W3C.

# Crie o arquivo
New-Item -ItemType File -Path "index.html"

# Valide com htmlhint
npm install -g htmlhint
htmlhint index.html

A semântica correta não é apenas boa prática — é a base para SEO, acessibilidade e manutenibilidade do projeto.