web-dev-qa-db-fra.com

Devrais-je utiliser la balise <i> pour les icônes au lieu de <span>?

J'ai examiné la source de Facebook, ils utilisent la balise <i> pour afficher des icônes.

De plus, aujourd'hui, j'ai examiné le Bootstrap de Twitter. Il utilise également la balise <i> pour afficher les icônes.

Mais,

De la spécification HTML5 :

L'élément I représente une partie du texte dans une voix ou une humeur différente, ou autrement décalée de la prose normale, telle qu'une désignation taxonomique, un terme technique, une phrase idiomatique d'une autre langue, une pensée, un nom de navire ou un autre. prose dont la présentation typographique typique est en italique.

Pourquoi utilisent-ils la balise <i> pour afficher des 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'à maintenant.

Mise à jour:

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

533
Jashwant

Pourquoi utilisent-ils la balise <i> pour afficher des icônes?

Parce que c'est:

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

N'est-ce pas une mauvaise pratique?

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

557
Quentin

Je saute ici un peu tard, mais je suis tombé sur cette page en y réfléchissant moi-même. Bien sûr, je ne sais pas comment Facebook ou Twitter ont justifié cela, mais voici ma propre réflexion sur ce que cela vaut.

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

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

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

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

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 la balise <i> est principalement destinée au texte, mais il s’agit là d’un détail relativement petit par rapport à l’intention générale de la balise. La question importante pour cette balise n'est pas de savoir 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 le texte peut être remplacé ou amélioré avec une image via CSS. Texte, image - peu importe C'est tout contenu. Tant que tout le monde - les humains handicapés, les navigateurs handicapés, les moteurs de recherche et autres machines de toutes sortes peuvent comprendre ce sens, nous avons fait notre travail.

Ainsi, le fait que les rédacteurs de la spécification n'aient pas pensé (ou choisi) de clarifier cela ne devrait pas nous empêcher de faire ce qui est logique et conforme à l'esprit de la balise. La balise <a> était à l'origine destinée à emmener l'utilisateur ailleurs, mais elle peut à présent faire apparaître une boîte à lumière. Big whoop, non? Si quelqu'un avait compris comment faire apparaître une lightbox au clic avant que la spécification ne soit prise en compte, il aurait quand même dû utiliser la balise <a>, et non un <span>, même si elle n'était pas tout à fait conforme à la définition actuelle, car elle était la plus proche. et était toujours compatible avec l'esprit de la balise ("quelque chose se passera lorsque vous cliquez ici"). Même affaire avec <i> - quel que soit le type de chose que vous insérez à l'intérieur ou quelle que soit votre créativité, il exprime l'idée générale d'un terme alternatif ou distinct.

2. La balise <i> ajoute une signification sémantique à un élément icon.

L'option alternative permettant de transporter une classe d'icônes en elle-même est <span>, qui n'a bien entendu aucune signification sémantique. Quand une machine demande au <span> ce qu’elle contient, elle dit: "Je ne sais pas. Ça pourrait être n'importe quoi." Mais la balise <i> indique: "Je contiens une manière différente de dire quelque chose que la manière habituelle, ou peut-être un terme inconnu." Ce n'est pas la même chose que "je contient une icône", mais c'est beaucoup plus proche de ce que <span> got!

. Finalement, l'usage courant donne raison.

