Não está errado porque não é semântico. É errado (normalmente) porque é presentacional. Separação de preocupações significa que as informações pré-convencionais devem ser transmitidas com o CSS.

Nomear em geral pode ser complicado para acertar, e os nomes das classes não são excepção, mas no entanto é o que você tem que fazer. Se você está usando itálico para fazer um bloco se destacar do texto do corpo, então talvez um nome de classe de "fluxo-distintivo" seria em ordem. Pense na reutilização: 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.

Está incluído no HTML5, mas é-lhe dada semântica específica. Se a razão pela qual você está marcando algo como itálico encontra uma das semânticas identificadas no spec, seria apropriado usar . Caso contrário, não.

Não sou especialista, mas diria que se queres mesmo ser semântica, devias usar vocabulários (RDFa). Isto deve resultar em algo do género:

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

em é usado para a apresentação (os humanos irão vê-la em itálico) e os atributos property e href estão a ligar-se a uma definição do que é itálico (para máquinas).

Devias verificar se existe um vocabulário para esse tipo de coisa, Talvez já existam propriedades. Mais informações sobre o RDFa aqui: http://www.alistapart.com/articles/introduction-to-rdfa/

Tl; dr

A forma correcta de fazer o texto itálico é ignorar o problema até chegar ao CSS, depois estilo de acordo com a semântica da apresentação. As duas primeiras opções que você forneceu pode estar certo, dependendo das circunstâncias. Os últimos dois estão errados.

Explicação Mais Longa

Não te preocupes com a apresentação quando escreveres a marcação. Não pense em termos de Itálico. Pense em termos de semântica. Se requer ênfase de stress, então é um em. Se for tangencial ao conteúdo principal, então é um aside. Talvez seja ousado, talvez seja itálico, talvez seja verde fluorescente. Não importa quando estás a marcar.

Quando você chegar ao CSS, você já pode ter um elemento semântico que faz sentido colocar itálico para todas as suas ocorrências em seu site. em é um bom exemplo. Mas talvez queiras tudo no teu site em itálico. Você tem que separar o pensamento sobre a marca de pensar sobre o apresentacao.

Tal como mencionado por i é semântica em HTML5. A semântica parece-me um pouco estreita. O uso provavelmente será raro.

A semântica de em mudou em HTML5 para ênfase de stress. strong também pode ser usado para mostrar importância. strong pode ser itálico em vez de negrito, se é assim que o queres estilo. Não deixe que a 'stylesheet' do navegador o limite. Você pode até usar uma reiniciar a 'stylesheet' para o ajudar a parar de pensar dentro padrao. (Embora haja algumas ressalvas .)

class="italic" é mau. Não o uses. Não é semântica nem flexível. A apresentação ainda tem semântica, apenas um tipo diferente de marcação.

class="footnote" é emular semântica de marcação, e é incorreto também. Seu CSS para a nota de rodapé não deve ser completamente exclusivo para a sua nota de rodapé. Seu site vai parecer muito bagunçado se cada parte é estilo diferente. Você deve ter alguns padrões visuais espalhados através de suas páginas que podes transformar-te em aulas de CSS. Se o seu estilo para as suas notas de rodapé e seus blockquotes são muito semelhantes, então você deve colocar as semelhanças em uma classe ao invés de repetir-se várias vezes. Você pode considerar adotar as práticas do OOCSS (links abaixo).

A separação entre preocupações e semântica é grande no HTML5. As pessoas muitas vezes não percebem que a marca não é o único lugar onde a semântica é importante. Há semântica de conteúdo (HTML), mas há também semântica presentacional (CSS) e semântica comportamental (Javascript) também. Todos eles têm sua própria semântica separada que são importantes para prestar atenção para a manutenção e ficar seco.

Recursos OOCSS

• CSS orientado para objectos
• An Introduction To Object Oriented CSS (OOCSS))
• Como escrever CSS orientado a objectos
• começar com um CSS orientado para objectos (OOCSS)
• CSS orientado a Objetos: o quê, como e porquê
• mergulho em CSS orientado para objectos

Talvez não tenha um significado especial e só precise ser representado em itálico para separá-lo presentacionalmente do texto que o precedeu.

Se não tem um significado especial, por que é necessário separá-lo do texto que o precedeu? Esta série de texto parece um pouco estranha, porque a italizei sem motivo.

Mas percebo o que queres dizer. Não é incomum para designers produzir desenhos que variam visualmente, sem variar significativamente. Eu vi isso mais frequentemente com caixas: designers nos dará desenhos, 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 questões associadas ao Internet Explorer) reutilizados em diferentes lugares, criamos classes como box-1, box-2, para que possamos reutilizar os estilos.

O exemplo específico de fazer algum texto itálico é muito trivial para se preocupar. É melhor deixar as minúcias assim para os malucos semânticos discutirem.

