Wichtige Erkenntnisse
- HTML ignoriert standardmäßig mehrere Leerzeichen – Sie müssen spezielle Codes verwenden.
- ist das „geschützte Leerzeichen" (non-breaking space), das weder zusammenfällt noch einen Zeilenumbruch erlaubt.
-   und   erzeugen breitere Abstände (etwa zwei bzw. vier normale Leerzeichen).
- Für echten Zeilenumbruch und echte Einrückung sind CSS-Eigenschaften wie white-space und margin die bessere Wahl.
- Der Befehl   ist das numerische Äquivalent zu und funktioniert identisch.
HTML-Leerzeichen: Die große Falle, die jeder Anfänger kennt
Ich erinnere mich noch genau an meinen ersten Versuch, einen Absatz mit fünf Leerzeichen einzurücken. Im Editor sah es perfekt aus: Daumendrücker auf der Leertaste, fünfmal hintereinander. Und im Browser? Nichts. Kein Abstand. Der Text klebte am Rand, als hätte ich nie eine Taste gedrückt.
Das ist der Moment, in dem jeder HTML-Anfänger verwirrt den Bildschirm anstarrt. Und genau darum geht es in diesem Artikel: HTML-Leerzeichen sind nicht das, was Sie erwarten. Aber ich verspreche Ihnen: Nach diesem Text werden Sie genau verstehen, wie Sie sie einsetzen – und vor allem, wo die Grenzen liegen.
Wieso HTML mehrere Leerzeichen ignoriert
HTML ist keine Textverarbeitung. Es ist eine Auszeichnungssprache. Und eine ihrer Grundregeln lautet: Mehrere aufeinanderfolgende Leerzeichen werden zu einem einzigen zusammengefasst – das nennt man „whitespace collapse".
Das ist kein Bug, sondern Feature. Die Idee: Der Autor schreibt semantisch, das Layout bestimmt das CSS. Wenn Sie im Quelltext fünf Leerzeichen setzen, sagt der Browser: „Aha, ein Trennzeichen", und zeigt genau eines an.
Klingt frustrierend? Ist es auch. Aber genau hier kommen die HTML-Entitäten ins Spiel.
Der Code für Leerzeichen: Was bedeutet ?
Die Abkürzung steht für Non-Breaking Space – ein geschütztes Leerzeichen, das weder verschwindet noch einen Zeilenumbruch erlaubt. Ich nutze es ständig, wenn ich verhindern will, dass eine Zahl von ihrer Einheit getrennt wird: 42 kg bleibt immer zusammen.
Und das Tolle: Sie können auch mehrfach hintereinander setzen. Vier davon ergeben im Browser sichtbar vier Leerzeichen – der Browser fasst sie nicht zusammen, weil jede Entität als eigenes Zeichen zählt.
Die Quelle, aus der ich das vor Jahren gelernt habe, drückt es so aus: „Dieser Code steht für 'non breaking space'. Sollen mehrere Leerzeichen erzeugt werden, dann einfach mehrere nacheinander – aber Vorsicht! Solch ein Vorgehen hat seinen Preis, da es eigentlich die Grundphilosophie von HTML verletzt!"
Diesem Preis widmen wir uns gleich. Aber zuerst:
Und was ist mit  ?
Identisch.   ist das numerische Äquivalent. Manche Editoren bevorzugen die dezimale Schreibweise. Ich persönlich bleibe bei , weil es intuitiver lesbar ist. Beide tun exakt dasselbe.
Breite Leerzeichen:   und  
Manchmal brauchen Sie mehr als einen normalen Buchstabenabstand. Dafür gibt es zwei weitere Entitäten:
| Entität | Name | Breite (etwa) | Typischer Einsatzzweck |
|---|---|---|---|
| Non-Breaking Space | ein normales Leerzeichen | geschützter Abstand, Einrückungen |
  | En Space | zwei normale Leerzeichen | kleine Zwischenräume in Aufzählungen |
  | Em Space | vier normale Leerzeichen | starke Abstände, optische Gliederung |
