Leerzeichen in HTML

Wenn man mit HTML auf Webseiten Texte einfügt, dann kommt es hin und wieder vor, dass man mehrere Leerzeichen einfügen möchte, z.B. um einen größeren Abstand statt nur ein Leerzeichen einzufügen. Wenn man mehrere Leerzeichen in einem Absatz eingibt, dann wird im Browser trotzdem nur ein Leerzeichen angezeigt. Auf der folgenden Abbildung ist das Ergebnis ist der Effekt dargestellt. Im Code wurden mehrere Leerzeichen eingegeben, bei der Betrachtung im Browser ist jedoch nur 1 Leerzeichen.

Leerzeichen im HTML-Code

Wenn man mehrere Leerzeichen eingeben möchte, so dass diese auch im Browser einen Effekt zeigen, dann kann man das realisieren, indem man geschützte Leerzeichen einfügt. Hierfür verwendet man den NBSP-Tag, beginnend mit dem UND-Zeichen (&) und beendend mit Semikolon (;). Der Code aus der Abbildung müsste daher wie folgt geändert werden.

<p>Text im Absatz. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Ich möchte paar Leerzeichen.</p>

NBSP ist die Abkürzung für Non-Breaking-Space und stellt ähnlich wie im Textverarbeitungsprogramm Word ein geschütztes Leerzeichen dar. Das bedeutet, dass dieser Befehl auch dafür genutzt werden kann bzw. eigentlich dafür gedacht ist, um zwei oder mehr Wörter so miteinander zu verbinden, dass sie immer zusammen bleiben und z.B. bei Zeilenumbrüchen nicht getrennt werden. Das kann z.B. nützlich sein bei Namen wie Karl Heinz oder bei Firmennamen, die aus mehreren Wörtern bestehen und gemäß Unternehmensrichtlinien nie getrennt geschrieben werden sollen.

Wenn man den Befehl mehrfach hintereinander eingibt, so hat man im Grunde mehrere geschützte Leerzeichen und dadurch erzeugt man einen größeren Abstand zwischen zwei Buchstaben bzw. Wörtern. Für diesen Zweck sollte der Befehl jedoch nur in Ausnahmefällen und so wenig wie möglich verwendet werden. Denn, geschützte Leerzeichen sind nicht dafür gedacht, um größere Abstände zwischen zwei Wörtern zu erzeugen, sondern um zwei Wörter miteinander zu verbinden. Bei strukturellen Änderungen einer Webseite treten außerdem häufig unerwünschte Nebenwirkungen mit dem Befehl auf. Wenn auf der Webseite z.B. eine Spalte mit Texten vorhanden ist und die Webseite irgendwann so verändert wird, dass die Spaltenbreite verkleinert oder die Texte an einer anderen Stelle positioniert werden, dann kann es passieren, dass die geschützten Leerzeichen nicht mehr in den neuen Container passen und mühsam wieder entfernt werden müssen, weil ansonsten das Aussehen durcheinander gerät.

Geschützte Leerzeichen mit NOBR-Tag

Wenn zwei oder mehr Wörter nie getrennt werden sollen, dann kann man hierfür den NOBR-Tag verwenden. Der Text, der innerhalb des Bereichs eingefügt wird, bleibt so zusammen, als hätte man zwischen den Wörtern den NBSP-Tag eingefügt. Mehrere Leerzeichen können damit jedoch nicht dargestellt werden. Gibt man im Text mehrere Leerzeichen ein, wird im Browser nur 1 Leerzeichen dargestellt. Ein Beispielcode, um mehrere Wörter nicht zu trennen, wäre wie folgt.

<nobr>Dieser Text bleibt immer zusammen.</nobr>

Gemäß W3C wird der NOBR-Tag als "non-conforming feature" klassifiziert und soll nicht genutzt werden.

Mehrere Leerzeichen oder Leerzeilen mit PRE-Tag

Es gibt in HTML den Befehl PRE, mit dem die Texte im Browser genauso wiedergegeben werden, wie man sie im Quellcode eingibt. Das funktioniert nicht nur mit Leerzeichen, sondern auch mit Leerzeilen. Der PRE-Tag wird z.B. häufig benutzt, um Programmiercode darzustellen, da hierbei aufgrund der besseren Übersichtlichkeit häufig Leerzeichen verwendet werden. Gibt man z.B. den folgenden Code auf der Webseite ein, wird der Text mit den Leerzeilen und -zeichen im Browser dargestellt.

<pre>Text im Absatz.      Ich möchte paar Leerzeichen.


Außerdem noch ein paar Leerzeilen.</pre>

Der Text aus dem Beispielcode innerhalb des PRE-Tags würde wie folgt dargestellt werden. Auffällig ist, dass der Text in der Standardeinstellung im Browser nicht in der Standardschriftart dargestellt wird, sondern in einer nichtproportionalen Schriftart. Die Formatierung kann jedoch bei Bedarf über CSS geändert werden.

Leerzeichen im PRE-Tag

Der PRE-Tag ist von preformatted Text abgeleitet und das bedeutet vorformatierter Text. Damit wird wie bei Absätzen ein Blockelement in einer neuen Zeile erzeugt. Häufig wird innerhalb des PRE-Tags der CODE-Tag verwendet, um Programmiercode auf der Webseite darzustellen. Es kann jedoch auch für andere Inhalte verwendet werden, z.B. für kleine Tabellen mit wenigen Zeilen und Spalten, die schnell erstellt werden sollen und wofür man nicht unbedingt eine Tabelle erstellen möchte.