Estrutura semântica da página

A maioria das páginas tem mais ou menos a mesma forma: um cabeçalho, um menu, o conteúdo principal e um rodapé. O HTML tem um elemento para cada parte, e os leitores de tela deixam o usuário pular direto para elas.

Da sopa de divs aos pontos de referência

Durante anos, as páginas foram montadas com elementos <div> com nomes de classe como header ou menu. Um <div> é uma caixa genérica sem significado nenhum, então o nome da classe era a única pista, e só quem lia o código conseguia vê-la. Hoje o HTML tem elementos que dizem o que é cada região. Navegadores, buscadores e tecnologias assistivas os entendem, e quem usa leitor de tela pode abrir uma lista dessas regiões, chamadas pontos de referência (landmarks), e pular para a que quiser, do mesmo jeito que quem enxerga bate o olho no layout.

As regiões principais

• <header>: conteúdo de abertura, em geral o nome ou o logo do site e muitas vezes o menu principal. Um artigo também pode ter o seu próprio header.
• <nav>: um bloco com os principais links de navegação, como o menu do site ou um sumário. Nem todo grupo de links precisa de um.
• <main>: o conteúdo exclusivo desta página. Use exatamente um <main> visível por página e não o coloque dentro de header, nav, aside ou footer.
• <article>: uma peça independente que faria sentido sozinha, como um post de blog, uma notícia ou o cartão de um produto.
• <section>: uma parte temática de uma página ou de um artigo, normalmente com o seu próprio título.
• <aside>: conteúdo relacionado ao conteúdo principal, mas separado dele, como uma barra lateral, um quadro de glossário ou links relacionados.
• <footer>: informações de encerramento, como autor, direitos autorais e links de contato.

Esses elementos descrevem significado, não posição. Um <nav> não precisa ficar no topo, e um <aside> não precisa ficar à direita; no celular, o aside costuma ir parar embaixo do conteúdo principal. As posições vêm do CSS. Escolha o elemento perguntando o que o conteúdo é, do mesmo jeito que você escolheu os níveis de título pela estrutura e não pelo tamanho.

article ou section?

A pergunta a fazer é se a peça faria sentido sozinha em outro lugar, por exemplo num leitor de notícias ou compartilhada como link. Se sim, é um <article>. Se só faz sentido como parte de algo maior, como a parte Ingredientes de uma receita, é uma <section>. Os dois normalmente começam com um título. Artigos podem conter seções, e uma seção pode conter artigos, como uma seção Últimos posts com vários cartões de posts.

div e span ainda têm seu lugar

Quando nenhum elemento serve, use <div> para um bloco e <span> para algumas palavras dentro de uma linha. Eles são úteis como ganchos para o CSS, por exemplo um <div class="cards"> que organiza cartões numa grade. A regra é procurar primeiro um elemento com significado e só recorrer a um genérico quando nada descreve o conteúdo. Uma página feita só de divs funciona, mas esconde a estrutura de todos que não olham o código.

Um teste rápido: abra a página com o CSS desligado, ou leia o esquema de títulos e pontos de referência que uma extensão do navegador mostra. Se a página ainda se lê numa ordem coerente, com cabeçalho, menu, conteúdo principal e rodapé claros, a estrutura está cumprindo o seu papel.

Elementos nativos antes do ARIA

Você pode encontrar o atributo role, parte de um padrão do W3C chamado WAI-ARIA, escrito como <div role="navigation">. Ele dá a um elemento genérico um significado para as tecnologias assistivas. A orientação do W3C sobre o uso de ARIA começa com uma regra simples: se um elemento HTML nativo já tem o significado de que você precisa, use-o. <nav> é mais curto, funciona em todo lugar e não pode ser esquecido num lugar e lembrado em outro. A mesma ideia vale para botões: um <button> de verdade recebe o foco com Tab e é acionado com Enter ou Espaço sem custo nenhum, enquanto um <div> clicável precisa de código extra para fazer o mesmo.