Die Bezeichnung kommt aus der Typografie: Ein „en" ist so breit wie der Buchstabe n, ein „em" so breit wie ein m. Klingt logisch – aber Vorsicht: Im Browser verhalten sich diese Entitäten nicht immer gleich. Ich habe schon erlebt, dass   in älteren Browsern unerwartet schmal oder gar nicht dargestellt wurde. Wenn Sie auf Nummer sicher gehen wollen, bleiben Sie bei .
Und ehrlich? Das „Spielen" mit den Breiten – wie es die Quelle nennt – führt in der Regel nicht zum Ziel. Denn wenn Sie den Abstand zwischen zwei Wörtern wirklich definieren wollen, gehört das ins CSS, nicht ins HTML.
Wie füge ich in HTML zwei Leerzeichen ein?
Die Frage höre ich immer wieder von Leuten, die einen bestimmten Abstand in einem Fließtext erzwingen wollen. Antwort: entweder   (zwei Leerzeichen breit) oder zweimal hintereinander ( ). Beides funktioniert.
Aber ich rate: Tun Sie es nicht. Nicht, weil es nicht geht, sondern weil es unwartbar wird. Sobald Sie fünf Seiten später merken, dass der Abstand anders sein soll, suchen Sie sich dumm und dämlich. CSS ist hier der Profi-Weg.
CSS-Alternative: white-space und Verwandte
Der sauberste Weg, mehrere Leerzeichen im Browser darzustellen, ist CSS. Die Eigenschaft white-space steuert, wie der Browser mit Leerzeichen, Tabs und Zeilenumbrüchen umgeht.
white-space: pre;– Der Text wird exakt so angezeigt, wie er im HTML-Quelltext steht. Leerzeichen bleiben erhalten.white-space: pre-wrap;– Wiepre, aber der Text umbricht automatisch am Zeilenende.white-space: nowrap;– Alle Leerzeichen werden ignoriert, außer dem ersten; kein Zeilenumbruch erlaubt.
Ich selbst benutze white-space: pre-wrap; am liebsten, wenn ich Code-Beispiele oder Zitate darstelle, bei denen die Formatierung im Quelltext wichtig ist.
Und dann ist da noch word-spacing und letter-spacing – damit können Sie den Abstand zwischen Buchstaben oder Wörtern zentimetergenau steuern. Kein mehr nötig.
Abstände semantisch mit margin und padding
Der größte Fehler, den ich am Anfang gemacht habe: Leerzeichen zu verwenden, um Layout zu machen. Einrückungen, Tabulatoren, Abstände zwischen Elementen – das alles gehört nicht ins HTML. Sondern in die Box-Modell-Eigenschaften.
Wenn Sie ein Wort von einem anderen trennen wollen, fragen Sie sich: Ist das ein semantischer Abstand (dann Leerzeichen) oder ein Layout-Abstand (dann CSS)? Meistens ist es Layout.
HTML-Leerzeichen und die URL: Das Problem mit %20
Ach ja, und dann gibt es noch die URL-Codierung. Ein normales Leerzeichen in einer URL wird zu %20. Das ist kein HTML-Code, sondern eine Prozentkodierung, die der Browser beim Senden der Anfrage verwendet.
Verwechseln Sie das nicht mit . In HTML-Seiten innerhalb von Attributen wie href oder src müssen Sie ebenfalls %20 verwenden, wenn ein Leerzeichen im Pfad vorkommt – aber das ist zum Glück selten nötig, weil moderne Server und Browser mit Leerzeichen in Pfaden umgehen können. Trotzdem: Früher habe ich mir stundenlang den Kopf zerbrochen, warum ein Link nicht funktioniert, nur weil im Dateinamen ein Leerzeichen war. %20 war die Lösung.
Wann Sie kein Leerzeichen brauchen: Ein <pre>-Beispiel
Manchmal wollen Sie einfach, dass der Browser den Text so anzeigt, wie Sie ihn schreiben – inklusive aller Leerzeichen, Tabs und Zeilenumbrüche. Dafür gibt es das <pre>-Element.
<pre>
Hallo, hier sind vier Leerzeichen.
Und hier eine Einrückung.
</pre>Das ist besonders nützlich für Gedichte, ASCII-Art oder Code-Ausschnitte. Aber für Fließtext sollten Sie es nicht missbrauchen, denn <pre> verwendet standardmäßig eine nicht-proportionale Schriftart (Courier o.ä.).
Wichtige Erkenntnisse (Zusammenfassung)
- Einzelleerzeichen per Leertaste sind für den Browser unsichtbar, wenn sie mehrfach vorkommen.
- oder   erzeugen ein geschütztes Leerzeichen, das weder zusammenfällt noch umbricht.
-   und   sind breitere Varianten, aber nicht immer browserübergreifend konsistent.
- Für echte Layout-Abstände nutzen Sie CSS:
white-space,margin,padding,word-spacing. - Das
<pre>-Element erhält alle Leerzeichen und Zeilenumbrüche exakt so, wie Sie sie im Code setzen.
Fazit: Die einfache Wahrheit hinter HTML-Leerzeichen
HTML-Leerzeichen sind keine Raketenwissenschaft. Aber sie sind eine der ersten Hürden, an denen ich als Anfänger gescheitert bin – und die ich seitdem in jedem meiner Projekte wiedererkenne. Der Trick ist nicht, möglichst viele zu stapeln, sondern zu verstehen, wann man sie braucht und wann nicht.
Wenn Sie das nächste Mal fünf Leerzeichen in Ihren Text hauen wollen, halten Sie inne. Fragen Sie sich: Ist das ein Inhalt oder ein Design? Ist es Inhalt – dann . Ist es Design – dann CSS. Diese eine Entscheidung erspart Ihnen Stunden voller Frustration und macht Ihren Code sauberer, wartbarer und professioneller.
Und falls Sie sich jemals fragen, warum Ihr schöner Abstand im Browser nicht klappt: Wahrscheinlich haben Sie das Semikolon vergessen. Ja, ich spreche aus eigener leidvoller Erfahrung. Mehrere Stunden meines Lebens für ein vergessenes Semikolon. Lassen Sie das nicht an sich herankommen.
