texto tamaño para letra etiquetas estilos ejemplos como color codigos codigo cambiar html css semantic-markup

para - tamaño de letra en html



CSS/HTML: ¿Cuál es la forma correcta de hacer que el texto sea cursiva? (12)

Tal vez no tenga un significado especial y solo necesite traducirse en cursiva para separarlo presentacionalmente del texto que lo precede.

Si no tiene un significado especial, ¿por qué necesita separarse presentacionalmente del texto que lo precede? Este ciclo de texto se ve un poco raro , porque lo he puesto en cursiva sin ningún motivo.

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

Debido a que estos son estilos razonablemente complejos (con problemas asociados de Internet Explorer) reutilizados en diferentes lugares, creamos clases como box-1 , box-2 , para que podamos reutilizar los estilos.

Sin embargo, el ejemplo específico de hacer que el texto sea cursivo es demasiado trivial para preocuparse. Las mejores minucias de despedida como esa para que los Semantic Nutters discutan.

¿Cuál es la forma correcta de hacer que el texto sea cursivo? 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 manera". <i> no tiene ningún 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 esto no es semántico.


<em>

Esto usa la marca semántica para propósitos puramente de presentación. Simplemente sucede que <em> de forma predeterminada procesa el texto en cursiva y, por lo tanto, lo usan con frecuencia aquellos que saben que <i> debe evitarse pero que desconocen su significado semántico. No todo el texto en cursiva está en cursiva porque se enfatiza. A veces, puede ser exactamente lo contrario, como una nota lateral o un susurro.


<span class="italic">

Esto usa una clase de CSS para colocar la presentación. Esto a menudo se promociona como la forma correcta, pero de nuevo, esto me parece incorrecto. Esto no parece transmitir ningún otro significado semántico que <i> . Pero, sus defensores gritan, es mucho más fácil cambiar todo su texto en cursiva más adelante si, por ejemplo, lo quiere en negrita. Sin embargo, este no es el caso porque me quedaría con una clase llamada "cursiva" que daba texto en negrita. Además, no está claro por qué querría cambiar todo el texto en cursiva de 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 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 lado? O algo completamente diferente. Tal vez no tenga un significado especial y solo necesite traducirse 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 fui junto con la "nota al pie" basada en nada más que el texto que está en la parte inferior de la página. ¿Qué sucede cuando, unos meses después, deseo 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 que <em> pero que evite estos problemas?


Resumen

Parece que el requisito de la semántica parece ser excesivamente oneroso en muchos casos en los que el deseo de poner algo en cursiva no tiene el significado semántico.

Además, el deseo de separar el estilo de la estructura ha llevado a CSS a promocionarse como un reemplazo de <i> cuando hay ocasiones en que esto realmente sería menos útil. Entonces, ¿esto me deja con la humilde etiqueta <i> y preguntándome si esta línea de pensamiento es la razón por la cual queda en la especificación HTML5?

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

tl; dr

La forma correcta de hacer que el texto sea cursiva es ignorar el problema hasta que llegue al CSS, luego 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 una em . Si es tangencial al contenido principal, entonces es un aside . Tal vez sea audaz, tal vez sea en cursiva, tal vez sea verde fluorescente. No importa cuando estás escribiendo marcado.

Cuando llegue al CSS, es posible que ya tenga un elemento semántico que tenga sentido para poner en cursiva todas las apariciones en su sitio. em es un buen ejemplo. Pero tal vez quieras que todo aside > ul > li en tu sitio en cursiva. Tienes que separar el pensamiento sobre el marcado de pensar en la presentación.

Como lo mencionó DisgruntledGoat i es semántico en HTML5. Sin embargo, la semántica parece un poco estrecha para mí. El uso probablemente sea raro.

La semántica de em ha cambiado en HTML5 para enfatizar el énfasis. strong se puede usar para mostrar importancia. strong puede ser cursiva en lugar de negrita si así es como quieres darle estilo. No dejes que la hoja de estilo del navegador te limite. Incluso puede usar una hoja de estilo de restablecimiento para ayudarlo a dejar de pensar en 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 del marcado.

class="footnote" está emulando la semántica del 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 por sus páginas que puede convertir en clases de CSS. Si su estilo para sus notas al pie y sus blockquotes son muy similares, entonces debe poner las similitudes en una sola clase en lugar de repetirse 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 ellos tienen su propia semántica por separado, que es importante prestar atención para mantenimiento y mantenerse seco.

Recursos de OOCSS

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

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

<i> no está mal porque no es semántico. Está mal (generalmente) porque es de presentación. La separación de la preocupación significa que la información de la 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 sin embargo es lo que tienes que hacer. Si usa cursiva para resaltar un bloque del cuerpo del texto, entonces tal vez un nombre de clase de "flujo distintivo" esté en orden. Piense en la reutilización: los nombres de clase son para la categorización. ¿En qué otra parte le gustaría hacer lo mismo? Eso debería ayudarte a identificar un nombre adecuado.

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

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

