Tags semânticas descrevem o significado do conteúdo para o navegador e para os desenvolvedores, melhorando a acessibilidade e o SEO (otimização para motores de busca).
<header>: Define o cabeçalho da página ou de uma seção. Geralmente contém o logo, título
principal e navegação.<nav>: Define um bloco de links de navegação.<main>: Define o conteúdo principal e único da página. Só deve existir um por página.
<footer>: Define o rodapé da página ou de uma seção. Geralmente contém informações de
copyright, links úteis e contatos.<section>: Agrupa conteúdos relacionados, como um capítulo de um livro. Geralmente possui
um título (<h1>-<h6>).<article>: Define um conteúdo independente e auto-contido, que poderia ser distribuído
separadamente (ex: um post de blog, um card de produto).<aside>: Define um conteúdo complementar ou lateral ao conteúdo principal (ex: uma barra
lateral com links relacionados, biografia do autor).<figure> e <figcaption>: Agrupam uma mídia (imagem, diagrama, código)
e sua legenda, respectivamente.<figure> e <figcaption>Use estas tags para associar semanticamente uma imagem ou outro conteúdo de mídia a uma legenda.