Títulos e seções

Na última seção, você aprendeu como, mesmo que não saiba o significado das palavras em uma página, quando os elementos semânticos fornecem ao documento uma estrutura significativa, outros (o mecanismo de pesquisa, as tecnologias assistivas, um futuro mantenedor, um novo membro da equipe) vão entender o contorno do documento.

Nesta seção, você vai descobrir a estrutura do documento, recapitular os elementos de seção da seção anterior e marcar o contorno do aplicativo.

Escolher os elementos certos para o trabalho ao programar significa que você não precisará refatorar ou comentar seu HTML. Se você pensar em usar o elemento certo para o trabalho, na maioria das vezes, vai escolher o elemento certo. Caso contrário, provavelmente não.

Agora que você entende a semântica de marcação e sabe por que escolher o elemento certo é importante, depois de aprender sobre todos os elementos diferentes, você geralmente vai escolher o elemento certo sem muito esforço adicional.

Site <header>

Primeiro, crie um cabeçalho do site. Comece com a marcação não semântica e trabalhe até encontrar uma boa solução para aprender os benefícios dos elementos de seção e cabeçalho HTML ao longo do caminho.

Se você não pensar muito na semântica do cabeçalho, poderá usar um código como este:

<!-- start header -->
<div id="pageHeader">
  <div id="title">Machine Learning Workshop</div>
  <!-- navigation -->
  <div id="navigation">
    <a href="#reg">Register</a>
    <a href="#about">About</a>
    <a href="#teachers">Instructors</a>
    <a href="#feedback">Testimonials</a>
  </div>
  <!-- end navigation bar -->
</div>
<!-- end of header -->

O CSS pode fazer com que (quase) qualquer marcação pareça certa. Mas usar o <div> não semântico para tudo cria trabalho extra. Para segmentar vários <div>s com CSS, você acaba usando IDs ou classes para identificar o conteúdo. O código também inclui um comentário para cada </div> de fechamento para indicar qual tag de abertura cada </div> fechou.

Embora os atributos id e class forneçam hooks para estilo e JavaScript, eles não adicionam valor semântico para o leitor de tela e (na maior parte) para os mecanismos de pesquisa.

Você pode incluir atributos role para fornecer semântica e criar um bom modelo de objeto de acessibilidade (AOM, na sigla em inglês) para leitores de tela:

<!-- start header -->
<div role="banner">
  <div role="heading" aria-level="1">Machine Learning Workshop</div>
  <div role="navigation">
    <a href="#reg">Register</a>
    <a href="#about">About</a>
    <a href="#teachers">Instructors</a>
    <a href="#feedback">Testimonials</a>
  </div>
  <!-- end navigation bar -->
</div>
<!-- end of header -->

Isso pelo menos fornece semântica e permite o uso de seletores de atributos no CSS, mas ainda adiciona comentários para identificar qual <div> cada </div> fecha.

Se você conhece HTML, tudo o que precisa fazer é pensar na finalidade do conteúdo. Em seguida, você pode escrever esse código semanticamente sem usar role e sem precisar comentar as tags de fechamento:

<header>
  <h1>Machine Learning Workshop</h1>
  <nav>
    <a href="#reg">Register</a>
    <a href="#about">About</a>
    <a href="#teachers">Instructors</a>
    <a href="#feedback">Testimonials</a>
  </nav>
</header>

Esse código usa dois marcos semânticos: <header> e <nav>.

Este é o cabeçalho principal. O elemento <header> nem sempre é um marco. Ele tem semânticas diferentes dependendo de onde está aninhado. Quando o <header> é de nível superior, ele é o banner do site, um papel de marco, que você pode ter notado no bloco de código role. Quando um <header> está aninhado em <main>, <article> ou <section>, ele apenas o identifica como o cabeçalho dessa seção e não é um marco.

O elemento <nav> identifica o conteúdo como navegação. Como esse <nav> está aninhado no cabeçalho do site, ele é a navegação principal do site. Se ele estivesse aninhado em um <article> ou <section>, seria uma navegação interna apenas para essa seção. Ao usar elementos semânticos, você criou um modelo de objeto de acessibilidade significativo, ou AOM. O AOM permite que o leitor de tela informe ao usuário que essa seção consiste em um bloco de navegação principal que ele pode navegar ou pular.

O uso de tags de fechamento </nav> e </header> remove a necessidade de comentários para identificar qual elemento cada tag final fechou. Além disso, o uso de tags diferentes para elementos diferentes remove a necessidade de hooks id e class. Os seletores de CSS podem ter baixa especificidade. É possível segmentar os links com header nav a sem se preocupar com conflitos.