Si al leer el texto, descubres que utilizas una voz ligeramente diferente para enfatizar un punto, entonces debes usar <em> porque querrías que un lector de pantalla hiciera lo mismo.

Si se trata de algo puramente estilístico, como que su diseñador haya decidido que todos sus encabezados <h2> verían mejor en cursiva Garamond, entonces no hay razón semántica para incluirlo en el HTML y simplemente debe modificar el CSS para el apropiado elementos.

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

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

  1. Si desea enfatizar una frase, use <em> .
  2. La etiqueta <i> tiene un nuevo significado en HTML5 , que representa "un lapso de texto en una voz o estado de ánimo alternativo". Entonces debería usar esta etiqueta para cosas como pensamientos / apartes o frases idiomáticas. La especificación también sugiere nombres de barcos (pero ya no sugiere nombres de libros / canciones / películas, use <cite> para eso en su lugar).
  3. Si el texto en cursiva forma parte de un contexto más amplio, por ejemplo, un párrafo introductorio, debe adjuntar el estilo CSS al elemento más grande, es decir, p.intro { font-style: italic; } p.intro { font-style: italic; }

Diría use <em> para enfatizar los elementos en línea. Usa una clase para elementos de bloque como bloques de texto. CSS o no, el texto todavía tiene que ser etiquetado. Ya sea para semántica o para ayuda visual, supongo que lo usará para algo significativo ...

Si está enfatizando el texto por CUALQUIER motivo, podría usar <em> , o una clase que ponga en cursiva su texto.

¡Está bien romper las reglas a veces!

El texto HTML en cursiva muestra el texto 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 desee enfatizar un punto en su texto y no necesariamente cuando quiera ponerlo en cursiva.

Consulte esta guía para obtener más información: http://www.snoopcode.com/html/html-text-formating

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

Esto debería dar como resultado algo así:

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

em se usa para la presentación (los humanos lo verán en cursiva) y los atributos de property y href se vinculan a una definición de qué es cursiva (para máquinas).

Debes verificar si hay un vocabulario para ese tipo de cosas, quizás ya existan las propiedades.

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

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

Entonces ahora tenemos dos maneras reales de hacer las cosas: <em> y <span class="footnote"> . Recuerde que em significa énfasis . Cuando desee aplicar énfasis a una palabra, frase o frase, péguela en las etiquetas <em> independientemente de si desea las letras en cursiva o no. Si desea cambiar el estilo de alguna otra forma, use CSS: em { font-weight: bold; font-style: normal; } em { font-weight: bold; font-style: normal; } em { font-weight: bold; font-style: normal; } . Por supuesto, también puedes aplicar una clase a la etiqueta <em> : si decides que quieres que ciertas frases destacadas aparezcan en rojo, dales una clase y agrégala al CSS:

Fancy some <em class="special">shiny</em> text? em { font-weight: bold; font-style: normal; } em.special { color: red; }

Si está aplicando cursiva por alguna otra razón, vaya con el otro método y asigne una clase a la sección. De esta forma, puede cambiar su estilo siempre que lo desee sin ajustar el HTML. En su ejemplo, las notas a pie de página no deben enfatizarse; de ​​hecho, se les debe restar énfasis, ya que el objetivo de una nota al pie 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.

i elemento i no es semántico, por lo que para los lectores de pantalla, Googlebot, etc., debería ser un tipo de elemento transparente (como los elementos span o div ). Pero no es una buena opción para el desarrollador, porque une la capa de presentación con la capa de estructura, y eso es una mala práctica.

em elemento em ( strong también) debe usarse siempre en el contexto semántico, no en la presentación uno. Tiene que usarse siempre que alguna palabra o frase sea importante. Solo por un ejemplo en la oración anterior debería usar em para poner más énfasis en la parte ''siempre debe usarse''. Los navegadores proporcionan algunas propiedades CSS predeterminadas para estos elementos, pero se puede y se supone que debes anular los valores predeterminados si tu diseño lo requiere para mantener el significado semántico correcto de estos elementos.

<span class="italic">Italic Text</span> es la forma más incorrecta. En primer lugar, es incómodo en el uso. En segundo lugar, sugiere que el texto debe ser 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 simplemente describe el margen de beneficio. No puede predecir qué sucederá en la función. Si la nota al pie crecerá en la función, es posible que se vea obligado a cambiar su nombre de clase (para mantener algunas lógicas en el código).

Entonces, cuando tengas algún texto importante, usa em o strong para enfatizarlo. Pero recuerde que estos elementos son elementos en línea y no deben usarse para enfatizar un gran bloque de texto.

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

HACER

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

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

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

    .footnote { font-style:italic; }

NO HAGA

  1. No use elementos <i> o <em> : no están respaldados 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" ).