Zeilenumbrüche im HTML5
Einen Zeilenumbruch erstellen
Habe schon einen Artikel geschrieben fürs HTML: Zeilenumbrüche im HTML
Browser brechen Text entsprechend der Breite des Blocks oder Fensters, das den Inhalt enthält, automatisch um. Am besten lässt man in den meisten Fällen den Inhalt einfach fließen, aber manchmal soll ein Zeilenumbruch auch manuell erzwungen werden. Das erledigen Sie mit dem br-Element.
Um es deutlich zu sagen: br sollte taktisch nur als letzte Zuflucht genommen werden, weil hier das HTML mit der Präsentation vermischt wird, anstatt dem CSS die Gesamtkontrolle zu überlassen. Nehmen Sie z.B. nie br, um den Abstand zwischen Absätzen zu simulieren. Zeichnen Sie dann vielmehr die beiden Absätze mit p-Elementen aus und definieren Sie den Abstand dazwischen mit der CSS-Eigenschaft margin.
Wann wäre br nun also angebracht?
Nun, das
br-Element passt für den Umbruch in Gedichten, in einer postalischen Anschrift und gelegentlich auch in anderen kurzen Textzeilen, die nacheinander erscheinen sollen.
Einen Zeilenumbruch einfügen
Tippen Sie <br /> (oder <br>) ein, wo der Zeilenumbruch erfolgen soll. Es gibt kein separates End-Tag bei br, denn es handelt sich um ein sogenanntes leeres Element: Darin steht nichts weiter.
Info
Sie können br entweder als <br /> oder <br> tippen – beides ist gültiges HTML5.
Die gleiche Adresse erscheint zweimal, aber ich habe sie zu Demonstrationszwecken ein wenig unterschiedlich geschrieben. Denken Sie daran, dass die Zeilenendezeichen im Code immer ignoriert werden. Somit werden beide Absätze auf gleiche Weise dargestellt.
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Lernen - Grundlagen und Tutorials</title>
<meta charset="utf-8" />
</head>
<body>
<p>
Neue Str. 12
<br /> 18 569 Ummanz
<br />
Deutschland
</p>
<p>
Neue Str. 12
<br />18 569 Ummanz ➝
<br />
Deutschland
</p>
</body>
</html>
Text innerhalb von normalen Absätzen, Listen sowie in Überschriften oder Tabellenzellen wird vom Web-Browser bei der Anzeige automatisch umbrochen. Sie können jedoch an einer gewünschten Stelle einen Zeilenumbruch erzwingen.
Beispiel
<h1>
HTML5 Lernen - Grundlagen und Tutorials
</h1>
<p>
Zeilenumbrüche im HTML5
</p>
<p>
Text innerhalb von normalen Absätzen,
<br />
Listen sowie in Überschriften oder,
<br />
Tabellenzellen wird vom Web-Browser
<br />
bei der Anzeige automatisch umbrochen.
</p>
Info
<br> (br = break = Umbruch) fügt an der gewünschten Stelle einen Zeilenumbruch ein. Dabei ist es egal, ob das alleinstehende Tag am Ende der vorherigen Zeile steht (wie im Beispiel) oder in einer eigenen Zeile oder am Anfang der folgenden Zeile.
Zeilenumbruch ermöglichen
Web-Browser brechen normalen Fließtext zwar automatisch um, jedoch nur bei Leerzeichen, weil dadurch Wörter voneinander abgegrenzt werden. Sie können dem Browser aber explizit mitteilen, wo er sonst noch einen Zeilenumbruch einfügen kann. Sinnvoll ist das beispielsweise für die optionale Trennung sehr langer oder zusammengesetzter Wörter.
Beispiel
<p>
Web-Browser­brechen­normalen­Fließtext­zwar automatisch­um,
<br />
jedoch <var>document.<wbr>getElements<wbr>ByTagName</var>
</p>
Info
Zum Markieren eines optionalen Zeilenumbruchs stehen gleich zwei Möglichkeiten zur Verfügung.
Mit dem named entity ­ (soft hyphen = bedingter Trennstrich) markieren Sie eine Stelle, an der getrennt werden darf, falls das Wort bei der Bildschirmanzeige am Ende der Zeile steht und der Platz für eine vollständige Darstellung nicht mehr ausreicht. Der Browser sollte das Wort an dieser Stelle mit einem Umbruch trennen und einen Trennstrich einfügen.
Das HTML-Standalone-Tag <wbr> (word break = Umbruch innerhalb eines Wortes) markiert ebenfalls einen optionalen Umbruch, fügt jedoch keinen Trennstrich ein. Es eignet sich also für Umbruchmöglichkeiten, bei denen es sich nicht um die grammatische Worttrennung normaler Wörter handelt.
Info
Innerhalb von Abschnitten mit verhindertem Zeilenumbruch bewirkt <wbr>, dass an der betreffenden Stelle trotzdem ein Umbruch erfolgen darf. Zeilenumbrüche können Sie mit CSS verhindern. Aber auch bei längeren Zeilen innerhalb von präformatierten Bereichen können Sie mit <wbr> an geeigneten Stellen dem Anwender das Quer-Scrollen ersparen.
Das <wbr>-Tag wurde bereits Mitte der 1990er Jahre vom damals führenden Web-Browser Netscape 2.0 als proprietäres Sprachelement eingeführt, weshalb es von einigen Browsern schon seit Langem erkannt wird.
Doch erst mit HTML5 wurde es in den Sprachstandard übernommen.
Info
Wenn Sie XHTML-Standard-konform arbeiten, müssen Sie die Elemente in der Form <br /> bzw. <wbr /> notieren.