Para que servem as tags HTML: conteúdo, semântica e acessibilidade

Quando você abre um arquivo HTML (HyperText Markup Language) pela primeira vez e escreve um texto solto, sem nada em volta, o browser mostra o texto, mas não sabe o que ele é. Não sabe se é um título, um parágrafo ou um link. É para isso que existem as tags, e entender o que são tags HTML é o primeiro passo para escrever qualquer página. Elas inserem o conteúdo, dizem o que cada pedaço significa e deixam o CSS e o JavaScript encontrarem o que você quer mudar.

O que são tags HTML

O que são as tags? As tags são etiquetas que marcam o conteúdo. A tag marca um trecho do conteúdo e diz ao browser o que ele é. Um documento HTML inteiro é formado por várias tags diferentes, cada uma marcando uma parte da página.

O exemplo mais simples para entender é o link, que no HTML é a tag a:

<a href="https://google.com">Google</a>
<!-- aqui o exemplo não funciona, pois você precisa criar o arquivo na sua máquina -->

O resultado é um link azul e sublinhado, que é o estilo padrão de link no browser. Com esse código num index.html aberto no browser, o clique leva para o Google. Parece pouco, mas foi exatamente para isso que a web foi criada: ligar um documento científico a outro. Esse é o seu primeiro link.

Abertura, conteúdo e fechamento

Toda tag como essa tem três partes. A abertura começa com o sinal de menor (<), vem o nome da tag (a) e termina com o sinal de maior (>). Depois vem o conteúdo, que é o que aparece para o usuário na tela, no caso a palavra “Google”. Por último vem o fechamento, que é a mesma tag pura, sem atributo e sem nada, só com uma barra antes do nome: </a>.

Se você usa o VS Code, ele já cria a tag de fechamento sozinho quando você termina de digitar a abertura.

Essa regra de abrir e fechar não vale para toda tag, porque algumas, como a de imagem (<img>), são uma tag única e não envolvem conteúdo nenhum. Esses elementos se chamam void ou vazios.

Atributos: a informação que não aparece na tela

Se você escrever só <a>Google</a> e abrir no browser, a palavra aparece, mas não é um link de verdade e clicar nela não faz nada. Falta dizer para onde ele vai, e quem diz isso é o atributo.

O atributo é uma informação extra que você passa para o browser dentro da tag de abertura. Uma tag pode ter atributo ou não. No link, o atributo é o href, que guarda o endereço de destino. A escrita é sempre a mesma: o nome do atributo, o sinal de igual e o valor entre aspas, como em href="https://google.com". Coloque sempre as aspas, porque sem elas um valor com espaço quebra a marcação.

O valor do atributo não aparece na página. O conteúdo que fica entre a abertura e o fechamento é mostrado para o usuário, mas o valor do href fica só no código. Dá para ver esse endereço inspecionando o elemento no browser, mas ele não está escrito na tela.

Maiúsculas e minúsculas nas tags HTML

Em programação existem códigos case sensitive e case insensitive. Case sensitive significa que a mesma palavra escrita com maiúscula é diferente da escrita com minúscula. As tags são insensíveis: <a> e <A> funcionam igual, ou seja <title>, <TITLE> e até <TiTlE> são a mesma tag. O nome do atributo segue a mesma regra, href ou HREF tanto faz.

O valor do atributo é um tipo de dado, e ali maiúscula e minúscula podem virar valores diferentes. Por isso a boa prática que eu sigo e recomendo é escreva tudo em minúscula, tag e atributo.

Precisão, espaços e quebras de linha

Quando você está codificando, um único caractere errado já muda o resultado. Apague só o sinal de maior da abertura do link, deixando <a href="https://google.com"Google</a>, e o link some da página, porque o browser não sabe mais onde a tag de abertura termina. É muito comum o aluno esquecer um > e não entender por que nada aparece.

O editor ajuda a achar esse tipo de erro porque ele pinta o código. Sem o >, o VS Code acha que “Google” virou outro atributo e pinta a palavra com a cor de atributo. Sempre que o editor colorir alguma coisa de um jeito que ele normalmente não coloriria, desconfie de um erro de sintaxe, como um sinal a mais ou uma aspa que você esqueceu de fechar.

A outra dica é que o browser ignora espaços repetidos e quebras de linha. O erro clássico de quem está começando é achar que o que está visualmente organizado no editor vai aparecer igual na página. Teste no exemplo abaixo:

<a href="https://google.com">Google          Site</a>

Meus Cursos


Esse é um curso novo.

