Existe-t-il un moyen de créer votre propre balise html en HTML5?

Je veux créer quelque chose comme

<menu>
    <lunch>
        <dish>aaa</dish>
        <dish>bbb</dish>
    </lunch>
    <dinner>
        <dish>ccc</dish>
    </dinner>
</menu>

Cela peut-il être fait en HTML5? Je sais que je peux le faire avec

<ul id="menu">
    <li>
        <ul id="lunch">
            <li class="dish">aaa</li>
            <li class="dish">bbb</li>
        </ul>
    </li>
    <li>
        <ul id="dinner">
            <li class="dish">ccc</li>
        </ul>
    </li>    
</ul>

mais c'est tellement moins lisible :(

Vous pouvez utiliser des balises personnalisées dans les navigateurs, bien qu'elles ne soient pas HTML5 (voir Les éléments personnalisés sont - ils valides HTML5? Et la spécification HTML5 ).

Supposons que vous souhaitiez utiliser un élément de balise personnalisé appelé <stack>. Voici ce que vous devez faire ...

ÉTAPE 1

Normaliser ses attributs dans votre feuille de style CSS (pensez à réinitialiser css) - Exemple:

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

ÉTAPE 2

Pour le faire fonctionner dans les anciennes versions d'Internet Explorer, vous devez ajouter ce script à l'en-tête (Important si vous en avez besoin pour fonctionner dans les anciennes versions d'IE!):

 <!--[if lt IE 9]> 
 <script> document.createElement("stack"); </script>
 <![endif]-->

Ensuite, vous pouvez utiliser votre balise personnalisée librement.

<stack>Overflow</stack>

N'hésitez pas à définir également des attributs ...

<stack id="st2" class="nice"> hello </stack>

Je ne suis pas si sûr de ces réponses. Comme je viens de le lire: "LES TAGS PERSONNALISÉS ONT TOUJOURS ÉTÉ AUTORISÉS EN HTML."

http://www.crockford.com/html/

Le point ici étant que HTML était basé sur SGML. Contrairement à XML avec ses doctypes et schémas, HTML ne devient pas invalide si un navigateur ne connaît pas une balise ou deux. Pensez à <marquee>. Cela n'a pas été dans la norme officielle. Ainsi, tout en l'utilisant, votre page HTML était "officiellement non approuvée", elle n'a pas non plus cassé la page.

Ensuite, il y a <keygen>, qui était spécifique à Netscape, oublié en HTML4 et redécouvert et maintenant spécifié en HTML5. De plus, nous avons maintenant des attributs de balise personnalisés, comme data-XyZzz = "..." autorisés sur toutes les balises HTML5.

Ainsi, même si vous ne devriez pas inventer votre propre salade de balisage non spécifiée, il n'est pas exactement interdit d'avoir des balises personnalisées en HTML. Cependant, à moins que vous ne souhaitiez l'envoyer avec un type de contenu + xml ou incorporer d'autres espaces de noms XML, comme SVG ou MathML. Cela s'applique uniquement au HTML confiné à SGML.

Comme Michael l'a suggéré dans les commentaires, ce que vous voulez faire est tout à fait possible, mais votre nomenclature est erronée. Vous n’ajoutez pas de balises à HTML 5, vous créez un nouveau type de document XML avec vos propres balises.

Je l'ai fait pour certains projets lors de mon dernier emploi. Quelques conseils pratiques:

1. Lorsque vous dites que vous voulez «ajouter ces éléments à HTML 5», je suppose que ce que vous voulez vraiment dire, c'est que vous voulez que les pages s'affichent correctement dans un navigateur moderne, sans avoir à faire beaucoup de travail côté serveur. Ceci peut être accompli en insérant une "instruction de traitement de feuille de style" en haut du fichier xml, comme <? Xml-stylesheet type = "text / xsl" href = "menu.xsl"?>. Remplacez "menu.xsl" par le chemin d'accès à la feuille de style XSL que vous créez pour convertir vos balises personnalisées en HTML.

2. Mises en garde: votre fichier doit être un document XML bien formé, avec un en-tête XML <xml version = "1.0">. XML est plus sélectif que HTML sur des éléments tels que les balises incompatibles. De plus, contrairement au HTML, les balises sont sensibles à la casse. Vous devez également vous assurer que le serveur Web envoie les fichiers avec le type mime approprié "application / xml". Souvent, le serveur Web sera configuré pour le faire automatiquement si l'extension de fichier est ".xml", mais vérifiez.

3. Grande mise en garde: Enfin, l'utilisation de la transformation XSL automatique des navigateurs, comme je l'ai décrit, n'est vraiment préférable que pour le débogage et pour les applications limitées où vous avez beaucoup de contrôle. Je l'ai utilisé avec succès dans la mise en place d'un intranet simple chez mon dernier employeur, auquel seulement quelques dizaines de personnes ont accédé. Tous les navigateurs ne prennent pas en charge XSL, et ceux qui n'ont pas d'implémentations totalement compatibles. Donc, si vos pages doivent être libérées dans le «sauvage», il est préférable de les transformer toutes en HTML côté serveur, ce qui peut être fait avec un outil de ligne de commande, ou avec un bouton dans de nombreux éditeurs XML.

Créer vos propres noms de balises en HTML n'est pas possible / non valide. C'est à cela que servent XML, SGML et d'autres langages de balisage généraux.

Ce que vous voulez probablement, c'est

<div id="menu">
    <div id="lunch">
        <span class="dish">aaa</span>
        <span class="dish">bbb</span>
    </div>
    <div id="dinner">
        <span class="dish">ccc</span>
    </div>
</div>

Ou au lieu de <div/>et <span/>quelque chose comme <ul/>et <li/>.

Afin de lui donner un aspect et un fonctionnement correct, connectez simplement du CSS et du Javascript.

Je veux juste ajouter aux réponses précédentes qu'il y a un sens à n'utiliser que des balises à deux mots pour les éléments personnalisés. Ils ne devraient jamais être normalisés.

Par exemple, vous voulez utiliser la balise <icon>, parce que vous n'aimez pas <img>et que vous n'aimez ni l'un <i>ni l'autre ...

Eh bien, gardez à l'esprit que vous n'êtes pas le seul. Peut-être que dans le futur, w3c et / ou les navigateurs spécifieront / implémenteront cette balise.

À ce stade, les navigateurs implémenteront probablement un style natif pour cette balise et la conception de votre site Web risque de casser.

Je suggère donc d'utiliser (selon cet exemple) <img-icon>.

En fait, la balise <menu>est bien définie, c'est-à-dire non utilisée, mais définie. Il devrait contenir <menuitem>qui se comportent comme <li>.

Les balises personnalisées peuvent être utilisées dans Safari, Chrome, Opera et Firefox, du moins autant que de les utiliser à la place de "class = ...".

green {color: green} en css fonctionne pour

<green>This is some text.</green>

Pour intégrer des métadonnées, vous pouvez essayer d'utiliser des microdonnées HTML , mais c'est encore plus détaillé que d'utiliser des noms de classe.

<div itemscope>
    <p>My name is <span itemprop="name">Elizabeth</span>.</p>
</div>

<div itemscope>
    <p>My name is <span itemprop="name">Daniel</span>.</p>
</div>

Outre l'écriture d'une feuille de style XSL, comme je l'ai décrit précédemment, il existe une autre approche, du moins si vous êtes certain que Firefox ou un autre navigateur XML à part entière sera utilisé (c'est-à-dire PAS Internet Explorer). Ignorez la transformation XSL et écrivez une feuille de style CSS complète qui indique au navigateur comment formater le XML directement. L'avantage ici est que vous n'aurez pas à apprendre XSL, que beaucoup de gens trouvent être un langage difficile et contre-intuitif. L'inconvénient est que votre CSS devra spécifier le style très complètement, y compris ce que sont les nœuds de bloc, ce qui sont en ligne, etc. Habituellement, lors de l'écriture de CSS, vous pouvez supposer que le navigateur "sait" que <em>, par exemple, est un nœud en ligne, mais il n'aura aucune idée de ce qu'il faut faire avec <dish>.

