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 elementos semânticos fornecem ao documento uma estrutura significativa, outros (o mecanismo de pesquisa, tecnologias assistivas, um futuro mantenedor, um novo membro da equipe) vão entender o esboço 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 enquanto você programa significa que não será necessário refatorar ou comentar em seu HTML. Se você pensar em usar o elemento certo para a vaga, na maioria das vezes escolherá o elemento certo para a tarefa. Caso contrário, provavelmente não o fará.

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 diferentes elementos, você geralmente escolherá o elemento certo sem muito esforço adicional.

Site <header>

Vamos criar um cabeçalho de site. Você vai começar com a marcação não semântica e avançar até chegar a uma boa solução para aprender os benefícios da seção HTML e dos elementos de título.

Se você não pensou muito na semântica do nosso cabeçalho, use 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 (quase) qualquer marcação parecer correta. No entanto, o uso da <div> não semântica para tudo cria um 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.

É possível 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 usar seletores de atributos no CSS, mas ainda adiciona comentários para identificar qual <div> cada </div> fecha.

Se você conhece HTML, tudo o que você precisa fazer é pensar sobre a finalidade do conteúdo. Em seguida, é possível 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 pontos de referência semânticos: <header> e <nav>.

Este é o cabeçalho principal. O elemento <header> nem sempre é um ponto de referência. Ele tem uma semântica diferente dependendo de onde está aninhado. Quando o <header> está no nível superior, é o site banner, uma função de ponto de referência 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 para essa seção e não é um ponto de referência.

O elemento <nav> identifica o conteúdo como navegação. Como esse <nav> está aninhado no cabeçalho do site, é a navegação principal do site. Se ele estiver aninhado em um <article> ou um <section>, a navegação será apenas para essa seção. Usando 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 esta seção consiste em um bloco de navegação importante que ele pode percorrer ou pular.

O uso das tags de fechamento </nav> e </header> elimina a necessidade de comentários para identificar qual elemento cada tag final fechou. Além disso, o uso de tags diferentes para elementos distintos elimina 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. Você não precisa fazer isso ao usar HTML semântico.

Site <footer>

Vamos codificar o rodapé do site.

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

Assim como <header>, a condição do rodapé como um ponto de referência depende de onde ele está aninhado. Quando é o rodapé do site, ele é um ponto de referência e deve conter as informações de rodapé do site que você deseja em cada página, como uma declaração de direitos autorais, dados de contato e links para suas políticas de privacidade e de cookies. O role implícito para o rodapé do site é contentinfo. Caso contrário, o rodapé não terá função implícita e não será um ponto de referência, como mostrado na captura de tela do AOM no Chrome a seguir, que tem um <article> com <header> e <footer> entre <header> e <footer>.

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

Isso não significa que você não deve usar <footer>. Vamos supor que você tenha um blog. O blog tem um rodapé com o 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 nas quais estão aninhados.

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

Os rodapés são onde você encontrará informações de contato, encapsuladas em <address>, o elemento do endereço de contato. Esse é um elemento que não é muito bem nomeado. Ele é usado para incluir as informações de contato de indivíduos ou organizações, não endereços de correspondência 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

Esse módulo começa com <header> e <footer>, porque eles são exclusivos por serem elementos de ponto de referência ou "sectioning" às vezes. Vamos abordar o elemento de seção "tempo integral" discutindo os layouts de página mais comuns:

Um layout com um cabeçalho, duas barras laterais e um rodapé é conhecido como 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, permitindo que os usuários de leitores de tela naveguem com mais facilidade. Aqui, um banner e um contentinfo são fornecidos pelos sites <header> e <footer>. Os novos elementos adicionados aqui incluem <main>, <aside> e <article>. Além disso, <h1> e <nav> usados anteriormente e <section>, que você ainda não usou.

<main>

Há um único elemento <main>. O elemento <main> identifica o conteúdo principal do documento. Deve haver apenas um <main> por página.

<aside>

O <aside> serve para conteúdos relacionados indiretamente ou tangencialmente ao conteúdo principal do documento. Por exemplo, este artigo é sobre HTML. Em uma seção sobre a especificidade do seletor de CSS para os três exemplos de cabeçalho do site (div, papel e semântica), o separador tangencialmente relacionado poderia estar contido em um <aside>. E, como a maioria, o <aside> provavelmente seria apresentado em uma barra lateral ou em uma caixa de destaque. O <aside> também é um ponto de referência, 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. Mas, se você estiver escrevendo um blog, como no segundo exemplo, cada postagem precisa estar em um <article> aninhado em <main>.

Uma <article> representa uma seção de conteúdo completa, ou independente, que é, a princípio, reutilizável de maneira independente. Pense em um artigo como se fosse um artigo de um jornal. Na mídia impressa, uma notícia sobre Jacinda Ardern, primeira-ministra da Nova Zelândia, talvez apareça apenas em uma seção, talvez com notícias mundiais. No site do jornal, esse mesmo artigo pode aparecer na página inicial, na seção de política, na seção de notícias da Oceana ou da Ásia-Pacífico e, dependendo do assunto, 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 independentes genéricas de um documento quando não houver 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ê analisar esta página, toda a parte "cabeçalhos e seções" é a <article>. Esse <article> é dividido em vários <section>s, incluindo site header, site footer e a estrutura do documento. O artigo em si tem um cabeçalho, assim como cada uma das seções.

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

Títulos: <h1>-<h6>

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

Quando um título está aninhado em um banner de documento <header>, ele é o cabeçalho do aplicativo ou site. Quando aninhado em <main>, esteja ou não aninhado em uma <header> no <main>, ele será o cabeçalho da página, não o site inteiro. Quando aninhado em um <article> ou um <section>, ele é o cabeçalho dessa subseção da página.

É recomendável usar os níveis de cabeçalho de forma semelhante aos níveis de cabeçalho em um editor de texto: comece com <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 os níveis de cabeçalho. Confira um bom artigo sobre títulos de seção aqui.

Alguns usuários de leitores de tela acessam os cabeçalhos para entender o conteúdo de uma página. Originalmente, os títulos deviam delinear um documento, assim como o MS Word ou o Google Docs pode produzir um contorno com base nos títulos, mas os navegadores nunca implementaram essa estrutura. Embora os navegadores exibam cabeçalhos aninhados em tamanhos de fonte cada vez menores, como mostra o exemplo a seguir, eles não têm suporte para delinear.

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

Definição da <body> do MLW.com

Esta é a descrição do conteúdo visível do site do workshop de machine learning:

Como nenhuma parte do conteúdo é um conteúdo completo e independente, <section> é mais apropriado que <article>. Embora cada um tenha um cabeçalho, nenhuma seção merece uma <footer>.

A essa altura, não será necessário informar, mas não use cabeçalhos para deixar o texto em negrito ou grande. Em vez disso, use CSS. Se você quiser enfatizar o texto, também há elementos semânticos para fazer isso. Vamos abordar isso e preencher a maior parte do conteúdo da página à medida que discutimos noções básicas de texto. Depois de nos aprofundarmos nos atributos.

Teste seu conhecimento

Teste seus conhecimentos sobre títulos e seções.