Novos programadores são frequentemente confundidos ao ver múltiplos elementos que produzem resultados semelhantes. <em> e <i> são um exemplo comum, uma vez que ambos os elementos em itálico. Qual é a diferença? Qual deve usar?
Por defeito, o resultado visual é o mesmo. No entanto, o significado semântico é diferente. O elemento <em> representa a ênfase do seu conteúdo, enquanto que o elemento <i> representa o texto que é afastado da prosa normal, tal palavra estrangeira, pensamentos de personagem fictícios, ou quando o texto se refere à definição de uma palavra em vez de representar o seu significado semântico. (O título de uma obra, tal como o nome de um livro ou filme, deve usar <cite>.)
Isto significa que o direito a usar depende da situação. Nem para fins puramente decorativos, é para isso que serve o estilo CSS.
Um exemplo para <em> poderia ser: “Apenas fá-lo já!”, ou: “Tivemos de fazer algo quanto a isso”. Uma pessoa ou software que lesse o texto pronunciaria as palavras em itálico com ênfase, usando stress verbal.
Um exemplo para <i> poderia ser: “Apenas faça já”: “A Rainha Maria navegou ontem à noite”. Aqui, não há ênfase ou importância acrescida na palavra “Rainha Maria”. É meramente indicado que o objecto em questão não é uma rainha chamada Maria, mas sim um navio chamado Queen Mary. Outro exemplo para <i> poderia ser: “A palavra a é um artigo”.