Qual é a maneira correta de colocar 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>devem ser evitados, 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. Isso não parece transmitir mais significado semântico <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.

1. 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.

2. O significado semântico pode mudar quando não está presente com força suficiente. Digamos que eu aceitei 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>evite esses problemas?

Resumo

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 houver ocasiões em que isso seria realmente menos útil. Portanto, isso me deixa de volta com a <i>tag humilde e me pergunto se essa linha de pensamento é a razão pela qual é deixada na especificação do HTML5?

Existem bons posts ou artigos sobre esse assunto também? Talvez pelos envolvidos na decisão de reter / criar a <i>tag?

Você deve usar métodos diferentes para diferentes casos de uso:

1. Se você deseja enfatizar uma frase, use <em>.
2. A <i>tag tem um novo significado no HTML5 , representando "um espaço de texto em uma voz ou humor alternativo". Portanto, você deve usar essa tag para coisas como pensamentos / aparências ou frases idiomáticas. A especificação também sugere nomes de navios (mas não sugere mais nomes de livros / músicas / filmes; use <cite>para isso).
3. Se o texto em itálico fizer parte de um contexto maior, digamos um parágrafo introdutório, você deve anexar o estilo CSS ao elemento maior, ou seja, p.intro { font-style: italic; }

<i>não está errado porque não é semântico. É errado (geralmente) porque é de apresentação. Separação de preocupações significa que informações de apresentação devem ser transmitidas com CSS.

Nomear em geral pode ser difícil de acertar, e os nomes das classes não são uma exceção, mas, no entanto, é o que você deve fazer. Se você estiver usando itálico para destacar um bloco do texto do corpo, talvez um nome de classe "distintivo de fluxo" esteja em ordem. Pense em reutilizar: os nomes das classes são para categorização - onde mais você gostaria de fazer a mesma coisa? Isso deve ajudá-lo a identificar um nome adequado.

<i>está incluído no HTML5, mas recebe semântica específica. Se o motivo pelo qual você está marcando algo como itálico atende a uma das semânticas identificadas na especificação, seria apropriado usá-lo <i>. Caso contrário, não.

Não sou especialista, mas eu diria que, se você realmente quer ser semântico, deve usar vocabulários (RDFa).

Isso deve resultar em algo assim:

<em property="italic" href="http://url/to/a/definition_of_italic"> Your text </em>

emé usado para a apresentação (os humanos verão em itálico) e os atributos propertye hrefestão vinculados a uma definição do que é itálico (para máquinas).

Você deve verificar se existe um vocabulário para esse tipo de coisa, talvez propriedades já existam.

Mais informações sobre RDFa aqui: http://www.alistapart.com/articles/introduction-to-rdfa/

TLDR

A maneira correta de colocar o texto em itálico é ignorar o problema até chegar ao CSS e estilizar de acordo com a semântica de apresentação. As duas primeiras opções que você forneceu podem estar certas, dependendo das circunstâncias. Os dois últimos estão errados.

Explicação mais longa

Não se preocupe com a apresentação ao escrever a marcação. Não pense em itálico. Pense em termos de semântica. Se isso exige ênfase no estresse, é um em. Se é tangencial ao conteúdo principal, é um aside. Talvez seja em negrito, talvez em itálico, talvez seja verde fluorescente. Não importa quando você está escrevendo uma marcação.

Quando você acessa o CSS, talvez já tenha um elemento semântico que faça sentido colocar itálico para todas as ocorrências em seu site. emé um bom exemplo Mas talvez você queira tudo aside > ul > liem itálico. Você precisa separar o pensamento sobre a marcação do pensamento sobre a apresentação.

Conforme mencionado por DisgruntledGoat , ié semântico no HTML5. A semântica parece meio estreita para mim, no entanto. O uso provavelmente será raro.

A semântica de emmudou no HTML5 para enfatizar a ênfase. strongtambém pode ser usado para mostrar importância. strongpode ser em itálico e não em negrito, se é assim que você deseja estilizar. Não permita que a folha de estilo do navegador limite você. Você pode até usar uma folha de estilo de redefinição para ajudá-lo a parar de pensar nos padrões. (Embora existam algumas ressalvas .)

