Como dividir semanticamente o conteúdo numa página?

A separação semântica do conteúdo é alcançada através do uso de tags HTML5 apropriadas.

Principais tags semânticas:

• <header>: Introdução ou grupo de elementos de navegação ou introdução. Geralmente contém o título do site, navegação, logotipo.
• <nav>: Bloco de links de navegação.
• <main>: Conteúdo principal do documento. Deve ser único na página (não duplicado no rodapé, cabeçalho, barra lateral).
• <article>: Fragmento de conteúdo autossuficiente e independente (artigo, postagem de blog, comentário).
• <section>: Seção separada do documento (capítulo, parágrafo, bloco de conteúdo na página inicial). Deve ter um título (<h1>-<h6>).
• <aside>: Parte do conteúdo relacionada indiretamente ao conteúdo principal (barra lateral, inserção com citação, publicidade).
• <footer>: Rodapé da seção ou documento. Geralmente contém informações sobre o autor, direitos autorais, links para documentos relacionados.
• <figure>: Conteúdo independente (imagem, diagrama, tabela) que pode ser movido fora do fluxo principal do documento sem perder seu significado. Frequentemente usado com <figcaption>.
• <figcaption>: Legenda para o elemento <figure>.
• <mark>: Destaca (marca) o texto que tem um significado ou interesse especial no contexto do texto ao redor.
• <time>: Representa um momento ou intervalo de tempo específico.

O uso de tags semânticas melhora a acessibilidade, SEO e a manutenção do código. Motores de busca e tecnologias assistivas (leitores de tela) compreendem melhor a estrutura da página.