Pourquoi CSS fonctionne-t-il avec de faux éléments?

Dans ma classe, je jouais et j'ai découvert que CSS fonctionne avec des éléments maquillés.

Exemple:

imsocool {
    color:blue;
}

<imsocool>HELLO</imsocool>

Lorsque mon professeur m'a vu pour la première fois utiliser cela, il était un peu surpris que les éléments maquillés fonctionnent et m'a recommandé de simplement changer tous mes éléments maquillés en paragraphes avec des pièces d'identité.

Pourquoi mon professeur ne veut-il pas que j'utilise des éléments maquillés? Ils fonctionnent efficacement.

Aussi, pourquoi ne savait-il pas que des éléments constitués existent et fonctionnent avec CSS. Sont-ils rares?

Pourquoi CSS fonctionne-t-il avec de faux éléments?

(La plupart) des navigateurs sont conçus pour être (dans une certaine mesure) compatibles avec les futurs ajouts au HTML. Les éléments non reconnus sont analysés dans le DOM, mais n'ont pas de sémantique ou de rendu par défaut spécialisé qui leur est associé.

Lorsqu'un nouvel élément est ajouté à la spécification, parfois CSS, JavaScript et ARIA peuvent être utilisés pour fournir la même fonctionnalité dans les anciens navigateurs (et les éléments doivent apparaître dans le DOM pour que ces langues puissent les manipuler pour ajouter cette fonctionnalité ).

(Bien qu'il soit à noter que des travaux sont en cours pour définir un moyen d' étendre le HTML avec des éléments personnalisés , mais ce travail en est actuellement aux premiers stades de développement, il devrait donc probablement être évité jusqu'à ce qu'il soit arrivé à maturité.)

Pourquoi mon professeur ne veut-il pas que j'utilise des éléments maquillés?

• Ils ne sont pas autorisés par la spécification HTML
• Ils pourraient entrer en conflit avec de futurs éléments standard portant le même nom
• Il existe probablement un élément HTML existant mieux adapté à la tâche

Aussi; pourquoi ne savait-il pas que des éléments constitués existaient et travaillaient avec CSS. Sont-ils rares?

Oui. Les gens ne les utilisent pas parce qu'ils ont les problèmes ci-dessus.

TL; DR

• Les balises personnalisées ne sont pas valides en HTML. Cela peut entraîner des problèmes de rendu.
• Rend le développement futur plus difficile car le code n'est pas portable.
• Le code HTML valide offre de nombreux avantages tels que le référencement, la vitesse et le professionnalisme.

Longue réponse

Il existe certains arguments selon lesquels le code avec des balises personnalisées est plus utilisable.

Cependant, cela conduit à un code HTML non valide. Ce qui n'est pas bon pour votre site.

Le point de CSS / HTML valide | StackOverflow

• Google le préfère donc c'est bon pour le référencement.
• Cela rend votre page Web plus susceptible de fonctionner dans les navigateurs que vous n'avez pas testés.
• Cela vous fait paraître plus professionnel (pour certains développeurs au moins)
• Les navigateurs conformes peuvent afficher [HTML valide plus rapidement]
• Il souligne un tas de bogues obscurs que vous avez probablement manqués et qui affectent des choses que vous n'avez probablement pas testées, par exemple la page de codes ou l'ensemble de langues de la page.

Pourquoi valider | W3C

• La validation comme outil de débogage
• La validation comme contrôle de qualité à l'épreuve du temps
• La validation facilite la maintenance
• La validation aide à enseigner les bonnes pratiques
• La validation est un signe de professionnalisme

YADA (encore une autre réponse (différente))

Edit: Veuillez voir le commentaire de BoltClock ci-dessous concernant le type vs tag vs élément. Je ne m'inquiète généralement pas de la sémantique, mais son commentaire est très approprié et instructif.

