Existe-t-il un moyen de créer votre propre balise HTML dans HTML5?

Je veux créer quelque chose comme

  aaa bbb   ccc   

Peut-on le faire en HTML5? Je sais que je peux le faire avec

  

mais c’est beaucoup moins lisible 🙁

Vous pouvez utiliser des balises personnalisées dans les navigateurs, même si elles ne seront pas HTML5 (voir la section Éléments personnalisés, HTML5? Et la spécification HTML5 ).

Supposons que vous souhaitiez utiliser un élément de balise personnalisé appelé . Voici ce que vous devriez faire …

ÉTAPE 1

Normaliser ses atsortingbuts dans votre feuille de style CSS (pensez à la réinitialisation CSS) – Exemple:

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

ÉTAPE 2

Faites-le fonctionner dans les anciennes versions d’Internet Explorer en ajoutant ce script à la tête (Important!):

   

Ensuite, vous pouvez utiliser votre tag personnalisé librement.

 Overflow 

N’hésitez pas à définir des atsortingbuts aussi …

  hello  

Je ne suis pas si sûr de ces réponses. Comme je viens de le lire: “Les étiquettes personnalisées ont toujours été autorisées 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 de tag ou deux. Pensez à . Cela n’a pas été dans la norme officielle. Donc, tout en l’utilisant, votre page HTML a été “officiellement non approuvée”, elle n’a pas non plus cassé la page.

Ensuite, il y a , spécifique à Netscape, oublié dans HTML4 et redécouvert et maintenant spécifié dans HTML5. Et nous avons aussi des atsortingbuts de balises personnalisés, comme data-XyZzz = “…” autorisé sur toutes les balises HTML5.

Donc, même si vous ne devriez pas inventer toute une salade de balisage personnalisée non spécifiée, il n’est pas exactement interdit d’avoir des balises personnalisées en HTML. Cependant, à moins que vous souhaitiez l’envoyer avec un + xml Content-Type ou incorporer d’autres espaces de noms XML, tels que SVG ou MathML. Cela s’applique uniquement au HTML confiné au SGML.

Comme Michael l’a suggéré dans les commentaires, ce que vous voulez faire est tout à fait possible, mais votre nomenclature est fausse. Vous n’êtes pas en train d’append des 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. Quand vous dites que vous voulez “les append à HTML 5”, je suppose que vous voulez vraiment que les pages s’affichent correctement dans un navigateur moderne, sans avoir à faire beaucoup de travail côté serveur. Cela 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’access à la feuille de style XSL que vous créez pour convertir vos balises personnalisées en HTML.

  2. Avertissements: Votre fichier doit être un document XML bien formé, avec un en-tête XML . XML est plus précis que le HTML pour des choses comme les balises incompatibles. De plus, contrairement à 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 du fichier est “.xml”, mais vérifiez.

  3. Big Caveat: Enfin, l’utilisation de la transformation XSL automatique des navigateurs, comme je l’ai décrit, est vraiment préférable uniquement pour le débogage et pour des applications limitées où vous avez beaucoup de contrôle. Je l’ai utilisé avec succès pour mettre en place un simple intranet chez mon dernier employeur, auquel seules quelques dizaines de personnes avaient access. Tous les navigateurs ne prennent pas en charge XSL, et ceux qui ne le font pas sont totalement compatibles. Donc, si vos pages doivent être publiées dans la catégorie «sauvage», il est préférable de les transformer toutes en HTML du 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 ce que sont XML, SGML et autres langages de balisage généraux.

Ce que vous voulez probablement, c’est

  

Ou au lieu de

