HTML-Tag br / wbr • Harter Zeilenumbruch (break)

Neue Zeile

Anders als das Beenden und Öffnen eines neuen p-, h1 oder li-Tags führt das br-Tag nicht zu einer Änderung des Absatzformats.

Zeilenumbrüche innerhalb des Quelltextes in Block-Elementen wie p, li, td oder dd werden von den Browsern ignoriert. Ein Zeilenumbruch im Quelltext führt also nicht zu einem Zeilenumbruch in der gerenderten Darstellung (eine Ausnahme bildet der Text innerhalb von pre-Tags. In pre-Tags erzeugt der Browser automatisch einen Zeilenumbruch, der die Zeilenumbrüche im Quelltext wiederspiegelt – darum auch die Bezeichnung »vorformatierter (pre-formatted) Text«.

Für lange Zeichenketten hat HTML das wbr-Tag aufgenommen, bei dem die Browser einen Zeilenumbruch (ohne Silbentrennstrich) einsetzen, während der ­ für einen optionalen Zeilenumbruch mit Silbentrennung steht.

br erzwungener Zeilenumbruch

In den meisten Fällen wird das br-Tag in Elementen wie p, td oder li nicht benötigt, um Textzeilen umzubrechen – das erledigt der Browser entsprechend der verfügbaren Zeilenbreite automatisch. Die Darstellung ist auch unabhängig von der Strukturierung des HTML-Quelltexts: Hier lehnt sich HTML an die Textverarbeitungsprogramme an.

HTML br wirkt wie die Tastaturkombination Shift + Return in Textverarbeitungsprogrammen, die ebenfalls einen Zeilenumbruch ohne neuen Absatz einfügen.

Nur wenn der Textfluss innerhalb eines Absatzes an einer bestimmten Stelle umbrochen werden soll – z.B. beim HTML-Tag address oder in Gedichten – sind br-Tags erforderlich. Alternativ kann der CSS-Stil white-space: pre-wrap eingesetzt werden, um den Text wie im Quelltext umzubrechen.

Das br-Tag ist leer (void) und muss nicht durch einen Schrägstrich vor der schließenden spitzen Klammer geschlossen werden.

HTML br-Tag: Zeilenumbruch im Gedicht

<h6>Ein Gedicht <br />
  von Edward Gorey</h6>
<p> Als es klingelte, nachts, es war kurz vor halb zehn. <br>
  Wurde niemand erwartet und niemand gesehen. <br>
  Doch dann sahn sie auf einer Urne zuletzt <br>
  eine fremde Erscheinung und waren entsetzt. </p>

Unsichtbarer Zeilenumbruch mit HTML wbr vs ­

wbr steht für einen optionalen Zeilenumbruch, den die Browser nur dann einsetzen sollen, wenn eine Zeichenkette zu lang wird. Anders als beim HTML-Entity &shy; setzen die Browser bei <wbr> keinen Silbentrennstrich.

Das wbr-Tag ist nützlich für lange Links in Klartext, die nicht durch zusätzliche Trennstriche verfälscht werden sollen.

Zu den wichtigsten Funktion in Javascript 
   gehört die XML<wbr>Http<wbr>Request-<wbr>Methode
DNS (oder englisch DNA für deoxyribonucleic acid) 
   steht für Des&shy;oxy&shy;ribo&shy;nukle&shy;in&shy;säure.

Wer hier ins Grübeln kommt: Nicht vergessen, dass HTML nicht nur das Markup für Webseiten ist, sondern auch für eBooks nach dem ePub-Standard.

Unterstützt von allen modernen Browsern außer IE in allen Versionen.

Wofür HTML br nicht gedacht ist

Eingabefelder mit ihren label-Elemente in einzelne Zeilen zu setzten

<p><label for=""></label><input type=""><br>
   <label for=""></label><input type=""></p>

Besser ein p oder div-Element nutzen, damit der Screenreader nach der Zeile eine kleine Pause macht, und der Zuhörer merkt, dass hier ein weiteres Eingabefeld vorliegt.

<p><label for=""></label><input type=""></p>
<p><label for=""></label><input type=""></p>

Genauso wenig sollte ein br-Tag für eine Leerzeile als bloßer Abstandhalter eingesetzt werden. Der Abstand ist besser im CSS aufgehoben.

Kein CSS für br

br hält sich an die Eigenschaft des umfassenden Absatz – gleich, ob das br in einem p-, li, div oder dd-Absatz sitzt. Wenn der Zeilenumbruch einen anderen Abstand zur letzten Zeile mitbringen soll, ist ein neues Block-Element angebracht und kein br-Tag.

.demo-br br { margin-top: 2em; display: block; padding-top:20px }

Im großen und ganzen verweigern die Browser (außer Firefox) das Ändern der Abstände anhand von margin oder padding, nur line-height zeigt Wirkung.