En este artículo, aprenderemos cómo usar la etiqueta <i> y en qué se diferencia de la etiqueta <em>.
En versiones anteriores de HTML, la etiqueta <i> se usaba para mostrar texto en cursiva. Pero en HTML 5, la definición ha cambiado. Exploraremos esa nueva definición y aprenderemos sobre otras formas de aplicar estilo al texto en cursiva usando CSS.
¿Qué es la etiqueta <i>?
La etiqueta <i>, o elemento de texto idiomático, es un espacio de texto que representa un cambio en el estado de ánimo o la calidad del texto. Este texto se muestra en cursiva.
Veamos algunas razones por las que es posible que quieras utilizar la etiqueta <i>.
Usar la etiqueta <i> para marcar frases en un idioma diferente
Puede utilizar la etiqueta <i> para marcar un espacio de texto en un idioma diferente. Este ejemplo pone en cursiva una frase latina.
<p>Stacy se acaba de tatuar la frase <i>Audentes fortuna iuvat</i> que significa "La fortuna favorece a los valientes".</p>
También puede usar el atributo lang en la etiqueta <i> para representar frases que están en un idioma diferente al del texto que las rodea.
<p>La primera frase que Matt aprendió en italiano es <i lang="it">Vorrei una birra</i>, que se traduce como "Me gustaría una cerveza". </p> 
Usar la etiqueta <i> para mostrar los pensamientos de alguien
También puede usar la etiqueta <i> para resaltar los pensamientos internos de una persona.
<p>Después de que Ben conoció a los padres de su novia, pensó para sí mismo: <i>Realmente espero que les haya agradado</i>.</p>
Usando la etiqueta <i> para el nombre de un barco
Si desea utilizar el nombre de un barco, puede envolver ese nombre en etiquetas <i>.
<p>El <i>USS Arizona</i> era un acorazado de la Armada de los Estados Unidos construido en la década de 1910.</p> 
Uso de la etiqueta <i> para descripciones taxonómicas
Según el Convenio de Diversidad Biológica,
La taxonomía es la ciencia de nombrar, describir y clasificar organismos e incluye todas las plantas, animales y microorganismos del mundo.
Este sería un ejemplo del uso de la etiqueta <i> para el término Felis catus.
<p>Otro término para el gato doméstico sería <i>Felis catus</i>.</p>
Diferencias entre la etiqueta <i> y la etiqueta <em> en HTML
Puedes pensar que las etiquetas <i> y <em> tienen el mismo significado porque tienen el mismo aspecto en el navegador. Pero las dos etiquetas tienen significados diferentes entre sí.
La etiqueta <em>, o elemento de énfasis, debe usarse cuando desee poner énfasis en una palabra o un espacio de texto.
A continuación, se muestra un ejemplo con la etiqueta <em>.
<p>¡Deja de ser un bebé y <em>hazlo</em> ya!</p>
Los seres humanos y los lectores de pantalla pondrán énfasis verbal en la palabra "hacer". Esto difiere de la etiqueta <i> donde no se puso énfasis adicional en el texto.
¿Debería utilizar la etiqueta <i> para diseñar?
No debe utilizar la etiqueta <i> con fines de estilo. Si desea aplicar estilo al texto en cursiva, debe usar la propiedad de estilo de fuente CSS.
<p class="demo-para">Estoy usando CSS para darle estilo a este texto en cursiva.</p> .demo-para {
font-style: italic;
}
¿Debería utilizar la etiqueta <i> o <span> para los iconos?
A lo largo de los años, se ha debatido si es "correcto" utilizar etiquetas <i> o etiquetas <span> para agregar iconos a su sitio web.
Algunos argumentarán que no tiene nada de malo y que es una práctica bastante común, mientras que otros piensan que es un mal uso de la etiqueta <i> y que debería usar la etiqueta <span> en su lugar.
Aquí hay una respuesta de Font Awesome con respecto al uso de <i> para sus íconos:
Nos gusta la etiqueta<i>por brevedad y porque la mayoría de la gente usa<em> </em>para texto semántico enfatizado / en cursiva en estos días. Si esa no es tu taza de té, usar un<span>es semánticamente más correcto.
Mi objetivo no es hacer que elija un lado sobre el otro en este debate, sino más bien hacer que esté al tanto de esta discusión en curso.
Conclusión
La etiqueta <i> es un espacio de texto que representa un cambio en el estado de ánimo o la calidad del texto. Si desea poner énfasis en el texto, la etiqueta apropiada sería la etiqueta <em>.
La etiqueta <i> no debe usarse con fines de estilo. La forma correcta de aplicar estilo al texto en cursiva es utilizar la propiedad de font-style CSS.
Espero que haya disfrutado de este artículo y haya aprendido a utilizar la etiqueta <i>.
Traducido del artículo de Jessica Wilkins - HTML Italics Tutorial – How to Make Text Italic with the <i> tag