¿Cuál es la forma correcta de poner el texto en cursiva? He visto los siguientes cuatro enfoques:

<i>Italic Text</i>

<em>Italic Text</em>

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

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

<i>

Esta es la "vieja forma". <i>no tiene significado semántico y solo transmite el efecto de presentación de poner el texto en cursiva. Por lo que puedo ver, esto es claramente incorrecto porque no es semántico.

<em>

Esto utiliza marcado semántico para fines puramente de presentación. Lo que ocurre es que <em>por defecto muestra texto en cursiva y por lo que se utiliza a menudo por aquellos que son conscientes de que <i>debe evitarse, pero que no son conscientes de su significado semántico. No todo el texto en cursiva es cursiva porque está enfatizado. A veces, puede ser exactamente lo contrario, como una nota al margen o un susurro.

<span class="italic">

Esto usa una clase CSS para colocar la presentación. Esto a menudo se promociona como la forma correcta, pero nuevamente, esto me parece incorrecto. Esto no parece transmitir más significado semántico que eso <i>. Pero, dicen sus defensores, es mucho más fácil cambiar todo el texto en cursiva más adelante si, por ejemplo, lo quieres en negrita. Sin embargo, este no es el caso porque me quedaría con una clase llamada "cursiva" que mostraba el texto en negrita. Además, no está claro por qué quisiera cambiar todo el texto en cursiva en mi sitio web o al menos podemos pensar en casos en los que esto no sería deseable o necesario.

<span class="footnote">

Esto usa una clase CSS para semántica. Hasta ahora, esta parece ser la mejor manera, pero en realidad tiene dos problemas.

1. No todo el texto tiene un significado suficiente para garantizar el marcado semántico. Por ejemplo, ¿el texto en cursiva en la parte inferior de la página es realmente una nota al pie? ¿O es un aparte? O algo completamente diferente. Quizás no tiene un significado especial y solo necesita ser traducido en cursiva para separarlo presentacionalmente del texto que lo precede.

2. El significado semántico puede cambiar cuando no está presente con suficiente fuerza. Digamos que seguí con la "nota al pie" basada en nada más que el texto que está al final de la página. ¿Qué sucede cuando unos meses después quiero agregar más texto en la parte inferior? Ya no es una nota al pie. ¿Cómo podemos elegir una clase semántica que sea menos genérica <em>pero que evite estos problemas?

Resumen

Parece que el requisito de la semántica parece ser demasiado oneroso en muchos casos en los que el deseo de hacer algo en cursiva no debe tener un significado semántico.

Además, el deseo de separar el estilo de la estructura ha llevado a CSS a promocionarse como un reemplazo para <i>cuando hay ocasiones en que esto sería realmente menos útil. Entonces, esto me deja con la humilde <i>etiqueta y me pregunto si este tren de pensamiento es la razón por la que se deja en la especificación HTML5.

¿Hay alguna buena publicación de blog o artículos sobre este tema también? ¿Quizás por aquellos involucrados en la decisión de retener / crear la <i>etiqueta?

Debe usar diferentes métodos para diferentes casos de uso:

1. Si quieres enfatizar una frase, úsala <em>.
2. La <i>etiqueta tiene un nuevo significado en HTML5 , que representa "una extensión de texto en una voz o estado de ánimo alternativo". Por lo tanto, debe usar esta etiqueta para cosas como pensamientos / apartados o frases idiomáticas. La especificación también sugiere nombres de barcos (pero ya no sugiere nombres de libros / canciones / películas; utilícelos <cite>para eso).
3. Si el texto en cursiva es parte de un contexto más amplio, digamos un párrafo introductorio, debe adjuntar el estilo CSS al elemento más grande, es decir p.intro { font-style: italic; }

<i>no está mal porque no es semántico. Está mal (generalmente) porque es presentacional. La separación de la preocupación significa que la información de presentación debe transmitirse con CSS.

Nombrar en general puede ser difícil de entender, y los nombres de las clases no son una excepción, pero es lo que debe hacer. Si está usando cursiva para hacer que un bloque se destaque del texto del cuerpo, entonces tal vez un nombre de clase de "distintivo de flujo" estaría en orden. Piense en la reutilización: los nombres de las clases son para categorización. ¿Dónde más le gustaría hacer lo mismo? Eso debería ayudarlo a identificar un nombre adecuado.

<i>está incluido en HTML5, pero se le da una semántica específica. Si la razón por la que está marcando algo en cursiva cumple con una de las semánticas identificadas en la especificación, sería apropiado usarla <i>. De otra forma no.

No soy un experto, pero diría que si realmente quieres ser semántico, debes usar vocabularios (RDFa).

Esto debería resultar en algo así:

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

emse usa para la presentación (los humanos lo verán en cursiva) y los atributos propertyy hrefse vinculan a una definición de lo que es cursiva (para máquinas).

