Les éléments personnalisés sont-ils valides en HTML5 ?

Question

Je n'ai pas trouvé de réponse définitive à la question de savoir si les balises personnalisées sont valides en HTML5, comme ceci :

<greeting>Hello!</greeting>

Je n'ai rien trouvé dans les spécifications qui aille dans un sens ou dans l'autre :

http://dev.w3.org/html5/spec/single-page.html

Les balises personnalisées ne semblent pas être validées par le validateur W3C.

Answer 1

En Spécification des éléments personnalisés est disponible dans Chrome et Opera, et le sera bientôt dans autres navigateurs . Il permet d'enregistrer des éléments personnalisés de manière formelle.

Les éléments personnalisés sont de nouveaux types d'éléments DOM qui peuvent être définis par auteurs. Contrairement aux décorateurs qui sont apatrides et éphémères, la coutume peuvent encapsuler l'état et fournir des interfaces script.

Les éléments personnalisés font partie d'une spécification W3 plus large appelée Composants Web ainsi que les modèles, les importations HTML et le Shadow DOM.

Les composants Web permettent aux auteurs d'applications Web de définir des widgets à l'aide d'une interface Web. richesse visuelle et une interactivité impossibles avec les CSS seuls, et une et une facilité de composition et de réutilisation que les bibliothèques script ne permettent pas aujourd'hui. aujourd'hui.

Toutefois, à partir de cette excellent article de synthèse sur Google Developers à propos de Custom Elements v1 :

Le nom d'un élément personnalisé doit contenir un tiret ( - ). Ainsi, les <x-tags> , <my-element> et <my-awesome-app> sont tous des noms valides, tandis que <tabs> y <foo_bar> ne le sont pas. Cette exigence permet à l'analyseur HTML de distinguer les éléments personnalisés des éléments normaux. Elle permet également d'assurer la compatibilité lorsque de nouvelles balises sont ajoutées au HTML.

Quelques ressources

• Des exemples de composants Web sont disponibles à l'adresse suivante https://WebComponents.org
• WebComponents.js sert de polyfill pour les composants Web jusqu'à ce qu'ils soient pris en charge partout. Voir aussi la page Page github de WebComponents.js et tableau de support des navigateurs web .

Answer 2

C'est possible et autorisé :

U comprennent pas comme s'ils étaient sémantiquement neutres ; les laisser dans le DOM (pour les processeurs DOM ) et en les stylisant selon CSS (pour les processeurs CSS), mais sans en déduire de signification.

http://www.w3.org/TR/html5/infrastructure.html#extensibility-0

Mais si vous avez l'intention d'ajouter de l'interactivité, vous devrez rendre votre document invalide (mais toujours pleinement fonctionnel) pour l'adapter aux versions 7 et 8 d'IE.

Voir http://blog.svidgen.com/2012/10/building-custom-xhtml5-tags.html (mon blog)

Answer 3

C'est en fait une conséquence de l'accumulation du modèle de contenu de l'élément.

Par exemple, l'élément racine doit être un html élément.

L' html élément ne peut contenir qu' Un élément de tête suivie par un élément du corps.

L' body élément ne peut contenir de contenu de Flux , où les flux de contenu est définie comme étant les éléments: l' un, abbr, adresse, (si il est un descendant d'un élément de la carte), l'article, de côté, audio, b, bdi, bdo, blockquote, br, bouton, toile, citer, code, de commande, datalist, del, détails dfn, div dl, em, incorporer, fieldset, la figure, le pied de page, forme, h1, h2, h3, h4, h5, h6, l'en-tête, hgroup, rh, j', iframe, img, d'entrée, ins, kbd, keygen, étiquette, carte, marque, en mathématiques, menu, compteur, nav, noscript, objet, ol, de sortie, p, avant, le progrès, q, ruby, s, samp, script, la section, sélectionnez, petit, durée de forte, style (si la portée de l'attribut est présent), sous, sup, svg, tableau, textarea, temps, u, ul, var, vidéo, wbr et le Texte

et ainsi de suite.

À aucun moment, le modèle de contenu de dire "vous pouvez mettre tous les éléments que vous aimez dans celui-ci", ce qui serait nécessaire pour les éléments personnalisés/tags.

Answer 4

Les éléments HTML personnalisés sont une norme W3 émergente à laquelle j'ai contribué et qui vous permet de déclarer et d'enregistrer des éléments personnalisés avec l'analyseur, vous pouvez lire la spécification ici : W3 Web Components Custom Elements spec . En outre, Microsoft soutient une bibliothèque (écrite par d'anciens développeurs de Mozilla), appelée X-Tag - il rend le travail avec les composants Web encore plus facile.

Answer 5

Citation de l'article Section sur l'extensibilité de la spécification HTML5 :

Pour les fonctions de balisage qui peuvent être limitées à la sérialisation XML et ne doivent pas être prises en charge dans la sérialisation HTML, les vendeurs doivent utiliser le mécanisme d'espace de noms pour définir des espaces de noms personnalisés dans lesquels les éléments et attributs non standard sont pris en charge.

Ainsi, si vous utilisez la sérialisation XML de HTML5, il est légal pour vous de faire quelque chose comme ceci :

<greeting xmlns="http://example.com/customNamespace">Hello!</greeting>

Cependant, si vous utilisez la syntaxe HTML, vous êtes beaucoup plus limité dans ce que vous pouvez faire.

Pour les caractéristiques de niveau balistique destinées à être utilisées avec la syntaxe HTML, les extensions doivent être limitées à de nouveaux attributs de la forme "x-vendor-feature" [...] De nouveaux noms d'éléments ne doivent pas être créés.

Mais ces instructions s'adressent principalement aux vendeurs de navigateurs, qui sont censés fournir un style visuel et des fonctionnalités pour les éléments personnalisés qu'ils choisissent de créer.

Pour un auteur, cependant, bien qu'il soit légal d'incorporer un élément personnalisé dans la page (au moins dans la sérialisation XML), vous n'obtiendrez rien de plus qu'un nœud dans le DOM. Si vous voulez que votre élément personnalisé fasse quelque chose, ou qu'il soit rendu d'une manière spéciale, vous devriez vous tourner vers la classe Spécification des éléments personnalisés .

Pour une introduction plus douce sur le sujet, lisez le document suivant Introduction aux composants Web qui comprend également des informations sur le Shadow DOM et d'autres spécifications connexes. Ces spécifications sont encore à l'état d'ébauches pour le moment - vous pouvez voir le statut actuel ici - mais ils sont activement développés.

À titre d'exemple, une définition simple d'un greeting pourrait ressembler à ceci :

<element name="greeting">
  <template>
    <style scoped>
      span { color:gray; }
    </style>
    <span>Simon says:</span>
    <q><content/></q>
  </template>
</element>

Cela indique au navigateur de rendre le contenu de l'élément entre guillemets et préfixé par le texte "Simon says :" qui est stylisé avec la couleur grise. En règle générale, une définition d'élément personnalisée comme celle-ci est stockée dans un fichier html distinct que vous importez à l'aide d'un lien.

<link rel="import" href="greeting-definition.html" />

Bien que vous puissiez également l'inclure en ligne si vous le souhaitez.

J'ai créé une démonstration fonctionnelle de la définition ci-dessus en utilisant la bibliothèque Polymer polyfill. ici . Notez que ceci utilise une ancienne version de la bibliothèque Polymer - les versions plus récentes fonctionnent différemment. Cependant, la spécification étant toujours en cours de développement, je ne recommanderais pas d'utiliser cette méthode dans un code de production.