On peut créer et utiliser directement ses propres balises HTML

• En HTML, même si l’on utilise un nom de balise non reconnu, le navigateur le traite comme un élément générique
• En définissant ce nom de balise comme sélecteur en CSS, il est possible de le styliser et d’en contrôler l’affichage
• Utiliser un nom contenant un trait d’union (-) permet d’éviter les conflits avec les futurs standards HTML
• À la place de <div> ou <span>, employer des balises personnalisées porteuses de sens améliore la lisibilité du code
• Même dans des structures imbriquées complexes, le seul nom des balises suffit à comprendre la structure, ce qui facilite la maintenance

---

Utilisation des balises HTML personnalisées

• Le navigateur affiche les balises inconnues comme des éléments de bloc génériques

  • Il s’agit d’un comportement normal défini par le standard HTML, et leur apparence peut être contrôlée visuellement via du CSS
  • Par exemple, on peut définir une balise comme <cool-thing> et la styliser en CSS avec cool-thing { ... }

• Si le nom de balise contient un trait d’union (-), il n’y a aucun risque de conflit avec un futur ajout au standard HTML

  • Ex. : <main-article>, <quote-body>

Lisibilité et amélioration de la structure

• Utiliser des balises aux noms explicites à la place de <div> ou <span> rend le code plus facile à comprendre
  • Par exemple, on peut utiliser <article-header> au lieu de <div class="article-header">
• Dans une structure imbriquée de <div>, il est difficile de repérer à quelle balise correspond une fermeture, mais des noms de balises explicites rendent la structure plus claire
  • Si <main-article> contient <article-header>, <article-quote>, etc., la structure du DOM devient intuitive à lire

Exemple de code

• Méthode classique

  <div class="cool-thing">
    Hello, World!
  </div>
  

• Avec des balises personnalisées

  <cool-thing>
    Hello, World!
  </cool-thing>
  

  • En CSS, on peut appliquer des styles comme cool-thing { display: block; font-weight: bold; text-align: center; ... }

Conclusion

• En exploitant la souplesse de définition des balises autorisée par le standard HTML,
  il est possible d’écrire un markup structurel plus lisible
• Toutefois, lorsqu’une balise sémantique existante convient déjà, il faut la privilégier