HTML-Tags können direkt selbst erstellt und verwendet werden

• In HTML können nicht erkannte Tag-Namen verwendet werden, und der Browser behandelt sie dann als normale Elemente
• Wenn dieser Tag-Name in CSS als Selektor angegeben wird, sind Styling und Anzeigesteuerung möglich
• Verwendet man Namen mit Bindestrich (-), lässt sich ein Konflikt mit zukünftigen HTML-Standards vermeiden
• Statt <div> oder <span> können bedeutungsvolle benutzerdefinierte Tags verwendet werden, was die Lesbarkeit des Codes erhöht
• Selbst in komplex verschachtelten Strukturen lässt sich die Struktur allein anhand der Tag-Namen leichter erfassen, was die Wartung erleichtert

---

Einsatz benutzerdefinierter HTML-Tags

• Browser rendern unbekannte Tags wie normale Block-Elemente

  • Das ist ein in der HTML-Spezifikation festgelegtes normales Verhalten; mit CSS kann das Erscheinungsbild visuell gesteuert werden
  • Als Beispiel kann ein Tag wie <cool-thing> definiert und in CSS in der Form cool-thing { ... } gestaltet werden

• Wenn der Tag-Name einen Bindestrich (-) enthält, besteht keine Gefahr, dass er künftig dem HTML-Standard hinzugefügt wird, sodass kein Kollisionsrisiko besteht

  • Beispiele: <main-article>, <quote-body> usw.

Verbesserte Lesbarkeit und Struktur

• Wenn statt <div> oder <span> Tags mit aussagekräftigen Namen verwendet werden, ist der Code leichter zu verstehen
  • So kann zum Beispiel statt <div class="article-header"> auch <article-header> verwendet werden
• In verschachtelten <div>-Strukturen ist es schwierig, die Position schließender Tags zu erkennen, aber mit expliziten Tag-Namen wird die Struktur klarer
  • Wenn <main-article> intern aus <article-header>, <article-quote> usw. besteht, ist die DOM-Struktur intuitiv nachvollziehbar

Beispielcode

• Herkömmlicher Ansatz

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

• Ansatz mit benutzerdefiniertem Tag

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

  • In CSS kann dann ein Stil wie cool-thing { display: block; font-weight: bold; text-align: center; ... } definiert werden

Fazit

• Wenn die vom HTML-Standard erlaubte flexible Definition von Tags genutzt wird,
  lässt sich strukturelles Markup mit hoher Lesbarkeit schreiben
• Wenn es jedoch bereits ein vorhandenes, semantisch passendes Tag gibt, sollte dieses bevorzugt verwendet werden