Los nuevos desarrolladores a menudo se confunden al ver varios elementos que producen resultados similares. <em> y <i> son un ejemplo común, ya que ambos ponen el texto en cursiva. ¿Cuál es la diferencia? ¿Cuál deberías usar?
De forma predeterminada, el resultado visual es el mismo. Sin embargo, el significado semántico es diferente. El elemento <em> representa el énfasis de su contenido, mientras que el elemento <i> representa texto que se desprende de la prosa normal, una palabra extraña, pensamientos de personajes ficticios, o cuando el texto se refiere a la definición de una palabra en lugar de representar su significado semántico. (El título de una obra, como el nombre de un libro o película, debe usar <cite>.)
Esto significa que el uso correcto depende de la situación. Tampoco lo es para fines puramente decorativos, para eso es para lo que está el estilo CSS.
Un ejemplo para <em> podría ser: «¡Solo hazlo ya!», o: «Teníamos que hacer algo al respecto». Una persona o un software que lee el texto pronunciaría las palabras en cursiva con énfasis, usando estrés verbal.
Un ejemplo para <i> podría ser: «El Queen Mary navegó anoche». Aquí, no hay énfasis o importancia adicional en la palabra «Reina María». Simplemente se indica que el objeto en cuestión no es una reina llamada Mary, sino un barco llamado Queen Mary. Otro ejemplo para <i> podría ser: «La palabra the es un artículo».