Les éléments personnalisés sont-ils valides au format HTML5?
J'ai été incapable de trouver une 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 d'une manière ou d'une autre:
http://dev.w3.org/html5/spec/single-page.html
Et les balises personnalisées ne semblent pas valider avec le validateur W3C.
La spécification des éléments personnalisés est disponible dans Chrome et Opera, et devient disponible dans autres navigateurs . Il fournit un moyen d'enregistrer des éléments personnalisés de manière formelle.
Les éléments personnalisés sont de nouveaux types d'éléments DOM pouvant être définis par les auteurs. Contrairement à decorators , qui sont sans état et éphémères, les éléments personnalisés peuvent encapsuler des états et fournir des interfaces de script.
Les éléments personnalisés font partie d’une spécification W3 plus large appelée Composants Web , ainsi que de modèles, d’importations HTML et de DOM Shadow.
Les composants Web permettent aux auteurs d'applications Web de définir des widgets offrant un niveau de richesse visuelle et d'interactivité impossible avec CSS uniquement, ainsi qu'une facilité de composition et de réutilisation impossible avec les bibliothèques de scripts d'aujourd'hui.
Cependant, à partir de ceci excellente présentation de l'article sur les développeurs Google à propos de Custom Elements v1:
Le nom d'un élément personnalisé doit contenir un tiret (
-). Alors<x-tags>,<my-element>, et<my-awesome-app>sont tous des noms valides, alors que<tabs>et<foo_bar>ne sont pas. Cette condition est que l’analyseur HTML puisse distinguer les éléments personnalisés des éléments normaux. Cela garantit également la compatibilité en aval lorsque de nouvelles balises sont ajoutées à HTML.
Quelques ressources
- Des exemples de composants Web sont disponibles à l'adresse https: //WebComponents.org
- WebComponents.js sert de polyfill pour les composants Web jusqu'à ce qu'ils soient pris en charge partout. Voir aussi WebComponents.js page github et tableau de support du navigateur Web .
C'est possible et autorisé:
Les agents utilisateurs doivent traiter les éléments et attributs qu’ils ne comprennent pas comme sémantiquement neutres; en les laissant dans le DOM (pour les processeurs DOM) et en les stylant en fonction de CSS (pour les processeurs CSS), mais sans en déduire le sens.
http://www.w3.org/TR/html5/infrastructure.html#extensibility-
Toutefois, si vous souhaitez ajouter de l’interactivité, vous devez rendre votre document invalide (mais toujours pleinement fonctionnel) pour prendre en charge les versions 7 et 8 d’IE.
Voir http://blog.svidgen.com/2012/10/building-custom-xhtml5-tags.html (mon blog)
C’est en fait une conséquence de l’accumulation du modèle de contenu des éléments.
Par exemple, l’élément racine doit être un élément html.
L'élément html ne peut contenir que n élément head suivi d'un élément body.
L'élément body ne peut contenir que contenu du flux où le contenu du flux est défini comme les éléments: a, abbr, adresse, zone (s'il s'agit d'un descendant d'un élément de la carte ), article, à part, audio, b, bdi, bdo, blockquote, bouton, toile, citer, code, commande, dataliste, détails, dfn, dl, em, intégrer, champs, figure, pied de page, formulaire , h1, h2, h3, h4, h5, h6, h6, en-tête, hgroup, hr, i, iframe, img, entrée, ins, kbd, keygen, étiquette, carte, marque, math, menu, compteur, navigation, objet, objet pré, progrès, q, Ruby, s, script, section, sélectionner, petite, durée, fort, style (si l'attribut de portée est présent), sous-table, tableau, zone de texte , le temps, u, ul, var, vidéo, wbr et texte
etc.
À aucun moment, le modèle de contenu ne dit "vous pouvez insérer les éléments de votre choix dans celui-ci", ce qui serait nécessaire pour les éléments/balises personnalisés.
Eléments et attributs personnalisés de base
Les éléments et attributs personnalisés sont valables en HTML, à condition que:
- Les noms d'éléments sont en minuscule et commencent par
x- - Les noms d'attributs sont en minuscule et commencent par
data-
Par exemple, <x-foo data-bar="gaz"/> Ou <br data-bar="gaz"/>.
Une convention commune pour les éléments est x-foo; x-vendor-feature Est recommandé.
Cela gère la plupart des cas, car il est rare qu'un développeur ait besoin de toute la puissance nécessaire pour enregistrer ses éléments. La syntaxe est également valide et stable. Une explication plus détaillée est ci-dessous.
Éléments et attributs personnalisés avancés
Depuis 2014, il existe une nouvelle méthode, bien améliorée, pour enregistrer des éléments et des attributs personnalisés. Cela ne fonctionnera pas dans les anciens navigateurs tels que IE 9 ou Chrome/Firefox 20). Mais il vous permet d’utiliser l’interface standard HTMLElement, d’empêcher les collisions, d’utiliser des non-x-* Et des noms autres que data-*, Définissent un comportement personnalisé et une syntaxe à respecter par le navigateur, qui nécessite un peu de JavaScript sophistiqué, comme indiqué dans les liens ci-dessous.
HTML5 Rocks - Définition de nouveaux éléments en HTML
WebComponents.org - Introduction aux éléments personnalisés
W3C - Composants Web: éléments personnalisés
Concernant la validité de la syntaxe de base
L'utilisation de data-* Pour les noms d'attributs personnalisés est parfaitement valide depuis un certain temps et fonctionne même avec les anciennes versions de HTML.
En ce qui concerne les noms d’éléments personnalisés (non enregistrés), le W3C recommande vivement de ne pas les utiliser et les considère non conformes. Mais les navigateurs doivent les prendre en charge, et les identificateurs x-* Ne seront pas en conflit avec les spécifications HTML futures et les identificateurs x-vendor-feature Ne seront pas en conflit avec les autres développeurs. Une DTD personnalisée peut être utilisée pour contourner tous les navigateurs difficiles.
Voici quelques extraits pertinents de la documentation officielle:
"Les spécifications applicables PEUVENT définir le nouveau contenu du document (par exemple, un élément foobar) [...]. Si la syntaxe et la sémantique d'un document HTML5 conforme donné ne sont pas modifiées par l'utilisation de spécification (s) applicable (s), ce document reste un document HTML5 conforme. document."
"Les agents utilisateurs doivent traiter les éléments et les attributs qu'ils ne comprennent pas comme sémantiquement neutres; les laisser dans le DOM (pour les processeurs DOM) et les styler selon le CSS (pour les processeurs CSS), sans en déduire le sens."
"Les agents utilisateurs ne sont pas libres de traiter des documents non conformes à leur guise. Le modèle de traitement décrit dans cette spécification s'applique aux implémentations indépendamment de la conformité des documents d'entrée."
"L’interface HTMLUnknownElement doit être utilisée pour les éléments HTML qui ne sont pas définis par cette spécification."
W3C - HTML5: Documents conformes
WhatWG - Norme HTML: Éléments DOM
Je voudrais souligner que le mot "valide" peut avoir deux sens différents dans ce contexte, l'un ou l'autre étant potentiellement, euh, valide.
Un document HTML avec des balises personnalisées doit-il être considéré comme valide en HTML5? La réponse à cette question est clairement "non". La spécification liste exactement quelles balises sont valables dans quels contextes. C'est pourquoi un validateur HTML n'acceptera pas un document avec des balises personnalisées ou avec des balises standard mal placées (comme une balise "img" dans l'en-tête).
Un document HTML contenant des balises personnalisées sera-t-il analysé et restitué de manière standard et clairement définie dans les navigateurs? Ici, peut-être étonnamment, la réponse est "oui " Même si techniquement, le document ne serait pas considéré comme valide en HTML5, la spécification HTML5 spécifie exactement ce que les navigateurs sont censés faire lorsqu'ils voient une balise personnalisée: en bref, la balise personnalisée agit un peu comme un
<span>- cela ne veut rien dire et ne fait rien par défaut, mais il peut être stylé en HTML et accessible en javascript.
Les éléments HTML personnalisés sont un standard W3 émergent auquel j'ai contribué, qui vous permet de déclarer et d’enregistrer des éléments personnalisés avec l’analyseur. Vous pouvez lire la spécification ici: spéc. Éléments personnalisés de W3 Web Components . En outre, Microsoft prend en charge une bibliothèque (écrite par les anciens développeurs de Mozilla), appelée X-Tag - qui facilite encore davantage l'utilisation des composants Web.
Pour donner une réponse mise à jour reflétant les pages modernes.
Les balises personnalisées sont valides si, soit
1) Ils contiennent un tiret
<my-element>
2) Ils sont XML incorporé
<greeting xmlns="http://example.com/customNamespace">Hello!</greeting>
Cela suppose que vous utilisez le doctype HTML5 <!doctype html>
Compte tenu de ces restrictions simples, il est maintenant logique de faire de votre mieux pour que votre balisage HTML reste valide (arrêtez de fermer les balises telles que <img> et <hr>, c’est stupide et incorrect à moins d’utiliser un doctype XHTML, dont vous n’avez probablement pas besoin).
Étant donné que HTML5 définit clairement les règles d'analyse, un navigateur conforme sera capable de gérer n'importe quelle balise que vous lui envoyez, même si elle n'est pas strictement valide.
Citant la section section Extensibilité de la spécification HTML5 :
Pour les fonctionnalités au niveau du balisage qui peuvent être limitées à la sérialisation XML et ne doivent pas nécessairement être prises en charge dans la sérialisation HTML, les fournisseurs doivent utiliser le mécanisme d'espaces de noms pour définir des espaces de noms personnalisés dans lesquels les éléments et attributs non standard sont pris en charge.
Donc, si vous utilisez la sérialisation XML de HTML5, il est légal de faire quelque chose comme ça:
<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 fonctionnalités de niveau balisage destinées à être utilisées avec la syntaxe HTML, les extensions doivent être limitées aux nouveaux attributs de la forme "fonctionnalité x-fournisseur" [...] Les nouveaux noms d'éléments ne doivent pas être créés.
Mais ces instructions s’adressent principalement aux éditeurs de navigateurs, qui fourniraient apparemment un style visuel et des fonctionnalités pour les éléments personnalisés qu’ils choisiraient de créer.
Pour un auteur, cependant, même s'il peut être légal d'incorporer un élément personnalisé dans la page (du 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 réellement quelque chose, ou soit rendu d'une manière spéciale, vous devriez regarder spécification des éléments personnalisés .
Pour une introduction plus douce sur le sujet, lisez le Introduction aux composants Web , qui contient également des informations sur le DOM Shadow et d’autres spécifications connexes. Ces spécifications sont encore en cours de rédaction - vous pouvez voir l’état actuel ici - mais elles sont en cours de développement.
Par exemple, une définition simple pour un élément greeting pourrait ressembler à ceci:
<element name="greeting">
<template>
<style scoped>
span { color:gray; }
</style>
<span>Simon says:</span>
<q><content/></q>
</template>
</element>
Ceci indique au navigateur de rendre le contenu de l’élément entre guillemets et préfixé par le texte "Simon dit:" qui est stylé avec la couleur grise. En règle générale, une définition d'élément personnalisée comme celle-ci serait stockée dans un fichier html distinct que vous importeriez avec 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 pratique de la définition ci-dessus à l'aide de la bibliothèque polyfill Polymer que vous pouvez voir ici . Notez qu'il s'agit d'une ancienne version de la bibliothèque Polymer - les versions les plus récentes fonctionnent très différemment. Cependant, avec la spécification encore en développement, ce n’est pas quelque chose que je recommanderais de toute façon d’utiliser dans le code de production.
Les attributs data-* Sont valides dans HTML5 et même dans HTML4, tous les navigateurs Web les respectaient. L'ajout de nouveaux tags est techniquement correct, mais n'est pas recommandé pour les raisons suivantes:
- Cela peut entrer en conflit avec quelque chose ajouté à l'avenir, et
- Rend le document HTML invalide, sauf s'il est ajouté dynamiquement via JavaScript.
J'utilise des balises personnalisées uniquement dans des endroits peu concernés par Google. Par exemple, dans un moteur de jeu iframe, j'ai créé une balise <log> Contenant <msg>, <error> Et <warning> - mais à travers JavaScript seulement. Et c'était pleinement valide, selon le validateur. Cela fonctionne même dans Internet Explorer avec son style! ;]
Je sais que cette question est ancienne, mais j'ai étudié ce sujet et bien que certaines des déclarations ci-dessus soient correctes, elles ne sont pas le seul moyen de créer des éléments personnalisés. Par exemple:
<button id="find">click me</button>
<Query? ?attach="find" ?content="alert( find() );" ?prov="Hello there :D" >
I won't be displayed :D
</Query?>
<style type="text/css">
[\?content] {
display: none;
}
</style>
<script type="text/javascript">
S = document.getElementsByTagName("Query?")[0];
Q = S.getAttribute("?content");
A = document.getElementById( S.getAttribute("?attach") );
function find() {
return S.getAttribute("?prov");
}
(function() {
A.setAttribute("onclick", Q);
})();
</script>
fonctionnerait parfaitement (dans les versions plus récentes de Google Chrome, IE, FireFox et Safari pour mobile jusqu'à présent). Tout ce dont vous avez besoin est simplement d’un caractère alpha (a-z, A-Z) pour démarrer la balise, puis vous pouvez utiliser n’importe quel des caractères non alpha après. Si vous êtes en CSS, vous devez utiliser le "\" (barre oblique inverse) afin de trouver l'élément, comme cela aurait besoin de la requête\^ {...}. Mais dans JS, vous appelez simplement comme vous le voyez. J'espère que cela aide. Voir exemple ici
-Boîte CBOS
Les balises personnalisées ne sont pas valides en HTML5. Mais actuellement, les navigateurs prennent en charge leur analyse et vous pouvez également les utiliser avec css. Donc, si vous souhaitez utiliser des balises personnalisées pour les navigateurs actuels, vous pouvez le faire. Toutefois, le support risque de disparaître une fois que les navigateurs auront appliqué les normes W3C uniquement pour l’analyse du contenu HTML.
il suffit d'utiliser ce que vous voulez sans aucune déclaration dom
<container>content here</container>
ajoutez votre propre style (display: block) et il fonctionnera avec n'importe quel navigateur moderne