Sie schreiben ein HTML-Dokument, fügen im Quelltext brav eine Handvoll Tastatur-Leerzeichen zwischen die Wörter und schauen im Browser nach. Und was sehen Sie? Nichts. Oder genauer: ein einziges, armseliges Leerzeichen, obwohl es doch drei sein sollten. Willkommen im Club derer, die an diesem Punkt gedacht haben: „Das ist entweder ein Bug oder ich bin zu blöd.“ Es ist keins von beidem. Es ist ein grundlegendes Verhaltensprinzip von HTML, und zwar eines, das sich seit über zwanzig Jahren nicht geändert hat. Der Browser ignoriert wiederholte Leerzeichen im Code. Punkt. Deshalb gibt es das HTML-Leerzeichen mit all seinen Varianten, und deshalb sitzen Sie jetzt hier.
Wichtige Erkenntnisse
- Mehrere Leerzeichen im HTML-Code werden vom Browser auf eines reduziert – das ist kein Fehler, sondern Absicht.
- Der häufigste Helfer ist
– das geschützte Leerzeichen, das weder bricht noch verschmilzt. - Es gibt spezielle Breiten:
 für zwei normale Leerzeichen, für vier. - Die
<pre>-Tag ist die Notbremse für Formatierung wie Gedichte oder Code. - CSS
white-spaceund Padding/Margin sind eleganter für Abstände – sie vermischen nicht Inhalt und Layout. - Ein übermäßiger Einsatz von
kann SEO und Barrierefreiheit stören.
Warum HTML Leerzeichen ignoriert – und was die Browser wirklich wollen
Die kurze Antwort: HTML wurde als Auszeichnungssprache für Struktur und Bedeutung entworfen, nicht für Pixel-jagende Layout-Spielereien. Die lange Antwort ist noch einfacher: Wenn Sie heute zehn Tastatur-Leerzeichen hintereinander drücken, um zwischen zwei Wörtern Abstand zu schaffen, dann friert der Browser sie auf eines ein. Das ist ein white space collapse.
Und das ist gut so. Stellen Sie sich vor, jemand hätte seinen Quelltext mit fünfundzwanzig Leerzeichen formatiert – der Browser müsste sie alle anzeigen. Das gäbe Löcher in jeder UI. Deshalb reduziert der Standard: Ein normales, nicht-benanntes Leerzeichen wird im Textfluss auf einen schmalen Zwischenraum zusammengezogen. Mehr als eins? Unerwünscht.
Ich habe früher, als ich mit HTML anfing, stundenlang versucht, den Effekt mit einer Kette von zu erzwingen. Ergebnis: eine Zeile, die nicht brach, und ein Layout, das auf dem zweiten Bildschirm aussah, als hätte es eine Prügelei mit dem CSS hinter sich. Besser: verstehen, was zur Verfügung steht.
Die Lösung: – das geschützte Leerzeichen
Das Non-Breaking Space – kurz oder als numerisches   – ist der Klassiker. Es tut zwei Dinge: Es bleibt sichtbar, auch wenn Sie es mehrfach hintereinander setzen, und es verhindert einen Zeilenumbruch an dieser Stelle. Das ist nützlich, wenn Sie vermeiden möchten, dass „12“ und „kg“ auf zwei Zeilen landen. Oder „Dr.“ und „Müller“.
Ein praktischer Fall: Ich habe in einem Onlineshop die Preise immer mit 49 € geschrieben. Der Browser hält Betrag und Währung zusammen, auch bei schmalen Viewports auf dem Handy. Genau das, was man will.
Wichtig: Für jedes weitere Leerzeichen muss ein neues gesetzt werden. Drei hintereinander erzeugen drei sichtbare Leerzeichen – aber auch drei potenzielle Bruchstellen? Nein, denn sie sind ja „non-breaking“. Die Kette kann nicht getrennt werden. Deshalb ist der Einsatz als einfaches Einrückungsmittel oft übertrieben.
Mehr als eins:   und   für echte Breiten
Was, wenn Sie zwei oder vier Leerzeichen brauchen, ohne den Code mit Dutzenden Entities zu überfluten? Dafür gibt es die Entitäten   und  . Der Name stammt aus der Typografie: Ein en ist die Breite eines „n“ (also etwa zwei normale Leerzeichen), ein em die eines „m“ (etwa vier).
| Entity | Bedeutung | Breite (ungefähr) |
|---|---|---|
(oder  ) | Non-Breaking Space | einfaches Leerzeichen, aber ohne Umbruch |
  | En Space | doppelte Breite eines normalen Leerzeichens |
  | Em Space | vierfache Breite eines normalen Leerzeichens |
