Você está usando <em> errado!

A maioria de nós está usando a tag “em” erroneamente! Leia o artigo para saber o que é stress emphasis e qual é o momento certo de usar “em”.

A maioria das pessoas está usando a tag <em> de maneira errada! Leia mais para saber o que  é “stress emphasis” e qual é o momento certo de usar <em>.

Nas eras mais remotas do HTML, <em> era pouco usado, apesar de ser parte das especificações desde muito cedo (padrão HTML 2.0, 1995). Mas, naquele momento e por alguns anos, (quase) ninguém pensava em semântica ou mesmo separação de preocupações (separation of concerns). Marcávamos itálicos simplesmente com tags <i> e não pensávamos muito a respeito.

Então, em algum lugar ao longo do caminho, alguém gritou “Semântica!” e todo mundo começou a odiar a pobre tag <i> como a um vizinho ruim. Um vizinho muito, muito ruim.

<em> era a última moda, com supostos benefícios para acessibilidade e SEO, o que nos fez usá-lo em todos os lugares. Já no HTML 4, todo mundo sabia que <em> era para ênfase e estilo como itálico, <strong> era para ênfase mais forte e estilo como texto em negrito. Quem ousasse a usar o <i>, era instantaneamente classificado como um desenvolvedor ruim.

Havia rumores de que <i> e <b>, totalmente não-semânticos, seriam classificados como obsoletos (deprecated) a qualquer momento, como <u>, e nossos editores WYSIWYG nem tinham um botão para <i> ou <b>; eles simplesmente colocavam um <em> sempre que clicávamos no ícone de itálico e <strong> quando clicávamos em negrito — na verdade, ainda é assim na maioria dos casos.

Acontece que…

A tag <em> não é para ênfase (emphasis)!

É isso, mesmo, você não leu errado: <em> não é para ênfase! Em HTML5, <em> é para “stress emphasis” (algo como “muita ênfase”).

É realmente uma distinção sutil, mas é daí que vem toda essa confusão. As especificações HTML 2, 3 e 4 eram bastante vagas em sua definição de “ênfase”, fazendo com que parecesse uma “versão menor” de <strong> — algo para marcar texto de maior importância, mas não tão importante.

Mas quando HTML5 foi lançado, certificaram-se de desenhar uma linha mais clara sobre o que a <em> pretendia significar, enquanto passaram o <i> de uma mera tag-de-texto-em-itálico para uma tag semântica que praticamente envolve a maioria dos outros casos de uso para itálico.

Mas o que, afinal, é stress emphasis? A stress emphasis é o recurso fonético de mudar de tom e/ou “arrastar” a palavra para denotar um significado especial para ela. Marca uma palavra de uma maneira que muda o significado da frase inteira. É usado para correção, esclarecimento, sarcasmo, a parte principal de um contra-argumento etc.

Uma rápida olhada nos exemplos da própria especificação deve deixar as coisas mais claras: eles pegam a frase “Gatos são animais fofos” e mudam a tag <em> palavra por palavra, mudando assim o significado de sugerir que a discussão era sobre quais animais são fofos, para implicar que a verdade de toda a sentença estava em questão, implicando que outra pessoa disse que eles eram feios, com a noção ridícula de que alguém confundia gatos com plantas!

<em>: casos de uso/exemplos

É possível usar esta ênfase especial para comunicar uma maior importância de uma palavra:

A ênfase em “tudo isso” deixa claro que, embora interessado, ele não impedirá que o interlocutor use tags incorretas de vez em quando.

Também seria possível usá-lo para indicar sarcasmo:

E, também, para sugerir algumas implicações:

A ênfase implica que há alguém mais que precisa trabalhar…

As tags <em> normalmente são usadas em palavras isoladas, talvez duas ao mesmo tempo; mas, às vezes, é possível/preciso usá-las em toda a sentença para marcar que o interlocutor está realmente dando ênfase em seu ponto de vista e/ou denotar certa urgência.

Um exclamação pode ser o uso correto para <em> em uma frase:

