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

Question

Je veux créer quelque chose comme

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

Peut-on le faire 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 :(

Answer 1

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 des éléments HTML5 valides ? y la spécification HTML5 ).

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

ÉTAPE 1

Normalisation de ses attributs dans votre feuille de style CSS (pensez à css reset). Exemple :

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

ÉTAPE 2

Pour qu'il fonctionne dans les anciennes versions d'Internet Explorer, vous devez ajouter ce script à l'en-tête (Important si vous avez besoin qu'il fonctionne dans les anciennes versions d'IE !)

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

---

Vous pourrez alors utiliser librement votre balise personnalisée.

<stack>Overflow</stack>

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

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

Answer 2

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

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

Le point ici étant que le HTML était basé sur le SGML. Contrairement au XML avec ses doctypes et ses schémas, le HTML ne devient pas invalide si un navigateur ne connaît pas une balise ou deux. Pensez à <marquee>. Cela ne figure pas dans la norme officielle. Ainsi, si son utilisation rendait votre page HTML "officiellement non approuvée", elle ne cassait pas non plus la page.

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

Ainsi, même si vous ne devriez pas inventer toute une salade de balises non spécifiées, il n'est pas vraiment interdit d'avoir des balises personnalisées en HTML. Cela dit, à moins que vous ne souhaitiez l'envoyer avec un Content-Type +xml ou intégrer d'autres espaces de noms XML, comme SVG ou MathML. Ceci ne s'applique qu'au HTML limité par le SGML.

Answer 3

Créer vos propres noms de balises en HTML n'est pas possible / pas valide. C'est à cela que servent XML, SGML et 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/> y <span/> quelque chose comme <ul/> y <li/> .

Pour que l'apparence et le fonctionnement soient corrects, il suffit de brancher quelques CSS et Javascript.

Answer 4

Michael l'a suggéré dans les commentaires, ce que vous voulez faire est tout à fait possible, mais votre nomenclature est faux. Vous n'êtes pas "l'ajout de balises HTML 5," vous êtes la création d'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. Quand vous dites que vous voulez "ajouter à HTML 5," j'assume ce que tu veux vraiment dire, c'est que vous souhaitez que les pages s'affichent correctement dans un navigateur moderne, sans avoir à faire beaucoup de travail sur le côté serveur. Ceci peut être accompli par l'insertion d'une "feuille de style de l'instruction de traitement" en haut du fichier xml <?xml-stylesheet type="text/xsl" href="menu.xsl"?>. Remplacer "dans le menu.xsl" avec le chemin d'accès à la feuille de style XSL que vous créez pour convertir vos balises personnalisées dans HTML.

2. Mises en garde: Votre fichier doit être un document XML bien formé, complet avec en-tête XML <xml version="1.0">. XML est de plus en plus pointilleuses que le HTML sur des choses comme incompatibles balises. Aussi, à la différence du HTML, les balises sont sensibles à la casse. Vous devez également vous assurer que le serveur web envoie les fichiers avec le type mime "application/xml". Souvent, le serveur web doit être configuré pour le faire automatiquement si l'extension du fichier est ".xml", mais à vérifier.

3. Gros Bémol: Finalement, en utilisant les navigateurs automatique de transformation XSL, comme je l'ai décrit, est vraiment le meilleur que pour le débogage et pour des 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 à mon dernier employeur, qui était accessible que par quelques dizaines de personnes tout au plus. Navigateurs ne supportent pas les XSL, et ceux qui n'en n'ont pas complètement compatible avec les implémentations. Donc, si vos pages sont publiées dans le "sauvage", il est préférable de les transformer tous en HTML sur le côté serveur, ce qui peut être fait avec un outil de ligne de commande, ou avec un bouton dans de nombreux éditeurs XML.

Answer 5

Les balises personnalisées peuvent être utilisées dans Safari, Chrome, Opera et Firefox, du moins en ce qui concerne leur utilisation à la place de "class=...".

vert {color : green} en css fonctionne pour

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