In der Praxis verwende ich   fast nie. Ehrlich. Es ist ein Nischen-Tool für typografisch anspruchsvolle Textblöcke, etwa in einem Gedichtband oder einer Liste, wo bestimmte Abstände justiert werden müssen. Der Browser stellt es dar, aber es ist nicht semantisch – und wer das liest, kann sich genauso gut auf CSS verlassen. Die Extra-Seite heise online hat das mal in einem Artikel über Schriftsatz angerissen, aber es bleibt Spezialwissen.
  hingegen benutze ich gelegentlich als schnellen Einzug für Zitate oder für die Trennung von Abschnitten in einer Liste – aber nur, wenn ich wirklich schnell etwas im CMS fixen muss, ohne Stylesheet. Ansonsten: Finger weg, denn es bricht die Responsivität.
Die Notbremse: <pre> für echten Code und Gedichte
Es gibt eine Situation, in der Sie wollen, dass jedes Leerzeichen und jeder Zeilenumbruch exakt so bleibt, wie Sie es getippt haben: Quelltext, Gedichte, ASCII-Kunst. Dafür ist das <pre>-Tag („preformatted“) gedacht. Der Browser stellt den Inhalt in einer nicht-proportionalen Schrift dar und respektiert alle Whitespace-Zeichen – Tabs, Leerzeichen, Return – exakt.
Ich habe einmal in einem Blogbeitrag eine Liste mit fünf Optionen gehabt, die ich mit eingerückt hatte. Sah im Browser passabel aus, aber als ich das Ganze in einen responsiven Container packte, brachen die Zeilen grausam. Der Kunde war sauer. Die Lösung war simpel: <pre> um den ganzen Block. Seitdem ein Merksatz: Für rohen Textinhalt – <pre>. Für Design – CSS.
CSS für Profis: white-space, Padding und Margin
Wenn Sie mehrere Leerzeichen in einem normalen Textabsatz benötigen, ist das fast immer ein Anzeichen dafür, dass Sie das Layout mit CSS steuern sollten. Die Eigenschaft white-space kann dem Browser sagen: „Behandele Leerzeichen so, wie sie im Quelltext stehen.“
Mögliche Werte:
white-space: pre;– wie das<pre>-Tag, aber ohne die nicht-proportionale Schriftwhite-space: pre-wrap;– Leerzeichen und Zeilenumbrüche werden beibehalten, der Text darf aber umbrechenwhite-space: pre-line;– Leerzeichen werden reduziert, aber Zeilenumbrüche erhalten
Früher habe ich oft verwendet, um in Navigationsmenüs gleichmäßige Abstände zu erzeugen. Totaler Fehler. Mit padding und margin sind Sie viel flexibler – und das bleibt konsistent über alle Bildschirmgrößen. Leerzeichen im HTML sind oft ein Zeichen dafür, dass das visuelle Design besser ins CSS gehört.
Was ist mit Leerzeichen in URLs? Das Problem mit %20
Ein ganz anderer Fall: Wenn Sie einen Link generieren, der ein Leerzeichen im Dateinamen oder Parameter enthält, kann der Browser das nicht einfach so interpretieren. Leerzeichen sind in URLs nicht erlaubt. Dort werden sie als %20 codiert – das ist der hexadezimale Code für das ASCII-Zeichen 32.
Das ist kein HTML-Leerzeichen im eigentlichen Sinne, sondern ein Teil der URL-Codierung. Wenn Sie also einen Link zu einer Datei mit dem Namen „mein dokument.pdf“ schreiben, muss er so aussehen: href="mein%20dokument.pdf". Der Browser wandelt das automatisch um, aber Sie sollten es nicht selbst tippen – ein guter Editor oder ein CMS macht das für Sie.
Ich habe einmal einen Link auf einer Webseite gepflegt, der ein im Pfad hatte – natürlich funktionierte das nicht. Der Fehler war schwer zu finden, weil der Quelltext auf den ersten Blick okay aussah. Seitdem checke ich Links auf Sonderzeichen.
Typische Fehler bei HTML Leerzeichen – und wie Sie sie vermeiden
Hier sind die häufigsten Fallen, in die ich selbst getappt bin:
- Semikolon vergessen:
 (ohne Semikolon) wird von älteren Browsern ignoriert oder falsch dargestellt. Angeblich ein Relikt sehr alter HTML-Versionen – in modernen Browsern ist es ein Semikolon oder nichts. - Leerzeichen im Entity:
