HTML <br> Tag
Das HTML <br>-Tag fügt einen Zeilenumbruch ein. Verwendung, CSS-Styling und praktische Beispiele werden auf dieser Seite erklärt.
Das HTML <br>-Tag fügt einen einzelnen Zeilenumbruch ein. Diese Seite erklärt, wann ein Zeilenumbruch Teil des Inhalts ist (und <br> das richtige Werkzeug ist), wann es sich stattdessen um Abstände oder Layout handelt (und CSS das richtige Werkzeug ist), wie Screenreader damit umgehen, und welche Alternativen — wie <pre> oder die CSS-Eigenschaft white-space — für Verse und vorformatierten Text geeignet sind.
Definition
Das HTML <br>-Tag definiert einen Zeilenumbruch. Im Gegensatz zum <p>-Tag, das einen Absatzumbruch erzeugt, verschiebt das <br>-Tag den folgenden Text einfach in die nächste Zeile, ohne zusätzlichen vertikalen Abstand hinzuzufügen.
Die wichtigste Regel: <br> nur verwenden, wenn der Zeilenumbruch Teil des Inhalts selbst ist — Text, der von Natur aus zeilenstrukturiert ist, wie eine Postanschrift, ein Gedicht oder Liedtexte. Wenn ein Umbruch einen neuen Gedanken beginnt, handelt es sich um einen Absatz — also <p> verwenden. Wenn ein Umbruch dem Abstand oder dem visuellen Layout dient, ist das eine Aufgabe für CSS, nicht für <br>.
Syntax
Das <br>-Tag ist ein leeres Element (void element) in HTML5, das heißt, es benötigt kein schließendes Tag. In XHTML muss es jedoch selbstschließend geschrieben werden (<br />).
Beispiel des HTML <br>-Tags:
br-Tag-Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Example of the <br> tag usage.</h1>
<p> Inside the paragraph, we can put the tag <br />, <br /> to transfer a part of the text to another line if necessary.</p>
</body>
</html>Verwendung
<br> sollte nur eingesetzt werden, wenn der Zeilenumbruch zum Inhalt gehört. Die klassischen Anwendungsfälle sind Postanschriften, Gedichte und Liedtexte, bei denen die Zeilenstruktur eine Bedeutung trägt.
Beispiel: Eine Adresse mit <address> und <br>
Eine Straßenadresse ist das Paradebeispiel für den Einsatz von <br>: Jede Zeile ist tatsächlich eine separate Zeile desselben Blocks und kein eigenständiger Absatz. Das <address>-Element liefert die semantische Bedeutung der Kontaktinformation, und <br> strukturiert die einzelnen Zeilen.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<address>
Jane Doe<br />
123 Main Street<br />
Springfield, IL 62704<br />
USA
</address>
</body>
</html>Beispiel: Gedichte und Liedtexte
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Example of the <br> tag usage</h1>
<blockquote>
But I'm not the only one<br />
I hope some day you'll join us<br />
And the world will live as one.<br />
</blockquote>
<cite>John Lennon "imagine"</cite>
</body>
</html>Wann <br> nicht verwendet werden sollte
<br> dient der Zeilenstruktur, nicht für Abstände oder Layout. Zwei häufige Fehlanwendungen:
- Absätze trennen. Ein Umbruch zwischen zwei eigenständigen Gedanken ist eine Absatzgrenze — jeden Block in
<p>einwickeln. - Vertikale Abstände erzeugen. Mehrere
<br>-Tags zu stapeln, um Inhalt nach unten zu verschieben, ist ein Präsentations-Hack. Abstände gehören in CSS, über diemargin-Eigenschaft.
<br> nicht verwenden, um Absätze zu trennen oder Abstände hinzuzufügen. Stattdessen <p>-Elemente zusammen mit der CSS-Eigenschaft margin verwenden, um vertikalen Abstand zu steuern.
Barrierefreiheit: Warum gestapeltes <br><br> schädlich ist
Screenreader kündigen jedes <br> als Zeilenumbruch an. Wenn man mehrere stapelt, um einen Abstand zu simulieren — zum Beispiel <br><br><br> — hört der Nutzer „Zeilenumbruch, Zeilenumbruch, Zeilenumbruch", was Lärm ohne Bedeutung ist und den Lesefluss unterbricht. Schlimmer noch: Die leeren Zeilen haben keine semantische Beziehung zum umgebenden Text, sodass Hilfstechnologie dem Nutzer nicht helfen kann, die Dokumentstruktur zu verstehen.
Die korrekte Lösung ist, den Abstand als CSS-Abstand auszudrücken. Folgendes ersetzen:
<p>First paragraph.</p>
<br /><br /><br />
<p>Second paragraph.</p>durch:
<style>
.gap-below {
margin-bottom: 3rem;
}
</style>
<p class="gap-below">First paragraph.</p>
<p>Second paragraph.</p>Die CSS-Variante behandelt die beiden Absätze als echte Absätze und überlässt margin die visuelle Distanz, sodass Screenreader nichts Zusätzliches ankündigen.
Alternativen für Verse und vorformatierten Text
Wenn ein ganzer Block zeilenstrukturiert ist, ist es oft sauberer, Umbrüche mit CSS oder <pre> zu steuern, anstatt den Markup mit <br>-Tags zu überhäufen. Ein kurzes Entscheidungsschema:
- Einige gezielte Umbrüche innerhalb von fließendem Text (eine Adresse, eine einzelne Zeile in einem Absatz):
<br>verwenden. - Ein Block, bei dem die Zeilenumbrüche im Quelltext die gewünschten Umbrüche sind, Abstände aber zusammengefasst werden sollen (z. B. Verse):
white-space: pre-lineauf dem Container setzen, damit Zeilenumbrüche im HTML zu sichtbaren Zeilenumbrüchen werden, ohne<br>. - Text, bei dem jedes Leerzeichen und jeder Zeilenumbruch exakt erhalten bleiben muss (Code, ASCII-Art): das
<pre>-Element verwenden, das Inhalt in einer Monospace-Schrift rendert und sämtliche Leerzeichen berücksichtigt.
<style>
.poem {
white-space: pre-line;
}
</style>
<p class="poem">
Roses are red
Violets are blue
</p>Hier stammen die Zeilenumbrüche aus dem Quelltext, und white-space: pre-line wandelt sie in sichtbare Umbrüche um — kein <br> erforderlich.
Attribute
Das <br>-Tag akzeptierte früher ein clear-Attribut, um zu steuern, wie der Umbruch mit gefloateten Elementen interagiert. Dieses Attribut wurde in HTML5 entfernt und darf nicht mehr verwendet werden.
| Attribut | Wert | Status |
|---|---|---|
clear | all / left / right / none | In HTML5 entfernt — nicht verwenden |
Um zu verhindern, dass Inhalt neben einem gefloateten Element umbricht, stattdessen die CSS-Eigenschaft clear verwenden:
.below-float {
clear: both;
}Das <br>-Tag unterstützt die globalen Attribute und die Ereignisattribute.