Zeilenumbruch: Umbrüche erzwingen über HTML-Befehl <br>

Wenn Sie einen Umbruch erzwingen möchten, nutzen Sie dazu den HTML-TAG <br>.

<p>Hier kommt unsere erste Zeile<br>
und hier geht es in der nächsten Zeile weiter.</p>

Die Ausgabe im Browser sieht wie folgt aus:

Alle HTML-TAGs kommen aus dem Englischen. So ist <br> die Abkürzung für break = Umbruch.

Früher (vor HTML5) wurde der HTML-TAG korrekt so geschrieben: <br />

Wenn Sie sich nun über den Aufbau des HTML-TAGs wundern – ja, er sieht anders aus als alle bisher kennengelernten HTML-TAGs. Denn die bisherigen HTML-TAGs umschließen immer einen Inhalt, z. B. bei der Überschrift „<h1>Überschrift</h1>“

Der HTML-TAG für den Umbruch kann keinen Inhalt umschließen – wie soll das bei einem Textumbruch gehen. Daher wird der Anfangs- und HTML-End-TAG zusammengezogen. Also kommt nach dem „<br“ das eingeschobene Leerzeichen, gefolgt von dem Schrägstrich „/“ (formell: solidus, englisch „slash“) und dann das abschließende Größer-als-Zeichen <br />.

Theoretisch Richtig wäre auch „<br></br>“ – aber das ist herzhaft unüblich!

Der HTML-TAG <br /> ist XHTML-konform. Lustigerweise sind die „Vorgänger“ in Form von <br> ab HTML5 wieder valide und können jetzt wieder so genutzt werden.

Es gibt folgende weitere HTML-Befehle, die diesen Aufbau vor HTML5 nutzten:

• <br /> der erzwungene Zeilenumbruch
• <hr /> die horizontale Linie
• <img … /> Bilder im Inhalt

Wichtig ist nur die „ältere“ Schreibweise zu erkennen - also die vor HTML5. Diese kann genutzt werden, muss aber nicht! Im Kurs wird die kürzere HTML5-Version der Befehle verwendet, also ...

• <br> der erzwungene Umbruch
• <hr> die horizontale Linie
• <img … > Bilder im Inhalt

Von dieser Art von HTML-TAGs, die keinen Inhalt umschließen, gibt es also nur wenige gebräuchliche HTML-Befehle, die wir nun der Reihe nach in den folgenden Kapiteln kennenlernen.

Beim Aufbau von Formularen gibt es weitere HTML-Befehle, die vor HTML5 diesen Aufbau genutzt haben. Formulare werden aber nicht im Einsteiger-Kapitel behandelt – hier nur der Vollständigkeit halber:

<input type="text" name="nachname" value="" size="20" />

Und weiter geht es im folgenden Kapitel mit der Trennlinie, die es auch mit diesem Aufbau gibt.