& nbsp;(mit einem Leerzeichen nach dem &-Zeichen) funktioniert nicht. Die Entität muss direkt auf das & folgen. - Zu viele
hintereinander: Das erzeugt eine nicht-umbrechende Kette, die auf kleinen Bildschirmen aus dem Layout ragt. Besser: Mitpaddingodermarginarbeiten.  oder für Layout-Zwecke: Das ist semantisch nicht klar und führt zu Inkonsistenzen. Verwenden Sie dafür CSS.
FAQ: Häufig gestellte Fragen zum HTML Leerzeichen
Wie füge ich in HTML zwei Leerzeichen ein?
Ein einzelnes erzeugt ein einfaches geschütztes Leerzeichen. Für zwei Leerzeichen verwenden Sie   (En Space), das in der Breite zwei normalen Leerzeichen entspricht. Alternativ setzen Sie zwei hintereinander. Die genaue Breite variiert je nach Schriftart, aber   ist die semantisch klarere Lösung für genau zwei Leerzeichen.
Was ist der Code für Leerzeichen in HTML?
Der universelle Code ist (Non-Breaking Space) oder die numerische Variante  . Beide erzeugen ein sichtbares Leerzeichen, das nicht mit benachbarten Leerzeichen verschmilzt und keinen Zeilenumbruch erlaubt. Für spezielle Breiten gibt es   und  .
Wie füge ich ein breites Leerzeichen in HTML ein?
Ein breites Leerzeichen – etwa für Einrückungen oder typografische Effekte – erzeugen Sie mit  . Dieses ist ungefähr viermal so breit wie ein normales Leerzeichen. Beachten Sie aber: Das ist in der Regel nicht zielführend, da es die Responsivität der Seite beeinträchtigt. Für Abstände im Layout sind CSS-Eigenschaften wie padding oder margin die bessere Wahl.
Fazit: Das richtige Mittel für den richtigen Zweck
Ich habe Jahre gebraucht, um zu lernen, dass HTML-Leerzeichen ein Symptom sind, kein Problem. Das Symptom heißt: „Ich will Abstand, ich weiß nicht wie.“ Die Lösung ist fast nie ein Entity im HTML, sondern eine CSS-Regel. Trotzdem – manchmal gibt es keine Alternative. Wenn Sie einen Gedichtband markieren, einen Codeblock zeigen oder sicherstellen müssen, dass eine Zahl nicht vom Platzhalter gerissen wird, dann sind ,   und   Ihre besten Freunde. Für alles andere gibt es CSS.
Und ehrlich, wenn Sie das nächste Mal ein paar Test-Leerzeichen einfügen wollen, denken Sie an die Browser-Regel: Mehr als eines ist zu viel – es sei denn, Sie sagen ihm explizit, dass Sie es ernst meinen.