et quelque chose comme

    et

  • .

    Afin de lui donner l’apparence et le bon fonctionnement, il suffit de connecter du CSS et du Javascript.

    Je veux juste append aux réponses précédentes qu’il y a un sens à utiliser uniquement des balises de deux mots pour les éléments personnalisés. Ils ne devraient jamais être standardisés.


    Par exemple, vous voulez utiliser le tag , car vous n’aimez pas , et vous n’aimez pas ni …

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

    À l’heure actuelle, les navigateurs implémenteront probablement le style natif pour cette balise et la conception de votre site Web pourrait être rompue.

    Je suggère donc d’utiliser (selon cet exemple) .


    En fait, la balise

    est définie; pas tellement utilisé, mais défini. Il doit contenir qui se comporte comme

  • .

    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} in css works for

     This is some text. 

    Pour incorporer des métadonnées, vous pouvez essayer d’utiliser des microdonnées HTML , mais c’est encore plus verbeux que d’utiliser des noms de classes.

     

    My name is Elizabeth.

    My name is Daniel.

    En plus d’écrire 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 complet sera utilisé (c.-à-d. PAS Internet Explorer). Ignorez la transformation XSL et écrivez une feuille de style CSS complète indiquant au navigateur comment formater le XML directement. L’avantage est que vous n’auriez pas à apprendre le langage XSL, que beaucoup considèrent comme 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 est en ligne, etc. Habituellement, en écrivant CSS, vous pouvez supposer que le navigateur “sait” que , par exemple, est un nœud en ligne, mais il ne saura pas quoi faire avec .

    Finalement, cela fait quelques années que j’ai essayé ceci, mais si je me souviens bien, Internet Explorer (au moins quelques versions de retour) ont refusé d’appliquer les feuilles de style CSS directement aux documents XML.

    Le but de HTML est que les balises incluses dans le langage ont une signification convenue, que tout le monde dans le monde peut utiliser et baser ses décisions sur – comme le style par défaut, ou rendre les liens cliquables, ou soumettre un formulaire lorsque vous cliquez sur .

    Les tags créés comme les vôtres sont parfaits pour les humains (car nous pouvons apprendre l’anglais et donc savoir, ou du moins deviner, ce que signifient vos tags), mais pas si bon pour les machines.

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

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

    Il semble que vous vouliez créer une liste. Vous pouvez utiliser la liste non ordonnée

      pour créer les éléments rool et utiliser la

    • pour les éléments situés 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 append un atsortingbut personnalisé via les atsortingbuts de données HTML 5. Par exemple: Message valide pour HTML 5. Voir http://ejohn.org/blog/html-5-data-atsortingbutes/ pour obtenir des détails.

      Polymer ou X-tags vous permettent de créer vos propres balises HTML. Il est basé sur le “DOM DOM” du navigateur natif.

      Vous pouvez simplement faire un style de css personnalisé, cela va créer une balise qui rendra la couleur de fond rouge:

       redback {background-color:red;} 
       This is red 

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

      Voir cet exemple.
      La première ligne contient deux éléments, what ever , et ils sont traités différemment par les différents navigateurs. Le texte sort en rouge dans IE11 et Edge, mais en noir dans les autres navigateurs.
      A titre de comparaison, la deuxième ligne est similaire, sauf qu’elle ne contient que des éléments HTML valides, et elle sera donc identique 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} 
       

      test

      test

      Ce n’est pas une option dans toute spécification HTML 🙂

      Vous pouvez probablement faire ce que vous voulez avec les éléments et les classes

      , à partir de la question que je ne suis pas exactement sur ce que vous recherchez, mais non, créer vos propres tags n’est pas une option.

      J’ai trouvé cet article sur la création de balises HTML personnalisées et leur instanciation. Il 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 certain que les exemples de code qu’il contient sont valides dans tous les navigateurs. Néanmoins, c’est une excellente introduction au sujet pour commencer.

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

              This is how you create custom tags like what he is asking for its very simple just do what i wrote it works yeah no js or convoluted work arounds needed this lets you do exactly what he wrote.   

      vous pouvez utiliser ceci:

       < !DOCTYPE html>    MyExample   this is BLOODRED (not to scare you)