Os vários espaços entre “Google” e “Site” viram um só, e “Meus Cursos” não fica numa linha e “Esse é um curso novo.” na outra, vai tudo junto na mesma linha. O HTML reduz qualquer sequência de espaços e quebras de linha a um único espaço. E o motivo de o texto ficar todo junto é justamente ele não estar marcado. Nada ali diz o que é título, o que é parágrafo e onde começa cada bloco, e é a tag que faz isso.

Para que servem as tags HTML

Uma tag tem três funções principais, e todas aparecem desde o primeiro link que você escreve.

A primeira é inserir conteúdo. Texto, link, imagem, vídeo, tudo que entra na página precisa de uma tag para entrar no documento.

A segunda é dar semântica, que é dar sentido ao conteúdo. Quando você olha uma frase grande no topo da página, sabe que é um título porque ela está maior que o resto. Um leitor de tela não tem como saber disso pelo tamanho. Isso vale tanto para o leitor de tela que uma pessoa com problemas de visão usa para navegar quanto para um robô, como o do Google, que lê o seu código. A única forma de eles entenderem que aquilo é um título é você marcar o conteúdo certo, com <h1>. Dá para fazer um <span> parecer um título só com CSS, mas ele não ganha nenhum dos benefícios de um título de verdade.

A terceira é a interação com CSS e JavaScript. Se o conteúdo não está marcado, não tem como selecionar exatamente aquele pedaço para mudar a cor ou o comportamento dele. A tag + atributos como class e id é o que dá um endereço para cada parte da página.

O que acontece quando tudo vira div

A melhor forma que eu conheço de mostrar por que a semântica importa é pegar um conteúdo bem marcado, trocar as tags por tags genéricas (como div) e ver o que se perde.

O exemplo abaixo é uma página de publicações com um <h1>, dois <h2> e parágrafos. Logo depois vem o mesmo conteúdo com tudo trocado por <div>. Os dois usam as mesmas classes e o CSS está aplicado nas classes. A única regra de tag, h1, h2 { font-weight: normal; }, existe para tirar o negrito que o browser coloca nos títulos, e é ela que deixa as duas versões com o mesmo visual.

<main>
  <h1 class="titulo">Nossas Publicações</h1>
  <p class="paragrafo">Conheça nossos livros.</p>
  <h2 class="subtitulo">O Senhor dos Anéis</h2>
  <p class="paragrafo">
    O Senhor dos Anéis (The Lord of the Rings, no original) é um livro de alta
    fantasia, escrito pelo escritor britânico J. R. R. Tolkien.
  </p>
  <h2 class="subtitulo">A Guerra dos Tronos</h2>
  <p class="paragrafo">
    A Guerra dos Tronos (A Game of Thrones, no original) é o primeiro livro da
    série As Crônicas de Gelo e Fogo, escrita pelo autor norte-americano
    George R. R. Martin.
  </p>

  <div class="titulo">Nossas Publicações</div>
  <div class="paragrafo">Conheça nossos livros.</div>
  <div class="subtitulo">O Senhor dos Anéis</div>
  <div class="paragrafo">
    O Senhor dos Anéis (The Lord of the Rings, no original) é um livro de alta
    fantasia, escrito pelo escritor britânico J. R. R. Tolkien.
  </div>
  <div class="subtitulo">A Guerra dos Tronos</div>
  <div class="paragrafo">
    A Guerra dos Tronos (A Game of Thrones, no original) é o primeiro livro da
    série As Crônicas de Gelo e Fogo, escrita pelo autor norte-americano
    George R. R. Martin.
  </div>
</main>

body {
  font-family: Arial, Helvetica, sans-serif;
}

h1,
h2 {
  font-weight: normal;
}

.titulo {
  font-size: 30px;
  margin: 30px 0;
}

.subtitulo {
  font-size: 20px;
  margin: 20px 0;
}

.paragrafo {
  color: #555;
  margin: 16px 0;
}

Na tela, as duas versões são idênticas. Se o critério fosse só o visual, daria na mesma, e é por isso que muita gente sai marcando tudo com <div>. Só que a diferença está em quem não vê a tela.

Eu testei as duas versões com o VoiceOver, o leitor de tela que já vem instalado no Mac. Uma das funções mais importantes de um leitor de tela é deixar a pessoa navegar pelo site sem ler tudo de ponta a ponta, e o jeito mais usado de fazer isso é pular de título em título. Na versão com <h1> e <h2>, o comando de ir para o próximo título anuncia “nível de título 1, Nossas Publicações”, depois “nível de título 2, O Senhor dos Anéis”, depois “nível de título 2, A Guerra dos Tronos”. Em três comandos a pessoa já sabe que o site fala de publicações e que tem Senhor dos Anéis e A Guerra dos Tronos. Se quiser saber o que é A Guerra dos Tronos, ela continua dali e escuta o parágrafo. O VoiceOver ainda tem o rotor, um menu que lista todos os títulos da página, o que funciona como um resumo do site.

