Tag HTML <em>
A tag HTML <em> marca ênfase de stress, alterando o significado da frase e como leitores de tela a pronunciam. Sintaxe, acessibilidade e exemplos.
A tag HTML <em> marca ênfase de stress — a parte de uma frase que você diria com entonação vocal extra, da forma como a ênfase pode alterar o significado de uma frase. É um elemento semântico: a renderização em itálico que você vê nos navegadores é apenas o estilo padrão, não o propósito da tag.
Leia estas duas frases em voz alta e observe como a ênfase muda o significado:
<p><em>Cats</em> are great pets.</p> <!-- Cats specifically, not other animals -->
<p>Cats are <em>great</em> pets.</p> <!-- how great they are -->Como <em> carrega significado em vez de apenas aparência, ela pertence ao conteúdo de fraseamento do HTML — elementos inline que marcam a estrutura e a intenção do texto corrente.
<em> não é intercambiável com um itálico CSS. Use <em> quando a ênfase faz parte do que o texto significa; use font-style: italic apenas quando quiser texto inclinado sem mudança de significado.
Por que usar <em> em vez de itálico CSS (acessibilidade)
A razão para escolher <em> em vez de estilização visual é acessibilidade e semântica. <em> carrega um significado definido — ênfase de stress — que a especificação HTML diz que a tecnologia assistiva deveria transmitir, e esse significado permanece na marcação onde ferramentas, mecanismos de busca e futuros agentes de usuário podem agir sobre ele. Texto em itálico simples estilizado com CSS não transmite nada semântico: é um efeito puramente visual. (Na prática, os leitores de tela mais populares de hoje ainda não alteram a entonação vocal para <em> por padrão, mas a distinção semântica ainda importa e não tem custo algum.)
Este é o contraste fundamental com a tag <i>: <i> também renderiza em itálico por padrão, mas explicitamente não carrega ênfase de stress. Ela é usada para texto em voz ou estado de espírito alternativo (termos técnicos, frases estrangeiras, nomes taxonômicos, um pensamento), e não para enfatizar o significado.
Se você precisa marcar algo como importante em vez de enfatizado, use <strong> — <strong> sinaliza importância forte, seriedade ou urgência, enquanto <em> sinaliza ênfase de stress. Os dois são independentes e podem ser combinados.
Aninhando <em> para ênfase mais forte
De acordo com a especificação HTML, cada nível de <em> aninhado aumenta o grau de ênfase. Isso é útil quando uma palavra enfatizada dentro de uma frase já enfatizada precisa se destacar ainda mais:
<p><em>Please, <em>do</em> remember to call.</em></p>Aqui, toda a frase está enfatizada, e a palavra "do" está enfatizada um nível a mais. Os navegadores ainda renderizam cada nível em itálico por padrão, mas o aninhamento comunica o nível crescente de ênfase para a tecnologia assistiva e para outras ferramentas que leem a estrutura do documento.
Sintaxe
A tag <em> vem em pares. O conteúdo é escrito entre as tags de abertura (<em>) e fechamento (</em>).
Exemplo da tag HTML <em>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>It is a normal paragraph</p>
<p>The important part of the text is <em>shown in italic</em>.</p>
</body>
</html>Resultado
Atributos
A tag <em> suporta os Atributos Globais e os Atributos de Evento.
Estilizando a tag <em>
Como o significado está na tag, a aparência é totalmente sua para controlar com CSS. O itálico padrão é apenas uma convenção — você pode reestilizar <em> para um determinado design mantendo a semântica e a acessibilidade intactas.
Por exemplo, em um contexto onde itálicos conflitam com o resto da página, você pode apresentar a ênfase como texto em negrito vermelho:
<style>
.notice em {
font-style: normal; /* drop the default slant */
font-weight: bold;
color: #c0392b; /* draw the eye with color */
}
</style>
<p class="notice">You <em>must</em> save before closing the editor.</p>A palavra "must" ainda tem ênfase de stress para leitores de tela — apenas sua renderização visual foi alterada. Essa separação entre significado (<em>) e apresentação (CSS) é exatamente por que a tag semântica vale a pena ser usada.