HTML semântico

Com mais de 100 elementos HTML e a capacidade de criar elementos personalizados, há infinitas maneiras de marcar seu conteúdo. mas algumas são melhores que outras, especialmente semanticamente.

Semântica significa "relacionado ao significado". Escrever HTML semântico significa usar elementos HTML para estruturar seu conteúdo com base no significado de cada elemento, não em sua aparência.

Esta série ainda não abordou muitos elementos HTML, mas mesmo sem conhecer HTML, os dois snippets de código a seguir mostram como a marcação semântica pode dar contexto ao conteúdo. Ambos usam uma contagem de palavras em vez de ipsum lorem para poupar um pouco de rolagem. Use sua imaginação para expandir "trinta palavras" em 30 palavras:

O primeiro snippet de código usa <div> e <span>, dois elementos sem valor semântico.

<div>
  <span>Three words</span>
  <div>
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
  </div>
</div>
<div>
  <div>
    <div>five words</div>
  </div>
  <div>
    <div>three words</div>
    <div>forty-six words</div>
    <div>forty-four words</div>
  </div>
  <div>
    <div>seven words</div>
    <div>sixty-eight words</div>
    <div>forty-four words</div>
  </div>
</div>
<div>
   <span>five words</span>
</div>

Você tem uma noção de como essas palavras se expandem? Na verdade, não.

Vamos reescrever o código com elementos semânticos:

<header>
  <h1>Three words</h1>
  <nav>
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
  </nav>
</header>
<main>
  <header>
    <h1>five words</h1>
  </header>
  <section>
    <h2>three words</h2>
    <p>forty-six words</p>
    <p>forty-four words</p>
  </section>
  <section>
    <h2>seven words</h2>
    <p>sixty-eight words</p>
    <p>forty-four words</p>
  </section>
</main>
<footer>
  <p>five words</p>
</footer>

Qual bloco de código transmite um significado? Usando apenas os elementos não semânticos de <div> e <span>, não é possível dizer o que o conteúdo do primeiro bloco de código representa. O segundo exemplo de código, com elementos semânticos, fornece contexto suficiente para que um não codificador decifre a finalidade e o significado sem ter encontrado uma tag HTML. Ele definitivamente oferece contexto suficiente para que o desenvolvedor entenda o contorno da página, mesmo que não entenda o conteúdo, como o que está em um idioma estrangeiro.

No segundo bloco de código, podemos entender a arquitetura mesmo sem entender o conteúdo, porque os elementos semânticos fornecem significado e estrutura. O primeiro cabeçalho é o banner do site, e é provável que <h1> seja o nome do site. O rodapé é o rodapé do site: as cinco palavras podem ser uma declaração de direitos autorais ou endereço comercial.

A marcação semântica não serve apenas para tornar a marcação mais fácil para os desenvolvedores lerem. é mais importante para ajudar as ferramentas automatizadas a decifrar a marcação. As ferramentas para desenvolvedores também demonstram como os elementos semânticos fornecem uma estrutura legível por máquina.

Modelo de objeto de acessibilidade (AOM, na sigla em inglês)

À medida que o navegador analisa o conteúdo recebido, ele cria o Modelo de objeto de documentos (DOM) e o Modelo de objeto CSS (CSSOM). Em seguida, ele também cria uma árvore de acessibilidade. Os dispositivos assistivos, como leitores de tela, usam a AOM para analisar e interpretar o conteúdo. O DOM é uma árvore de todos os nós do documento. A AOM é como uma versão semântica do DOM.

Vamos comparar como essas duas estruturas de documento são renderizadas no painel de acessibilidade do Firefox:

Na Figura 2, há quatro papéis de ponto de referência no segundo bloco de código. Ele usa pontos de referência semânticos chamados <header>, <main>, <footer> e <nav> para "navegação". Os pontos de referência fornecem estrutura ao conteúdo da Web e garantem que seções importantes de conteúdo possam ser acessadas pelo teclado para usuários de leitores de tela.

<header> e <footer> são pontos de referência, com os papéis de banner e contentinfo, respectivamente, quando não estão aninhados em outros pontos de referência. A AOM do Chrome mostra isso da seguinte forma:

Analisando as ferramentas para desenvolvedores do Chrome, você vai notar uma diferença significativa entre o modelo de objeto de acessibilidade usado e quando não usa elementos semânticos.

É bastante claro que o uso de elementos semânticos ajuda a acessibilidade, e o uso de elementos não semânticos reduz a acessibilidade. O HTML é normalmente acessível por padrão. Nosso trabalho como desenvolvedores é proteger a natureza acessível padrão do HTML e garantir que possamos maximizar a acessibilidade para nossos usuários. É possível inspecionar a AOM nas ferramentas para desenvolvedores.