Debe verificar si hay un vocabulario para ese tipo de cosas, tal vez las propiedades ya existan.

Más información sobre RDFa aquí: http://www.alistapart.com/articles/introduction-to-rdfa/

TLDR

La forma correcta de hacer que el texto esté en cursiva es ignorar el problema hasta llegar al CSS, luego aplicar el estilo de acuerdo con la semántica de presentación. Las dos primeras opciones que proporcionó podrían ser correctas dependiendo de las circunstancias. Los dos últimos están equivocados.

Explicación más larga

No se preocupe por la presentación al escribir el marcado. No pienses en términos de cursiva. Piensa en términos de semántica. Si requiere énfasis en el estrés, entonces es un em. Si es tangencial al contenido principal, entonces es un aside. Quizás sea negrita, quizás sea cursiva, tal vez sea verde fluorescente. No importa cuando escribes marcado.

Cuando llegue al CSS, es posible que ya tenga un elemento semántico que tenga sentido poner cursiva para todas sus ocurrencias en su sitio. emEs un buen ejemplo. Pero tal vez quieras todo aside > ul > lien tu sitio en cursiva. Debe separar el pensamiento sobre el marcado del pensamiento sobre la presentación.

Como mencionó DisgruntledGoat , ies semántico en HTML5. Sin embargo, la semántica me parece un poco estrecha. El uso probablemente será raro.

La semántica de emha cambiado en HTML5 para enfatizar el énfasis. strongtambién se puede usar para mostrar importancia. strongpuede ser cursiva en lugar de negrita si así es como quieres darle estilo. No permita que la hoja de estilo del navegador lo limite. Incluso puede usar una hoja de estilo de reinicio para ayudarlo a dejar de pensar dentro de los valores predeterminados. (Aunque hay algunas advertencias ).

class="italic"es malo. No lo uses No es semántico y no es flexible en absoluto. La presentación todavía tiene semántica, solo un tipo diferente de marcado.

class="footnote"está emulando la semántica de marcado y también es incorrecta. Su CSS para la nota al pie no debe ser completamente exclusivo de su nota al pie. Su sitio se verá demasiado desordenado si cada parte tiene un estilo diferente. Debería tener algunos patrones visuales dispersos en sus páginas que puede convertir en clases CSS. Si su estilo para sus notas al pie y sus citas en bloque son muy similares, entonces debe poner las similitudes en una clase en lugar de repetirlas una y otra vez. Puede considerar adoptar las prácticas de OOCSS (enlaces a continuación).

La separación de las preocupaciones y la semántica son importantes en HTML5. La gente a menudo no se da cuenta de que el marcado no es el único lugar donde la semántica es importante. Hay semántica de contenido (HTML), pero también hay semántica de presentación (CSS) y semántica de comportamiento (JavaScript) también. Todos tienen su propia semántica separada a la que es importante prestar atención para mantenerla y mantenerse SECO.

Recursos OOCSS

• CSS orientado a objetos
• Una introducción al CSS orientado a objetos (OOCSS)
• Cómo escribir CSS orientado a objetos
• Introducción a CSS orientado a objetos (OOCSS)
• CSS orientado a objetos: qué, cómo y por qué
• Inmersión en CSS orientado a objetos

Quizás no tiene un significado especial y solo necesita ser traducido en cursiva para separarlo presentacionalmente del texto que lo precede.

Si no tiene un significado especial, ¿por qué necesita separarse de forma presentacional del texto que lo precede? Esta secuencia de texto parece un poco extraña , porque la he escrito en cursiva sin ninguna razón.

Aunque sí entiendo tu punto. No es raro que los diseñadores produzcan diseños que varían visualmente, sin variar significativamente. Lo he visto con mayor frecuencia con cajas: los diseñadores nos darán diseños que incluyen cajas con varias combinaciones de colores, esquinas, degradados y sombras paralelas, sin relación entre los estilos y el significado del contenido.

Debido a que estos son estilos razonablemente complejos (con problemas de Internet Explorer asociados) reutilizado en diferentes lugares, creamos clases como box-1, box-2de modo que podemos volver a utilizar los estilos.

Sin embargo, el ejemplo específico de poner algo de texto en cursiva es demasiado trivial como para preocuparse. Es mejor dejar minucias así para que los Semantic Nutters discutan.

El texto en cursiva HTML muestra el texto en formato en cursiva.

<i>HTML italic text example</i>

El énfasis y los elementos fuertes se pueden usar para aumentar la importancia de ciertas palabras u oraciones.

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

La etiqueta de énfasis debe usarse cuando desea enfatizar un punto en su texto y no necesariamente cuando desea poner en cursiva ese texto.

Consulte esta guía para obtener más información: formato de texto HTML

