Etiqueta HTML <em>
La etiqueta HTML <em> marca el énfasis de voz, cambiando el significado de una frase y cómo la leen los lectores de pantalla.
La etiqueta HTML <em> marca el énfasis de voz — la parte de una oración que pronunciarías con un énfasis vocal especial, de la manera en que el énfasis puede cambiar el significado de una frase. Es un elemento semántico: el estilo en cursiva que ves en los navegadores es solo el estilo predeterminado, no el propósito de la etiqueta.
Lee estas dos oraciones en voz alta y observa cómo el énfasis cambia el 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 -->Dado que <em> transmite significado en lugar de solo apariencia, pertenece al contenido de fraseo de HTML — elementos en línea que marcan la estructura e intención del texto corrido.
<em> no es intercambiable con una cursiva de CSS. Usa <em> cuando el énfasis forma parte de lo que el texto significa; recurre a font-style: italic solo cuando quieras texto inclinado sin cambio de significado.
Por qué usar <em> en lugar de cursivas de CSS (accesibilidad)
La razón para elegir <em> sobre el estilo visual es la accesibilidad y la semántica. <em> tiene un significado definido — énfasis de voz — que la especificación HTML dice que la tecnología de asistencia debería transmitir, y ese significado permanece en el marcado donde las herramientas, los motores de búsqueda y los futuros agentes de usuario pueden actuar sobre él. El texto en cursiva simple con estilo CSS no transmite nada semántico: es un efecto puramente visual. (En la práctica, los lectores de pantalla más comunes de hoy en día aún no cambian el énfasis vocal para <em> de forma predeterminada, pero la distinción semántica sigue siendo importante y no tiene ningún costo.)
Este es el contraste clave con la etiqueta <i>: <i> también se muestra en cursiva de forma predeterminada, pero explícitamente no lleva énfasis de voz. Es para texto en una voz o estado de ánimo alternativo (términos técnicos, frases extranjeras, nombres taxonómicos, un pensamiento), no para enfatizar el significado.
Si necesitas marcar algo como importante en lugar de enfatizado, usa <strong> — <strong> señala importancia fuerte, seriedad o urgencia, mientras que <em> señala énfasis de voz. Ambos son independientes y se pueden combinar.
Anidar <em> para un énfasis más fuerte
Según la especificación HTML, cada nivel de <em> anidado aumenta el grado de énfasis. Esto es útil cuando una palabra enfatizada dentro de una frase ya enfatizada necesita destacar aún más:
<p><em>Please, <em>do</em> remember to call.</em></p>Aquí toda la frase está enfatizada, y la palabra "do" está enfatizada un nivel más. Los navegadores siguen mostrando todos los niveles en cursiva de forma predeterminada, pero el anidamiento comunica el nivel de énfasis creciente a la tecnología de asistencia y a otras herramientas que leen la estructura del documento.
Sintaxis
La etiqueta <em> viene en pares. El contenido se escribe entre las etiquetas de apertura (<em>) y cierre (</em>).
Ejemplo de la etiqueta 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
La etiqueta <em> admite los Atributos Globales y los Atributos de Evento.
Estilizar la etiqueta <em>
Dado que el significado reside en la etiqueta, la apariencia es completamente tuya para controlar con CSS. La cursiva predeterminada es solo una convención — puedes cambiar el estilo de <em> para un diseño específico manteniendo la semántica y la accesibilidad intactas.
Por ejemplo, en un contexto donde la cursiva choca con el resto de la página, podrías presentar el énfasis como texto rojo en negrita:
<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>La palabra "must" aún tiene énfasis de voz para los lectores de pantalla — solo cambió su representación visual. Esta separación del significado (<em>) de la presentación (CSS) es exactamente la razón por la que vale la pena usar la etiqueta semántica.