Bien qu'il y ait déjà un tas de bonnes réponses, vous avez indiqué que votre professeur vous a incité à poster cette question afin qu'il semble que vous soyez (officiellement) à l'école . Je pensais que j'exposerais un peu plus en détail non seulement le CSS mais aussi la mécanique des navigateurs Web. Selon Wikipedia , "CSS est un langage de feuille de style utilisé pour décrire ... un document écrit dans un langage de balisage." (J'ai ajouté l'accent sur "a") Notez qu'il ne dit pas "écrit en HTML" et encore moins une version spécifique de HTML. CSS peut être utilisé sur HTML, XHTML, XML, SGML, XAML, etc. Bien sûr, vous avez besoin de quelque chose qui rendrachacun de ces types de documents qui appliquera également un style. Par définition, CSS ne connaît pas / ne comprend pas / ne se soucie pas des balises de langage de balisage spécifiques. Ainsi, les balises peuvent être "invalides" en ce qui concerne HTML, mais il n'y a pas de concept de balise / élément / type "valide" en CSS.

Les navigateurs visuels modernes ne sont pas des programmes monolithiques. Ils sont un amalgame de différents "moteurs" qui ont des tâches spécifiques à faire. Au minimum, je peux penser à 3 moteurs, le moteur de rendu, le moteur CSS et le moteur javascript / VM. Je ne sais pas si l'analyseur fait partie du moteur de rendu (ou vice versa) ou s'il s'agit d'un moteur distinct, mais vous avez l'idée.

L'application ou non par un navigateur visuel (d' autres ont déjà abordé le fait que les lecteurs d' écran peuvent avoir d'autres difficultés à gérer des balises non valides ) dépend du fait que l'analyseur laisse la balise "invalide" dans le document et que le moteur de rendu applique des styles à cette balise. Puisqu'il serait plus difficile à développer / maintenir, les moteurs CSS ne sont pas écrits pour comprendre que "Ceci est un document HTML alors voici la liste des balises / éléments / types valides." Les moteurs CSS trouvent simplement les balises / éléments / types , puis indiquent au moteur de rendu "Voici les styles que vous devez appliquer". Que le moteur de rendu décide ou non d'appliquer réellement les styles, cela dépend.

Voici un moyen facile de penser au flux de base d'un moteur à l'autre: analyseur -> CSS -> rendu. En réalité, c'est beaucoup plus compliqué, mais c'est assez bon pour les débutants.

Cette réponse est déjà trop longue donc je vais en rester là.

Les éléments inconnus sont traités comme des divs par les navigateurs modernes. Voilà pourquoi ils fonctionnent. Cela fait partie de la nouvelle norme HTML5 qui introduit une structure modulaire à laquelle de nouveaux éléments peuvent être ajoutés.

Dans les navigateurs plus anciens (je pense IE7-), vous pouvez appliquer une astuce Javascript, après quoi ils fonctionneront également.

Voici une question connexe que j'ai trouvée en cherchant un exemple.

Voici une question sur le correctif Javascript . Il s'avère que c'est bien IE7 qui ne prend pas en charge ces éléments hors de la boîte.

Aussi; pourquoi ne savait-il pas que des balises composées existaient et fonctionnaient avec CSS. Sont-ils rares?

Oui, tout à fait. Mais surtout: ils n'ont pas de fonction supplémentaire. Et ils sont nouveaux dans html5. Dans les versions antérieures de HTML, une balise inconnue n'était pas valide.

De plus, les enseignants semblent parfois avoir des lacunes dans leurs connaissances. Cela peut être dû au fait qu'ils doivent enseigner aux étudiants les bases d'un sujet donné, et cela ne vaut pas vraiment la peine de connaître tous les tenants et aboutissants et d'être vraiment à jour. Une fois, j'ai été détenu parce qu'un enseignant pensait que j'avais programmé un virus, simplement parce que je pouvais faire jouer de la musique sur un ordinateur en utilisant la playcommande dans GWBasic. (Histoire vraie, et oui, il y a longtemps). Mais quelle qu'en soit la raison, je pense que le conseil de ne pas utiliser d'éléments personnalisés est judicieux.