class="italic"é ruim. Não use. Não é semântico e nem sequer é flexível. A apresentação ainda tem semântica, apenas um tipo diferente da marcação.

class="footnote"está emulando a semântica de marcação e também está incorreto. Seu CSS para a nota de rodapé não deve ser completamente exclusivo da sua nota de rodapé. Seu site ficará muito bagunçado se cada parte tiver um estilo diferente. Você deve ter alguns padrões visuais espalhados por suas páginas que podem ser transformados em classes CSS. Se o seu estilo para as notas de rodapé e as de bloco for muito parecido, coloque as semelhanças em uma classe em vez de se repetir várias vezes. Você pode considerar adotar as práticas do OOCSS (links abaixo).

A separação de preocupações e semântica é grande no HTML5. As pessoas geralmente não percebem que a marcação não é o único lugar em que a semântica é importante. Há semântica de conteúdo (HTML), mas também há semântica de apresentação (CSS) e semântica comportamental (JavaScript). Todos eles têm sua própria semântica separada que é importante prestar atenção para manter e manter-se SECO.

Recursos OOCSS

• CSS Orientado a Objetos
• Uma introdução ao CSS orientado a objetos (OOCSS)
• Como escrever CSS orientado a objetos
• Introdução ao CSS Orientado a Objetos (OOCSS)
• CSS orientado a objetos: o que, como e por que
• Mergulhando no CSS Orientado a Objetos

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.

Se não tem um significado especial, por que precisa ser separado da apresentação do texto que o precede? Essa sequência de texto parece um pouco estranha , porque eu a coloquei em itálico sem motivo.

No entanto, eu entendo o seu ponto. Não é incomum os designers produzirem designs que variam visualmente, sem variar significativamente. Eu já vi isso com mais frequência nas caixas: os designers nos oferecem designs, incluindo caixas com várias combinações de cores, cantos, gradientes e sombras, sem relação entre os estilos e o significado do conteúdo.

Porque estes são estilos razoavelmente complexos (com problemas do Internet Explorer associados) re-utilizados em lugares diferentes, criamos classes como box-1, box-2, para que possamos voltar a utilizar os estilos.

O exemplo específico de tornar um texto em itálico é muito trivial para se preocupar. Melhor deixar minúcias como essa para os Semantic Nutters discutirem.

O texto em itálico HTML exibe o texto em formato itálico.

<i>HTML italic text example</i>

A ênfase e os elementos fortes podem ser usados ​​para aumentar a importância de certas palavras ou frases.

<p>This is <em>emphasized </em> text format <em>example</em></p>

A tag de ênfase deve ser usada quando você deseja enfatizar um ponto no seu texto e não necessariamente quando deseja colocar o texto em itálico.

Consulte este guia para obter mais informações: Formatação de texto HTML

O ielemento é não-semântica, portanto, para os leitores de tela, Googlebot, etc., deve ser algum tipo de transparente (como spanou divelementos). Mas não é uma boa escolha para o desenvolvedor, porque une a camada de apresentação à camada de estrutura - e isso é uma prática ruim.

emO elemento ( strongtambém) deve sempre ser usado em um contexto semântico, não em uma apresentação. Ele deve ser usado sempre que alguma palavra ou frase for importante. Apenas para um exemplo na frase anterior, devo usar empara colocar mais ênfase na parte 'sempre deve ser usada'. Os navegadores fornecem algumas propriedades CSS padrão para esses elementos, mas você pode e deve substituir os valores padrão se seu design exigir isso para manter o significado semântico correto desses elementos.

<span class="italic">Italic Text</span>é o caminho mais errado. Primeiro de tudo, é inconveniente em uso. Em segundo lugar, sugere que o texto esteja em itálico. E a camada de estrutura (HTML, XML etc.) nunca deve fazê-lo. A apresentação deve ser sempre mantida separada da estrutura.

