As Principais Tags Semânticas
1. Header - O Cabeçalho
Antes (não-semântico): <div id="header">
Agora (semântico): <header>
Use para: Introdução de página, logotipo, títulos principais,
informações de autor.
2. Nav - Navegação
Antes (não-semântico): <div id="menu">
Agora (semântico): <nav>
Use para: Menus de navegação, links de breadcrumb, índice de conteúdo.
3. Main - Conteúdo Principal
Antes (não-semântico): <div id="conteudo">
Agora (semântico): <main>
Use para: O conteúdo central e principal da página.
Deve haver apenas um por página. Facilita navegação com teclado.
4. Section - Seção Temática
Diferença importante: <section> vs <div>
<section> agrupa conteúdo tematicamente
relacionado e geralmente tem um título. <div>
é apenas um recipiente sem significado semântico.
5. Article - Artigo Independente
Use para: Blog posts, notícias, comentários, qualquer conteúdo
que possa estar independentemente reutilizável.
Neste documento, cada caixa de explicação é um <article>
porque poderia existir separadamente.