Acho que a resposta é usar {[[0]} quando pretendes ênfase.

Se ao ler o texto para si próprio, descobrir que usa umaligeiramente voz diferente de realçar {[7] } um ponto, então deve usar {[[0]} porque gostaria que um leitor de ecrã fizesse a mesma coisa.

Se é uma coisa puramente de estilo, tal como o seu designer decidiu que todos os seus títulos {[[2]} ficaria melhor em itálico Garamond, então não há nenhuma razão semântica para incluí-lo no HTML e você deve apenas alterar o CSS para os elementos apropriados.

Não vejo nenhuma razão para usar {[[3]}, a menos que precises especificamente de suportar algum navegador legado sem CSS.

i elemento é não-semântico para os leitores de tela, Googlebot etc. deve ser algum tipo de transparente (tal como span ou div elementos). Mas não é uma boa escolha para o desenvolvedor, porque ele junta a camada de apresentação Com a camada de estrutura - e isso é uma má prática.

em Elemento (strong também) deve ser usado sempre no contexto semântico, não na apresentação um. Tem de ser usado sempre que alguma palavra ou frase é importante. Apenas para um exemplo no anterior frase que eu deveria usar em para colocar mais ênfase na parte "deve ser sempre usado". Os navegadores fornecem algumas propriedades CSS predefinidas para estes elementos, mas você pode e é suposto sobrepor os valores predefinidos se o seu design exigir isto para manter o significado semântico correcto destes elementos.

<span class="italic">Italic Text</span> é a maneira mais errada. Em primeiro lugar, é inconveniente em uso. Em segundo lugar, sugere que o texto seja itálico. And structure layer (HTML, XML, etc. Nunca devia ter feito isso. ele. A apresentação deve ser sempre mantida separada da estrutura.

<span class="footnote">Italic Text</span> parece ser a melhor maneira de uma nota de rodapé. Não sugere que qualquer apresentação descreva apenas a margem. Você não pode prever o que vai acontecer no recurso. Se a nota de rodapé vai crescer no recurso você pode ser forçado a mudar o seu nome de classe (para manter algumas lógicas em seu código).

Por isso, sempre que tiver algum texto importante, use em ou strong para enfatizá-lo. Mas lembre-se que estes elementos estão alinhados elementos e não devem ser usados para enfatizar grande bloco de texto.

Utilize o CSS se se importar apenas com a aparência de algo e tente sempre evitar qualquer marcação extra.

O texto em itálico HTML mostra o texto em 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 marca de ênfase deve ser usada quando você quer enfatizar um ponto em seu texto e não necessariamente quando você quer itálico esse texto.

Ver este guia para mais: http://www.snoopcode.com/html/html-text-formating

Eu diria para usar <em> para enfatizar os elementos inline. Use uma classe para elementos de bloco como blocos de texto. CSS ou não, o texto ainda tem que ser marcado. Seja para semântica ou para ajuda visual, presumo que a Use para algo significativo...

Se você está enfatizando o texto por qualquer razão, você pode usar {[[0]}, ou uma classe que Itálico o seu texto.

Não faz mal quebrar as regras às vezes!

OK, a primeira coisa a notar é que <i> tem sido substituído, e não deve ser usado <i> não foi preterida, mas eu ainda não recomendo usá-lo-consulte os comentários para detalhes. Isto é porque vai inteiramente 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 em significa ênfase . Quando desejar aplicar ênfase a uma palavra, frase ou frase, coloque-a em <em> Etiquetas, independentemente de querer itálico ou não. Se quiser alterar o estilo de alguma outra forma, use o CSS: em { font-weight: bold; font-style: normal; }. Claro que também pode aplicar uma classe à etiqueta <em>: se decidir que determinadas frases sublinhadas devem aparecer a vermelho, dê - lhes uma classe e adicione-a ao CSS:

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

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

Se você está aplicando itálico por alguma outra razão, vá com o outro método e dê o Secção A. Dessa forma, você pode mudar seu estilo sempre que quiser, sem ajustar o HTML. No seu exemplo, as notas de pé-de-página não devem ser realçadas-na verdade, devem ser deitadas de pé-de-página, uma vez que o objectivo de uma nota de pé-de-página é mostrar informações sem importância, mas interessantes ou úteis. Neste caso, você está muito melhor aplicando uma classe para a nota de rodapé e fazendo com que pareça um na camada de apresentação-o CSS.

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

O estilo de texto é mais adequado para vários estilos e sem necessidade semântica.

Dó

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

2. Criar uma folha de estilo CSS para a Página

3. Define um estilo CSS que está ligado à classe que atribui ao elemento

   .footnote { font-style:italic; }

NÃO

1. Não use <i> ou <em> elementos - eles não são suportados e liga os dados e a apresentação muito perto.
Não! dê à classe a um valor que indique as regras de apresentação (isto é, não utilize class="italic").