En fait, vous pouvez utiliser des éléments personnalisés. Voici la spécification du W3C à ce sujet:

http://w3c.github.io/webcomponents/spec/custom/

Et voici un tutoriel expliquant comment les utiliser:

http://www.html5rocks.com/en/tutorials/webcomponents/customelements/

Comme l'a souligné @Quentin: il s'agit d'un projet de spécification dans les premiers jours du développement, et il impose des restrictions sur ce que peuvent être les noms des éléments.

Il y a certaines choses sur les autres réponses qui sont soit mal formulées, soit peut-être un peu incorrectes.

FAUX (ish): les éléments HTML non standard sont "non autorisés", "illégaux" ou "invalides".

Pas nécessairement. Ils sont "non conformes" . Quelle est la différence? Quelque chose peut "ne pas être conforme" et être "autorisé". Le W3C ne va pas envoyer la police HTML chez vous et vous transporter.

Le W3C a laissé les choses de cette façon pour une raison. La conformité et les spécifications sont définies par une communauté. Si vous avez une petite communauté consommant du HTML à des fins plus spécifiques et qu'ils conviennent tous de certains nouveaux éléments dont ils ont besoin pour faciliter les choses, ils peuvent avoir ce que le W3C appelle "d'autres spécifications applicables". . (c'est une simplification grossière, évidemment, mais vous avez l'idée)

Cela dit, les validateurs stricts déclareront vos éléments non standard "invalides". mais c'est parce que le travail du validateur est d'assurer la conformité à toutes les spécifications pour lesquelles il valide, pas de garantir la «légalité» du navigateur ou de son utilisation .

FAUX (ish): éléments HTML non standard sera traduira par des problèmes de rendu

Peut-être, mais peu probable. (remplacez "sera" par "pourrait") SVG, Math ou quelque chose de personnalisé).

En fait, la raison pour laquelle CSS peut styliser des balises non standard est que la spécification HTML stipule clairement que:

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 styliser selon CSS (pour les processeurs CSS), mais sans en déduire de sens

Remarque: si vous souhaitez utiliser une balise personnalisée, rappelez-vous simplement qu'une modification ultérieure des spécifications HTML pourrait faire exploser votre style, alors soyez prêt. Il est vraiment peu probable que le W3C implémente le<imsocool> balise.

Balises non standard et JavaScript (via le DOM)

La raison pour laquelle vous pouvez accéder et modifier des éléments personnalisés à l'aide de JavaScript est que la spécification parle même de la façon dont ils doivent être traités dans le DOM , qui est l'API (vraiment horrible) qui vous permet de manipuler les éléments sur votre page.

L'interface HTMLUnknownElement doit être utilisée pour les éléments HTML qui ne sont pas définis par cette spécification (ou d'autres spécifications applicables).

TL; DR: La conformité aux spécifications est effectuée à des fins de communication et de sécurité. La non-conformité est toujours autorisée par tout sauf un validateur , dont le seul but est de faire respecter la conformité, mais dont l'utilisation est facultative.

Par exemple:

var wee = document.createElement('wee');
console.log(wee.toString()); //[object HTMLUnknownElement]

(Je suis sûr que cela attirera des flammes, mais il y a mes 2 cents)

Selon les spécifications:

CSS

Un sélecteur de type est le nom d'un type d'élément de langage de document écrit en utilisant la syntaxe des noms qualifiés CSS

Je pensais que cela s'appelait le sélecteur d' élément , mais apparemment c'est en fait le sélecteur de type . La spécification continue en parlant de CSS qualified namesce qui ne fait aucune restriction sur ce que sont réellement les noms. C'est-à-dire que tant que le sélecteur de type correspond à la syntaxe de nom qualifié CSS, il est techniquement correct CSS et correspondra à l'élément dans le document. Il n'y a aucune restriction CSS spécifique sur les éléments qui n'existent pas dans une spécification particulière - HTML ou autre.

