Zeilenumbrüche

Im Editor haben wir dem Abschnitt Physiologie ein kurzes Gedicht hinzugefügt. Im Code steht es in vier Zeilen, aber schau in die Vorschau: Der Browser zieht die Zeilen zusammen, als wären sie ein einziger langer Satz.

Das liegt daran, dass der Browser Leerzeichen, Tabulatoren und Zeilenumbrüche, die im Code aufeinander folgen, zu einem einzigen Leerzeichen zusammenfasst. Wenn du im Code die Eingabetaste drückst, beginnt auf der Seite keine neue Zeile. Deshalb ändert auch die Einrückung nicht, wie die Seite aussieht: Wir rücken den Code nur ein, damit er für uns leichter lesbar ist.

Wenn wir innerhalb eines Textes eine neue Zeile beginnen wollen, verwenden wir das Element br (br steht für englisch break, Umbruch, wie in Zeilenumbruch):

<p>Katzenheim Glückspfote<br>
Gartenstraße 12<br>
12345 Berlin</p>

Dieser Code wird so angezeigt:

Katzenheim Glückspfote
Gartenstraße 12
12345 Berlin

Das Element br ist besonders: Es hat keinen Inhalt und kein schließendes Tag, nur das öffnende Tag. Solche Elemente heißen leere Elemente (englisch void elements). Eines kennst du schon aus der vorigen Lektion: meta. Später lernen wir weitere kennen, zum Beispiel img und input.

Manchmal siehst du es mit einem Schrägstrich geschrieben, als <br />. Das ist eine ältere Schreibweise für dasselbe. In diesem Kurs schreiben wir <br>.

Verwende br nur für Zeilenumbrüche, die zum Inhalt gehören, etwa in einem Gedicht oder einer Adresse. Verwende es nicht, um Abstand zwischen Textstücken zu schaffen: Getrennte Textblöcke gehören in getrennte Absätze, und Abstände legst du mit CSS fest.