Você escreveu um cabeçalho com muito pouco HTML e sem classes ou IDs. Ao usar HTML semântico, você não precisa.

Rodapé do site <footer>

Codifique o rodapé do site.

<footer>
  <p>&copy;2022 Machine Learning Workshop, LLC. All rights reserved.</p>
</footer>

Semelhante ao <header>, se o rodapé é um marco depende de onde ele está aninhado. Quando é o rodapé do site, ele é um marco e precisa conter as informações do rodapé do site que você quer em todas as páginas, como uma declaração de direitos autorais, informações de contato e links para suas políticas de privacidade e cookies. O role implícito para o rodapé do site é contentinfo. Caso contrário, o rodapé não tem um papel implícito e não é um marco, conforme mostrado na captura de tela a seguir do AOM no Chrome (que tem um <article> com um <header> e <footer> entre o <header> e <footer>).

Nesta captura de tela, há dois rodapés: um em um <article> e um de nível superior. O rodapé de nível superior é um marco com o papel implícito de contentinfo. O outro rodapé não é um marco. O Chrome o mostra como FooterAsNonLandmark; o Firefox o mostra como section.

Isso não significa que você não deva usar <footer>. Por exemplo, se você tiver um blog, poderá ter um rodapé do site com um papel contentinfo implícito. Cada postagem do blog também pode ter um <footer>. Na página de destino principal do seu blog, o navegador, o mecanismo de pesquisa e o leitor de tela sabem que o rodapé principal é o rodapé de nível superior e que todos os outros rodapés estão relacionados às postagens em que estão aninhados.

Quando um <footer> é um descendente de um <article>, <aside>, <main>, <nav> ou <section>, ele não é um marco. Se a postagem aparecer sozinha, dependendo da marcação, esse rodapé poderá ser promovido.

Os rodapés geralmente são onde você encontra informações de contato, envolvidas em <address>, o elemento de endereço de contato. Esse é um elemento que não tem um nome muito bom. Ele é usado para incluir as informações de contato de indivíduos ou organizações, não endereços postais físicos.

<footer>
  <p>&copy;2022 Machine Learning Workshop, LLC. All rights reserved.</p>
  <address>Instructors: <a href="/hal.html">Hal</a> and <a href="/eve.html">Eve</a></address>
</footer>

Estrutura do documento

Este módulo começa com o <header> e o <footer>, já que eles são apenas às vezes um marco (ou elementos de "seção"). Há vários elementos de seção mais frequentes.

Um layout com um cabeçalho, duas barras laterais e um rodapé é conhecido como o layout do Santo Graal. Há muitas maneiras de marcar esse conteúdo, incluindo:

<body>
  <header>Header</header>
  <nav>Nav</nav>
  <main>Content</main>
  <aside>Aside</aside>
  <footer>Footer</footer>
</body>

Se você estiver criando um blog, poderá ter uma série de artigos em <main>:

<body>
  <header>Header</header>
  <nav>Nav</nav>
  <main>
    <article>First post</article>
    <article>Second post</article>
  </main>
  <aside>Aside</aside>
  <footer>Footer</footer>
</body>

Ao empregar elementos semânticos, os navegadores podem criar árvores de acessibilidade significativas. Isso ajuda a melhorar a navegação do leitor de tela. Aqui, um banner e contentinfo são fornecidos por um <header> e <footer> do site. Os novos elementos adicionados aqui incluem <main>, <aside> e <article>, além de <h1> e <nav> que você usou anteriormente, e <section>, que ainda não usou.

<main>

Há um único <main> elemento de marco. O elemento <main> identifica o conteúdo principal do documento. Só pode haver um <main> por página.

<aside>

O <aside> é para conteúdo indiretamente ou tangencialmente relacionado ao conteúdo principal do documento. Por exemplo, este documento é sobre HTML. Para uma seção sobre a especificidade do seletor de CSS para os três exemplos de cabeçalho do site (div, papel e semântico), o aside tangencialmente relacionado pode ser contido em um <aside>. Como a maioria, o <aside> provavelmente seria apresentado em uma barra lateral ou em uma caixa de destaque. O <aside> também é um marco, com o papel implícito de complementary.

<article>

