Alle HTML-Elemente

Seit HTML5: mehr Struktur

HTML-Elemente wie header, footer, article und section treten der Flut der div-Tags mitsamt ihren unzähligen CSS-Klassen in Webseiten gegenüber. Und da HTML-Elemente für die Struktur und nicht für die Darstellung verantwortlich sind, stellt sich die Frage nach der Unterstützung durch alte Browser nicht.

Frontend-Entwickler behalten einen besseren Überblick über den Aufbau der Seite. Die Semantik der HTML-Elemente erleichtert Suchmaschinen die Zuordnung der Webseite zu einem Thema.

HTML-Tags im head-Element

Bereiche für den Inhalt

Struktur reinbringen

Dem Text eine Bedeutung geben

Embedded: Bilder, Grafiken und Video

Tabellen

Formulare

Scripte und interaktive Elemente

custom elements – Benutzerdefinierte HTML-Elemente

Daneben spricht nichts dagegen, eigene Elemente zu definieren: HTML Custom Elements oder benutzerdefinierte Elemente sind HTML-Elemente mit einem eigenen Namen. Wichtig ist erst einmal, dass die Namen der selbstdefinierten Elemente mit einem Bindestrich geschrieben werden.

<flex-box>
	<flex-item></flex-item>
	<flex-item></flex-item>
	<flex-item></flex-item>
</flex-box>

Custom Elements sind Elemente ohne Eigenschaft – sie erben keine Vorgaben wie margin oder width. Sie lassen sich mit CSS stylen und mit Javascript ansprechen. Ein klug vergebener Name hebt sie von ihrer Umgebung ab, so dass Blöcke wie z.B. eine Flexbox direkt in das Markup geschoben werden können. Sie kapseln Struktur, Aussehen und auch Verhalten mit Javascript von ihrer Umgebung ab.

Custom Elements sind Teil der Web Components.

Ausgestorbene Elemente

Die folgenden Elemente aus alten HTML-Versionen sind nicht mehr vertreten und gelten als veraltet, unerwünscht oder missbilligt.