En plus de ce qui précède, il convient de noter que les lecteurs de machines (moteur de recherche, lecteur d'écran ou autre) peuvent à tout moment commencer à prendre en compte le fait que Facebook, Twitter et d'autres sites Web utilisent la balise <i> pour les icônes. Ils se soucient moins de la spécification que de l'extraction de la signification du code par tous les moyens nécessaires. Ils peuvent donc utiliser cette connaissance de l’usage courant pour enregistrer simplement "qu’il peut y avoir une icône ici" ou faire quelque chose de plus avancé, comme déclencher un examen du code CSS pour obtenir un indice de signification ou savoir 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 cet usage se généralise, il sera probablement inclus dans les spécifications à l'avenir. Ensuite, vous allez parcourir votre code, en remplaçant <span>s par <i> '! Il peut donc être logique de s’engager dans ce qui semble être la direction de la spécification, en particulier lorsque cela n’est pas clairement en contradiction avec la spécification actuelle. L'utilisation courante tend à dicter les règles de langage plus que l'inverse. Si vous êtes assez vieux, vous souvenez-vous que "site Web" était l'orthographe officielle lorsque la Parole était nouvelle? Les dictionnaires ont insisté sur le fait qu'il doit y avoir un espace et que le Web doit être mis en majuscule. Il y avait des raisons sémantiques à cela. Mais l'usage le plus répandu disait: "Quoi qu'il en soit, c'est stupide. J'utilise" site Web "car il est plus concis et plus esthétique." Et bientôt, les dictionnaires ont officiellement reconnu que l’orthographe était correcte.

4. Je vais donc l'utiliser et l'utiliser.

Donc, <i> donne plus de sens aux machines en raison de la spécification, cela donne plus de sens aux humains car nous associons facilement "i" à "icône", et c'est seulement une lettre longue. Gagner! Et si vous vous assurez d'inclure du texte équivalent dans la balise <i> ou juste à côté (comme le fait Twitter), les lecteurs d'écran comprennent où cliquer pour répondre, le lien est utilisable si CSS ne se charge pas et les lecteurs humains avec bonne vue et un navigateur décent voir une jolie icône. Avec tout cela à l'esprit, je ne vois pas d'inconvénient.

250
Holly

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

Mais Holly a suggéré que spann'a aucune signification en soi et a voté en faveur de iau lieu de la balise spanname__.

Peu ont suggéré d'utiliser imgcar il est sémantique et contient la balise altname__. Cependant, nous ne devrions pas également utiliser imgcar même vide srcenvoie une requête au serveur. Lire ici

Je pense que la bonne manière serait,

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

Ceci résout le problème de la non-balise altdans spanet le rend accessible aux utilisateurs malvoyants. C'est sémantique et n'abuse de rien (piratage).

49
Jashwant

Mon hypothèse: comme Twitter voit la nécessité de prendre en charge les anciens navigateurs, sinon ils utiliseraient les pseudo-éléments :before/:after.

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. Comme les icônes ne possèdent pas de balise "exclusive", elles se sont simplement associées à la balise <i> et à tous les navigateurs. soutenir cette balise.

Ils auraient certainement pu utiliser un <span>, tout comme vous (qui est TOTALEMENT bien), mais probablement pour la raison que j'ai mentionnée ci-dessus, plus celles mentionnées par par Quentin , c’est aussi pourquoi Bootstrap utilise la balise <i>.

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 lorsque vous voyez la nécessité de prendre en charge les anciens navigateurs, vous ' re obligés de faire ce genre de choses.

PS Le fait que les icônes commencent par un 'i' et qu'il existe une balise <i> est une pure coïncidence.

12
Ricardo Zea

J'adopte une approche totalement différente des réponses des autres. Permettez-moi de préfixer ma solution et d'argumenter en affirmant que les normes et les conventions sont parfois censées être enfreintes, 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 parfaitement descriptifs.

Les navigateurs modernes et même IE 6+ (w/shim) peuvent prendre en charge des éléments tels que:

<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 devez prendre en charge IE9 ou une version antérieure (voir l'article ci-dessous).

Découvrez ce message StackOverflow:

Est-il possible de créer votre propre tag HTML en HTML5

Pour approfondir mon argumentation, les Angular Directives de Google et les nouveaux projets Polymer utilisent le concept de balises HTML personnalisées.

10
Timothy Perez

Je pensais que cela avait l'air très mauvais - parce que je travaillais sur un modèle Joomla récemment et que le modèle échouait W3C, car il utilisait la balise <i> et qui était devenu obsolète, car son utilisation originale était de mettre en italique quelque chose, qui est maintenant effectuée via CSS pas HTML plus.

C'est une très mauvaise pratique, car lorsque je l'ai vu, j'ai feuilleté le modèle et changé toutes les balises <i> en <span style="font-style:italic"> à la place, puis je me suis demandé pourquoi le modèle entier avait l'air si étrange.

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

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

ainsi, toutes mes icônes appartiennent à une même classe, de sorte que toute modification apportée affecte toutes les icônes (disons que je les voulais plus grandes ou plus petites, ou des bordures arrondies, etc.), le texte alternatif donne aux lecteurs d'écran la possibilité de dire à la personne ce qu'elle est. l'icône est plutôt que 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 permet également à l'utilisateur de passer la souris sur l'image et obtenez une info-bulle leur indiquant quelle est l'icône, au cas où ils ne pourraient pas la comprendre. Beaucoup mieux que d'utiliser <i> - et il passe également au standard W3C.

5
TheKLF99

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

J'ai d'abord pensé à la balise <img>, mais le style par défaut de ces balises dans les liens comporte généralement un style de bordure et/ou des effets d'ombre. De plus, il est inacceptable d'utiliser une balise <img> sans définir d'attribut "src", alors que j'utilise une déclaration de feuille de style background-image pour éviter que l'image ne glisse et ne glisse.

À ce stade, vous pensez à des balises telles que <span> ou <i> - auquel cas <i> a tout son sens pour ce type d’icône.

Globalement, je pense que son avantage, en plus d’être intuitif, est qu’elle nécessite un minimum d’ajustements de la feuille de style pour que cette balise fonctionne comme une icône.

2
Emery King