Y at-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>
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 il est tellement moins lisible :(
Vous pouvez utiliser des balises personnalisées dans les navigateurs, bien qu’elles ne soient pas en HTML5 (voir Les éléments personnalisés sont-ils valides en HTML5? et les spécifications HTML5 ).
Supposons que vous souhaitiez utiliser un élément de balise personnalisé appelé <stack>. Voici ce que vous devriez faire ...
ÉTAPE 1
Normalisez ses attributs 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!):
<!--[if lt IE 9]>
<script> document.createElement("stack"); </script>
<![endif]-->
Ensuite, vous pouvez utiliser votre tag personnalisé librement.
<stack>Overflow</stack>
N'hésitez pas à définir des attributs également ...
<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 a rendu votre page HTML "officiellement non approuvée", mais elle n'a pas été cassée non plus.
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 tous les HTML5 Mots clés.
Ainsi, bien que vous ne deviez pas inventer votre propre salade de balisage personnalisée, il n’est pas strictement interdit d’avoir des balises personnalisées en HTML. C’est toutefois, à moins que vous ne souhaitiez l’envoyer avec un type de contenu + xml ou incorporer d’autres espaces de noms XML, tels que SVG ou MathML. Ceci s'applique uniquement au HTML limité à 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 ajoutant 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:
Lorsque vous dites que vous souhaitez "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 devoir effectuer 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 de la feuille de style XSL que vous avez créée pour convertir vos balises personnalisées en HTML.
Mises en garde: votre fichier doit être un document XML bien formé, complété par l'en-tête XML <xml version = "1.0">. XML est plus sélectif que HTML pour des choses telles 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.
Big Caveat: Enfin, l'utilisation de la transformation XSL automatique des navigateurs, comme je l'ai décrite, 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 pour mettre en place un intranet simple chez mon dernier employeur, auquel seules quelques dizaines de personnes au maximum avaient accès. Tous les navigateurs ne prennent pas en charge XSL, et ceux qui ne disposent pas d'implémentations totalement compatibles. Donc, si vos pages doivent être libérées dans le "joker", il est préférable de toutes les transformer 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, il suffit de brancher du CSS et du Javascript.
Je veux juste ajouter aux réponses précédentes qu'il est logique d'utiliser uniquement des balises à deux mots pour les éléments personnalisés . Elles ne devraient jamais être normalisées.
Par exemple, vous voulez utiliser la balise <icon>, car vous n'aimez pas <img> et vous n'aimez pas non plus <i> ...
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.
À ce stade, les navigateurs implémenteront probablement le style natif pour cette balise et la conception de votre site Web risque de ne plus être opérationnelle.
Donc, je suggère 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 comporte comme <li>.
Les balises personnalisées peuvent être utilisées dans Safari, Chrome, Opera et Firefox, du moins dans la mesure où elles sont utilisées à la place de "class = ...".
green {color: green} en css fonctionne pour
<green>This is some text.</green>
L’intérêt du HTML est que les balises incluses dans la langue ont une signification convenue, que tout le monde peut utiliser et fonder ses décisions - comme le style par défaut, rendre les liens cliquables ou soumettre un formulaire lorsque vous cliquez sur un <input type="submit">.
Les tags confectionnés comme le vôtre 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 aussi bons pour les machines.
Pour incorporer des métadonnées, vous pouvez utiliser Microdata 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 la rédaction 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 complet 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 directement le code XML. Le bon côté de la chose est que vous n’auriez pas à apprendre le XSL, que beaucoup de gens trouvent très difficile à parler. L’inconvénient est que votre CSS devra spécifier très précisément le style, y compris ce que sont les nœuds de bloc, les inlines, etc. En général, 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 je l’essaie, mais je me souviens bien que IE (au moins quelques versions antérieures) refusait d’appliquer des feuilles de style CSS directement aux documents XML.
Comme Nick l'a dit, les balises personnalisées ne sont prises en charge par aucune version de HTML.
Mais, cela ne provoquera aucune erreur si vous utilisez un tel balisage dans votre code HTML.
Il semble que vous souhaitiez créer une liste. Vous pouvez utiliser la liste non ordonnée <ul> pour créer les éléments rool et utiliser la balise <li> pour les éléments situés en dessous.
Si ce n'est pas ce que vous voulez atteindre, veuillez spécifier exactement ce que vous voulez. Nous pouvons trouver une réponse alors.
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 traitement des erreurs de votre navigateur au travail. Et le problème est que les différents navigateurs ont des routines de traitement des erreurs différentes!
Voir cet exemple.
La première ligne contient deux éléments composés, what et 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, à la différence qu’elle ne contient que des éléments HTML valides et qu’elle aura donc le même aspect 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 confectionnés est que vous ne saurez pas ce que l'avenir nous réserve. Si vous avez créé il y a quelques années un site Web avec des noms de balises tels que picture, dialog, details, slot, template etc.
Vous pouvez ajouter un attribut personnalisé via HTML 5 data- Attributes . Par exemple: Message .__ Ceci est valable pour HTML 5. Voir http://ejohn.org/blog/html-5-data-attributes/ pour obtenir des détails.
Vous pouvez simplement faire du style css personnalisé, cela créera une balise qui rendra la couleur de fond rouge:
redback {background-color:red;}
<redback>This is red</redback>Ce n'est une option dans aucune spécification HTML :)
Vous pouvez probablement faire ce que vous voulez avec les éléments et les classes <div>, de la question que je ne sais pas exactement ce que vous cherchez, mais non, créer vos propres balises n'est pas une option.
<head>
<lunch>
<style type="text/css">
lunch{
color:blue;
font-size:32px;
}
</style>
</lunch>
</head>
<body>
<lunch>
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.
</lunch>
</body>J'ai trouvé cet article sur la création de balises HTML personnalisées et leur instanciation. Cela simplifie le processus et le divise 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 sont valides dans tous les navigateurs. Néanmoins, c'est une excellente introduction au sujet pour commencer.
Éléments personnalisés: Définir de nouveaux éléments en HTML
vous pouvez utiliser ceci:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>MyExample</title>
<style>bloodred {color: red;}</style>
<body>
<blood-red>this is BLOODRED (not to scare you)
</bloodred>
</body>
<script>
var btn = document.createElement("BLOODRED")
</script>
</html>