Etiqueta HTML <i>
La etiqueta HTML <i> marca texto en una voz o tono diferente — frases extranjeras, términos técnicos, nombres taxonómicos — en cursiva.
La etiqueta HTML <i> marca un tramo de texto que se diferencia del resto de la prosa circundante porque está en una voz o tono diferente. De forma predeterminada, se representa en cursiva, pero su propósito es semántico, no decorativo. Este capítulo explica qué significa realmente la etiqueta <i>, en qué se diferencia de <em>, cuándo usarla y cómo se comporta con la tecnología de asistencia.
Qué significa realmente <i>
En HTML5, <i> representa texto que se distingue de la prosa normal sin implicar ningún énfasis de estrés adicional. Los usos típicos incluyen:
- Palabras o frases extranjeras —
<i lang="la">in situ</i>,<i lang="fr">déjà vu</i>. - Términos técnicos que se introducen o nombran, como el nombre de un método en un tutorial.
- Nombres taxonómicos (científicos) —
<i>Homo sapiens</i>,<i>Felis catus</i>. - Nombres de barcos o embarcaciones —
<i>HMS Beagle</i>. - El pensamiento de un personaje citado de forma inline dentro de una narración.
El navegador representa todo esto en cursiva, pero el significado es "este fragmento de texto es conceptualmente distinto", no "di esto en voz más alta".
Para palabras extranjeras, añade el atributo lang (por ejemplo, lang="la" para el latín). Esto indica a los lectores de pantalla que cambien las reglas de pronunciación y ayuda a las herramientas de traducción a omitir el texto que no debe traducirse.
<i> vs. <em>
Esta es la distinción más importante:
<em>transmite énfasis de estrés — la palabra que pronunciarías con más fuerza para cambiar el significado de una oración. "¿Tú te comiste mi almuerzo?" señala a una persona específica.<i>transmite una voz o tono diferente sin énfasis añadido — un término extranjero, un pensamiento, el nombre de una especie.
Una prueba rápida: si al leer el texto en voz alta naturalmente cargarías sobre esa palabra, usa <em>. Si la palabra es simplemente de un tipo diferente (extranjera, técnica, un nombre similar a un título), usa <i>.
Elementos hermanos relacionados, presentacionales pero semánticos:
<b>— llama la atención (palabras clave, nombres de productos) sin importancia adicional.<strong>— marca texto de importancia, seriedad o urgencia elevada.<cite>— el título de una obra creativa citada (libro, película, artículo).<mark>— texto resaltado por referencia o relevancia.
Accesibilidad
El elemento <i> no tiene un rol ARIA implícito y no transmite énfasis de estrés a los lectores de pantalla — un lector de pantalla no cambiará su tono para el texto con <i>. Por lo tanto, <i> es únicamente una indicación sobre el tipo de texto, no sobre su importancia.
Por ello, si el énfasis genuinamente necesita llegar a los usuarios de tecnología de asistencia (el significado de la oración depende de ello), usa <em>, que los lectores de pantalla pueden anunciar con énfasis vocal. Reserva <i> para los casos en que la cursiva se refiere a una categoría, no a una fuerza.
Sintaxis
La etiqueta <i> va en pares. El contenido se escribe entre las etiquetas de apertura (<i>) y de cierre (</i>).
Ejemplo de la etiqueta HTML <i>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<!-- Foreign phrase, with lang for correct pronunciation -->
<p>The samples were examined <i lang="la">in situ</i> before removal.</p>
<!-- Taxonomic name -->
<p>The domestic cat is <i>Felis catus</i>.</p>
<!-- A character's thought -->
<p>She paused at the door. <i>What if no one is home?</i></p>
</body>
</html>Atributos
La etiqueta <i> admite los Atributos Globales y los Atributos de Evento.
Estilizar la etiqueta <i>
Conserva <i> por su significado semántico y usa CSS solo para ajustar su apariencia — no es necesario reemplazarla por un elemento no semántico. Por ejemplo, puedes mantener la cursiva predeterminada mientras cambias el color:
<style>
i {
color: #555;
}
</style>
<p>The domestic cat is <i>Felis catus</i>.</p>Si solo deseas cursiva por una razón visual sin intención semántica, prefiere la propiedad CSS font-style sobre un elemento normal en lugar de añadir una etiqueta <i>.