Nossas ferramentas não estão adequadas

Sabendo da real função do <em>, é possível constatar que há um zilhão de editores WYSIWYG programados erroneamente. Se o seu editor tiver os típicos botões “itálico – negrito – sublinhado”, provavelmente não há nada semântico.

A maioria dos editores (possivelmente todos) que afirmam ser “semânticos” apenas colocam <em> para qualquer texto em itálico e <strong> para texto em negrito, sem considerar o porquê de o texto ser formatado dessa forma (que é exatamente o que a “semântica” tenta resolver). Se não houver botões independentes para <i> e <em> — ou um algoritmo superinteligente capaz de aplicar a tag correta para o caso de uso –, o editor não é semântico.

Mesmo ferramentas modernas são insuficientes quando se trata disso. As implementações de Markdown usam exatamente a mesma abordagem de <em> para texto em itálico e <strong> para texto em negrito.

Quando não usar <em>

Há muitos casos em que o itálico representa algo diferente de ênfase.

Em cada um desses casos, a tag correta é, na verdade, <i>. Alguns podem pensar que <i> é uma tag não-semântica, mas, na verdade, é praticamente uma tag abrangente para casos de uso em que é preciso texto em itálico sem stress emphasis.

Citando a especificação,

O elemento i representa um intervalo de texto em uma voz ou estado de espírito alternativo ou, de outra forma, deslocado da prosa normal de uma maneira que indica uma qualidade de texto diferente.

Por exemplo, usa-se <i> ao marcar uma expressão idiomática de outro idioma, com o atributo lang correspondente, para que os leitores de tela obtenham a pronúncia correta:

Também é usada para nomenclatura taxonômica:

Para assinalar um termo técnico:

Vozes de personagens fictícios:

Pensamentos:

E alguns outros casos de uso — dependendo do idioma –, além de em blocos <cite> para assinalar o título de uma obra (pintura, livro etc.).

Por que isso importa?

Acessibilidade, é claro. Toda vez que usamos a tag errada para colocar itálico uma palavra, a maioria dos nossos visitantes não vai nem perceber. Enquanto estivermos fazendo isso de acordo com nossas convenções de linguagem, a palavra será lida com a ênfase pretendida.

Mas estamos tornando as coisas muito mais complicadas para leitores de tela, especialmente ao aninhar tags. Se estivéssemos fazendo nosso trabalho direito, os sintetizadores de voz seriam capazes de fazer as correções de tom corretas com facilidade. Mas estamos tão longe disso que todos (até onde se sabe) a desativaram por padrão, e isso é um grande motivo que faz com que eles pareçam tão pouco naturais.

Ele pode ser ativado em alguns, mas, mesmo assim, eles optaram por apenas pegar qualquer coisa que esteja em itálico e aplicar a inflexão… o que é igualmente ruim. Eles estão corrigindo nossos erros.

Mas, talvez, se todos nós começarmos a fazer do jeito certo, possamos fazer com que eles funcionem adequadamente no futuro e se sintam muito mais humanos. Nós podemos nos comunicar melhor.

Conclusão

Como foi visto no artigo, por incrível que possa parecer, a maioria de nós está usando a tag <em> errado… Na verdade, ela serve para atribuir “stress emphasis” a um trecho do texto — um recurso fonético para alterar o “tom” e/ou “arrastar a(s) palavra(s)” para denotar significados diferentes.

Ficam alguns lembretes/reflexões para quando se for usar (ou não) <em>:

  • Sempre que estiver colocando itálico em uma palavra/frase, pense em porquê está fazendo isso e escolha a tag certa para a tarefa
  • Em caso de dúvida, leia em voz alta ou peça a alguém para lê-lo em voz alta e ver se ele corresponde às inflexões esperadas
  • Marcar uma frase inteira com <em> significa urgência, por isso normalmente isso só seria usado em exclamações

Precisamos começar a considerar porquê estamos colocando textos em itálico e usar a tag apropriada para cada situação.

Nós podemos melhorar nossas ferramentas. Nós podemos melhorar a web.