Enfin, cela fait quelques années que j'ai essayé cela, mais je me souviens que IE (au moins quelques versions en arrière) a refusé d'appliquer les feuilles de style CSS directement aux documents XML.

L'intérêt du HTML est que les balises incluses dans la langue ont une signification convenue, que tout le monde dans le monde peut utiliser et fonder des décisions - comme le style par défaut, ou rendre les liens cliquables, ou soumettre un formulaire lorsque vous cliquez sur un <input type="submit">.

Les balises fabriquées comme la vôtre sont parfaites pour les humains (car nous pouvons apprendre l'anglais et ainsi savoir, ou du moins deviner, ce que signifient vos balises), mais pas si bonnes pour les machines.

Ce n'est pas une option dans aucune spécification HTML :)

Vous pouvez probablement faire ce que vous voulez avec des <div>éléments et des classes, à partir de la question, je ne sais pas exactement ce que vous recherchez, mais non, créer vos propres balises n'est pas une option.

Comme Nick l'a dit, les balises personnalisées ne sont prises en charge par aucune version de HTML.

Mais cela ne donnera aucune erreur si vous utilisez un tel balisage dans votre HTML.

Il semble que vous vouliez créer une liste. Vous pouvez utiliser une liste non ordonnée <ul>pour créer les éléments rool et utiliser la <li>balise pour les éléments en dessous.

Si ce n'est pas ce que vous voulez réaliser, veuillez spécifier exactement ce que vous voulez. Nous pouvons alors trouver une réponse.

Vous pouvez ajouter un attribut personnalisé via des attributs de données HTML 5. Par exemple: Message qui est valide pour HTML 5. Voir http://ejohn.org/blog/html-5-data-attributes/ pour obtenir des détails.

Le polymère ou les balises X vous permettent de créer vos propres balises html. Il est basé sur le "shadow DOM" du navigateur natif.

Vous pouvez simplement faire un style css personnalisé, cela créera une balise qui rendra la couleur d'arrière-plan rouge:

redback {background-color:red;}

 

<redback>This is red</redback>

Dans certaines circonstances, il peut sembler que la création de vos propres noms de balises fonctionne parfaitement.
Cependant, il ne s'agit que des routines de gestion des erreurs de votre navigateur au travail. Et le problème est que différents navigateurs ont des routines de gestion des erreurs différentes!

Voyez cet exemple.
La première ligne contient deux éléments composés, whatet ever, et ils sont traités différemment par différents navigateurs. Le texte apparaît en rouge dans IE11 et Edge, mais en noir dans les autres navigateurs.
À titre de comparaison, la deuxième ligne est similaire, sauf qu'elle ne contient que des éléments HTML valides, et qu'elle aura donc la même apparence dans tous les navigateurs.

body {color:black; background:white;} /* reset */

what, ever:nth-of-type(2) {color:red}
code, span:nth-of-type(2) {color:red}

<p><what></what> <ever>test</ever></p>

<p><code></code> <span>test</span></p>

Un autre problème avec les éléments constitués est que vous ne saurez pas ce que l'avenir nous réserve. Si vous avez créé un site Web , il y a quelques années avec des noms de balises comme picture, dialog, details, slot, templateetc., s'attendant de se comporter comme des portées, vous êtes maintenant en difficulté!

vous pouvez utiliser ceci:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>MyExample</title>
  <style>
    bloodred {color: red;}
  </style>
</head>
<body>
  <bloodred>
    this is BLOODRED (not to scare you)
  </bloodred>
</body>
<script>
  var btn = document.createElement("BLOODRED")
</script>
</html>

J'ai trouvé cet article sur la création de balises HTML personnalisées et leur instanciation. Cela simplifie le processus et le décompose en termes que tout le monde peut comprendre et utiliser immédiatement - mais je ne suis pas tout à fait sûr que les exemples de code qu'il contient soient valides dans tous les navigateurs, alors mettez en garde et testez soigneusement. Néanmoins, c'est une excellente introduction au sujet pour commencer.

Éléments personnalisés: définition de nouveaux éléments en HTML