HTML em y strong: énfasis, importancia y diferencias con b y CSS

HTML <em> marca el énfasis de entonación en una oración, mientras que <strong> marca la fuerte importancia, seriedad o urgencia. Los navegadores normalmente los muestran como texto en cursiva y en negrita respectivamente, pero se debe elegir un elemento por su significado en el contexto más que por su apariencia predeterminada.

¿Cómo difieren em y strong?

Úsalo cuando enfatizar una palabra en particular cambia el enfoque de una oración. En “Revisé el documento hoy,” enfatizar “yo” se centra en quién lo revisó, mientras que enfatizar “hoy” se centra en cuándo. strong marca la importancia del contenido en sí, como una advertencia que los lectores necesitan saber o una conclusión importante.

Ambos elementos funcionan dentro de las oraciones. No envuelvas un párrafo entero solo para que parezca un gran encabezado. Estructura los encabezados del documento con h1 a h6 y aplica el énfasis significativo solo donde sea necesario.

Compara el enfoque en un ejemplo completo

Guarda este documento como emphasis.html y ábrelo en un navegador. Compara el énfasis en las dos primeras oraciones, la instrucción importante y la oración final que utiliza solo estilo negrita visual.

<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Énfasis e importancia</title>
  <style>.visual-bold { font-weight: bold; }</style>
</head>
<body>
  <h1>Énfasis según el contexto</h1>
  <p><em>Yo</em> revisé el documento hoy.</p><p>Yo revisé el documento <em>hoy</em>.</p><p><strong>Comprueba la copia de seguridad antes de reemplazar el archivo.</strong></p><p>Términos de este documento: <b>elemento</b> y <b>atributo</b></p><p>Ejemplo visual: <span class="visual-bold">Esta parte está en negrita mediante CSS.</span></p></body>
</html>

Con los estilos predeterminados comunes, “Yo” y “hoy” aparecen en cursiva, mientras que la instrucción de respaldo y los términos marcados con b aparecen en negrita. El span también está en negrita debido a CSS, pero no se convierte en un elemento que exprese una importancia fuerte. Las fuentes y los estilos de usuario pueden cambiar la apariencia, así que expresa claramente el significado importante también en la redacción.

Distingue b del estilo en negrita de CSS

Pensar en b simplemente como “strong sin significado” pasa por alto su propósito: llama la atención. Usa CSS cuando el objetivo sea únicamente la apariencia. Asimismo, no elijas em simplemente porque quieras texto en cursiva.

Eliminar la cursiva de em o cambiar el peso de strong mediante CSS preserva el significado expresado en HTML. Por el contrario, hacer un span en negrita no le otorga el significado de strong. Los anuncios reales por parte de la tecnología asistiva varían según el entorno, así que no asuma que siempre ocurrirá un cambio de voz específico. Consulte la referencia de em de MDN, la referencia de strong de MDN y la referencia de b de MDN para las definiciones de los elementos.