Esta pregunta surgió en una de mis clases universitarias. El profesor sólo le dio la respuesta que era más descriptivo, pero parece como si <b>
y <i>
son bastante explícitos en su significado y es más fácil de escribir de <strong>
y <em>
.
¿Cuáles fueron los argumentos oficiales para la depreciación de estas etiquetas?
html
deprecation
LanceLafontaine
fuente
fuente
<b>
y<i>
no estoy en desuso.b
, literalmente significa "esto está en negrita", no "esto está enfatizado". Pero el punto principal es que tienen un significado diferente: no hay desaprobación, solo que no era eso cuando solías hacerlob
oi
, por lo general, querías decirstrong
oem
.<i>
y en<b>
realidad no están en desuso,<tt>
y lo<u>
están, y la pregunta sería igual de aplicable a esos.Respuestas:
El verano pasado, leí la especificación HTML5 completa, y todas las especificaciones HTML anteriores (incluso las abandonadas), y todas las especificaciones CSS que pude encontrar, y muchas especificaciones XML. Dado que me encantan los documentos de hipertexto semánticamente ricos, permítame darle la idea detrás de la semántica HTML relevante en HTML5.
Antes de HTML5
Antes de HTML5,
i
y deb
hecho estaban fuera de moda. La razón era que esencialmente funcionaban comoem
ystrong
, respectivamente, pero con enfoque en la presentación y no en la semántica (lo cual es malo).De hecho,
i
significaba que el texto debería estar en cursiva (decía algo sobre cómo debería representarse el texto en pantalla). Por otro lado,em
significaba que el texto debía enfatizarse (decía algo sobre la semántica del texto).Hay una diferencia teórica importante aquí. Si lo usa
em
, el agente de usuario (= navegador) sabe que el texto debe enfatizarse, por lo que puede mostrarlo en cursiva si el documento se muestra en pantalla (o todo en mayúsculas si no es posible formatear, o incluso en negrita). el usuario lo prefiere), puede pronunciarlo de manera diferente si el documento se le habla al usuario, etc.Observe que el énfasis realmente se trata de la semántica. Por ejemplo, las frases
No tienen el mismo significado.
La misma diferencia se aplica a
b
(fuente en negrita) ystrong
(énfasis fuerte).Un principio general de la escritura digital en general, y de la autoría de hipertexto en particular, es que debe separar el contenido y el estilo. En la autoría de hipertexto, esto significa que el contenido debe estar en el archivo HTML, y el estilo debe estar en un archivo CSS (o varios archivos CSS). Un principio diferente pero relacionado es que el documento debe ser rico en semántica (como marcar encabezados, pies de página, listas, énfasis, direcciones, áreas de navegación, etc.). Esto tiene una serie de ventajas:
Entonces, en resumen,
i
ya nob
se utilizan porque eran etiquetas HTML preocupadas por la presentación , lo cual es totalmente incorrecto.En HTML5
En HTML5
i
yb
ya no están en desuso. En cambio, se les da un significado semántico . Entonces, en realidad, ahora se trata de semántica, y no de presentación.Como antes, solía
em
marcar el énfasis: "El gato es mío". Pero lo usai
para casi todos los demás casos en los que usaría cursiva en una obra impresa. Por ejemplo:i
para marcar designaciones taxonómicas: "Me gusta R. norvegicus ".i
para marcar una frase en un idioma diferente en comparación con el texto circundante: a la cartai
para marcar una palabra cuando se habla de la palabra en sí: " beber es tanto un sustantivo como un verbo"También es una buena idea utilizar el
class
atributo para especificar el uso preciso (también "microformato" y "microdatos" de Google). Y, por supuesto, en el segundo caso, realmente debería usar ellang
atributo para especificar el idioma correcto. (De lo contrario, por ejemplo , un agente de texto a voz podría pronunciar mal el texto).Hace aproximadamente un año, la especificación HTML5 también decía que
cite
debería usarse para marcar nombres de libros, películas, óperas, pinturas, etc.Finalmente, desde hace mucho tiempo,
dfn
se usa para marcar la instancia definitoria de una frase en un texto (como una definición matemática o la definición de un término):Entonces, la cursiva en su libro impreso, que puede significar muchas cosas diferentes, está representada por cuatro etiquetas HTML5 diferentes, lo cual es realmente genial, porque la semántica es buena, ya que traté de convencerlo anteriormente. (Por ejemplo, puede pedirle a su navegador que haga una lista de todas las definiciones en el texto, para asegurarse de conocerlas todas antes del examen).
En cuanto a
strong
yb
, la especificación HTML5 dice questrong
debe usarse para marcar una parte importante del texto, como una advertencia o alguna palabra muy importante para atrapar en una oración. Por otro lado,b
debe usarse para marcar cosas que deben ser fáciles de encontrar en el texto, como palabras clave. También lo usob
como encabezados en los elementos de la lista (LI).fuente
<dfn>
, no<def>
. De lo contrario, gran resumen completo de todos los problemas. Su sugerencia para usar<b>
como encabezados en los elementos de la lista es interesante; el enfoque semántico es usar una lista de definiciones , pero como actualmente no hay navegadores compatiblesdisplay:run-in
, el marcado de palabras clave en línea con<b>
o<span>
son lo mejor que puede hacer.display:run-in
, pero dado que su soporte está disminuyendo , debe usarfloat
elcontent:
truco o el truco, consulte rejbrand.se/rejbrand/news.asp?ItemIndex=169 . Cuando hablo de usarb
para marcar 'encabezados' en listas, no me refiero a pares de nombre-valor, sino más bien a listas simples donde quiero usar un 'encabezado' en cada elemento.<b>
garantizan texto envalentonado. 1) Lectores de pantalla, pantallas braille y otros medios para consumir texto para los que los glifos más gruesos son un concepto sin sentido. 2)b { font-weight: normal }
, lo que significa que el estilo de visualización tampoco está fijo para<b>
ninguno.b, strong { font-weight:bold; }
. De esa manera puede estar tan seguro como podría estarlo. CSS es la forma de especificar el formato visual. HTML trata sobre el significado (contenido), CSS sobre la presentación visual del mismo.Como dice Doval, no están en desuso. Ellos todavía existen , pero deben ser utilizados de manera diferente de lo que mucha gente, donde solían antes de HTML5.
Se trata de html 'semántico'. Debería describir "qué" es, en lugar de cómo debería verse. El navegador o, en teoría, cualquier otro medio de visualización (digamos una aplicación de lectura para invidentes) debería poder decidir cómo se debe interpretar exactamente.
Esto es similar por qué no debería usar nombres de clase CSS como "rojo" y usar clases más descriptivas que describan la idea funcional detrás del uso de un color diferente aquí. Más tarde, puede decidir que el verde es mejor (y tal vez cualquier cosa "fuerte" debería mostrarse usando color rojo en lugar de texto en negrita). O un usuario daltónico puede tener algunas configuraciones especiales del navegador donde los colores se reemplazan por otros medios.
fuente
<span class="keyword">...</span>
en primer lugar le ahorra muchos problemas.<b>
es un caso extremo, pero hay ejemplos sólidos para usar<i>
en casos en los que no<em>
es apropiado: nombres científicos de especies o palabras latinas adoptadas en inglés ( podría usar un espacio con un atributo de idioma, pero eso tiene todo tipo de otras implicaciones: - un lector de pantalla puede cambiar las voces por un idioma diferente). También se puede usar para poner en cursiva los títulos de otras obras, aunque se debe usar el enfoque semánticamente correcto<cite>
.La verdadera historia es eso
b
yi
primero fueron obsoletos, desaprobados, maldecidos y anatematizados como "presentacionales" en varios borradores HTML5 (en términos generales), pero luego se dieron cuenta de que estas etiquetas son ampliamente utilizadas y también generadas por muchos programas de autoría. En lugar de simplemente permitirlos, desarrollaron nuevas definiciones "semánticas" para ellos, para poder permitir los elementos pero al mismo tiempo pretender ser estrictos sobre el marcado "presentacional". Las nuevas definiciones han variado de un borrador a otro y son oscuras: apenas se pueden encontrar dos personas que las entiendan e interpreten de la misma manera.Lo sentimos, no hay referencias. La descripción anterior es el resultado de seguir los cambios y leer los borradores y las discusiones, a menudo entre líneas. No están diciendo explícitamente la causa. Sigo pensando que es la historia real.
La conclusión es: seguir adelante. No hay nada útil aquí. Los elementos
b
yi
hacen lo mismo que siempre: ponen la fuente en negrita o cursiva, respectivamente, con las advertencias habituales. Esta es la realidad que debe tener en cuenta, no la "semántica" quasischolastic que no tiene impacto en los navegadores, motores de búsqueda u otro software.fuente
<b>
como un tipo divertido<span>
que, por defecto, se muestra en negrita. Luego, si puede molestarse, asigne también unclass
atributo a sus usos para que, cuando sea necesario, pueda cambiar el estilo de varias cosas a la vez que lo usaron porque tienen una semántica común. Es quasischolastic en el sentido de que la gente pensará que estás casi en la cabeza por hacerb.productname {font-weight: normal; font-style: italic; }
después de que cambiaste de opinión sobre la presentación y aprovechaste tu sabia elección del marcado semántico ;-)<b>this</b>
parece mucho más razonable que<span class="bold">this</b>
(la sobrecarga de ocho bytes de la primera es bastante molesta; la sobrecarga de 23 bytes de la segunda parece una locura). Me pregunto por qué HTML nunca definió ninguna representación de formato corto<@quack>this</@>
como equivalente a<span class="quack">this</span>
?class='bold'
? El maestro Suku de The Codeless Code hablaría contigo sobre el uso de nombres de clase tan pobres . Considere este su último boldRedText .Las etiquetas
<b>
y se<i>
originaron con los conceptos de "negrita" y "cursiva". El problema es que estos pueden ser completamente sin sentido para algunos agentes de usuario. Por ejemplo, ¿cómo suena "cursiva" en un lector de pantalla para una persona ciega?Reemplazándolos por
<strong>
y<em>
quitando el enlace directo a los conceptos tipográficos. En cambio, el agente de usuario puede representarlos como lo considere conveniente.fuente
<b>
y,<i>
sin embargo, también lo considera conveniente.Las etiquetas
<b>
y<i>
son esenciales cuando literalmente necesita texto en 'negrita' o 'cursiva'.Si está escribiendo una ecuación en HTML donde un ' I ' en cursiva tiene un significado diferente de un 'I' sin cursiva, es importante poder hacer esa distinción.
Pienso en ellos de la misma manera que pienso
<sup>
o<sub>
etiquetas - no se puede representar correctamente el significado de una ecuación sin necesidad de utilizar este tipo de etiquetas 'apariencia'.El enfoque purista sería usar MathML o TeX, pero el soporte del navegador aún no existe ...
fuente
in a monospaced typeface
pero que no distingue por qué, entonces usar uno de los "reemplazos"<tt>
implicaría falsamente que el código que realiza la importación sabía más de lo que sabía sobre el propósito.b
yi
en contextos matemáticos (y físicos), pero dicho uso no se menciona en borradores HTML5. Cuando planteé esta pregunta, me respondieron seriamente que en su lugar se usarían los caracteres especiales Unicode (letras en negrita matemática y letras en cursiva matemática).class="source-X-asserts-it-should-be-monospace"
, distinguiéndolo así del texto que es semánticamente diferente en el sentido de que alguna otra fuente afirma por razones desconocidas que debería ser monoespacio. En efecto, esto es auditar las cosas que HTML considera malas, en lugar de simplemente traducir la maldad al HTML.<TT>
, lo que sugirió directamente que el texto se establezca en una fuente monoespacial contrastante, con un marcado que, después de unas pocas capas de indirección, indicará que el texto debe mostrarse en una fuente particular que sucede a ser monoespacio. Mientras que yo no esperaría que todos los lectores de pantalla para hacer algo útil con<tt>
, yo esperaría que tendrían un tiempo mucho más fácil con<tt>
que<span class="styleNameThisImportUtilityPicked">
.Los principios de diseño que subyacen a las etiquetas HTML es que deben ser "semánticos", es decir, deben indicar significado e intención en lugar de instrucciones de bajo nivel.
La prueba clásica es "¿se pueden usar significativamente las etiquetas en un navegador para invidentes"?
Por lo tanto, para un navegador basado en audio, la "i" para cursiva es bastante inútil ya que no se puede tener una cursiva. Sin embargo, la etiqueta "em" es significativa ya que un dispositivo de audio puede enfatizar una frase de muchas maneras: aumentando el tono, aumentando el volumen o cambiando el acento. Un renderizador Braille podría enfatizar elevando los puntos cambiando el espacio, cambiando el tamaño o agregando vibración.
fuente
<img>
porque no puedes hablar una imagen, y un sistema sin hardware de sonido no puede presentarse<audio>
. A veces, la presentación es el propósito de un elemento, y no necesita ser universalmente compatible (y a diferencia de otros elementos potencialmente no compatibles,<i>
no necesita texto alternativo porque el hecho de que esté en cursiva es la única información perdida). El verdadero problema es cuando las personas diceni
cuándo quieren decirem
.<i>
etiqueta usa un tono de 120 y el texto dentro de una<b>
etiqueta usa 80, y el texto dentro de una<tt>
sincronización del discurso con una máquina de escribir sintetizada que produce el texto permitiría al oyente para distinguir fácilmente esas formas de marcado. El trabajo sería mucho más difícil si, en lugar de usar una<i>
etiqueta, el texto usara algo<span class="whatever">
que causara que partes del texto se mostraran usando "Acme SemiScript" en lugar de "Waldorf Sans" [algunas familias de fuentes ...