html - sirve - ¿Debo usar la etiqueta para los iconos en lugar de?

span html para que sirve (7)

He buscado en la fuente de Facebook, usan la etiqueta  para mostrar iconos.

Además, hoy he mirado en Bootstrap de Twitter. También utiliza la etiqueta  para mostrar los iconos.

Pero,

El elemento I representa un intervalo de texto en una voz o estado de ánimo alternativo, o compensado de otro modo con respecto a la prosa normal, como una designación taxonómica, un término técnico, una frase idiomática de otro idioma, un pensamiento, un nombre de barco o algún otro Prosa cuya presentación tipográfica típica está en cursiva.

¿Por qué están utilizando la etiqueta  para mostrar iconos?

¿No es una mala práctica?

¿O me estoy perdiendo algo aquí?

Estoy usando span para mostrar íconos y parece que está funcionando hasta ahora.

Actualizar:

Bootstrap 3 ahora usa span para íconos. Doc oficial

¿Por qué están utilizando la etiqueta  para mostrar iconos?

Porque es:

Corto
i significa ícono (aunque no en HTML)

¿No es una mala práctica?

Práctica horrible. Es un triunfo de la performance sobre la semántica.

Estoy saltando aquí un poco tarde, pero encontré esta página cuando me lo planteé. Por supuesto, no sé cómo lo justificaron Facebook o Twitter, pero aquí está mi propio proceso de pensamiento para lo que vale.

Al final, llegué a la conclusión de que esta práctica no es tan poco contemporánea (¿es eso una palabra?). De hecho, además de la brevedad y la buena asociación de "i is for icon", creo que en realidad es la opción más semántica para un icono cuando una etiqueta simple <img> no es práctica.

1. El uso es consistente con la especificación.

Si bien puede que no sea lo que W3 tenía principalmente en mente, me parece que la especificación oficial para  podría acomodar un icono con bastante facilidad. Después de todo, el símbolo de flecha de respuesta está diciendo "responder" de otra manera. Expresa un término técnico que puede ser desconocido para el lector y que normalmente estaría en cursiva. ("Aquí en Twitter, esto es lo que llamamos una flecha de respuesta ".) Y es un término de otro idioma: un lenguaje simbólico.

Si, en lugar del símbolo de la flecha, Twitter usara shout out o [Japanese character for reply] (en una página en inglés), eso sería consistente con la especificación. Entonces, ¿por qué no [reply arrow] ? (Estoy hablando estrictamente de semántica de HTML, no de accesibilidad, a la que me referiré).

Por lo que puedo ver, la única parte de la especificación violada explícitamente por el uso del icono es la frase "intervalo de texto" (cuando la etiqueta no contiene texto también). Está claro que la etiqueta  está destinada principalmente para texto, pero ese es un detalle bastante pequeño en comparación con la intención general de la etiqueta. La pregunta importante para esta etiqueta no es qué formato de contenido contiene, sino cuál es el significado de ese contenido.

Esto es especialmente cierto cuando se considera que la línea entre "texto" e "icono" puede ser casi inexistente en los sitios web. El texto puede parecerse más a un ícono (como en el ejemplo japonés) o un ícono puede parecerse a un texto (como en un botón jpg que dice "Enviar" o una foto de gato con un título superpuesto) o el texto puede ser reemplazado o mejorado con Una imagen vía CSS. Texto, imagen - ¿a quién le importa? Todo es contenido. Mientras todos, humanos con discapacidades, navegadores con discapacidades, motores de búsqueda y otras máquinas de diversos tipos puedan entender ese significado, hemos hecho nuestro trabajo.

Por lo tanto, el hecho de que los escritores de la especificación no hayan pensado (o elegido) para aclarar esto no debería atar nuestras manos de hacer lo que tiene sentido y es consistente con el espíritu de la etiqueta. La etiqueta <a> estaba originalmente destinada a llevar al usuario a otro lugar, pero ahora podría aparecer una caja de luz. Big whoop, ¿verdad? Si alguien hubiera descubierto cómo abrir una caja de luz con un clic antes de que la especificación se pusiera al día, todavía debería haber usado la etiqueta <a> , no una  , incluso si no era totalmente compatible con la definición actual, porque fue lo más cercano y aún era consistente con el espíritu de la etiqueta ("algo sucederá cuando hagas clic aquí"). Lo mismo ocurre con  , sea cual sea el tipo de cosas que coloques dentro de él, o de la manera creativa en que lo uses, expresa la idea general de un término alternativo o separado.

