HTML Semântico

Módulo: ht-1 • +50 XP ao completar

Conteúdo da Aula

HTML: A Estrutura da Web 🌐

HTML é a linguagem que dá estrutura às páginas web. Sem HTML, não existiria internet como conhecemos!

📄 Estrutura Básica de uma Página

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Minha Página</title>
</head>
<body>
  <h1>Olá, mundo!</h1>
  <p>Esta é minha primeira página.</p>
</body>
</html>

🏷️ Tags Mais Usadas

<!-- Títulos (h1 = maior, h6 = menor) -->
<h1>Título Principal</h1>
<h2>Subtítulo</h2>
<h3>Seção</h3>

<!-- Parágrafo -->
<p>Este é um parágrafo de texto.</p>

<!-- Link -->
<a href="https://google.com">Clique aqui</a>

<!-- Imagem -->
<img src="foto.jpg" alt="Descrição da foto">

<!-- Lista -->
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<!-- Botão -->
<button>Clique em mim</button>

🧩 Tags Semânticas (Organização)

| Tag | Para que serve | Exemplo | |-----|---------------|---------| | <header> | Cabeçalho da página | Logo + menu | | <nav> | Navegação | Links do menu | | <main> | Conteúdo principal | O "miolo" da página | | <section> | Uma seção | Grupo de conteúdo | | <article> | Artigo/post | Um post de blog | | <footer> | Rodapé | Copyright + links |

🎯 Exemplo de Página Completa

<header>
  <h1>Meu Site</h1>
  <nav>
    <a href="/">Home</a>
    <a href="/sobre">Sobre</a>
  </nav>
</header>

<main>
  <section>
    <h2>Bem-vindo!</h2>
    <p>Conteúdo principal aqui.</p>
  </section>
</main>

<footer>
  <p>&copy; 2026 Meu Site</p>
</footer>

Exercício Prático

Imprima as 3 tags semânticas principais: "header", "main", "footer", cada uma em uma linha.

👀 Exemplo — Veja e faça igual
✍️ Sua vez — Escreva seu código
javascript