Los nuevos desarrolladores suelen confundirse al ver múltiples 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?
Por defecto, 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 el texto que se aparta de la prosa normal, como una palabra extranjera, los pensamientos de un personaje de ficción 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 de una película, debe usar <cite>.)
Esto significa que el correcto uso depende de la situación. Ninguno es para fines puramente decorativos, para eso está el estilo CSS.
Un ejemplo para <em> podría ser: «¡Hazlo ya!», o: «Teníamos que hacer algo al respecto». Una persona o un programa informático que leyera el texto pronunciaría las palabras en cursiva con un énfasis, utilizando el acento verbal.
Un ejemplo para <i> podría ser: «El Queen Mary zarpó anoche». Aquí no se añade ningún énfasis o importancia a la palabra «Queen Mary». Simplemente se indica que el objeto en cuestión no es una reina llamada María, sino un barco llamado Queen Mary. Otro ejemplo para <i> podría ser: «La palabra el es un artículo».