2. La etiqueta  agrega un significado semántico a un elemento de icono.

La opción alternativa para llevar una clase de ícono por sí misma es  , que por supuesto no tiene ningún significado semántico. Cuando una máquina le pregunta a  qué contiene, dice: "No sé. Podría ser cualquier cosa". Pero la etiqueta  dice: "Tengo una forma diferente de decir algo que la forma habitual, o tal vez un término desconocido". Eso no es lo mismo que "tengo un ícono", ¡pero está mucho más cerca de lo que  tiene!

3. Eventualmente, el uso común hace bien.

Además de lo anterior, vale la pena considerar que los lectores de máquinas (ya sean motores de búsqueda, lectores de pantalla o lo que sea) pueden comenzar a tener en cuenta que Facebook, Twitter y otros sitios web usan la etiqueta  para los iconos. No les importa la especificación tanto como les importa extraer el significado del código por cualquier medio que sea necesario. Por lo tanto, pueden usar este conocimiento del uso común para simplemente registrar que "puede haber un ícono aquí" o hacer algo más avanzado, como activar una vista en el CSS para obtener una pista de significado, o quién sabe qué. Por lo tanto, si elige usar la  para los íconos de su sitio web, es posible que ofrezca más significado que el especificado.

Además, si este uso se generaliza, es probable que se incluya en la especificación en el futuro. Luego, revisará su código, reemplazando  s con  ''s! Por lo tanto, puede tener sentido estar de acuerdo con lo que parece ser la dirección de la especificación, especialmente cuando no está claramente en conflicto con la especificación actual. El uso común tiende a dictar las reglas del idioma más que a la inversa. Si tiene la edad suficiente, ¿recuerda que "sitio web" era la ortografía oficial cuando la palabra era nueva? Los diccionarios insisten en que debe haber un espacio y la web debe estar en mayúsculas. Había razones semánticas para eso. Pero el uso común dijo: "Lo que sea, eso es estúpido. Estoy usando ''sitio web'' porque es más conciso y se ve mejor". Y en poco tiempo, los diccionarios reconocieron oficialmente que la ortografía era correcta.

4. Así que voy adelante y lo uso.

Entonces,  proporciona más significado a las máquinas debido a la especificación, proporciona más significado a los humanos porque asociamos fácilmente "i" con "icono", y solo tiene una letra. ¡Ganar! Y si se asegura de incluir texto equivalente dentro de la etiqueta  o justo al lado (como lo hace Twitter), los lectores de pantalla entienden dónde hacer clic para responder, el enlace se puede usar si CSS no se carga, y los lectores con buena vista y un navegador decente ven un bonito icono. Con todo esto en mente, no veo la desventaja.

La respuesta de Quentin indica claramente que la etiqueta i no debe usarse para definir íconos.

Pero, Holly sugirió que span no tiene significado en sí misma y votó a favor de i lugar de span .

Pocos sugirieron usar img ya que es semántico y contiene una etiqueta alt . Pero, tampoco deberíamos usar img porque incluso src vacío envía una solicitud al servidor. Leer aquí

Creo, la forma correcta sería,

Esto resuelve el problema de la alt etiqueta alt en el span y lo hace accesible para usuarios con discapacidades visuales. Es semántico y no usa mal (pirateo) ninguna etiqueta.

Mi conjetura: debido a que Twitter ve la necesidad de admitir navegadores heredados, de lo contrario, estarían usando :before / :after pseudo-elementos.

Los navegadores heredados no son compatibles con los pseudo-elementos que mencioné, por lo que necesitan usar un elemento HTML real para los íconos, y como los íconos no tienen una etiqueta ''exclusiva'', simplemente utilizaron la etiqueta  y todos los navegadores soportan esa etiqueta.