HTML

Il n'y a aucune restriction officielle sur l'inclusion des balises dans le document que vous souhaitez. Cependant, la documentation dit

Les auteurs ne doivent pas utiliser les éléments, les attributs ou les valeurs d'attribut à des fins autres que leur objectif sémantique prévu, car cela empêche le logiciel de traiter correctement la page.

Et ça dit plus tard

Les auteurs ne doivent pas utiliser d'éléments, d'attributs ou de valeurs d'attribut qui ne sont pas autorisés par cette spécification ou d'autres spécifications applicables, car cela rendrait considérablement plus difficile l'extension du langage à l'avenir.

Je ne sais pas exactement où ni si la spécification indique que les éléments inconnus sont autorisés , mais elle parle de l' interface HTMLUnknownElement pour les éléments non reconnus. Certains navigateurs peuvent même ne pas reconnaître les éléments qui se trouvent dans la spécification actuelle (IE8 me vient à l'esprit).

Il existe cependant un brouillon pour les éléments personnalisés , mais je doute qu'il soit encore implémenté n'importe où.

C'est possible avec html5 mais vous devez prendre en compte les anciens navigateurs.

Si vous décidez de les utiliser, assurez-vous de COMMENTER votre html !! Certaines personnes peuvent avoir du mal à comprendre de quoi il s'agit, de sorte qu'un commentaire pourrait leur faire gagner une tonne de temps.

Quelque chose comme ça,

<!-- Custom tags in use, refer to their CSS for aid -->

Lorsque vous créez vos propres éléments / balises personnalisés, les anciens navigateurs n'ont aucune idée de ce que c'est, tout comme des éléments html5 comme nav/ section.

Si vous êtes intéressé par ce concept, je vous recommande de le faire de la bonne façon.

Commencer

Les éléments personnalisés permettent aux développeurs Web de définir de nouveaux types d'éléments HTML. La spécification est l'une des nombreuses nouvelles primitives d'API débarquant sous l'égide des composants Web, mais c'est probablement la plus importante. Les composants Web n'existent pas sans les fonctionnalités déverrouillées par des éléments personnalisés:

Définir de nouveaux éléments HTML / DOM Créer des éléments qui s'étendent à partir d'autres éléments Regrouper logiquement des fonctionnalités personnalisées dans une seule balise Étendre l'API des éléments DOM existants

Il y a beaucoup de choses que vous pouvez en faire et cela rend votre script aussi beau que cet article aime le mettre. Éléments personnalisés définissant de nouveaux éléments en HTML .

Permet donc de récapituler,

Avantages

• Très élégant et facile à lire.

• C'est agréable de ne pas en voir autant divs. : p

• Permet une sensation unique au code

Les inconvénients

• La prise en charge d'un navigateur plus ancien est une chose importante à considérer.

• D'autres développeurs peuvent ne pas savoir quoi faire s'ils ne connaissent pas les balises personnalisées. (Expliquez-leur ou ajoutez des commentaires pour les informer)

• Enfin, une chose à prendre en considération, mais je ne suis pas sûr, ce sont les éléments en bloc et en ligne. En utilisant des balises personnalisées, vous finirez par écrire plus de CSS car la balise personnalisée n'aura pas de côté par défaut.

Le choix vous appartient entièrement et vous devez le baser sur ce que le projet demande.

Mise à jour 1/2/2014

Voici un article très utile que j'ai trouvé et pensé que je partagerais, Custom Elements .

Apprenez la technologie Pourquoi des éléments personnalisés? Les éléments personnalisés permettent aux auteurs de définir leurs propres éléments. Les auteurs associent le code JavaScript aux noms de balises personnalisées, puis utilisent ces noms de balises personnalisées comme n'importe quelle balise standard.

