Les éléments personnalisés nécessitent-ils un tiret dans leur nom?
Est-il possible de nommer vos propres éléments personnalisés <date>, <person>, <city> ou autres sans utiliser de tiret? Peut-on utiliser des éléments de définition sans eux?
Tous les navigateurs prennent en charge une liste finie d'éléments HTML qui sont considérés comme "connus". Éléments inconnus (par exemple <city>, <person>) ne génèrent généralement pas d'erreurs avec l'analyseur HTML dans les navigateurs modernes et héritent à la place de HTMLUnknownElement. Dans les anciennes versions de IE cependant, ces éléments étaient insérés dans le DOM en tant que nœud vide sans aucun enfant (1).
La spécification Éléments personnalisésnécessite que tous les éléments personnalisés contiennent un trait d'union (-) dans le nom. Donc plutôt que <person>, vous utiliseriez <my-person> ou <x-person>. Ce sont des noms valides, tandis que <person> est considéré comme un élément inconnu.
Le tiret permet effectivement à l'analyseur HTML de faire la différence entre les vrais éléments personnalisés et les éléments réguliers. Il nous permet également d'activer un niveau de capacité future lorsque les groupes de normes ajoutent de nouvelles balises au HTML.
Vous pouvez utiliser n'importe quel nom séparé par des tirets, à l'exception de:
annotation-xmlcolor-profilefont-facefont-face-srcfont-face-urifont-face-formatfont-face-namemissing-glyph
À ma connaissance, ces noms sont des noms réservés de SVG, MathML et d'autres spécifications. Par exemple, voici plus info sur le <font-face> élément.
(1) Cela a donné lieu au hack où les développeurs créeraient une balise HTML5 factice dans IE (par exemple <article>) en utilisant JavaScript afin qu'ils puissent ensuite le styliser par n'importe quel élément normal avec CSS.