dolor de cabeza con el elemento i de html

Te traduzco lo que la w3c quiso decir xD.

Indica que esa frase o palabra es resaltante en el texto, esto se usa más que todo para exploradores debido a que ellos no interpretan el texto plano dentro de las etiquetas <p></p> por lo tanto no saben cuando un texto o frase se resalta.

Nota: solo es para resaltar, velo como un indicador en código para las comillas y signos de exclamación.
Creo que me comprendes mal, yo NO hablo de estética hablo de código.

Debes tener en cuenta 2 cosas:

1. html5 está hecho para ser un poco más semántico que sus versiones anteriores, o en otras palabras, que el código limpio emule características del habla.
2. para comprender lo que significa la etiqueta i debes entender que no tiene un uso para los humanos (no es para darle estética o características adicionales al leer el texto).

Su uso es específicamente para programas como buscadores o exploradores para ciegos que le ponen una vos al texto plano. Esta etiqueta solo indica que el texto entre ella es un poco más relevante del resto y si lo estuviéramos leyendo en voz alta lo pronunciamos un poco diferente. Un ejemplo de esto es cuando leemos en un párrafo algo entre paréntesis, siempre hacemos una leve pausa, usamos un tono diferente o a lo macho decimos "entre paréntesis". Para indicar este cambio a los programas que son incapaces de entender el texto plano se usa esta etiqueta eso es todo.

Por ultimo su uso no es necesario. A decir verdad es una de las pocas etiquetas que de verdad no le veo mucha utilidad, así que no te mortifiques tanto la vida con esa etiqueta en particular.

Prosa normal: como normal mente lees.
desplazado de la prosa normal: se debe leer un poco diferente, para humanos es lo mismo que una ""
voz diferente: se lee en un tono diferente.
me refiero a ambas, tanto comillas como paréntesis se debería usar la etiqueta <i> debido a que ambas se usan para denotar algo importante solo que las comillas es para denotar algo relevante del tema y los paréntesis para ampliar la descripción de alguna palabra o frase del texto.

En cuanto a <em>, pues es algo un poco más subjetivo, en lo personal no le veo una utilidad real. Sirve para denotar elementos de importancia al leer el texto (por programas no humanos), de esta manera un programa sabrá cuando algo es una afirmación y cuando una simple frase complementaria. De verdad no le veo ningún uso y no entiendo por qué fue agregada.

Aparte para comprender donde debe ser usada lamento informarte que debes poseer conocimientos más o menos avanzados de redacción, para poder identificar los distintos tiempos verbales. Pero como dije antes no le veo ningún uso así que no te mortifiques con ella.
Justamente, cambia importancia por relevancia. La etiqueta <em> es muy jodida de explicar ya que denota que esa esa frase o elemento del texto es especial pero no más importante que el resto.

Lo he dicho ya varias veces pero no me canso de decir que no tiene utilidad jaja xD (ojala los creadores de html 5 lean esto y digan cuál es su utilidad de esa etiqueta, de verdad ayudaría pero en fin).

En cuanto a las etiquetas <i> pueden ser usadas en frases que no tengan ni comillas ni paréntesis pero cada vez que se usan deberían usarse ejemplo si hago una cita:

<p>según "<i>Carlos j. Nieto</i>" los átomos...</p>

O si agrego un paréntesis:


<p>los átomos poseen <b>electrones</b> y <b>protones</b> (<i>ver: dibujo 5</i>)</p>

Espero haberme explicado.
Se es demasiado tedioso trabajar con formatos html en especial con este todos los días saliendo del trabajo paso por una farmacia a comprar ibuprofeno o naproxeno 500 mg porque si no en casa estoy demasiado mal.
Pero, ¿no es acaso el "em" un còdigo de tamaño de fuente?. por lo menos asì lo conocì yo, (¿estarè muy desfazado?). Lo digo porque el pìxel indica un tamaño de fuente dado, y cuando deseas poner despues en otra parte, otro tamaño de fuente, debes poner otro tamaño de pìxel, y en el "em" este significa mas o menos que la fuente originaria de la pagina web es por ejemplo la Times Now Roma o algo asì, entonces cuando pones "em 2" lo que estàs haciendo es darle el doble de tamaño a la fuente. si el Times tiene 12 pixeles de alto, el "em 2" tiene entonces 24 pìxeles de alto. Si estoy desfazado me lo decìs