Semântica no HTML por debaixo dos panos
Tags: html, braziliandevs, a11y
Published: 2023-06-14 02:20:46

> **Vocês sabem explicar o que é semântica no HTML?**
> Eu sinto que a minha vida inteira as pessoas resumiram a "Usar as tags de HTML de forma correta", "ajuda com acessibilidade e SEO", mas nada disso responde a pergunta completamente, responde?

&nbsp;

Perguntei no Twitter como as pessoas explicariam o que é semântica e, salvo algumas pessoas que tinham uma experiência muito forte em acessibilidade, as respostas foram em sua maioria muito parecidas com o que eu ouvi por toda a minha carreira


![Tweet dizendo: Entendo que HTML semântico seja usar tags que tragam em si um significado além do genérico da div, por exemplo. Pra quem? Aparentemente para robôs. Porque pra seres humanos acho pouco útil.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a50227dy3kvr4qhoyzbz.png)

<br />

------------

<br />

## Semântica e significado

O que é significado pra gente? O que é significado pros robôs?

O que entendemos como significado em semântica é construído por 3 informações, que pra simplificar vou resumir em **Name, Role e State**.


### Name
São os dados de nomenclatura do elemento - existem várias propriedades que aderem nome à elementos, como `title`, `name`, o conteúdo e as _aria-properties_, etc. Existe uma ordem pré-definida que calcula o nome de acordo com a prioridade delas.


![Print do Accessibility Object Model de um button no Chrome, seu nome é "Cancelar Pedido" e esse nome foi definido pelo conteúdo do botão. Caso ele tivesse uma label, aria-label ou aria-labledby, eles teriam, respectivamente, maior prioridade de nomear o botão](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gt6huto9o3dkh57k954h.png)

&nbsp;

👤 **Para humanos**
Nome e descrição são parte do conteúdo verbalizado pelos leitores de tela. No caso do botão, diria:

"`<role>` Botão. `<name>` Cancelar pedido"

![Botão escrito "Cancelar Pedido". Site do ClickBus](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i4lcfui68q71mimkcfwt.png)


🤖 **Para máquinas**
Sem o `name`, o elemento é considerado elemento não palpável [(palpable content)](https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories) e sua leitura pode ser ignorada.

&nbsp;

### Role

Descreve o comportamento esperado do elemento pro usuário, crawlers e tecnologias assistivas.
Esses elementos não dão só contexto, mas habilitam APIs que darão suporte pra todo tipo de usuário interagirem com as funcionalidades definidas de maneira equivalente.

