Question Dois-je utiliser la balise pour les icônes au lieu de ? [fermé]


J'ai regardé dans la source de Facebook, ils utilisent le <i> tag pour afficher les icônes.

Aussi, aujourd'hui, j'ai regardé dans le Bootstrap de Twitter. Il utilise également <i> tag pour afficher les icônes.

Mais,

Du Spécification HTML5:

L'élément I représente une étendue de texte dans une autre voix ou humeur,   ou autrement compensé de la prose normale, comme un taxonomique   désignation, un terme technique, une phrase idiomatique d'un autre   langue, une pensée, un nom de bateau, ou une autre prose dont typique   la présentation typographique est en italique.

Pourquoi utilisent-ils <i> tag pour afficher les icônes?

N'est-ce pas une mauvaise pratique?

Ou est-ce que je manque quelque chose ici?

j'utilise span pour afficher des icônes et cela semble fonctionner pour moi jusqu'à présent.

Mettre à jour:

Bootstrap 3 utilise maintenant span pour les icônes. Doc officiel


498
2018-06-21 09:27


origine


Réponses:


Pourquoi utilisent-ils <i> tag pour afficher les icônes?

Parce que c'est:

  • Court
  • je représente l'icône (mais pas en HTML)

N'est-ce pas une mauvaise pratique?

Mauvaise pratique. C'est un triomphe de la performance sur la sémantique.


519
2018-06-21 09:29



Je saute ici un peu tard, mais je suis tombé sur cette page pour la méditer moi-même. Bien sûr, je ne sais pas comment Facebook ou Twitter le justifie, mais voici mon propre processus de réflexion pour ce que ça vaut.

En fin de compte, j'ai conclu que cette pratique n'est pas si simple (est-ce un mot?). En fait, en plus de la brièveté et de la belle association de "i is for icon", je pense que c’est le choix le plus sémantique pour une icône <img> tag n'est pas pratique.

1. L'utilisation est conforme à la spécification.

Bien que ce ne soit peut-être pas ce que le W3 avait en tête, il me semble que la spécification officielle de <i> pourrait accueillir une icône assez facilement. Après tout, le symbole de la flèche de réponse dit "répondre" d'une autre manière. Il exprime un terme technique qui peut ne pas être familier au lecteur et serait en italique. ("Ici sur Twitter, c'est ce qu'on appelle un réponse flèche. ") Et c'est un terme d'une autre langue: un langage symbolique.

