Absätze und Textfluss

Der häufigste Baustein auf jeder Seite ist der Absatz, das p-Element. Es sieht harmlos aus, und trotzdem stolpern hier fast alle Einsteiger einmal. Der Grund liegt darin, wie der Browser deinen Code liest.

01 / 04Ein Absatz ist ein Gedanke

Alles, was inhaltlich zusammengehört, kommt in einen Absatz. Der nächste Gedanke kommt in den nächsten. Das ist dieselbe Einteilung, die du aus jedem geschriebenen Text kennst, und sie ist der eigentliche Zweck von p.

Dass der Browser zwischen zwei Absätzen Abstand setzt, ist die Folge dieser Einteilung, nicht ihr Ziel. Der Normalfall:

<p>Das ist der erste Absatz.</p>
<p>Das ist der zweite Absatz.</p>

Zwei p, zwei Blöcke, Abstand dazwischen, ohne dass du etwas dafür tun musst.

02 / 04Der Browser sieht deine Leerzeilen nicht

Jetzt wird es interessant:

<p>
  Linsen brauchen kein Einweichen.

  Deshalb funktioniert das Rezept auch unter der Woche.

  Wer mag, gibt am Ende einen Schuss Essig dazu.
</p>

Im Code stehen drei Sätze, jeweils durch eine Leerzeile getrennt, deutlich abgesetzt und gut lesbar. Auf der Seite: ein einziger Fließtext, alle drei Sätze hintereinanderweg.

Das ist der Leerraum-Kollaps, den du bei den Void-Elementen schon gesehen hast. Mehrere Leerzeichen, Tabs und Zeilenumbrüche fasst der Browser zu einem einzigen Leerzeichen zusammen. Deine Formatierung im Editor ist für dich da, nicht für die Seite.

Der Punkt ist wichtiger, als er wirkt: Struktur entsteht in HTML nur durch Elemente. Nicht durch Einrückung, nicht durch Leerzeilen, nicht durch Leerzeichen. Wenn du willst, dass drei Gedanken drei Absätze sind, brauchst du drei p-Elemente. Setz im Beispiel testweise um jeden Satz ein eigenes p und schau, wie die Seite umspringt.

03 / 04Wann br richtig ist

Es gibt noch br für einen harten Zeilenumbruch innerhalb eines Absatzes. Damit lässt sich der Kollaps aushebeln, und genau deshalb wird es so oft missbraucht.

Die Regel ist aber klar: br gehört dorthin, wo der Umbruch zum Inhalt gehört. Der Klassiker ist eine Anschrift:

<p>
  Programmieren mit Mario<br>
  Musterstraße 1<br>
  12345 Musterstadt
</p>

Straße und Ort stehen in eigenen Zeilen, weil eine Anschrift nun einmal so aussieht. Es sind trotzdem keine drei Gedanken, sondern eine Adresse, also ein Absatz mit Umbrüchen darin.

Dasselbe gilt für ein Gedicht, für Liedzeilen oder für die Zeilen einer Signatur. Was diese Fälle verbindet: Nimmst du die Umbrüche weg, stimmt der Inhalt nicht mehr.

04 / 04Womit du keinen Abstand machst

Und damit die Gegenprobe. Für Abstand ist br nicht da. Zwei br hintereinander erzeugen zwar optisch eine Lücke. Im Baum bleibt es ein einziger Textblock ohne Struktur, und wer die Seite später gestalten will, hat nichts, woran er ansetzen kann.

Kurz gefasst, damit es hängen bleibt:

1. Neuer Gedanke? Neues p.
2. Umbruch gehört zum Inhalt? br innerhalb des p.
3. Du willst einfach mehr Luft? Das ist CSS, und das kommt nicht in diesem Kurs.

Der dritte Punkt fühlt sich am Anfang unbefriedigend an, weil man ja etwas sehen will. Es lohnt sich trotzdem: Wer Abstände über Markup erzwingt, baut sich eine Seite, die sich später nicht mehr umgestalten lässt, ohne den Inhalt anzufassen.