Etiqueta i en HTML
¿Qué es la etiqueta <i> en HTML?
La etiqueta HTML <i> se utiliza para aplicar una fuente en cursiva o un estilo de fuente diferente al texto en una página web. A diferencia de la etiqueta <em>, la etiqueta <i> se utiliza para resaltar el texto como diferente, sin necesariamente enfatizar su importancia.
La etiqueta <i> se puede utilizar en combinación con otros elementos, como <p>, <span> o <div>, para aplicar un estilo de fuente en cursiva o un estilo de fuente diferente a una parte del texto. También se puede utilizar en combinación con otras etiquetas de formato, como <b> o <u>, para aplicar estilos de formato específicos al texto.
Aunque la etiqueta <i> se utiliza principalmente para aplicar una fuente en cursiva, su uso también se extiende para resaltar una palabra o frase de manera sutil, por ejemplo, para indicar términos técnicos, títulos de libros, nombres de películas, etc.
Ejemplo de uso
Aquí te presento un ejemplo sencillo de cómo se puede utilizar la etiqueta <i> en HTML5:
<p>La película <i>El padrino</i> es un clásico del cine americano.</p>
Lenguaje del código: HTML, XML (xml)En este ejemplo, hemos utilizado la etiqueta <i> para aplicar un estilo de fuente en cursiva al título de la película “El padrino”. Esto indica al usuario que el título es diferente del resto del texto y que puede ser un término técnico o un título de obra.
Además de la etiqueta <i>, también existe la etiqueta <em> que se utiliza para enfatizar el texto en un contexto diferente, principalmente para hacerlo más importante o destacado.
Atributos
La etiqueta HTML <i> no admite muchos atributos, ya que se utiliza principalmente para aplicar un estilo de fuente en cursiva al texto en una página web.
Los atributos principales que admite son los siguientes:
- class: este atributo se utiliza para aplicar estilos CSS a la etiqueta <i> y para agrupar varias etiquetas con el mismo estilo.
- id: este atributo se utiliza para identificar la etiqueta en el documento y puede ser útil para aplicar estilos CSS o para acceder a la etiqueta mediante JavaScript.
Además de estos atributos, la etiqueta <i> también admite otros atributos opcionales, como “lang” y “dir”, que se utilizan para especificar el idioma y la dirección de escritura del texto.
Ejemplo:
Aquí te presento un ejemplo de cómo se puede utilizar el atributo “class” en la etiqueta <i>:
<p>La <i class="destacado">nueva función</i> del sistema está disponible en la última actualización.</p>
Lenguaje del código: HTML, XML (xml)En este ejemplo, hemos utilizado la etiqueta <i> para aplicar un estilo de fuente en cursiva al texto “nueva función” y hemos utilizado el atributo “class” para aplicar un estilo personalizado con CSS a la etiqueta.
En la regla CSS definida, hemos aplicado un estilo de fuente en cursiva y un color rojo oscuro al texto enfatizado.
Más ejemplos
Aquí te presento dos ejemplos completos y avanzados de la etiqueta <i> de HTML5:
Ejemplo 1: Utilizando la etiqueta <i> para aplicar un estilo de fuente en cursiva al texto y aplicando estilos personalizados con CSS.
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de etiqueta i</title>
<style>
.i {
font-style: italic;
color: #00ff00;
font-size: 1.2em;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<p>Este es un texto en el que hemos aplicado un estilo de fuente <i class="i">en cursiva</i> y hemos utilizado el atributo "class" para aplicar estilos personalizados con CSS a la etiqueta.</p>
</body>
</html>
Lenguaje del código: HTML, XML (xml)En este ejemplo, hemos utilizado la etiqueta <i> para aplicar un estilo de fuente en cursiva al texto “en cursiva” y hemos utilizado el atributo “class” para aplicar estilos personalizados con CSS a la etiqueta.
En la regla CSS definida, hemos aplicado un estilo de fuente en cursiva, un color verde brillante, un tamaño de fuente de 1.2 em y una fuente Arial o sans-serif.
Ejemplo 2: Utilizando la etiqueta <i> dentro de un enlace <a> para resaltar el texto y crear un enlace.
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de etiqueta i en un enlace</title>
</head>
<body>
<p>Para obtener más información, visite nuestro sitio web <a href="https://www.ejemplo.com"><i>pulsando aquí</i></a>.</p>
</body>
</html>
Lenguaje del código: HTML, XML (xml)En este ejemplo, hemos utilizado la etiqueta <i> dentro de un enlace <a> para resaltar el texto “pulsando aquí”.
Esto indica al usuario que puede obtener más información al hacer clic en el enlace. Al hacer clic en el enlace, se abrirá el sitio web especificado en el atributo “href”.