Referencia de etiquetas

Etiqueta i en HTML: voz alternativa y términos especiales

La etiqueta  distingue texto con una voz o naturaleza diferente de la prosa que lo rodea: un término técnico, una expresión de otro idioma o una denominación taxonómica. Úsala, por ejemplo, para separar el nombre científico de una especie dentro de una explicación en español. Suele verse en cursiva, pero su función depende del significado del texto.

Ejemplo mínimo de i

<p>El nombre científico es <i lang="la">Felis catus</i>.</p>

Coloca este fragmento dentro del <body> de un documento HTML y ábrelo en el navegador. Verás un párrafo con «Felis catus» normalmente en cursiva.  distingue la denominación taxonómica; lang="la" identifica su idioma como latín.

Si retiras  y , las palabras permanecen, pero pierdes ese marcado y el idioma local. La frase «El nombre científico es» seguirá ayudando a entenderlas. Cambiar la apariencia con CSS conserva el elemento y sus atributos.

Sintaxis y contenido permitido

Escribe una apertura , el fragmento y un cierre . Ninguna de esas etiquetas puede omitirse;  tampoco cierra el elemento en HTML.

 se usa donde se admite contenido de frase, como dentro de un párrafo, un encabezado o un elemento de lista. Puede contener texto y otros elementos de frase, por ejemplo un  o un enlace. No envuelvas un párrafo, una sección ni una lista completa con . El HTML Living Standard define su significado, contexto y contenido permitido.

Cuándo distingue una voz alternativa

El nombre científico del ejemplo pertenece a una nomenclatura diferente del texto corriente. Otro caso es una expresión inglesa como home sweet home dentro de una frase en español: puedes marcarla con  y ofrecer su traducción en el propio texto.

También encaja un pensamiento de un personaje o un término técnico que se distingue del discurso. No conviertas automáticamente toda palabra extranjera o toda frase destacada en un : decide si tiene esa naturaleza diferente y si existe un elemento más preciso. Para señalar el término que estás definiendo, considera <dfn>.

I frente a em, cite y la cursiva con CSS

Aunque varios elementos suelen verse en cursiva, resuelven problemas distintos:

Qué quieres comunicar	Qué usar	Caso reconocible
Una denominación o voz alternativa	`<i>`	El nombre científico de una especie.
Énfasis de voz o de sentido	`<em>`	Contrastar «doméstico» con «silvestre».
El título de una obra	`<cite>`	El título de un libro en una ficha.
Cursiva por una decisión de diseño	CSS	Un rótulo que conserva su significado habitual.

¿Por qué no usar em en un nombre científico? Nombrar una especie no implica acentuar esas palabras al hablar. Usa  si el contexto necesita ese énfasis, como en una corrección, no para reproducir la tipografía del nombre. Consulta las guías de énfasis con em y títulos de obras con cite.

¿I sirve para cualquier cursiva? No. Para presentación puedes seleccionar el elemento que ya contiene el texto o agrupar un fragmento con :

<p>Estado: <span class="cursiva">ficha en revisión</span>.</p>

.cursiva {
  font-style: italic;
}

La clase aplica un estilo sin convertir el estado en voz alternativa ni énfasis. La propiedad CSS font-style controla la inclinación del texto.

Caso práctico: una ficha de especie

Guarda este documento completo como ficha-especie.html, en UTF-8, y ábrelo en el navegador. No necesita servidor, JavaScript ni archivos externos. El título del libro es inventado para el ejemplo, no una fuente científica.

<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Ficha del gato doméstico</title>
  <style>
    body {
      max-width: 42rem;
      margin: auto;
      padding: 1rem;
      font-family: sans-serif;
      line-height: 1.6;
    }
  </style>
</head>
<body>
  <main>
    <h1>Ficha del gato doméstico</h1>
    <p>
      Nombre científico:
      <i lang="la" class="taxonomia">Felis catus</i>.
    </p>
    <p>
      La ficha es de un gato <em>doméstico</em>,
      no de un felino silvestre.
    </p>
    <p>
      La expresión inglesa <i lang="en">home sweet home</i>
      significa «hogar, dulce hogar».
    </p>
    <p>
      Libro de ejemplo (inventado):
      <cite>Cuaderno del gato doméstico</cite>.
    </p>
  </main>
</body>
</html>

Verás un encabezado y cuatro párrafos. El nombre científico y la expresión inglesa se distinguen con ; «doméstico» lleva el énfasis de  y el título del libro usa <cite>. La traducción está escrita en español: no la genera lang.

Para comprobar la diferencia entre significado y apariencia, añade al bloque <style>:

.taxonomia {
  font-style: normal;
}

Solo el nombre científico dejará de verse inclinado; seguirá dentro de . Quita después esa regla para recuperar el estilo predeterminado. Si sustituyes los dos  por  conservando sus atributos, mantienes los idiomas y el texto, pero eliminas la distinción semántica de voz alternativa.  y <cite> no cambian. Sin CSS se conserva todo el contenido; sin JavaScript el ejemplo funciona igual.

Atributos e idioma accesible

 no tiene atributos específicos vigentes. Admite los globales: lang declara el idioma local, class permite seleccionar usos como .taxonomia e id identifica un elemento de forma única. Ninguno convierte el fragmento en otra etiqueta. font-style es una propiedad CSS; element.lang, si accedes al elemento desde JavaScript, es una propiedad del DOM que refleja el atributo.

Si no declaras lang, el fragmento hereda el idioma de su padre. En la ficha, la prosa es española, el nombre es latino y la expresión es inglesa. Consulta las reglas de idioma de HTML.

El idioma declarado puede ayudar a las herramientas de lectura, pero no traduce el contenido ni garantiza una pronunciación concreta: depende del lector de pantalla, las voces disponibles y su configuración. Tampoco prometas que  siempre se anuncie de forma distinta. Mantén explicaciones como «Nombre científico» y una traducción visible cuando el lector la necesite; no confíes únicamente en la cursiva ni ocultes la explicación en un tooltip.

Errores frecuentes

Decir que i está obsoleta o no tiene significado. Es un elemento vigente con una función propia, aunque históricamente se asociara a la cursiva.
Usarla para el título de cualquier libro. Ese contexto corresponde a <cite>.
Marcar párrafos enteros para cambiar su diseño. Aplica CSS al párrafo si la intención es solo visual.
Crear un icono con un i vacío.  no es un elemento de iconos. Un botón con un icono necesita un nombre accesible y una representación decorativa separada; un  vacío no aporta ese nombre.
Esperar que lang traduzca o genere énfasis. El atributo declara un idioma y conserva las palabras que escribiste.

Compatibilidad y fuentes

 está ampliamente disponible en los navegadores actuales y no necesita una biblioteca. MDN documenta sus usos y compatibilidad; consulta el Living Standard para las diferencias entre i, em y cite. Fuentes revisadas el 3 de octubre de 2026. El soporte del elemento no garantiza una salida de voz uniforme.