header, nav, main e footer
Uma página cheia de divs com nomes de classe é legível só para quem lê o CSS. As tags semânticas de landmark tornam a estrutura legível para máquinas também.
Estudar esta lição interativa →Até aqui, seria possível montar qualquer página só com <div>, dando nomes de classe como class="cabecalho" ou class="rodape" para organizar visualmente. O problema é que essas classes são só texto para humanos: o navegador, um leitor de tela ou o Google não sabem, com certeza, que uma <div class="cabecalho"> é, de fato, o cabeçalho da página. Para eles, é só mais uma div igual a qualquer outra.
Pense na planta de um prédio comercial. Se todas as portas forem idênticas e sem placa, você só descobre o que tem atrás de cada uma abrindo-a. Agora imagine placas claras: "Recepção", "Elevadores", "Saída de emergência". As tags semânticas de landmark (marco, referência) são essas placas: <header> é a recepção, <nav> é o corredor de acesso, <main> é o salão principal, e <footer> é a saída, com as informações finais.
As quatro regiões mais comuns de uma página, marcadas como placas: header no topo (com a navegação principal dentro), main com o conteúdo central e footer no rodapé.
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. header (com nav dentro), main e footer: as quatro regiões mais comuns de qualquer página.
Praticamente todo site com conteúdo de verdade segue esse esqueleto: <header> com o nome do site (e geralmente o menu, dentro de um <nav>), <main> com o conteúdo específico daquela página, e <footer> com links, direitos autorais e contato. Uma pessoa usando leitor de tela pode pular direto para o <main>, pulando o cabeçalho e o menu, que ela já ouviu em toda outra página do mesmo site, exatamente como um leitor experiente folheia direto até o capítulo que interessa.
Uma página deve ter um único <main>, o conteúdo central e exclusivo daquela página específica (o menu e o rodapé se repetem em todas as páginas de um site, o main não). E nem todo agrupamento de links precisa ser um <nav>: reserve-o para blocos de navegação importantes (o menu principal, o índice de um artigo), não para qualquer lista de links solta no meio de um texto. Pode haver mais de um <nav> na página; nesse caso, dê um nome a cada um com aria-label, como em <nav aria-label="Principal">, para o leitor de tela distingui-los.
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. Adicione header, nav, main e footer nos lugares certos.