Par exemple, après avoir enregistré un type spécial de bouton appelé super-bouton, utilisez le super-bouton comme ceci:

Les éléments personnalisés sont toujours des éléments. Nous pouvons les créer, les utiliser, les manipuler et les composer aussi facilement que n'importe quel standard ou aujourd'hui.

Cela semble être une très bonne bibliothèque à utiliser, mais j'ai remarqué qu'elle ne passait pas le statut de construction de Windows. C'est aussi dans un pré-alpha, je crois, donc je garderais un œil sur cela pendant qu'il se développerait.

Pourquoi ne veut-il pas que vous les utilisiez? Ils ne sont pas courants et ne font pas partie de la norme HTML5. Techniquement, ils ne sont pas autorisés. Ils sont un hack.

Je les aime moi-même cependant. Vous pouvez être intéressé par XHTML5. Il vous permet de définir vos propres balises et de les utiliser dans le cadre de la norme.

De plus, comme d'autres l'ont souligné, ils ne sont pas valides et ne sont donc pas portables.

Pourquoi ne savait-il pas qu'elles existaient? Je ne sais pas, sauf qu'ils ne sont pas courants. Peut-être qu'il n'était simplement pas au courant que vous le pouviez.

Les balises composées sont rarement utilisées, car il est peu probable qu'elles fonctionnent de manière fiable dans tous les navigateurs actuels et futurs.

Un navigateur doit analyser le code HTML en éléments qu'il connaît, les balises composées seront converties en quelque chose d'autre pour s'adapter au modèle d'objet de document (DOM). Comme les normes Web ne couvrent pas la façon de gérer tout ce qui est en dehors des normes, les navigateurs Web ont tendance à gérer le code non standard de différentes manières.

Le développement Web est assez délicat avec un tas de navigateurs différents qui ont leurs propres bizarreries, sans ajouter un autre élément d'incertitude. Le mieux est de s'en tenir à des choses qui sont réellement dans les normes, c'est ce que les fournisseurs de navigateurs essaient de suivre, de sorte que cela ait les meilleures chances de fonctionner.

Je pense que les balises composées sont potentiellement plus confuses ou peu claires que les p avec des ID (certains blocs de texte en général). Nous savons tous qu'un ap avec un ID est un paragraphe, mais qui sait à quoi sont destinées les étiquettes composées? C'est du moins ma pensée. :) Il s'agit donc plus d'un problème de style / clarté que de fonctionnalité.

D'autres ont fait d'excellents arguments, mais il vaut la peine de noter que si vous regardez un framework tel que AngularJS , il y a un cas très valable pour les éléments et les attributs personnalisés. Ceux-ci transmettent non seulement une meilleure signification sémantique au xml, mais ils peuvent également fournir un comportement, une apparence et une convivialité à la page Web.

CSS est un langage de feuille de style qui peut être utilisé pour présenter des documents XML, pas seulement des documents (X) HTML. Votre extrait de code avec les balises composées pourrait faire partie d'un document XML légal; il en serait un si vous l'enfermiez dans un seul élément racine. Vous en avez probablement déjà un <html> ...</html>autour? Tout navigateur actuel peut afficher des documents XML.

Bien sûr, ce n'est pas un très bon document XML, il manque une grammaire et une déclaration XML. Si vous utilisez un en-tête de déclaration HTML à la place (et probablement une configuration de serveur qui envoie le type MIME correct), il s'agirait plutôt d'un code HTML illégal.

(X) HTML présente des avantages par rapport au XML simple car les éléments ont une signification sémantique utile dans le contexte d'une présentation de page Web. Les outils peuvent fonctionner avec cette sémantique, d'autres développeurs en connaissent la signification, elle est moins sujette aux erreurs et meilleure à lire.

