Zeilenumbruch in HTML mit dem BR-Tag

Viele Menschen sind von Schreibprogrammen wie z.B. Word daran gewöhnt, für eine neue Zeile die RETURN-Taste zu betätigen. Technisch gesehen erzeugen sie damit einen neuen Absatz. Ein Absatz ist zwar keine neue Zeile (Zeilenumbruch). Doch das kümmert die wenigsten, solange das Ergebnis stimmt. Denn, die Dokumente werden in der Regel ausgedruckt und niemand bekommt zu sehen, ob die neue Zeile durch einen neuen Absatz oder einen Zeilenumbruch entstanden ist.

In HTML muss man da schon genauer sein. Denn, die Webseite dient in der Regel zur Veröffentlichung im Internet und das Ergebnis des kleinen Unterschieds zwischen Absatz und Zeilenumbruch ist für jeden sichtbar.

Wenn man mit HTML Texte auf einer Webseite einfügt, dann erzeugt man mit dem P-Tag (<p>...</p>) einen Absatz und fügt den Text innerhalb des P-Tags ein. Erstellt man einen neuen Absatz, dann wird dieser wie bei einem Schreibprogramm ebenfalls automatisch mit einer neuen Zeile begonnen. Der Unterschied ist jedoch, dass die Abstände zwischen den Absätzen je nach Formatierung ziemlich groß ausfallen kann. Das ist häufig unerwünscht, z.B. beim Einfügen des Namens mit der Adresse.

Daher muss man, wenn man mit HTML einen Zeilenumbruch realisieren möchte, den kleinen Unterschied zwischen Absatz und Zeilenumbruch beachten. Wenn man lediglich eine neue Zeile, jedoch keinen neuen Absatz einfügen möchte, dann muss man hierfür den BR-Befehl für Zeilenumbruch verwenden. Die Codes für Zeilenumbrüche sind:

In HTML

<br>

In XHTML

<br />

Der BR-Tag ist an das Wort BREAK angelehnt, was in der Computersprache für einen Umbruch bzw. Zeilenumbruch steht. Es gehört zu den leeren Befehlen, die keine Inhalte umschließen. Das heißt, es besteht nicht aus einem öffnenden und schließenden Tag wie z.B. bei Absätzen. Es wird lediglich an der Stelle notiert, wo ein Zeilenumbruch erfolgen soll.

Tastenkürzel für Zeilenumbruch direkt über die Tastatur

Bei vielen Content Management Systemen bearbeiten die Redakteure Webseiten, ohne dass sie mit HTML-Codes in Berührung kommen, z.B. mit Hilfe eines WYSIWYG-Editors. Damit sie auf einfache Art und Weise einen Zeilenumbruch erzeugen können, benötigen sie die folgende Tastenkombination, die sehr hilfreich sein kann und mit den meisten Editoren funktioniert.

UMSCHALT-Taste + RETURN-Taste

Die Umschalt-Taste wird auch Großschreibtaste genannt. In Kombination mit der Return-Taste sollte ein Zeilenumbruch statt eines neuen Absatzes erzeugt werden. Das funktioniert auch in Schreibprogrammen wie z.B. Word.

SHY-Tag für optionale Zeilenumbrüche mit Trennstrich

Wenn ein Wort sehr lang ist, so kann man einen sogenannten optionalen Zeilenumbruch mit einem Trennstrich einfügen. Optional bedeutet, dass der Browser an der Stelle einen Trennstrich und einen Zeilenumbruch erzeugen kann, sofern es erforderlich ist. Das ist z.B. bei ausländischen Namen sinnvoll, die zum Teil sehr lang sind. Bei kleinen Displays könnte das notwendig sein. Hierfür wird der SHY-Tag verwendet und der Befehl ist angelehnt an Soft-Hypen. Es ist ebenfalls ein leerer Befehl, der keine Inhalte umschließt und an beliebigen Stellen im Text platziert werden kann. Als Code verwendet man:

In (X)HTML

&shy;

WBR-Tag für optionale Zeilenumbrüche ohne Trennstrich

Mit der Weiterentwicklung von HTML wurde in der Version HTML5 der WBR-Tag als zusätzlichen Standard zu den Spezifikationen hinzugefügt. Wie der BR-Tag gehört der WBR-Tag zu den leeren Befehlen, die keine Inhalte umschließen. Der Befehl ist an Word-Break angelehnt. Als Code verwendet man:

In HTML

<wbr>

In XHTML

<wbr />

Mit dem WBR-Tag werden optionale Zeilenumbrüche erzeugt, ähnlich wie bei der Silbentrennung in Word, jedoch ohne Trennzeichen wie z.B. Bindestriche. Wie beim SHY-Befehl kann an solchen Stellen ein Zeilenumbruch erfolgen, wenn es erforderlich ist. Das kann nützlich sein, wenn man z.B. einer langen Internetadresse bei kleinen Displays die Möglichkeit einräumen möchte, einen Zeilenumbruch ohne Trennstriche zu erzeugen. Mit Trennstrichen würde die Internetadresse verändert werden, da ex-ample.com und example.com zwei verschiedene Adressen sind. Nicht alle Browser unterstützen den SHY- und WBR-Befehl bzw. setzen sie fehlerhaft um. Vor dem Einsatz sollte man den Effekt testen.