Zeilenumbruch in HTML – So gehts

Grundlagen des Zeilenumbruchs

Ein Zeilenumbruch beschreibt das Ende einer Zeile und den Beginn einer neuen Zeile im Text. Im Kontext von HTML bedeutet das, dass der Text an einer bestimmten Stelle optisch in die nächste Zeile weitergeführt wird.

Anders als in klassischen Textverarbeitungsprogrammen werden in HTML Zeilenumbrüche standardmäßig nicht durch einfache Leerzeichen oder Eingabetasten erzeugt, sondern durch spezielle HTML-Elemente oder CSS-Eigenschaften gesteuert.

Der <br>-Tag als Zeilenumbruch

Der einfachste Weg, um innerhalb eines Fließtextes einen Zeilenumbruch zu erzeugen, ist der HTML-Tag <br>. Dieser Tag ist ein sogenanntes leeres Element, das keinen schließenden Tag benötigt.

Beispiel:

Dies ist eine Zeile. Dies ist die nächste Zeile.

Der <br>-Tag fügt einen einfachen Zeilenumbruch ein, ohne zusätzlichen Abstand wie bei einem Absatz.

Absätze und Blockelemente

Ein wichtiger Unterschied zum reinen Zeilenumbruch ist der Absatz, welcher in HTML durch den <p>-Tag dargestellt wird. Absätze erzeugen nicht nur einen Zeilenumbruch, sondern auch standardmäßigen vertikalen Abstand davor und danach.

Beispiel:

Absatz 1

Absatz 2

Absätze sind geeignet, um größere Textblöcke logisch zu trennen, während <br> eher für einzelne Zeilenumbrüche innerhalb eines Textabsatzes verwendet wird.

Weitere Methoden für Zeilenumbrüche mit CSS

Moderne Webentwicklung verwendet häufig CSS, um die Darstellung von Zeilenumbrüchen zu steuern. So kann man beispielsweise mit white-space-Eigenschaften steuern, wie Umbrüche innerhalb eines Elements gehandhabt werden.

Beispiel: white-space: pre; bewirkt, dass alle im Quelltext enthaltenen Zeilenumbrüche und Leerzeichen genau so angezeigt werden.

Man kann auch mit word-wrap oder overflow-wrap das Umbruchverhalten innerhalb von langen Wörtern kontrollieren.

Zusammenfassung

Ein Zeilenumbruch in HTML kann auf verschiedene Weisen erzeugt werden:

Der direkte <br>-Tag für einfache Zeilenumbrüche, Absätze mit <p>-Tags für größere Blöcke, und CSS-Techniken für die flexible Steuerung von Umbruchverhalten.

Für semantisch korrekte und barrierefreie Inhalte sollte man immer abwägen, ob ein reiner Zeilenumbruch oder ein Absatz sinnvoller ist.

Hinweis: HTML wird im Browser meist ohne Beachtung von Zeilenumbrüchen im Quelltext dargestellt. Deshalb sind explizite HTML-Tags oder CSS erforderlich, um das gewünschte Layout zu erreichen.