Mais dans d'autres contextes, il est préférable d'utiliser CSS avec XML et / ou XSLT pour faire la présentation. C'est ce que tu as fait. Comme ce n'était pas votre tâche, vous ne saviez pas ce que vous faisiez, et HTML / CSS est la meilleure façon de procéder la plupart du temps, vous devez vous y tenir dans votre scénario.

Vous devez ajouter un en-tête (X) HTML à votre document pour que les outils puissent vous donner des messages d'erreur significatifs.

... Je change simplement toutes mes balises composées en paragraphes avec des identifiants.

Je conteste en fait sa suggestion sur la façon de le faire correctement.

1. Une <p>balise est destinée aux paragraphes. Je vois des gens qui l'utilisent tout le temps au lieu d'un div - simplement à des fins d'espacement ou parce que cela semble plus doux. Si ce n'est pas un paragraphe, ne l'utilisez pas.

2. Vous n'avez pas besoin ou ne voulez pas coller d'ID sur tout sauf si vous avez besoin de le cibler spécifiquement (par exemple avec Javascript). Utilisez des cours ou juste une div directe.

Dès ses débuts, CSS a été conçu pour être indépendant du balisage, il peut donc être utilisé avec n'importe quel langage de balisage produisant des structures DOM semblables à des arborescences (SVG par exemple). Toute balise conforme à la name tokenproduction est parfaitement valide en CSS. Votre question concerne donc plutôt le HTML que le CSS lui-même.

Les éléments avec des balises personnalisées sont pris en charge par la spécification HTML5. HTML5 standardise la façon dont les éléments inconnus doivent être analysés dans le DOM. HTML5 est donc la première spécification HTML qui permet à proprement parler des éléments personnalisés. Il vous suffit d'utiliser le doctype HTML5 <!DOCTYPE html>dans votre document.

Comme pour les noms de balises personnalisés eux-mêmes ...

Ce document http://www.w3.org/TR/custom-elements/ recommande que les balises personnalisées que vous choisissez contiennent au moins un symbole «-» (tiret). De cette façon, ils n'entreront pas en conflit avec les futurs éléments HTML. Par conséquent, vous feriez mieux de changer votre doc en quelque chose comme ceci:

<style>
so-cool {
    color:blue;
}
</style>

<body>
    <so-cool>HELLO</so-cool>
</body> 

