Carregando...
Elementos semânticos em HTML
Depois de div e class/id, o semântico nomeia regiões por significado.
Significado antes das caixas
CSS estiliza qualquer tag; semântica documenta a intenção.
Resposta direta
Landmarks quando o significado cabe. Um main. Não embrulhe o site inteiro num article.
📊 Core landmarks
| Element | Typical meaning |
|---|---|
| header | Introductory or banner content for a page or section |
| nav | Major navigation links |
| main | Dominant unique content of this page |
| article | Independent composition (post, story, card that could stand alone) |
| section | Thematic grouping, usually with a heading |
| aside | Side note related to the surrounding content |
| footer | Closing content for a page or section |
Esqueleto simples
Cabeçalho e links, main com conteúdo único, footer no fecho.
Simple semantic skeleton
html
HTML Code
<body>
<header>
<h1>City Guide</h1>
<nav>
<a href="index.html">Home</a>
<a href="about.html">About</a>
</nav>
</header>
<main>
<h2>Welcome</h2>
<p>Explore the city with clear HTML structure.</p>
</main>
<footer>
<p>All rights reserved.</p>
</footer>
</body>Ler o esqueleto
- header muitas vezes com nav
- um main
- footer fecha
article, section e aside
Dentro de main: peça independente, blocos temáticos, nota lateral.
Article section and aside
html
HTML Code
<main>
<article>
<h2>Weekend markets</h2>
<section>
<h3>Saturday</h3>
<p>Fresh fruit stalls open at 8:00.</p>
</section>
<section>
<h3>Sunday</h3>
<p>Craft vendors join the square.</p>
</section>
</article>
<aside>
<h2>Tip</h2>
<p>Arrive early for the best produce.</p>
</aside>
</main>Ler o segundo demo
- article pode ficar sozinho
- section com título
- aside não é segundo main
Landmark vs div
Papel padrão? landmark. Só wrapper de layout? div.
Prática
- header/nav/main/footer
- história só no main
- um article
- confirmar um único main
Erros fáceis
- vários main
- section sem tema
- landmarks aleatórios
Resumo
- Semântica nomeia significado
- um main
- landmark quando o papel cabe
🧠 Teste Seu Conhecimento
Pronto para Começar
Teste Seu Conhecimento
Desafie-se com este questionário interativo e veja o quão bem você entende o tópico
6
Perguntas
70%
Para Passar
∞
Tempo
∞
Tentativas
📝 Instruções
- Leia cada pergunta cuidadosamente
- Selecione a melhor resposta para cada pergunta
- Você pode refazer o quiz quantas vezes quiser
- Seu progresso será mostrado no topo