Referencia de etiquetas

Etiqueta em en HTML: énfasis que cambia el sentido

La etiqueta  representa énfasis de voz o de sentido sobre una palabra o fragmento. Úsala cuando quieras indicar qué parte de una frase debe recibir el acento al interpretarla, por ejemplo al corregir una cantidad. Los navegadores suelen mostrar ese texto en cursiva, pero el énfasis pertenece al contenido y se conserva aunque cambies su apariencia con CSS.

Ejemplo mínimo de em

<p>Yo pedí <em>dos</em> entradas, no tres.</p>

Coloca este fragmento dentro del <body> de una página HTML y ábrela en el navegador. Verás un párrafo en el que «dos» suele aparecer en cursiva. El énfasis recae en la cantidad: estás corrigiendo el número de entradas, no quién las pidió.

Si retiras  y , las palabras siguen presentes y «no tres» conserva la aclaración, pero desaparece el marcado de énfasis. Mover las etiquetas a «Yo» desplazaría el acento hacia la persona que hizo el pedido.

Sintaxis, contexto y anidamiento

Escribe una apertura , el contenido y un cierre . Las dos etiquetas deben estar presentes;  no cierra este elemento en HTML.

 puede aparecer donde se admite contenido de frase, por ejemplo dentro de un párrafo, un encabezado o un elemento de lista. También admite contenido de frase: texto y elementos como , un enlace o un segundo . No debe envolver un párrafo, una sección ni una lista completa. El HTML Living Standard define estas reglas para em.

¿Puedo anidar em? Sí, cuando haya un grado adicional de énfasis comprensible:

<p><em>Te pedí que vinieras <em>hoy</em>.</em></p>

La frase completa recibe énfasis y «hoy» recibe uno mayor. El anidamiento expresa esa diferencia; no promete dos niveles visibles de cursiva ni una entonación concreta. Evita añadir elementos anidados solo para intentar intensificar el estilo.

Cómo cambia el sentido: «yo no dije eso»

Sin énfasis, «yo no dije eso» puede ser una negación general. El lugar del acento ayuda a identificar qué se está discutiendo:

<p><em>Yo</em> no dije eso.</p>
<p>Yo <em>no</em> dije eso.</p>
<p>Yo no <em>dije</em> eso.</p>
<p>Yo no dije <em>eso</em>.</p>

En la primera versión, se distingue al hablante: quizá otra persona lo dijo. En la segunda, se insiste en la negación. La tercera pone en cuestión la acción de decirlo: tal vez se escribió o se insinuó. La cuarta contrasta «eso» con otra cosa que sí se dijo.

Son interpretaciones posibles dentro de una conversación, no traducciones automáticas de cada etiqueta. Escribe suficiente contexto para que el contraste se entienda incluso si el lector no percibe la cursiva.

Em frente a i, strong y la cursiva visual

Elige según lo que comunica el fragmento:

Intención	Elección	Ejemplo de uso
Acentuar una palabra en el discurso	`<em>`	Corregir «dos entradas» frente a «tres».
Distinguir una voz alternativa o una denominación	`<i>`	Marcar un pensamiento o un término técnico.
Expresar importancia, gravedad o urgencia	`<strong>`	Señalar una advertencia de seguridad.
Aplicar cursiva por diseño	CSS sobre el elemento adecuado	Dar un estilo a un fragmento sin añadir énfasis.

¿Em y i son lo mismo? No. Ambos suelen verse en cursiva, pero  acentúa el discurso y  distingue texto de otra voz o naturaleza. Tampoco uses  como un grado más intenso de cursiva: su función es comunicar importancia. MDN explica la diferencia entre em e i.

Para agrupar unas palabras que solo necesitan estilo, puedes usar  y la propiedad CSS font-style. Si el elemento que ya contiene el texto sirve como selector, no necesitas añadir otro.

Caso práctico: quién reservó y cuántas entradas

