CSS / HTML: Qual é a maneira correta de tornar o texto em itálico?

O que écorrigir maneira de tornar o texto em itálico? Eu já vi as quatro abordagens a seguir:

<i>Italic Text</i>

<em>Italic Text</em>

<span class="italic">Italic Text</span>

<span class="footnote">Italic Text</span>


<i>

Este é o "caminho antigo".<i> não tem significado semântico e apenas transmite o efeito de apresentação de tornar o texto em itálico. Tanto quanto posso ver, isso está claramente errado, porque é não-semântico.


<em>

Isso usa a marcação semântica para fins puramente de apresentação. Acontece que<em> por padrão, renderiza o texto em itálico e, portanto, é frequentemente usado por aqueles que sabem que<i> deve ser evitado, mas que desconhecem seu significado semântico. Nem todo o texto em itálico está em itálico porque é enfatizado. Às vezes, pode ser exatamente o oposto, como uma nota lateral ou um sussurro.


<span class="italic">

Isso usa uma classe CSS para colocar a apresentação. Isso geralmente é apresentado da maneira correta, mas, novamente, isso parece errado para mim. Parece não transmitir mais significado semântico que<i>. Mas, seus defensores choram, é muito mais fácil alterar todo o seu texto em itálico mais tarde, se você, por exemplo, o desejar em negrito. No entanto, esse não é o caso, porque eu ficaria com uma classe chamada "itálico" que tornava o texto em negrito. Além disso, não está claro por que eu desejaria alterar todo o texto em itálico no meu site ou, pelo menos, podemos pensar em casos em que isso não seria desejável ou necessário.


<span class="footnote">

Isso usa uma classe CSS para semântica. Até agora, essa parece ser a melhor maneira, mas na verdade tem dois problemas.

Nem todo o texto tem significado suficiente para justificar a marcação semântica. Por exemplo, o texto em itálico na parte inferior da página é realmente uma nota de rodapé? Ou é um aparte? Ou algo completamente diferente. Talvez não tenha um significado especial e precise ser renderizado em itálico para separá-lo na apresentação do texto que o precede.

O significado semântico pode mudar quando não está presente com força suficiente. Digamos que eu fui junto com a "nota de rodapé" com base em nada mais do que o texto estar na parte inferior da página. O que acontece quando, alguns meses depois, desejo adicionar mais texto na parte inferior? Não é mais uma nota de rodapé. Como podemos escolher uma classe semântica menos genérica que<em> mas evita esses problemas?


Sumário

Parece que o requisito da semântica parece ser excessivamente oneroso em muitos casos em que o desejo de fazer algo em itálico não se destina a ter significado semântico.

Além disso, o desejo de separar estilo da estrutura levou o CSS a ser apresentado como um substituto para<i> quando há ocasiões em que isso seria realmente menos útil. Então isso me deixa de volta com a humilde<i> tag e se perguntando se essa linha de pensamento é a razão pela qual é deixada na especificação HTML5?

Existem bons posts ou artigos sobre esse assunto também? Talvez por aqueles envolvidos na decisão de reter / criar o<i> etiqueta, rótulo, palavra-chave?

questionAnswers(12)

yourAnswerToTheQuestion