Na versão com <div>, o mesmo comando responde que nenhum título foi encontrado. A página fica sem estrutura, e a única forma de navegar passa a ser ir de texto em texto, lendo tudo na ordem. Neste exemplo pequeno parece pouca coisa, mas imagine entrar no globo.com e ter que ouvir o título e o subtítulo de cada notícia para descobrir o que tem no site. Ninguém faz isso. Quem enxerga também não lê um site de ponta a ponta, a gente escaneia pelos títulos, e quem usa leitor de tela faz exatamente o mesmo. Com tudo em <div>, você dificultou muito a vida dessa pessoa.

Use a <div> para agrupar e estilizar elementos. Ela é uma tag genérica, sem significado próprio. Agora para títulos, parágrafos e listas, use as tags certas: <h1>–<h6>, <p> e <ul>/<ol>.

E a lista é outro bom exemplo. Quando o conteúdo está marcado como lista, o leitor de tela avisa que entrou numa lista e quantos itens ela tem, e depois vai anunciando cada item. Sem a marcação, para ele é só um texto atrás do outro.

Sem CSS e no modo leitura

O leitor de tela não é o único lugar onde a semântica aparece. No mesmo exemplo, apague todo o CSS da aba css e veja como as duas versões ficam.

A versão semântica continua fácil de ler, porque o browser tem um estilo padrão para cada tag: o <h1> aparece grande e em negrito, o <h2> um pouco menor e os parágrafos ganham espaço entre eles. A versão com <div> vira um bloco de texto com tudo no mesmo tamanho e no mesmo peso, e para saber do que o site fala você tem que ler linha por linha.

Você pode achar que isso nunca acontece, mas acontece. O HTML é a primeira coisa a ser carregada, e se o site está lento ou o arquivo de CSS falha por algum motivo, o usuário recebe a página crua. Com o conteúdo bem marcado, ela continua legível.

O terceiro caso é o modo leitura de browsers como o Safari. Em site de notícia ou blog, a página vem cheia de anúncio e de notícia relacionada, e o modo leitura tenta identificar o conteúdo principal e mostrar só ele. Para testar, salve cada versão num arquivo HTML separado, dentro de um <main>, a tag que marca o conteúdo principal da página, abra no Safari e ative o modo leitura. A versão semântica sai com os títulos em destaque, dá para escanear. A versão com <div> sai como texto corrido, sem hierarquia nenhuma, do mesmo jeito que ela aparece sem CSS:

<main>
  <div>Nossas Publicações</div>
  <div>Conheça nossos livros.</div>
  <div>O Senhor dos Anéis</div>
  <div>
    O Senhor dos Anéis (The Lord of the Rings, no original) é um livro de alta
    fantasia, escrito pelo escritor britânico J. R. R. Tolkien.
  </div>
  <div>A Guerra dos Tronos</div>
  <div>
    A Guerra dos Tronos (A Game of Thrones, no original) é o primeiro livro da
    série As Crônicas de Gelo e Fogo, escrita pelo autor norte-americano
    George R. R. Martin.
  </div>
</main>

Semântica no Google e para quem usa leitor de tela

A lógica é a mesma do leitor de tela, um robô lendo o código e tentando entender o que é título e o que é texto, e os mecanismos de busca levam o conteúdo semântico em conta. Mas o quanto isso pesa no ranqueamento ninguém de fora do Google sabe ao certo, então trate como especulação.

Já para o leitor de tela, a WebAIM faz uma pesquisa com usuários de leitores de tela desde 2009, e na nona edição, com mais de 1.500 respostas, 85,7% disseram que os níveis de título são muito úteis ou um pouco úteis. Quando a pergunta é como encontrar uma informação numa página longa, 67,7% respondem que a primeira coisa que fazem é navegar pelos títulos. Se você monta um site sem pensar nos seus <h1>, <h2> e <h3>, está atrapalhando a maior parte dessas pessoas.

Antes de pensar em como o texto vai ficar, pergunte o que ele é: um título, um parágrafo, uma lista, um link. Marque com a tag certa e só depois resolva o visual no CSS. A <div> e <span> ficam para quando nenhuma outra tag descreve aquele conteúdo.