El ielemento no es semántico, por lo que para los lectores de pantalla, Googlebot, etc., debería ser algún tipo de transparente (igual que spano divelementos). Pero no es una buena opción para el desarrollador, porque une la capa de presentación con la capa de estructura, y esa es una mala práctica.

emEl elemento ( strongtambién) debe usarse siempre en un contexto semántico, no uno de presentación. Tiene que usarse cuando alguna palabra u oración es importante. Solo por un ejemplo en la oración anterior, debería usar empara poner más énfasis en la parte 'debería usarse siempre'. Los navegadores proporcionan algunas propiedades CSS predeterminadas para estos elementos, pero puede y se supone que debe anular los valores predeterminados si su diseño requiere que esto mantenga el significado semántico correcto de estos elementos.

<span class="italic">Italic Text</span>Es la manera más incorrecta. En primer lugar, es inconveniente en uso. En segundo lugar, sugiere que el texto debe estar en cursiva. Y la capa de estructura (HTML, XML, etc.) nunca debería hacerlo. La presentación siempre debe mantenerse separada de la estructura.

<span class="footnote">Italic Text</span>Parece ser la mejor manera para una nota al pie. No sugiere ninguna presentación y solo describe el marcado. No puede predecir lo que sucederá en la función. Si una nota al pie crecerá en la función, es posible que se vea obligado a cambiar su nombre de clase (para mantener cierta lógica en su código).

Entonces, cuando tenga algún texto importante, úselo emo strongpara enfatizarlo. Pero recuerde que estos elementos son elementos en línea y no deben usarse para enfatizar grandes bloques de texto.

Use CSS si solo le importa cómo se ve algo y siempre trate de evitar cualquier marcado adicional.

Creo que la respuesta es usar <em>cuando pretendes enfatizar.

Si al leer el texto para usted mismo, encuentra que usa una voz ligeramente diferente para enfatizar un punto, entonces debería usarlo <em>porque desea que un lector de pantalla haga lo mismo.

Si es puramente una cuestión de estilo, como que su diseñador haya decidido que todos sus <h2>encabezados se verían mejor en Garamond en cursiva, entonces no hay ninguna razón semántica para incluirlo en el HTML y simplemente debe alterar el CSS para los elementos apropiados.

No veo ninguna razón para usar <i>, a menos que necesite específicamente admitir algún navegador heredado sin CSS.

Yo diría que se usa <em>para enfatizar elementos en línea. Use una clase para elementos de bloque como bloques de texto. CSS o no, el texto todavía tiene que ser etiquetado. Ya sea para la semántica o para la ayuda visual, supongo que la usarías para algo significativo ...

Si enfatiza el texto por CUALQUIER motivo, puede usar <em>una clase que ponga en cursiva su texto.

¡Está bien romper las reglas a veces!

OK, lo primero que hay que tener en cuenta es que <i> ha quedado en desuso y no debe usarse <i>no ha quedado en desuso, pero todavía no recomiendo usarlo; consulte los comentarios para obtener más detalles. Esto se debe a que va completamente en contra de mantener la presentación en la capa de presentación, que usted ha señalado. Del mismo modo, <span class="italic">parece romper el molde también.

Así que ahora tenemos dos formas reales de hacer las cosas: <em>y <span class="footnote">. Recuerda que emsignifica énfasis . Cuando desee poner énfasis en una palabra, frase u oración, péguelo en las <em>etiquetas independientemente de si desea cursiva o no. Si desea cambiar el estilo de alguna otra manera, utilizar CSS: em { font-weight: bold; font-style: normal; }. Por supuesto, también puede aplicar una clase a la <em>etiqueta: si decide que desea que ciertas frases destacadas aparezcan en rojo, deles una clase y agréguela al CSS:

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

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

Si aplica cursiva por alguna otra razón, vaya con el otro método y asigne una clase a la sección. De esa manera, puede cambiar su estilo cuando lo desee sin ajustar el HTML. En su ejemplo, no se deben enfatizar las notas de pie de página; de hecho, se deben quitar el énfasis, ya que el objetivo de una nota de pie de página es mostrar información sin importancia pero interesante o útil. En este caso, es mucho mejor aplicar una clase a la nota al pie y hacer que se vea como una en la capa de presentación: el CSS.

Use <em> si necesita algunas palabras / caracteres en cursiva en contenido sin otros estilos. También ayuda a que el contenido sea semántico.

text-style es más adecuado para múltiples estilos y sin necesidad semántica.

HACER

1. Dele al atributo de clase un valor que indique la naturaleza de los datos ( class="footnote"es decir, es bueno)

2. Crea una hoja de estilo CSS para la página

3. Defina un estilo CSS que se adjunte a la clase que asigna al elemento

   .footnote { font-style:italic; }

NO HAGA

1. No utilice <i>ni <em>elementos: no son compatibles y vincula los datos y la presentación demasiado cerca.
2. No le dé a la clase un valor que indique las reglas de presentación (es decir, no use class="italic").