La Etiqueta I

La etiqueta <i> se utiliza para marcar texto que necesita distinguirse del contenido principal, como términos técnicos, palabras en otro idioma, pensamientos o nombres de obras. Aunque visualmente muestra el texto en cursiva, su propósito principal es semántico, no decorativo. Aquí aprenderás a usarla correctamente.

Sintaxis básica

<i>Texto destacado semánticamente</i>

Resultado visual predeterminado: Texto destacado semánticamente.

Casos de uso correctos

Palabras en otro idioma

<p>La frase <i lang="fr">je ne sais quoi</i> es de origen francés.</p>

Términos técnicos o científicos

<p>El <i>Homo sapiens</i> es la especie humana actual.</p>

Pensamientos o diálogos en narrativa

<p>María pensó: <i>¿Realmente quiero hacer esto?</i></p>

Nombres de barcos, obras de arte o taxonomía

<p>El <i>Titanic</i> se hundió en 1912.</p>

Diferencias clave con <em> y otras etiquetas

Etiqueta	Propósito	Ejemplo
<i>	Texto en voz alternativa (sin énfasis)	<i>et al.</i> (término latino)
<em>	Énfasis semántico (cambio de tono)	<em>¡Cuidado!</em>
<cite>	Títulos de obras (libros, películas, etc.)	<cite>Don Quijote</cite>
<dfn>	Definiciones de términos	<dfn>HTML</dfn>

Accesibilidad

• Lectores de pantalla: No enfatizan el texto dentro de <i>, ya que no implica énfasis.

• Buenas prácticas:

  • Usar el atributo lang para palabras en otro idioma.

  • Evitar <i> para contenido crítico (mejor usar <em> o <strong>).

Estilización con CSS

Personaliza la apariencia sin perder la semántica:

i {
  font-style: normal; /* Elimina la cursiva predeterminada */
  color: #2c3e50;
  background: #f8f9fa;
  padding: 2px 6px;
  border-radius: 4px;
}

Ejemplo avanzado:

<p>
  El término <i class="taxonomia">Canis lupus</i> se refiere al lobo gris.
</p>

<style>
  .taxonomia {
    font-style: italic;
    color: #e74c3c;
    font-family: 'Courier New', monospace;
  }
</style>

Errores comunes

Usar para énfasis o decoración

<!-- Incorrecto -->
<p><i>Texto importante</i> que debe resaltarse.</p> <!-- Usar <em> o <strong> -->

<!-- Correcto -->
<p><em>Texto importante</em> que debe resaltarse.</p>

Confundir con <cite>

<!-- Incorrecto -->
<i>Romeo y Julieta</i> es una tragedia de Shakespeare. <!-- Usar <cite> -->

<!-- Correcto -->
<cite>Romeo y Julieta</cite> es una tragedia de Shakespeare.

Anidación innecesaria

<!-- Evitar -->
<i><i>Texto redundante</i></i>

Ejemplos prácticos

Texto en latín (término técnico)

<p>En biología, <i lang="la">in vitro</i> se refiere a experimentos fuera de un organismo.</p>

Nombre de un barco histórico

<p>El <i>Santa María</i> fue una de las carabelas de Colón.</p>

Pensamiento en una novela

<p>Juan miró al horizonte y pensó: <i>Nada volverá a ser igual</i>.</p>

Buenas prácticas

1. Semántica primero: Usar <i> solo cuando el texto requiera una voz alternativa.

2. Combinar con CSS: Personaliza la cursiva según el diseño, pero mantén el significado.

3. Jerarquía de encabezados: No usar <i> para títulos (prefiere <h1>-<h6>).

Conclusión:

La etiqueta <i> es útil para:

• Marcar términos técnicos, nombres científicos o contenido en otro idioma.

• Diferenciar texto sin implicar énfasis o importancia.

• Mantener una estructura semántica clara en tu HTML.

¡Úsala estratégicamente para mejorar la claridad y accesibilidad de tu contenido!