Leerzeichen in HTML richtig einsetzen - die Tricks

Marco Kratzenberg 4

Leerzeichen sind in Texten eine klare Trennung. Leerzeichen in HTML-Code haben ganz andere Funktionen. Es gibt auch mehrere Varianten. So setzt man sie richtig ein!

Leerzeichen in HTML richtig einsetzen - die Tricks

Leerzeichen in HTML sind erst einmal nichts anderes als freier Platz. Das Leerzeichen als solches ist ja gar kein HTML-Code und wird deshalb von den Browsern in der Regel auch nur ein einziges Mal interpretiert. Es ist also völlig egal, ob wir zwischen zwei Wörtern ein oder zehn Leerzeichen in den HTML-Code packen. Im Browser werden wir immer nur ein Leerzeichen sehen.

Es gibt allerdings einen Code für Leerzeichen in HTML. Damit sind keine normalen Leerzeichen gemeint, sondern die sogenannten geschützten Leerzeichen. Sie werden immer und unter allen Umständen einzeln dargestellt und zudem noch mit den Seiten-Inhalten direkt davor und danach zusammengehalten.

Leerzeichen in HTML erzwingen – Das geschützte Leerzeichen

Eine leere, codefreie Stelle zwischen zwei Elementen im HTML-Code ist erstmal nichts weiter als das: Eine leere Stelle ohne Code. Für die Seite heißt das u.a., dass dort umgebrochen werden darf, wenn das Browserfenster zu klein ist, um alles in einer Zeile darzustellen. Ist zwischen zwei Wörtern im HTML kein Leerzeichen vorgesehen, dann werden sie zusammen geschrieben. Ist eines da, sehen wir zwei Wörter. Fehlt ein Leerzeichen zwischen zwei nebeneinander eingefügten Bildern, dann gibt es dazwischen auch keinen Umbruch, sondern das Browserfenster muss gescrollt werden.

Was aber tun wir, wenn wir im HTML ein oder mehrere Leerzeichen so einfügen wollen, dass sie auf jeden Fall auch in der Anzeige berücksichtigt werden? Wenn wir beispielsweise den Anfang eines Satzes mit drei Leerzeichen unter dem darüberstehenden Satz einrücken wollen? OK, für diese Problematik gibt es verschiedene Ansätze, doch die unkomplizierteste ist das geschützte Leerzeichen in HTML. Sein HTML-Code leitet sich von der englischen Bezeichnung „Non breaking space“ ab, was soviel wie nicht brechendes Leerzeichen bedeutet. Der Code dafür ist

 

Also das kaufmännische Und (&), dann nbsp und zum Abschluss ein Semikolon.

Bei vielen HTML-Editoren, wie etwa bei Phase 5,  ist es zu einer Art Standard geworden, dass wir das geschützte Leerzeichen mit der Tastenkombination Strg + Leertaste eingeben können. In dem Bild oben habe ich mal anhand des Codes und seiner Auswirkung den Unterschied der Leerzeichen im HTML dargestellt.

Bilderstrecke starten
33 Bilder
32 abartige Fotos von Schuhen, bei denen sich dir die Zehennägel aufrollen.

Geschütztes Leerzeichen im HTML-Code – Besonderheiten

Folgende Besonderheiten gibt es für das geschützte Leerzeichen im HTML:

  • Befindet es sich zwischen zwei Wörtern, werden diese Worte auf keinen Fall getrennt, wenn ein Umbruch erfolgt.
  • Mehrere geschützte Leerzeichen, die im HTML-Code hintereinander stehen, werden jeweils einzeln interpretiert und dargestellt wie ein festes, unsichtbares Zeichen. Befinden sich dazwischen normale Leerzeichen, werden auch die wieder dargestellt.
  • Ein geschütztes Leerzeichen im HTML-Code zwischen zwei Bildern verbindet diese fest miteinander und stellt dennoch einen Leerraum dazwischen dar. So kann man eine Reihe von Bildern in eine Zeile zwingen. Das Ergebnis ist aber unter Umständen, dass das Fenster zur Darstellung seitlich scrollen muss!

Wie viel Datenvolumen geht pro Monat drauf?

Wie viel Datenvolumen sieht dein Tarif vor und wie viel davon nutzt du am Ende wirklich?

Neue Artikel von GIGA SOFTWARE

  • Cloud-Dienste: Die besten Services zum online Daten speichern

    Cloud-Dienste: Die besten Services zum online Daten speichern

    Cloud-Dienste und -Services sind mittlerweile zum Standard geworden. Wo auch immer ihr euch befindet, könnt ihr über euer Smartphone oder den PC auf eure Daten zugreifen oder sie online abspeichern. Aber welche Cloud-Dienste bieten euch wie viel Speicherplatz, was bekommt man kostenfrei geboten und was kostet das Upgrade, wenn man später doch mehr Online-Speicher benötigt?
    Thomas Kolkmann 12
  • Puffin Web Browser

    Puffin Web Browser

    Der Puffin Web Browser ist für iOS- und Android-Geräte sowie auch für Windows verfügbar und verschafft euch einen Browser, der sich besonders durch seine hohe Geschwindigkeit auszeichnet.
    Marvin Basse
  • "Driver Power State Failure" bei Windows 10: Lösungen und Hilfe

    "Driver Power State Failure" bei Windows 10: Lösungen und Hilfe

    Erscheint ein Bluescreen auf dem Bildschirm, ist das ärgerlich, schließlich liegt ein Problem mit dem Laptop oder PC vor. In der Regel wird der Bluescreen von einer Meldung begleitet, die sich nicht auf Anhieb deuten lässt. So kann es passieren, dass unter Windows 10 als Fehlermeldung „DRIVER_POWER_STATE_FAILURE“ erscheint.
    Martin Maciej
* gesponsorter Link