mitmario.dev

Abschnitt 1 · Lektion 5

Void-Elemente

HTML Im Browser 3 Min Lesezeit 3 BeispieleLektion 5 von 8

Bisher hatte jedes Element einen öffnenden Tag, Inhalt und einen schließenden Tag. Für eine kleine Gruppe gilt das nicht, und die lernst du jetzt kennen. Danach kommt noch eine Eigenheit dazu, die dich sonst früher oder später verwirrt: wie der Browser mit Leerzeichen umgeht.

Elemente, die nichts umschließen

Manche Elemente haben keinen Inhalt. Sie stehen für sich allein und bestehen nur aus einem öffnenden Tag. Solche Elemente heißen Void-Elemente, gelegentlich auch leere Elemente.

Der Grund ist einleuchtend: Ein schließender Tag markiert das Ende des Inhalts. Wo es keinen Inhalt gibt, gibt es nichts zu beenden. </br> wäre schlicht sinnlos, und der Browser weiß damit nichts anzufangen.

Das ist keine Ausnahme, die du auswendig lernen musst. Du merkst es dir am Zweck: Ein Void-Element tut etwas an einer Stelle, statt etwas zu umschließen.

Die drei, die dir zuerst begegnen

Hier stehen sie alle drei:

Elemente ohne Inhalt 
Zeile eins<br>
Zeile zwei

<hr>

<img src="foto.jpg" alt="Ein Foto">

Der Reihe nach:

  • br erzwingt einen Zeilenumbruch. Der Text danach beginnt in einer neuen Zeile, bleibt aber im selben Absatz.
  • hr zieht eine horizontale Trennlinie. Ursprünglich rein optisch gemeint, heute steht es für einen thematischen Bruch im Inhalt.
  • img bindet ein Bild ein. Es umschließt kein Bild, es zeigt an dieser Stelle eines an.

Das Bild im Beispiel lädt nicht, weil es hier keine Datei namens foto.jpg gibt. Genau dann zeigt der Browser stattdessen den alt-Text an, und du siehst nebenbei, wofür der gut ist. Lösch testweise das alt="Ein Foto" und schau dir an, was übrig bleibt: nur noch das Platzhalter-Symbol des Browsers, ohne jede Information. Schreibst du stattdessen alt="", verschwindet auch das, denn damit sagst du ausdrücklich „hier ist nichts zu beschreiben“. Beides ist keine Lösung: Ohne alt liest ein Screenreader oft trotzdem etwas vor, meistens den Dateinamen. Das Bild verschwindet für seine Nutzer also nicht, es wird nur nutzlos.

Es gibt noch ein paar weitere Void-Elemente, input, meta und link zum Beispiel. Zwei davon kennst du aus dem Grundgerüst, ohne dass es dort ein Thema war. Sie tauchen später in ihren eigenen Lektionen auf.

Leerzeichen und Umbrüche zählen nicht

Der nächste Block sieht im Code wild aus:

Leerzeichen zählen nicht 
<p>Hier      stehen      viele      Leerzeichen.</p>
<p>Und
   hier
   viele
   Umbrüche.</p>

Im ersten Absatz stehen viele Leerzeichen hintereinander, im zweiten steht jedes Wort in einer eigenen Zeile. Auf der Seite: zwei ganz normale Sätze mit je einem Leerzeichen zwischen den Wörtern.

Der Browser fasst aufeinanderfolgende Leerzeichen, Tabs und Zeilenumbrüche zu einem einzigen Leerzeichen zusammen. Das ist genau richtig so, denn dadurch darfst du deinen Code frei einrücken und umbrechen, ohne dass sich die Seite verändert. Deine Formatierung ist für Menschen da, nicht für den Browser.

Die Kehrseite: Abstand kannst du damit nicht erzeugen. Wer zehnmal die Leertaste drückt, bekommt ein Leerzeichen. Wer eine Leerzeile setzt, bekommt gar nichts. Abstände sind Aussehen, und Aussehen ist Sache von CSS.

Und deshalb kein br für Absätze

Daraus folgt oft dieser Verzweiflungsversuch:

br statt Absatz 
Erster Gedanke.<br><br>
Zweiter Gedanke.<br><br>
Dritter Gedanke.

Wenn Leerzeilen nichts bewirken, nimmt man eben zwei br hintereinander. Optisch sieht das fast aus wie Absätze.

Fast. Denn im Baum ist es keiner: Da steht ein langer Textblock mit ein paar Umbrüchen darin. Ein Screenreader hat damit nichts, worüber er springen könnte. Wer sonst von Absatz zu Absatz weiterblättert, landet hier am Stück im ganzen Text. Suchmaschinen sehen keine Struktur, und wer die Seite später gestalten will, hat nichts, woran er ansetzen kann.

Die Regel dazu lautet: br nur dort, wo der Umbruch inhaltlich zum Text gehört, etwa in einer Anschrift oder einem Gedicht. Für getrennte Gedanken nimmst du p. Mehr dazu in Abschnitt 2.

Und eine Konvention zum Schluss: Schreib Tags immer klein. <BR> und <br> funktionieren beide, aber alle Welt schreibt klein, und gemischte Schreibweisen in einer Datei sehen unaufgeräumt aus. Die Schreibweise <br /> mit Schrägstrich siehst du auch häufig. Sie stammt aus XHTML, ist heute nicht nötig und auch nicht falsch.

Zum Mitnehmen

Void-Elemente wie br, hr und img brauchen keinen schließenden Tag. Es gibt ja keinen Inhalt zu umschließen.

Jetzt du

Basis Konto, kostenlos

Zu dieser Lektion gehört eine Aufgabe. Du schreibst den Code selbst, und nach jedem Lauf sagt dir eine Prüfliste, was schon stimmt.

Dafür brauchst du das Basis Konto. Es kostet nichts, und ein Passwort gibt es auch nicht.

Was in dieser Lektion steckt

  • Artikel mit 3 Beispielen zum Ausprobieren

    Steht hier, ohne Konto lesbar.

  • Aufgabe im Editor, direkt im Browser geprüft

    Öffnet sich mit dem Basis Konto.