Curso de HTML / Estruturar uma página com elementos semânticos

Os elementos HTML semânticos descrevem a função de cada parte de uma página. Use nav para a navegação principal, main para o conteúdo principal da página e article para um conteúdo autônomo. Esses papéis permanecem significativos mesmo quando o layout visual muda.

O que significa cada elemento de região?

• header apresenta uma página ou uma seção. Pode conter o nome do site, um título ou uma navegação.
• nav reúne os principais links de navegação. Um grupo não precisa de nav simplesmente porque contém links.
• main contém o conteúdo principal único da página. Um documento normalmente tem uma única região visível main.
• article é adequado para um artigo ou narrativa independente. section divide o conteúdo por assunto e geralmente deve ter um título que identifique seu assunto.
• aside contém informações complementares indiretamente relacionadas ao conteúdo principal. footer contém informações de conclusão para uma página ou seção.

Estes elementos por si só não determinam sua disposição na tela. Use aside porque o conteúdo é adicional, não porque você quer uma barra lateral; use CSS para determinar sua posição. Da mesma forma, a marcação semântica sozinha não garante acessibilidade nem melhores classificações nos mecanismos de busca. O conteúdo real, os títulos e a ordem de leitura devem corresponder aos papéis dos elementos.

Criar uma página completa com regiões semânticas

O exemplo a seguir é um documento HTML completo. Os links de navegação da página apontam para regiões no mesmo arquivo, então você pode salvar e executar o exemplo sem criar outra página. Escolha os níveis de títulos após dividir as regiões seguindo Títulos e Parágrafos.

<!doctype html>

<html lang="pt-BR">

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Plantas de primavera | Pequeno Jardim</title>

</head>

<body>

  <header>

    <p>Pequeno Jardim</p>

    <nav aria-label="Nesta página">

      <a href="#article">Ler o artigo</a>

      <a href="#sunlight">Necessidades de luz solar</a>

    </nav>

  </header>



  <main>

    <article id="article">

      <h1>Plantas para cultivar na primavera</h1>

      <section id="sunlight">

        <h2>Necessidades de luz solar</h2>

        <p>As necessidades de luz variam de acordo com as plantas.</p>

      </section>

    </article>

    <aside>

      <p>Verifique a data das últimas geadas em sua região antes de plantar.</p>

    </aside>

  </main>



  <footer>

    <p>Guia Pequeno Jardim</p>

  </footer>

</body>

</html>

Salve o código com o nome index.html e abra-o em um navegador. O nome do site, a navegação, o artigo, a nota complementar e o rodapé aparecem aproximadamente de cima para baixo. Selecionar “Necessidades de luz solar” permite ir para a seção porque href="#sunlight" corresponde a id="sunlight". Se você quiser que a nota fique ao lado do artigo, adicione um layout CSS em vez de mudar o significado do HTML. O h1 no código é o título do documento de exemplo, não outro título neste tutorial.

Quando você deve usar section ou article?

Um artigo de blog pode se sustentar por si próprio e constitui um bom candidato para article. Neste artigo, tópicos como « O que você precisa » e « Etapas » podem cada um formar um section. Um contêiner usado apenas para uma borda ou uma cor de fundo não precisa de um papel semântico; um div pode ser mais apropriado. Você também não precisa encapsular cada título e parágrafo em um section quando sua hierarquia já está clara. Para um contêiner que serve apenas para agrupar elementos para estilo, use os critérios de Quando usar div e span.

header e footer podem pertencer a um article individual assim como à página inteira. Uma lista de artigos de notícias que podem ser compreendidos independentemente pode conter um article por artigo. Decida com base no papel do conteúdo, e não no nome do elemento ou em sua aparência padrão. Consulte a referência de elementos HTML no MDN para as definições dos elementos.

Escolher elementos para o mesmo conteúdo

Quando uma página contém tanto a navegação do site quanto a navegação dentro de um artigo, diferencie as duas áreas de navegação com nomes significativos. Este fragmento identifica seus diferentes objetivos.

<nav aria-label="Navegação do site">
  <a href="index.html">Início</a>
  <a href="about.html">Apresentação</a>
</nav>
<nav aria-label="Seções deste artigo">
  <a href="#sunlight">Luz</a>
  <a href="#watering">Rega</a>
</nav>

Verifique se os nomes dos arquivos e os identificadores dos fragmentos correspondem aos destinos reais. aria-label fornece um nome acessível para a área de navegação; ele não cria automaticamente um cabeçalho de menu visível.

As diretrizes WAI do W3C sobre rotulagem de regiões explicam como os nomes distinguem regiões com funções semelhantes.

Verifique a estrutura do documento

Leia os títulos, o menu e o conteúdo principal na ordem do documento, mesmo que sua posição na tela pareça correta. Evite múltiplos main visíveis, contêineres section sem título e sem assunto real, e aside usados apenas para forçar uma posição lateral. Uma estrutura significativa deve sempre fazer sentido antes de adicionar CSS.