Aninhados em <main>, adicionamos dois elementos <article>. Isso não era necessário no primeiro exemplo, quando o conteúdo principal era apenas uma palavra ou, no mundo real, uma única seção de conteúdo. No entanto, se você estiver escrevendo um blog, como no nosso segundo exemplo, cada postagem precisa estar em um <article> aninhado em <main>.

Um <article> representa uma seção completa ou independente de conteúdo que, em princípio, é reutilizável de forma independente. Pense em um artigo como um artigo de jornal. Na impressão, um artigo de notícias sobre Jacinda Ardern, primeira-ministra da Nova Zelândia, pode aparecer apenas em uma seção, talvez notícias mundiais. No site do jornal, o mesmo artigo de notícias pode aparecer na página inicial, na seção de política, na seção de notícias da Oceania ou da Ásia-Pacífico e, dependendo do tema das notícias, nas seções de esportes, estilo de vida ou tecnologia, talvez. O artigo também pode aparecer em outros sites, como Pocket ou Yahoo News!

<section>

O elemento <section> é usado para abranger seções genéricas independentes de um documento quando não há um elemento semântico mais específico para usar. As seções precisam ter um cabeçalho, com pouquíssimas exceções.

Voltando ao exemplo de Jacinda Ardern, na página inicial do jornal, o banner incluiria o nome do jornal, seguido por um único <main>, dividido em vários <section>s, cada um com um cabeçalho, como "Notícias mundiais" e "Política". Em cada seção, você encontrará uma série de <article>s. Em cada <article>, você também pode encontrar um ou mais elementos <section>. Se você olhar para esta página, toda a parte de "cabeçalhos e seções" é o <article>. Esse <article> é dividido em várias <section>s, incluindo site header, site footer e estrutura do documento. O artigo em si tem um cabeçalho, assim como cada uma das seções.

Um <section> não é um marco, a menos que tenha um nome acessível. Se tiver um nome acessível, o papel implícito será region. Os papéis de marco precisam ser usados com moderação para identificar seções gerais maiores do documento. O uso de muitos papéis de marco pode criar "ruído" nos leitores de tela, dificultando a compreensão do layout geral da página. Se o <main> contiver duas ou três subseções importantes, incluindo um nome acessível para cada <section> poderá ser útil.

Cabeçalhos: <h1>-<h6>

Há seis elementos de cabeçalho de seção: <h1>, <h2>, <h3>, <h4>, <h5> e <h6>. Cada um representa um dos seis níveis de cabeçalhos de seção, com <h1> sendo o nível de seção mais alto ou mais importante e <h6> o mais baixo.

Quando um cabeçalho está aninhado em um banner de documento <header>, ele é o cabeçalho do aplicativo ou site. Quando aninhado em <main>, seja ou não aninhado em um <header> em <main>, ele é o cabeçalho dessa página, não de todo o site. Quando aninhado em um <article> ou <section>, ele é o cabeçalho dessa subseção da página.

Recomendamos usar níveis de cabeçalho de maneira semelhante aos níveis de cabeçalho em um editor de texto: começando com um <h1> como o cabeçalho principal, com <h2> como cabeçalhos para subseções e <h3> se essas subseções tiverem seções. Evite pular níveis de cabeçalho. Há um bom artigo sobre cabeçalhos de seção aqui.

Alguns usuários de leitores de tela acessam cabeçalhos para entender o conteúdo de uma página. Originalmente, os cabeçalhos deveriam descrever um documento, assim como o MS Word ou o Google Docs podem produzir um contorno com base em cabeçalhos, mas os navegadores nunca implementaram essa estrutura. Embora os navegadores mostrem cabeçalhos aninhados em tamanhos de fonte cada vez menores, conforme mostrado no exemplo a seguir, eles não oferecem suporte à descrição.

Agora você tem conhecimento suficiente para descrever o MachineLearningWorkshop.com:

Descrevendo o <body> do MLW.com

Este é o contorno do conteúdo visível do site do workshop de aprendizado de máquina:

Como nenhum conteúdo é independente e completo, <section> é mais adequado do que <article>. Embora cada um tenha um cabeçalho, nenhuma seção é digna de um <footer>.

A esta altura, já é óbvio, mas não use cabeçalhos para deixar o texto em negrito ou grande. Use CSS. Se você quiser enfatizar o texto, também há elementos semânticos para isso. Vamos abordar isso e preencher a maior parte do conteúdo da página à medida que discutimos os conceitos básicos de texto, depois de analisar os atributos.

Teste seu conhecimento

Teste seu conhecimento de cabeçalhos e seções.