mitmario.dev

Abschnitt 1 · Lektion 5

Void-Elemente

HTML Im Browser 3 Min Lesezeit 2 BeispieleLektion 5 von 8

Ein Zeilenumbruch hat keinen Inhalt. Eine Trennlinie auch nicht, und ein Bild steht im HTML nicht als Inhalt da, es ist ein Verweis auf eine Datei. Für solche Elemente wäre ein schließender Tag sinnlos, also gibt es keinen.

Elemente, die nichts umschließen

Elemente ohne Inhalt 
Zeile eins<br>
Zeile zwei

<hr>

<img src="foto.jpg" alt="Ein Teller Linsensuppe">

Elemente, die nur aus einem öffnenden Tag bestehen, heißen Void-Elemente, nach dem englischen „void“ für leer. Im Beispiel stehen die drei, die dir zuerst begegnen:

  • br bricht die Zeile um. Der Text danach beginnt in einer neuen Zeile, bleibt aber im selben Absatz.
  • hr zieht eine waagerechte Linie. Gemeint war das ursprünglich rein optisch, heute steht ein hr für einen thematischen Bruch im Inhalt.
  • img bindet ein Bild ein. Es umschließt kein Bild, es zeigt an seiner Stelle eins an.

Das Bild im Beispiel lädt nicht, weil es hier keine Datei foto.jpg gibt. Dann zeigt der Browser den alt-Text an, und du siehst nebenbei, wofür der gut ist. Ohne alt bliebe nur das Symbol für ein kaputtes Bild, und ein Screenreader läse oft bloß „Grafik“ oder den Dateinamen vor. Was in einen guten alt-Text gehört und wann er absichtlich leer bleibt, kommt mit den Bildern in Abschnitt 5.

Es gibt noch ein paar weitere Void-Elemente, input, meta und link zum Beispiel. Zwei davon stehen schon im Grundgerüst, ohne dass sie dort ein Thema waren. Die anderen tauchen in ihren eigenen Lektionen auf.

Ein Ende markiert ein schließender Tag nur, wo es Inhalt gibt, der endet. Ein </br> ist deshalb ein Fehler. Kurioserweise macht der Browser trotzdem einen Umbruch daraus, er liest es einfach als <br>.

Eine Linie, die einen Absatz zerreißt

Eine Linie mitten im Absatz 
<p>Linsen brauchen kein Einweichen.<hr>Deshalb klappt das Rezept auch unter der Woche.</p>

Wer eine Trennlinie zwischen zwei Sätze setzen will, schreibt sie gern mitten in den Absatz. Auf der Seite sieht das fast aus wie gewollt, zwei Sätze mit einer Linie dazwischen.

Im Baum steht aber etwas anderes. Ein hr darf nicht in einem Absatz stehen, also beendet der Browser das p vor der Linie. Der zweite Satz steht danach lose im body, ohne jedes Element um sich. Und weil am Ende noch ein </p> übrig ist, zu dem es kein offenes p mehr gibt, baut der Browser daraus einen neuen, leeren Absatz. Aus einem Absatz sind so ein Absatz, ein loser Satz und ein leerer Absatz geworden, und keine Fehlermeldung sagt es dir.

Wie man das nachsieht, statt es zu glauben, zeigt Abschnitt 11. Für jetzt reicht die Regel, dass eine Linie zwischen zwei Absätze gehört und nicht in einen hinein. Jeder Satz bekommt sein eigenes p, und das hr steht dazwischen.

Klein und ohne Schrägstrich

Tags schreibe ich immer klein. <BR> und <br> funktionieren beide, gemischte Schreibweisen in einer Datei sehen aber unaufgeräumt aus. Die Schreibweise <br /> mit Schrägstrich siehst du auch häufig. Sie stammt aus XHTML, und heute ist sie weder nötig noch falsch. In diesem Kurs steht sie nicht, weil sie nichts bewirkt.

In der Aufgabe setzt du die Linie dorthin, wo sie hingehört.

Zum Mitnehmen

Void-Elemente wie br, hr und img umschließen nichts und haben deshalb keinen schließenden Tag. Steht eines, wo es nicht hingehört, etwa ein hr mitten in einem Absatz, repariert der Browser still drumherum.

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 2 Beispielen zum Ausprobieren

    Steht hier, ohne Konto lesbar.

  • Aufgabe im Editor, direkt im Browser geprüft

    Öffnet sich mit dem Basis Konto.