Guarda este documento como enfasis.html y ábrelo en el navegador. Contiene dos versiones de la misma frase con énfasis en lugares distintos y una tercera con cursiva solo visual. No necesita JavaScript, servidor ni archivos externos.

<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Comparar el énfasis de una reserva</title>
  <style>
    .comparacion {
      font-family: system-ui, sans-serif;
      line-height: 1.5;
      max-width: 38rem;
      margin: 2rem auto;
      padding-inline: 1rem;
    }

    .comparacion .cursiva {
      font-style: italic;
    }
  </style>
</head>
<body>
  <main class="comparacion">
    <h1>Una reserva, tres versiones</h1>

    <h2>Énfasis en la persona</h2>
    <p><em>Yo</em> reservé dos entradas.</p>
    <p>La reserva la hice yo, aunque otra persona pensaba hacerla.</p>

    <h2>Énfasis en la cantidad</h2>
    <p>Yo reservé <em>dos</em> entradas.</p>
    <p>La reserva fue de dos entradas; no de una ni de tres.</p>

    <h2>Cursiva por diseño</h2>
    <p>Yo reservé <span class="cursiva">dos</span> entradas.</p>
    <p>Esta versión aplica un estilo sin marcar énfasis en HTML.</p>
  </main>
</body>
</html>

Normalmente verás «Yo», «dos» y el segundo «dos» en cursiva. Las explicaciones aclaran por qué se acentúa el sujeto o la cantidad. En la tercera versión, la apariencia procede de CSS;  no añade el significado de .

Prueba estos cambios por separado y recarga el archivo:

Mueve el primer par de etiquetas  de «Yo» a «dos». El acento pasa a la cantidad; ajusta también la explicación para que corresponda.
Retira las etiquetas  de la segunda versión. Se pierde ese marcado, aunque la frase siguiente sigue aclarando la cantidad.
Cambia font-style: italic a font-style: normal. Solo la tercera versión pierde su cursiva personalizada. Las dos primeras conservan su marcado de énfasis.

Atributos y accesibilidad

 no tiene atributos específicos vigentes. Admite atributos globales, como class para seleccionar estilos, id para identificar un elemento de forma única o lang cuando el fragmento cambia de idioma. No es necesario añadirlos a cada aparición.

Puedes ajustar la cursiva con la propiedad CSS font-style. Ese cambio afecta a la apariencia; el énfasis sigue expresado por .

El mapeo accesible de em identifica su función de énfasis. Eso no garantiza que todos los lectores de pantalla cambien la voz o anuncien el elemento de la misma manera: intervienen el navegador, la herramienta y sus ajustes. Mantén la intención clara con palabras y contexto, como las aclaraciones de cantidad del ejemplo.

Errores frecuentes

Usar em para cualquier cursiva. Antes de marcar el texto, decide si expresa énfasis, una voz alternativa o solo una elección visual. El aspecto parecido no hace equivalentes esas opciones.

Esperar que anidar em aumente la inclinación. El anidamiento aporta un grado semántico de énfasis. La presentación se controla con CSS.

¿Por qué em no aparece en cursiva? Inspecciona el elemento en el navegador y revisa qué regla determina font-style. Una regla puede haberlo cambiado a normal; comprueba además que la hoja CSS prevista se carga. La ausencia de cursiva no elimina el significado del elemento.

Como etiquetas relacionadas,  distingue otra voz o denominación,  comunica importancia y  agrupa texto sin un significado específico. Elige la que corresponda al propósito del fragmento.

Compatibilidad y fuentes

 está ampliamente disponible en los navegadores actuales y no requiere una biblioteca. La referencia de MDN sobre em, consultada el 3 de octubre de 2026, documenta su compatibilidad. El soporte del elemento no garantiza una apariencia o lectura audible idéntica en todas las combinaciones.

La sintaxis, el contenido permitido y el anidamiento se contrastaron con el HTML Living Standard, sección de em. Las fuentes de MDN y W3C enlazadas completan la explicación sobre presentación, atributos y accesibilidad.