Ein Element ist der Bestandteil, den ein Tag im Dokument erzeugt: der Name, der seine Bedeutung festlegt, die Attribute, die ihn beschreiben, und der Inhalt dazwischen. Der Browser baut daraus den Baum, mit dem CSS und JavaScript arbeiten.
- Element (HTML)
Bestandteil eines HTML-Dokuments, bestehend aus den Tags, den Attributen und dem Inhalt dazwischen.
Beispiel: „Jedes Element hat einen Namen, der festlegt, was es bedeutet.“Abgrenzung zum Tag: Das Tag ist die geschriebene Markierung, das Element ist das, was daraus entsteht.
Woraus ein Element besteht
Ein Element hat einen Namen, meist einen Inhalt und oft Attribute. Der Name legt die Bedeutung fest, der Inhalt ist das, was dazwischen steht, die Attribute beschreiben Eigenschaften. Elemente ohne Inhalt gibt es auch: Ein Bild besteht nur aus seinem Tag und den Attributen, die sagen, welche Datei geladen wird.
Die Bedeutung eines Namens ist festgelegt und nicht verhandelbar. Eine Überschrift bleibt eine Überschrift, auch wenn du sie per CSS klein darstellst. Das ist der Grund, warum die Wahl des Elements eine inhaltliche Entscheidung ist und keine gestalterische.
Der Baum aus Elementen
Der Browser liest den Quelltext einmal und baut daraus eine Baumstruktur, in der jedes Element einen Platz hat: ein Elternelement, Geschwister daneben, Kinder darunter. Diese Struktur heißt DOM, und sie ist das, womit CSS und JavaScript arbeiten.
Deshalb wirkt eine Änderung am Quelltext nicht unmittelbar, sondern über den Baum. Fügt JavaScript ein Element ein, ändert sich der Baum, und der Browser zeichnet die betroffene Stelle neu. Im Quelltext der Seite steht das neue Element nie.
Welches Element wofür
<button type="button">Mehr laden</button>
<div class="button">Mehr laden</div>Beide Zeilen lassen sich gleich gestalten. Nur die erste ist für Tastatur und Screenreader ein Knopf, der sich bedienen lässt.
Die Spezifikation zählt rund hundert Elemente auf. Die meisten Seiten kommen mit zwanzig davon aus, und die Auswahl folgt einer einfachen Frage: Was ist dieser Bestandteil inhaltlich? Ein Knopf, der etwas auslöst, ist ein Button. Ein Verweis, der woandershin führt, ist ein Link. Ein Bereich ohne eigene Bedeutung ist ein div.
Wer diese Frage überspringt und alles zum div macht, baut eine Seite, die aussieht wie gewollt und für Screenreader aus einer Reihe bedeutungsloser Kästen besteht.