<span class="footnote">Italic Text</span>parece ser o melhor caminho para uma nota de rodapé. Não sugere nenhuma apresentação e apenas descreve a marcação. Você não pode prever o que acontecerá no recurso. Se uma nota de rodapé crescer no recurso, você poderá ser forçado a alterar o nome da classe (para manter alguma lógica no seu código).

Portanto, sempre que você tiver um texto importante, use emou strongpara enfatizá-lo. Mas lembre-se de que esses elementos são elementos embutidos e não devem ser usados ​​para enfatizar grandes blocos de texto.

Use CSS se você se preocupa apenas com a aparência de alguma coisa e sempre tenta evitar qualquer marcação extra.

Eu acho que a resposta é usar <em>quando você pretende enfatizar.

Se, ao ler o texto para si mesmo, você descobrir que usa uma voz ligeiramente diferente para enfatizar um ponto, ela deve ser usada <em>porque você deseja que um leitor de tela faça a mesma coisa.

Se for algo puramente estilístico, como o seu designer decidiu que todos os seus <h2>cabeçalhos ficariam melhores em Garamond itálico, não há razão semântica para incluí-lo no HTML e você deve alterar o CSS para os elementos apropriados.

Não vejo nenhum motivo para usá-lo <i>, a menos que você precise especificamente oferecer suporte a algum navegador herdado sem CSS.

Eu diria que use <em>para enfatizar elementos embutidos. Use uma classe para elementos de bloco, como blocos de texto. CSS ou não, o texto ainda precisa ser marcado. Seja para semântica ou para auxílio visual, suponho que você o esteja usando para algo significativo ...

Se você estiver enfatizando o texto por QUALQUER motivo, poderá usar <em>uma classe que coloque o texto em itálico.

Não há problema em quebrar as regras às vezes!

OK, a primeira coisa a notar é que <i> foi descontinuado e não deve ser usado <i>não foi preterido, mas ainda não recomendo usá-lo. Consulte os comentários para obter detalhes. Isso ocorre porque é totalmente contra manter a apresentação na camada de apresentação, que você apontou. Da mesma forma, <span class="italic">parece quebrar o molde também.

Então agora temos duas maneiras reais de fazer as coisas: <em>e <span class="footnote">. Lembre-se que emsignifica ênfase . Quando você deseja enfatizar uma palavra, frase ou frase, cole-a em <em>tags, independentemente de querer ou não itálico. Se você quer mudar o estilo de alguma outra forma, usar CSS: em { font-weight: bold; font-style: normal; }. Obviamente, você também pode aplicar uma classe à <em>tag: se você decidir que certas frases enfatizadas sejam exibidas em vermelho, forneça uma classe e adicione-as ao CSS:

Fancy some <em class="special">shiny</em> text?

em { font-weight: bold; font-style: normal; }
em.special { color: red; }

Se você estiver aplicando itálico por algum outro motivo, siga o outro método e dê uma classe à seção. Dessa forma, você pode alterar seu estilo sempre que quiser, sem ajustar o HTML. No seu exemplo, as notas de rodapé não devem ser enfatizadas - na verdade, elas devem ser enfatizadas, pois o objetivo de uma nota de rodapé é mostrar informações sem importância, mas interessantes ou úteis. Nesse caso, é muito melhor aplicar uma classe à nota de rodapé e fazer com que ela pareça uma da camada de apresentação - o CSS.

Use <em> se precisar de algumas palavras / caracteres em itálico no conteúdo sem outros estilos. Também ajuda a tornar o conteúdo semântico.

text-style é mais adequado para vários estilos e sem necessidade semântica.

FAZ

1. Atribua ao atributo da classe um valor indicando a natureza dos dados (isto class="footnote"é, é bom)

2. Crie uma folha de estilos CSS para a página

3. Defina um estilo CSS anexado à classe que você atribui ao elemento

   .footnote { font-style:italic; }

NÃO

1. Não use <i>ou <em>elementos - eles não são suportados e vinculam os dados e a apresentação muito próximos.
2. Não dê à classe um valor que indique as regras de apresentação (ou seja, não use class="italic").