Das  -Element erzeugt einen Zeilenumbruch innerhalb eines Textblocks, ohne einen neuen Absatz zu beginnen. Es ist ein sogenanntes Void-Element, hat also keinen Inhalt und kein schließendes Tag. Wichtig:   ist nur für Stellen gedacht, an denen der Umbruch zum Inhalt gehört, etwa in Adressen oder Gedichten. Für Abstände zwischen Elementen gibt es CSS.

Steckbrief

Kategorie: Text & Typografie
Art: Leeres Element
Beispiele: 2
Browser: 5 von 5
E-Mail: 5 von 5
Stand: 03.02.2026

Grundlagen

Ein   bricht den Text an genau dieser Stelle um und setzt ihn in der nächsten Zeile fort, ohne den Absatz zu beenden. Das ist ein feiner, aber wichtiger Unterschied zu : Ein neues  erzeugt einen komplett neuen Absatz mit Abstand,   macht nur einen einfachen Zeilenumbruch.

  ist ein Void-Element: Es hat keinen Inhalt und kein schließendes Tag
Die Schreibweise ist   (in HTML) oder   (in XHTML/JSX), beide sind korrekt
Es erzeugt einen einfachen Zeilenumbruch ohne zusätzlichen Abstand
Verwende   nur, wenn der Umbruch inhaltlich begründet ist (Adressen, Gedichte, Songtexte)
Für Abstände zwischen Elementen verwende CSS (margin, padding) statt mehrerer

Syntax

index.html

Grundsyntax

Zeile 1<br>
Zeile 2

Beispiele

2 Beispiele

Eine Postadresse ist ein klassisches Beispiel: Die Zeilen gehören zusammen als ein Block, aber jede Zeile braucht einen Umbruch:

index.html

Adresse

<p>
  Max Mustermann<br>
  Musterstraße 42<br>
  12345 Musterstadt<br>
  Deutschland
</p>

Bei Gedichten und Liedtexten gehören die Zeilenumbrüche zum Inhalt. Sie sind Teil der Form, nicht nur Dekoration:

index.html

Gedicht

<p>
  Dunkel war's, der Mond schien helle,<br>
  schneebedeckt die grüne Flur,<br>
  als ein Wagen blitzesschnelle<br>
  langsam um die Ecke fuhr.
</p>

Barrierefreiheit

Screenreader behandeln   als Pause im Text, ähnlich wie ein kurzer Atemzug beim Vorlesen. Bei einem einzelnen   in einer Adresse oder einem Gedicht ist das korrekt und hilfreich.

Problematisch wird es, wenn du mehrere  -Elemente hintereinander verwendest, um visuellen Abstand zu erzeugen. Screenreader lesen dann mehrere Pausen hintereinander vor, was den Text unverständlich macht. Nutze für Abstände immer CSS margin oder padding.

Auch das Missbrauchen von   zur Erstellung von Absätzen ist für Screenreader-Nutzer nachteilig: Mit -Elementen können sie absatzweise navigieren, mit  -Umbrüchen nicht. Die Textstruktur geht verloren.

Häufige Fehler

3 Punkte

Mehrere br für Abstände:   zu verwenden, um vertikalen Abstand zu erzeugen, ist einer der häufigsten Anfängerfehler. Dafür gibt es CSS margin und padding. Screenreader lesen jeden   als Zeilenumbruch vor, was den Text unverständlich macht.
br statt p für Absätze: Wenn du einen neuen Gedanken beginnen willst, verwende ein neues -Element statt  . Absätze sind semantisch korrekt und geben dem Browser und Screenreadern die richtige Information über die Textstruktur.
br am Ende eines Absatzes: Ein   direkt vor  ist überflüssig, denn der Browser beginnt nach dem Absatz sowieso eine neue Zeile.

Browser-Kompatibilität

5 von 5

Das br-Element wird von allen Browsern seit der allerersten HTML-Version unterstützt.

Chrome

Komplett
Firefox

Komplett
Safari

Komplett
Edge

Komplett
Opera

Komplett

Email-Kompatibilität

5 von 5

Das br-Element funktioniert zuverlässig in allen Email-Clients und ist eine sichere Wahl für Zeilenumbrüche in E-Mails.

Apple Mail

Komplett
Gmail

Komplett
Outlook

Komplett
Thunderbird

Komplett
Yahoo Mail

Komplett

einmal die Woche, kostenlos

Neue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.

Zuletzt verschickt · KW 40

Einmal alles neu, und die Lernplattform ist da

<br>

Grundlagen

Syntax

Beispiele

Barrierefreiheit

Häufige Fehler

Browser-Kompatibilität

Email-Kompatibilität

Newsletter