Si, au lieu du symbole de la flèche, Twitter a utilisé <i>shout out</i> ou <i>[Japanese character for reply]</i> (sur une page en anglais), ce serait conforme à la spécification. Alors pourquoi pas <i>[reply arrow]</i>? (Je parle ici de la sémantique HTML, pas de l'accessibilité, à laquelle je vais arriver.)

Pour autant que je sache, la seule partie de la spécification explicitement violée par l'utilisation d'une icône est la phrase "étendue de texte" (lorsque la balise ne contient pas de texte également). Il est clair que <i> La balise est principalement destinée au texte, mais c'est un petit détail comparé à l'intention générale de la balise. La question importante pour cette étiquette n'est pas quel format de contenu elle contient, mais quelle est la signification de ce contenu.

Cela est particulièrement vrai lorsque vous considérez que la ligne entre «texte» et «icône» peut être presque inexistante sur les sites Web. Le texte peut ressembler davantage à une icône (comme dans l'exemple japonais) ou une icône peut ressembler à du texte (comme dans un bouton jpg qui dit "Soumettre" ou à une photo de chat avec une légende superposée) ou du texte remplacé ou amélioré. une image via CSS. Texte, image - qui s'en soucie? Tout est contenu. Tant que tout le monde - humains avec des déficiences, navigateurs avec des déficiences, araignées de moteurs de recherche et autres machines de toutes sortes - peut comprendre ce sens, nous avons fait notre travail.

Donc, le fait que les rédacteurs de la spécification n'aient pas réfléchi (ou choisi) pour clarifier cela ne devrait pas nous empêcher de faire ce qui est logique et cohérent avec l'esprit du tag. le <a> tag était à l'origine destiné à prendre l'utilisateur ailleurs, mais maintenant il pourrait apparaître une lightbox. Big whoop, non? Si quelqu'un avait compris comment faire apparaître une lightbox sur un clic avant que la spécification ne soit rattrapée, ils auraient toujours dû utiliser le <a> tag, pas un <span>, même si cela n'était pas tout à fait conforme à la définition actuelle - car elle était la plus proche et était toujours conforme à l'esprit de la balise ("quelque chose se passera lorsque vous cliquerez ici"). Même accord avec <i> - Quel que soit le type de chose que vous y mettez, ou que vous l'utilisiez de façon créative, il exprime l'idée générale d'un terme alternatif ou séparé.

2. Le <i> marque ajoute sens sémantique à un élément d'icône.

L'option alternative pour porter une classe d'icône par elle-même est <span>, ce qui n'a bien sûr aucune signification sémantique. Quand une machine demande au <span> ce qu'il contient, il dit, "je ne sais pas, pourrait être n'importe quoi." Mais le <i> tag dit: "Je contiens une manière différente de dire quelque chose que de la manière habituelle, ou peut-être un terme inconnu." Ce n'est pas la même chose que "Je possède une icône", mais c'est beaucoup plus proche que <span> eu!

3. Finalement, l'usage commun est correct.

En plus de ce qui précède, il est intéressant de noter que les lecteurs de machines (qu’il s’agisse de moteurs de recherche, de lecteurs d’écrans ou autres) puissent à tout moment commencer à prendre en compte le fait que Facebook, Twitter <i> tag pour les icônes. Ils ne se soucient pas de la spécification autant qu'ils se soucient d'extraire le sens du code par tous les moyens nécessaires. Ils peuvent donc utiliser cette connaissance d'usage courant pour simplement enregistrer "qu'il peut y avoir une icône ici" ou faire quelque chose de plus avancé, comme déclencher un regard sur le CSS pour un indice de sens ou qui sait quoi. Donc, si vous choisissez d'utiliser le <i> Pour les icônes de votre site Web, vous pouvez fournir plus de signification que la spécification.

De plus, si cette utilisation devient généralisée, elle sera probablement incluse dans la spécification à l'avenir. Ensuite, vous passerez en revue votre code, en remplaçant <span>s avec <i>c'est! Il peut donc être logique de se mettre à bord avec ce qui semble être la direction de la spécification, surtout quand elle n'est pas clairement en conflit avec la spécification actuelle. L'usage courant a tendance à dicter les règles de langage plus que l'inverse. Si vous êtes assez vieux, vous rappelez-vous que "site Web" était l'orthographe officielle lorsque le mot était nouveau? Les dictionnaires insistaient sur le fait qu'il devait y avoir un espace et que le Web devait être capitalisé. Il y avait des raisons sémantiques pour cela. Mais l'usage courant dit: "Peu importe, c'est stupide, j'utilise le 'site web' parce que c'est plus concis et meilleur." Et avant longtemps, les dictionnaires ont officiellement reconnu que l'orthographe était correcte.

4. Je vais donc de l’utiliser.

Alors, <i> donne plus de sens aux machines à cause des spécifications, cela donne plus de sens aux humains car nous associons facilement "i" avec "icon", et ce n'est qu'une lettre de long. Gagner! Et si vous vous assurez d'inclure un texte équivalent à l'intérieur du <i> tag ou juste à côté (comme le fait Twitter), puis les lecteurs d'écran comprennent où cliquer pour répondre, le lien est utilisable si CSS ne charge pas, et les lecteurs humains avec une bonne vue et un navigateur décent voir une jolie icône. En gardant cela à l'esprit, je ne vois pas d'inconvénient.


233
2018-01-28 04:27



La réponse de Quentin indique clairement que i La balise ne doit pas être utilisée pour définir des icônes.

Mais Holly a suggéré que span n'a aucun sens en soi et a voté en faveur de i au lieu de span marque.

Peu suggéré d'utiliser img comme il est sémantique et contient alt marque. Mais, nous ne devrions pas utiliser aussi img parce que même vide src envoie une requête au serveur. Lisez ici

Je pense, la bonne façon serait,

<span class="icon-fb" role="img" aria-label="facebook"></span>

Cela résout le problème de non alt faire span et le rend accessible aux utilisateurs malvoyants. C'est sémantique et ne pas abuser de n'importe quelle étiquette.


42
2017-08-01 16:19



Ma conjecture: parce que Twitter voit le besoin de prendre en charge les anciens navigateurs, sinon ils utiliseraient le :before / :after pseudo-éléments.

Les anciens navigateurs ne prennent pas en charge les pseudo-éléments que j'ai mentionnés, ils doivent donc utiliser un élément HTML réel pour les icônes, et comme les icônes n'ont pas de balise 'exclusive', ils ont simplement <i> tag, et tous les navigateurs prennent en charge cette balise.

Ils auraient certainement utilisé un <span>, comme vous êtes (ce qui est TOTALEMENT très bien), mais probablement pour la raison que j'ai mentionnée ci-dessus, plus celles mentionnées par Quentin, c'est aussi pourquoi Bootstrap utilise le <i> marque.

C'est une mauvaise pratique lorsque vous utilisez un balisage supplémentaire pour des raisons de style, c'est pourquoi pseudo-éléments ont été inventés, pour séparer le contenu du style ... mais quand vous voyez le besoin de soutenir les navigateurs hérités, vous êtes parfois obligé de faire ce genre de choses.

PS. Le fait que les icônes commencent par un 'je' et qu'il y a un <i> tag, est complètement une coïncidence.


11
2018-01-14 18:24



Je prends une approche totalement différente des réponses des autres ici. Laissez-moi préfixer ma solution et argumenter en disant que parfois les normes et les conventions sont censées être brisées, en particulier dans le contexte des définitions de balises lexicales HTML standard.

Rien ne vous empêche de créer des éléments personnalisés auto-descriptifs.

Les deux navigateurs modernes et même IE 6+ (w / shim) peuvent supporter des choses comme:

<icon class="plus">

ou

<icon-add>

Assurez-vous simplement de normaliser le tag:

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

et utilisez un shim si vous avez besoin de supporter IE9 ou plus tôt (voir l'article ci-dessous).

Découvrez ce poste StackOverflow:

Est-il possible de créer votre propre balise HTML dans HTML5

Pour approfondir mes arguments, les directives angulaires de Google et les nouveaux projets Polymer utilisent le concept de balises HTML personnalisées.


10
2017-10-13 16:51



Je pensais que cela avait l'air assez mauvais - parce que je travaillais sur un template Joomla récemment et je continuais à faire échouer le template W3C parce qu'il utilisait le <i>tag et celui qui était obsolète, car son utilisation originale consistait à mettre en italique quelque chose, ce qui est désormais fait via CSS et non plus HTML.

Cela fait vraiment une mauvaise pratique parce que quand je l’ai vu, j’ai parcouru le modèle et changé tous les <i> tags à <span style="font-style:italic"> au lieu de cela, puis se sont demandés pourquoi le modèle entier avait l'air étrange.

C'est la principale raison pour laquelle c'est une mauvaise idée d'utiliser le <i> étiqueter de cette façon - vous ne savez jamais qui va regarder votre travail par la suite et "supposez" que ce que vous essayez vraiment de faire est de mettre en italique le texte plutôt que d'afficher une icône. Je viens de mettre des icônes dans un site Web et je l'ai fait avec le code suivant

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

De cette façon, j'ai toutes mes icônes dans une classe donc tous les changements que je fais affectent toutes les icônes (disons que je les veux plus ou moins grandes, ou arrondies, etc.), le texte alt donne aux lecteurs d'écran la possibilité de l'icône est plutôt que d'obtenir simplement "texte en italique, fin d'italique" (je ne sais pas exactement comment les lecteurs d'écran lisent les écrans mais je suppose que c'est quelque chose comme ça), et le titre donne également la possibilité de passer la souris l'image et obtenir une info-bulle leur disant ce que l'icône est au cas où ils ne peuvent pas le comprendre. Beaucoup mieux que d'utiliser <i> - Et aussi il passe la norme W3C.


6
2018-05-28 22:24



J'ai également trouvé cela utile lorsque je voulais placer une icône avec un positionnement absolu dans un lien <a> marque.

J'ai pensé à la <img> balise d'abord, mais le style par défaut de ces balises à l'intérieur des liens a généralement un style de bordure et / ou des effets d'ombre. De plus, il ne faut pas utiliser un <img> balise sans définir d'attribut "src" alors que j'utilise une déclaration de feuille de style d'image d'arrière-plan pour que l'image ne soit pas fantôme et traîne.

À ce stade, vous pensez à des balises comme <span> ou <i> - dans quel cas <i> fait tellement de sens que ce type d'icône.

Dans l'ensemble, je pense que son avantage en plus d'être intuitif est qu'il nécessite des ajustements minimes de feuille de style pour faire fonctionner cette étiquette comme une icône.


2
2017-09-09 20:26