Seguramente podrían haber usado un  , igual que tú (lo que está TOTALMENTE bien), pero probablemente por la razón que mencioné anteriormente más las mencionadas por Quentin , también es la razón por la que Bootstrap está usando la etiqueta  .

Es una mala práctica cuando se usa un marcado adicional por razones de estilo, por eso se inventaron los pseudo-elements , para separar el contenido del estilo ... pero cuando ves la necesidad de ser compatible con los navegadores heredados, a veces te ves obligado a hacer este tipo de cosas.

PD. El hecho de que los iconos comiencen con una ''i'' y que haya una etiqueta  , es completamente casual.

Pensé que esto se veía bastante mal, porque estaba trabajando en una plantilla de Joomla recientemente y seguí obteniendo la plantilla que fallaba en W3C porque estaba usando la etiqueta  y estaba obsoleta, ya que su uso original era poner en cursiva algo, que ahora es hecho a través de CSS no HTML más.

Realmente hace una mala práctica porque cuando la vi, revisé la plantilla y cambié todas las etiquetas  a  lugar y luego me pregunté por qué la plantilla entera se veía extraña.

Esta es la razón principal por la que es una mala idea usar la etiqueta  de esta manera; nunca se sabe quién verá su trabajo después y "asuma" que lo que realmente estaba tratando de hacer es poner el texto en cursiva. que mostrar un icono. Acabo de poner algunos íconos en un sitio web y lo hice con el siguiente código

<img class="icon" src="electricity.jpg" alt="Electricity" title="Electricity">

de esa manera tengo todos mis íconos en una clase para que cualquier cambio que haga afecte a todos los íconos (digamos que los quería más grandes o más pequeños, o bordes redondeados, etc.), el texto alternativo brinda a los lectores de pantalla la oportunidad de decirle a la persona qué el icono es, en lugar de simplemente obtener "texto en cursiva, fin de cursiva" (no sé exactamente cómo los lectores de pantalla leen las pantallas, pero creo que es algo así), y el título también le da al usuario la oportunidad de pasar el mouse por encima Haga clic en la imagen y obtenga una información sobre herramientas que les dice qué es el ícono en caso de que no puedan entenderlo. Mucho mejor que usar  - y también pasa el estándar W3C.

También encontré que esto era útil cuando quería colocar un icono con posicionamiento absoluto dentro de una etiqueta de enlace <a> .

Primero pensé en la etiqueta <img> , pero el estilo predeterminado de esas etiquetas dentro de los enlaces normalmente tiene un estilo de borde y / o efectos de sombra. Además, se siente mal al usar una etiqueta <img> sin definir un atributo "src", mientras que estoy usando una declaración de hoja de estilo de imagen de fondo para que la imagen no haga fantasmas ni arrastre.

En este punto, está pensando en etiquetas como  o  , en cuyo caso  tiene tanto sentido como este tipo de icono.

En general, creo que su beneficio, además de ser intuitivo, es que requiere ajustes mínimos de hojas de estilo para que esta etiqueta funcione como un icono.

Tomo un enfoque totalmente diferente a las respuestas de todos los demás aquí. Permítame prefijar mi solución y argumentar afirmando que a veces los estándares y las convenciones deben romperse, especialmente en el contexto de las definiciones de etiquetas léxicas HTML estándar.

No hay nada que le impida crear elementos personalizados que sean autodescriptivos para su propósito.

Ambos navegadores modernos e incluso IE 6+ (w / shim) pueden admitir cosas como:

<icon class="plus">

<icon-add>

Solo asegúrate de normalizar la etiqueta:

icon { display:block; margin:0; padding:0; border:0; ... }

y use un shim si necesita compatibilidad con IE9 o anterior (vea la publicación más abajo).

Echa un vistazo a este Post :

¿Hay una manera de crear su propia etiqueta html en HTML5

Para profundizar más en mi argumento, tanto las directivas angulares de Google como los nuevos proyectos de Polymer utilizan el concepto de etiquetas HTML personalizadas.

html - sirve - ¿Debo usar la etiqueta<i> para los iconos en lugar de<span>?

span html para que sirve (7)