^{Apparemment, personne ne l'a mentionné, alors je le ferai.}

Il s'agit d'un sous-produit des guerres de navigateurs .

Dans les années 1990, lorsque Internet a commencé à se généraliser, la concurrence s'est intensifiée sur le marché des navigateurs. Pour rester compétitif et attirer les utilisateurs, certains navigateurs (notamment Internet Explorer) ont essayé d'être utiles et «conviviaux» en tentant de comprendre ce que les concepteurs de pages voulaient dire et ont ainsi autorisé des balises incorrectes (par exemple, <b><i>foobar</b></i>elles s'afficheraient correctement en gras). italique).

Cela avait un sens dans une certaine mesure, car si un navigateur se plaignait des erreurs de syntaxe tandis qu'un autre mangeait tout ce que vous lui aviez lancé et crachait un résultat (plus ou moins) correct, alors les gens se précipiteraient naturellement vers ce dernier.

Alors que beaucoup pensaient que les guerres des navigateurs étaient terminées, une nouvelle guerre entre les fournisseurs de navigateurs a ravivé au cours des dernières années depuis la sortie de Chrome, Apple a recommencé à croître et à pousser Safari, et IE a perdu sa domination. (On pourrait appeler cela une «guerre froide» en raison de la coopération et du soutien perçus des normes par les fournisseurs de navigateurs.) Par conséquent, il n'est pas surprenant que même les navigateurs contemporains censés se conformer strictement aux normes Web essaient en fait d'être «intelligents» et permettre un comportement de rupture standard comme celui-ci afin d'essayer d'obtenir un avantage comme auparavant.

Malheureusement, ce comportement permissif a entraîné une croissance massive ( certains pourraient même dire cancéreuse) de pages Web mal balisées. Parce qu'IE était le navigateur le plus clément et le plus populaire, et en raison du non-respect continu des normes par Microsoft, IE est devenu tristement célèbre pour encourager et promouvoir une mauvaise conception et propager et perpétuer les pages cassées.

Vous pouvez peut-être vous en sortir avec des bizarreries et des exploits comme celui-ci sur certains navigateurs pour l'instant, mais à part les casse-tête ou les jeux occasionnels ou quelque chose du genre, vous devez toujours vous en tenir aux normes Web lors de la création de pages Web et de sites pour vous assurer qu'ils s'affichent correctement et éviter qu'ils ne se cassent (peut-être complètement ignorés) avec une mise à jour du navigateur.

Bien que les navigateurs associent généralement CSS aux balises HTML, qu'elles soient valides ou non, vous ne devez ABSOLUMENT PAS le faire.

Il n'y a techniquement rien de mal à cela du point de vue CSS. Cependant, l'utilisation de balises composées est quelque chose que vous ne devez JAMAIS faire en HTML.

HTML est un langage de balisage, ce qui signifie que chaque balise correspond à un type spécifique d'informations.

Vos balises composées ne correspondent à aucun type d'informations. Cela créera des problèmes avec les robots d'indexation Web, tels que Google.

Lisez plus d'informations sur l' importance d'un balisage correct .

Éditer

Les divs se réfèrent à des groupes de plusieurs éléments liés, destinés à être affichés sous forme de blocs et peuvent être manipulés en tant que tels.

Les étendues font référence à des éléments qui doivent être stylisés différemment du contexte dans lequel ils se trouvent actuellement et qui doivent être affichés en ligne, pas comme un bloc. Par exemple, si quelques mots dans une phrase doivent être en majuscules.

Les balises personnalisées ne sont corrélées à aucune norme et donc span / div doit être utilisé avec les propriétés de classe / ID à la place.

Il existe des exceptions très spécifiques à cela, comme Angular JS

Bien que CSS ait quelque chose appelé "sélecteur de balises", il ne sait pas vraiment ce qu'est une balise. Cela reste à définir la langue du document. CSS a été conçu pour être utilisé non seulement avec HTML, mais aussi avec XML, où (en supposant que vous n'utilisez pas une DTD ou un autre schéma de validation), les balises peuvent être à peu près n'importe quoi. Vous pouvez également l'utiliser avec d'autres langues, bien que vous deviez créer votre propre sémantique pour savoir exactement à quoi correspondent des «balises» et des «attributs».

Les navigateurs appliquent généralement CSS à des balises inconnues en HTML, car cela est considéré comme préférable à une rupture complète: au moins, ils peuvent afficher quelque chose. Mais c'est une très mauvaise pratique d'utiliser délibérément de «fausses» balises. Une des raisons à cela est que de nouvelles balises sont définies de temps en temps, et si une est définie qui ressemble un peu à votre fausse balise mais ne fonctionne pas tout à fait de la même manière, cela peut causer des problèmes avec votre site sur les nouveaux navigateurs.

Pourquoi CSS fonctionne-t-il avec de faux éléments? Parce que cela ne fait de mal à personne car vous n'êtes pas censé les utiliser de toute façon.

Pourquoi mon professeur ne veut-il pas que j'utilise des éléments maquillés? Parce que si cet élément est défini par une spécification à l'avenir, votre élément aura un comportement imprévisible.

Aussi, pourquoi ne savait-il pas que des éléments constitués existent et fonctionnent avec CSS. Sont-ils rares? Parce que lui, comme la plupart des autres développeurs Web, comprend que nous ne devrions pas utiliser des choses qui pourraient se casser de manière aléatoire à l'avenir.