HTML em e strong: ênfase, importância e diferenças em relação a b e CSS

O HTML <em> marca ênfase na entonação em uma frase, enquanto <strong> marca forte importância, seriedade ou urgência. Os navegadores normalmente os renderizam como texto em itálico e em negrito, respectivamente, mas escolha um elemento pelo seu significado no contexto, e não por sua aparência padrão.

Como em e strong diferem?

Use em quando enfatizar uma palavra específica muda o foco de uma frase. Em “Eu conferi o documento hoje”, enfatizar “Eu” foca em quem conferiu, enquanto enfatizar “hoje” foca em quando. strong marca a importância do próprio conteúdo, como um aviso que os leitores precisam saber ou uma conclusão importante.

Ambos os elementos funcionam dentro das frases. Não envolva um parágrafo inteiro apenas para que pareça um grande título. Estruture os títulos do documento com h1 a h6 e aplique ênfase significativa apenas quando necessário.

Compare o foco em um exemplo completo

Salve este documento como emphasis.html e abra-o em um navegador. Compare o destaque nas duas primeiras frases, a instrução importante e a frase final que usa apenas o estilo em negrito visual.

<!doctype html>
<html lang="pt">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Ênfase e importância</title>
  <style>.visual-bold { font-weight: bold; }</style>
</head>
<body>
  <h1>Ênfase no contexto</h1>
  <p><em>Eu</em> verifiquei o documento hoje.</p><p>Eu verifiquei o documento <em>hoje</em>.</p><p><strong>Confira o backup antes de substituir o arquivo.</strong></p><p>Termos deste documento: <b>elemento</b> e <b>atributo</b></p><p>Exemplo visual: <span class="visual-bold">Esta parte está em negrito por CSS.</span></p></body>
</html>

Com estilos padrão comuns, “Eu” e “hoje” aparecem em itálico, enquanto a instrução de backup e os termos marcados com b aparecem em negrito. O span também está em negrito por causa do CSS, mas ele não se torna um elemento que expressa forte importância. Fontes e estilos do usuário podem alterar a aparência, então expresse o significado importante claramente nas palavras também.

Diferencie b do estilo em negrito do CSS

Pensar no b simplesmente como "strong sem significado" perde seu propósito: ele chama atenção. Use CSS quando a aparência for o único objetivo. Da mesma forma, não escolha em apenas porque você quer texto em itálico.

Remover o itálico de em ou alterar o peso de strong através de CSS preserva o significado expresso em HTML. Por outro lado, tornar um span em negrito não lhe confere o significado de strong. Os anúncios reais pelas tecnologias assistivas variam dependendo do ambiente, portanto, não presuma que uma mudança de voz específica ocorrerá sempre. Veja a referência MDN para em, a referência MDN para strong e a referência MDN para b para as definições dos elementos.