web-dev-qa-db-fra.com

Puis-je utiliser l'élément <icon> en HTML5? Il échoue le validateur W3C

Lorsque je vais au service de validation du W3C, j'essaie de savoir s'il se plaint d'utiliser un élément <icon>, avec cet exemple:

<!doctype html>
<html lang="en">
<head>
    <title>Title</title>
    <meta charset="utf-8"/>
</head>
<body>
    <icon></icon>
</body>
</html>

L'erreur que je reçois en retour dit ceci:

Erreur: L'icône d'élément n'est pas autorisée en tant qu'enfant du corps de l'élément dans ce contexte. (Suppression des erreurs supplémentaires dans cette sous-arborescence.)

De la ligne 8, colonne 2; jusqu'à la ligne 8, colonne 7

Modèle de contenu pour le corps de l'élément: contenu du flux.

La partie où il est écrit "non autorisé en tant qu'enfant de" m'a suggéré que l'élément <icon> en tant que tel puisse effectivement exister, mais qu'il est destiné à autre chose et ne correspond donc pas à celui-ci structurellement. Mais quand je vais au référence des éléments HTML MDN , il n'y a pas d'élément <icon> répertorié.

Son utilisation fonctionne cependant (je peux l’utiliser pour afficher une icône Fontawesome), et voir comment HTML5 suggère de créer nos propres éléments (et les défenseurs d’Angularjs utilisant des noms d’éléments arbitraires pour les directives), serait-il vraiment mauvais d’utiliser en pratique?

Serait-ce mauvais pour le référencement? Les lecteurs se plaindraient-ils? Les analyseurs syntaxiques se plaindraient-ils? Ne serait-il pas à l'épreuve du temps?

seohtmlhtml5validationw3c-validation
3
Digital Ninja

Deux choses:

  1. Incluez un lien de référence dans votre <head></head> de la même manière que vous lieriez votre fichier CSS: <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  2. Référencez votre <icon> comme <i class="material-icons">cloud</i>

Vous pouvez en apprendre plus à ce sujet sur Tutoriel sur l’icône W3Schools

En annexe
Je concède à @unor en cela, <span> est une autre façon de référencer une icône. Il semble y avoir un sérieux débats entre <i> et <span> , mais les deux méthodes semblent fonctionner. Je peux comprendre qu'une personne dirait que l'utilisation de <span> par le W3C est correcte. Après tout, ils définissent toutes les spécifications. Cependant ... lorsque de grandes entreprises mondiales (Google) utilisent <i>... eh bien, disons simplement que l'utilisation de <i> ne se terminera pas de si tôt.

Sources supportant la balise <i>:
Icônes W3.CSS mentionne que <i> et <span> peuvent être utilisé (mais leurs exemples utilisent <i>.)
Google: Material Icons Guide

Sources supportant la balise <span>:
W3C Icon Font
astuces CSS: HTML pour l'utilisation des polices d'icônes
Recommandation de la police UseIconic de Bootstrap indique <span> pour HTML et <img> pour SVG, et
Font Awesome: Utilisation de base illustre l'utilisation des deux en encapsulant les balises <span><i></i></span> (bien que cela me semble un peu redondant).

Je suppose que notre meilleure option sera de prendre des décisions basées sur le langage de programmation et l’utilisation des icônes.

1
elbrant