O atributo role

O atributo role descreve o papel de um elemento no contexto do documento. O role é um atributo global, ou seja, é válido em todos os elementos, definido pela especificação ARIA em vez da especificação HTML WhatWG, em que quase todo o restante desta série é definido.

Cada elemento semântico tem um papel implícito, alguns dependendo do contexto. Como vimos na captura de tela das ferramentas para desenvolvedores de acessibilidade do Firefox, os <header>, <main>, <footer> e <nav> de nível superior eram todos pontos de referência, enquanto o <header> aninhado em <main> era uma seção. A captura de tela do Chrome lista esses elementos Funções ARIA: <main> é main, <nav> é navigation e <footer>, como era o rodapé do documento, é contentinfo. Quando <header> é o cabeçalho do documento, o papel padrão é banner, que define a seção como o cabeçalho global do site. Quando uma <header> ou uma <footer> está aninhada em um elemento de seção, ela não é um papel de ponto de referência. Ambas as ferramentas para desenvolvedores capturas de tela mostram isso.

Os nomes dos papéis dos elementos são importantes na criação do AOM. A semântica de um elemento, ou "função", é importante para as tecnologias assistivas e, em alguns casos, para os mecanismos de pesquisa. Os usuários de tecnologias adaptativas dependem da semântica para navegar e entender o significado do conteúdo. A função do elemento permite que um usuário acesse o conteúdo que procura rapidamente e, possivelmente, mais importante, a função informa ao usuário do leitor de tela como interagir com um elemento interativo quando ele tiver foco.

Elementos interativos, como botões, links, intervalos e caixas de seleção, têm funções implícitas, são adicionados automaticamente à sequência de guias do teclado e todos têm suporte padrão esperado à ação do usuário. O papel implícito, ou valor role explícito, informa ao usuário que espera interações do usuário padrão específicas do elemento.

Com o atributo role, é possível atribuir um papel a qualquer elemento, incluindo um papel diferente daquele indicado pela tag. Por exemplo, <button> tem o papel implícito de button. Com role="button", é possível transformar qualquer elemento semanticamente em um botão: <p role="button">Click Me</p>.

A adição de role="button" a um elemento informa aos leitores de tela que o elemento é um botão, mas não muda a aparência nem a funcionalidade dele. O elemento button oferece muitos recursos sem que você precise fazer nada. O elemento button é adicionado automaticamente à sequência de ordenação de guias do documento, o que significa que, por padrão, ele é focalizável pelo teclado. As teclas "Enter" e "Espaço" ativam o botão. Os botões também têm todos os métodos e propriedades fornecidos a eles pela interface HTMLButtonElement. Se você não usar o botão semântico no botão, precisará programar todos esses recursos novamente. É muito mais fácil usar apenas a <button>.

Volte para a captura de tela do AOM do bloco de código não semântico. Você notará que elementos não semânticos não têm funções implícitas. Podemos tornar a versão não semântica semântica atribuindo um papel a cada elemento:

<div role="banner">
  <span role="heading" aria-level="1">Three words</span>
  <div role="navigation">
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
  </div>
</div>

Embora o atributo role possa ser usado para adicionar semântica a qualquer elemento, use elementos com o papel implícito necessário.

Elementos semânticos

Pergunte-se: "Qual elemento representa melhor a função desta seção de marcação?" geralmente resulta na escolha do melhor elemento para o trabalho. O elemento escolhido e, portanto, as tags usadas devem ser apropriados para o conteúdo que você está exibindo, pois as tags têm significado semântico.

O HTML deve ser usado para estruturar o conteúdo, não para definir a aparência dele. A aparência é o domínio do CSS. Embora alguns elementos sejam definidos para aparecer de uma determinada maneira, não use um elemento baseado em como a folha de estilo do user agent faz esse elemento aparecer por padrão. Em vez disso, selecione cada elemento com base no significado e na funcionalidade semânticos do elemento. Codificar o HTML de maneira lógica, semântica e significativa ajuda a garantir que o CSS seja aplicado conforme o esperado.

Escolher os elementos certos para o trabalho enquanto codifica o código significa que você não terá que refatorar ou comentar seu HTML. Se você pensar em usar o elemento certo para o trabalho, provavelmente escolherá o elemento certo para o trabalho. Caso contrário, provavelmente não vai. Quando você entende a semântica de cada elemento e está ciente da importância de escolher o elemento certo, geralmente consegue fazer a escolha certa sem muito esforço adicional.

Em seguida, você vai usar elementos semânticos para criar seu estrutura do documento.

Teste seu conhecimento

Teste seus conhecimentos sobre HTML semântico.