HTML br: Zeilenumbrüche und Unterschiede zu p, wbr und pre

HTML <br> fügt an einer bestimmten Stelle im Text einen Zeilenumbruch ein. Verwenden Sie ihn, wenn die Zeilenteilung selbst von Bedeutung ist, wie bei Gedichten oder einer Postadresse. Trennen Sie verschiedene Absätze mit p und steuern Sie den Abstand über CSS.

br-Syntax und Zeilenumbrüche im Quellcode

br ist ein leeres Element ohne Inhalt oder Endtag. Schreiben Sie <br> in HTML, ohne </br>. HTML akzeptiert auch <br />, aber der Schrägstrich ist nicht der Grund für den Zeilenumbruch.

Mit gewöhnlichen Standardstilen werden Zeilenumbrüche und aufeinanderfolgende Leerzeichen im Quelltext zusammengeführt. Ein br gibt einen Umbruch innerhalb des Inhalts unabhängig von der Quellformatierung an. Dies unterscheidet sich auch vom natürlichen Zeilenumbruch, wenn der Bildschirm schmaler wird.

Vollständiges Beispiel: vergleichen Sie Quellzeilenumbrüche, br und Absätze

Speichern Sie das folgende Dokument als line-breaks.html und öffnen Sie es in einem Browser. Es zeigt denselben kurzen Text mit unterschiedlichen Strukturen, sodass Sie die Ergebnisse vergleichen können.

<!doctype html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Zeilenumbrüche und Absätze vergleichen</title>
  <style>
    body { max-width: 36rem; padding: 0 1rem; margin: 1rem auto; }
    .message { margin: 0; line-height: 1.6; }
    .message + .message { margin-top: 1rem; }
  </style>
</head>
<body>
  <h1>Zeilenumbrüche im Vergleich</h1>
  <h2>Zeilenumbruch nur im Quelltext</h2>
  <p id="source-only">Erste Zeile
    Zweite Zeile</p>
  <h2>Zeilenumbruch mit br</h2>
  <p id="with-br">Erste Zeile<br>Zweite Zeile</p>
  <h2>Getrennte Absätze</h2>
  <p class="message">Ein Absatz zum ersten Thema.</p>
  <p class="message">Ein Absatz zum zweiten Thema.</p>
</body>
</html>

Im ersten Abschnitt erscheint der Text als Erste Zeile Zweite Zeile; der zweite bricht nach br. Die letzten beiden Sätze sind separate Absätze mit einem CSS-Abstand von 1rem. Ein sehr schmales Fenster kann ebenfalls dazu führen, dass der erste Abschnitt umbricht, aber das ist kein vom br spezifizierter Umbruch.

Auswahl zwischen br, p, wbr und pre

Das Einfügen von br nach jedem Satz, um eine optisch angenehme Länge zu erzwingen, kann auf kleinen Bildschirmen oder bei großer Schrift zu ungeschicktem Zeilenumbruch führen. Lassen Sie normalen Text natürlich umbrechen. Wenn Sie vom Autor eingefügte Leerzeichen und Zeilenaufteilungen beibehalten müssen, lesen Sie die HTML-pre-Referenz zu Leerzeichen und Zeilenumbrüchen.

Verwenden Sie CSS für Leerraum und Absatzabstände

Wiederholt verwendete br-Elemente, um leeren Raum zu schaffen, können semantisch unterschiedliche Absätze zu einem verschmelzen und die Navigation für Screenreader erschweren. Verwenden Sie p für einen neuen Absatz und margin für Abstände. Steuern Sie die Zeilenhöhe innerhalb eines Absatzes mit line-height.

Verwenden Sie das veraltete clear-Attribut oder Außenabstände am br selbst nicht als Layoutwerkzeuge. Verwalten Sie sinnvolle Zeilenumbrüche getrennt vom visuellen Layout, damit der Text über verschiedene Bildschirmgrößen und Schriftgrößen hinweg lesbar bleibt. Die MDN-Referenz zu br erklärt Syntax und Zugänglichkeit.