Umbrüche erzwingen

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:

Hier kommt unsere erste Zeile
und hier geht es in der nächsten Zeile weiter.

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

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 Umbruch
  • <hr /> die horizontale Linie
  • <img … /> Bilder im Inhalt

Wichtig ist nur die „ältere“ Schreibweise zu erkennen. Diese kann genutzt werden, muss aber nicht! Im folgenden 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 weitere geht es mit der Trennlinie, die es auch mit diesem Aufbau gibt.