A propriedade [`role="alert"`](https://developer.mozilla.org/pt-BR/docs/Web/Accessibility/ARIA/Roles/alert_role) não adere apenas "contexto", ela:

- Cria uma live-region - um observer de mutações do elemento filho que emite um evento pro user-agent
- Quando há um erro (ex: erro de formulário), a mensagem é injetada dinamicamente no elemento, emitindo um evento
- O evento é capturado por tecnologias assistivas e anunciado ao usuário

Tudo isso sem javascript! (só a parte de injetar a mensagem dinamicamente). Essa `role` habilita uma API nativa que garante que o usuário tenha acesso ao erro de uma forma além da puramente visual (letrinhas vermelhas com esse símbolo ❌).

👤 **Para humanos**
Atribui a descrição semântica do elemento.


🤖 **Para máquinas**
Habilita parte da API necessária pra fornecer a experiência esperada.

&nbsp;

### State

Se refere à API do DOM e aos métodos, getters, setters e defaults do elemento.

O atributo `disabled` não muda apenas a aparência do elemento, mas altera uma série de informações no objeto do mesmo:

- Elemento interativo se torna não navegável
- Não clicável
- Não emite eventos
- Não é lido por tecnologias assistivas

E esse estado é propagado recursivamente pra todos os filhos desse elemento.

Usando um botão de exemplo - mesmo elemento, diferentes atributos, métodos e comportamentos mudando apenas o contexto:

![Um botão e um botão dentro de um form. Ambos tem a mesma classe no DOM, mas estar dentro de um form faz com que esse botão seja do tipo submit e ganhe métodos de envio de conteúdo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eg3t7cq8n3zjxwi61e74.png)

&nbsp;

Uma vez no contexto de formulário, métodos relacionados à envio de formulário e até a criação de um `FormData` são habilitados pela adição do `type="submit"`implícito.

<figure>

<img alt="Implementação dos métodos do button no Chrome, código retirado da engine Blink" src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zfgf0fv2uoeorsli3w80.png"/>

<figcaption>
Código extraído da engine de renderização do Chrome, a <a href="https://chromium.googlesource.com/chromium/blink/+/refs/heads/main/Source/core/html/HTMLButtonElement.cpp">Blink (link para o código fonte)</a>.
</figcaption>
</figure>

&nbsp;

👤 **Para humanos**
Disponibiliza o comportamento esperado pra diversos tipos de interação do usuário.


🤖 **Para máquinas**
Fornece diversas formas de interação pra diferentes user-agents e tecnologias assistivas.

&nbsp;


> **E sobre SEO e conteúdo?**
> Semântica ajuda nisso também?


![Tweet dizendo: Semântica quer dizer ajudar a máquina a interpretar o conteúdo, direcionar contexto, prioridade de informação, etc. HTML semântico seria se um robô pudesse ler sua página web sabendo onde tá o conteúdo, nesse conteúdo sobre o que está falando, o que não é importante... Etc](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5jkueog1ldete8kpfvu4.png)



<br />

------------

<br />

## Semântica e conteúdo

Se a gente pensar em semântica como aderir sentido a algo, a ordem, prioridade e relação do conteúdo mudam drasticamente o significado do conteúdo.

A criação dessa hierarquia é papel de outra API - a de outlines.

Outlines criam seções de conteúdo, tal como índices de livros ou trabalhos de faculdade.

As numerações que definem a hierarquia do conteúdo dos _headings_ (h1 a h6) funcionam de forma parecida aos numerais de índices que demonstram cabeçalhos, títulos e subtítulos.

![Um sumário de um trabalho na norma ABNT com cabeçalhos, títulos e subtítulos](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vamtx3xxm1m8q6p6bqde.png)

&nbsp;

👤 **Para humanos**
Tamanho de fonte e hierarquia visual demonstram a ordem de leitura. Tecnologias assistivas formam índices usando a hierarquia dos _headings_.

🤖 **Para máquinas**
A hierarquia de _outlines_ são também um mapa de hierarquia de conteúdo pra _crawlers_.

&nbsp;

E não só headings tem esse papel, `<section>`, `<aside>`, `<article>` e `<nav>` são elementos do tipo [_sectioning content_](https://www.w3.org/TR/2010/WD-html5-20101019/content-models.html) e criam um tipo de outline. Esses elementos podem receber `<header>` e `<footer>` cujo conteúdo vai estar associado à sua seção.

Entendem agora como isso tem super a ver com acessibilidade? Acessibilidade não é um favor, tampouco algo deslocado do HTML, CSS e JS, mas usar as APIs que essas tecnologias oferecem pra fornecer uma experiência equivalente a todos usuários.

Nas palavras da [Sandyara Peres](https://sandyaraperes.com.br), especialista em acessibilidade, semântica é:

{% tweet 1667237362865152012 %}


Semântica não é "usar as tags certas", pois tags por si só não cobrem todo tipo de componente e casos de uso que a web pode oferecer.

Semântica é uma coletânea de estados, atributos e métodos que viabilizam diversas formas de se acessar e entender conteúdo.


<br/>

---------

<br/>

## Pra fechar

Ninguém **nunca** me ensinou semântica dessa forma, sempre pareceu algo meramente moralista, como "escrever HTML certo", "usar as _tags_ certas"

Talvez agora possamos ver como:

> "Habilitar as ferramentas adequadas pra interpretação do conteúdo"

<br />

O HTML como linguagem de marcação, não deve ser interpretado como apenas um veículo pra implementação de design (CSS) e funcionalidade (JS).

Design e funcionalidade são apenas estrelas que orbitam ao redor do conteúdo. Valorizar o conteúdo é valorizar os usuários.