HTML: Sonderzeichen, Umlaute und Leerzeichen

Q: Muss ich Umlaute in HTML als ä schreiben?

Nein, nicht mehr. Mit im Kopf der Datei und der Datei selbst als UTF-8 gespeichert kannst du ä, ö, ü, ß und € direkt tippen. Die Ersatzschreibweisen sind nur noch für Sonderfälle nötig, etwa wenn du die Speicherform nicht kontrollieren kannst.

Q: Warum werden meine Umlaute zu Zeichensalat?

Weil Datei und Kopfzeile nicht zusammenpassen. Ergänze ganz oben im — innerhalb der ersten 1024 Zeichen — und speichere die Datei im Editor erneut als UTF-8. Steht die Zeile weiter unten, hat der Browser schon angefangen zu raten.

Q: Welche Zeichen muss ich in HTML unbedingt ersetzen?

Vier: als >, & als & und " als ". Diese Zeichen haben in HTML eine eigene Bedeutung. Besonders in Links ist das kaufmännische Und kritisch, weil es dort Parameter trennt.

Q: Warum erscheint mein Sonderzeichen als roher Text?

Meist fehlt das Semikolon am Ende — &auml statt ä ist unvollständig. Zweite Ursache: doppelte Umwandlung. Steht &auml; im Code, erscheint ä als lesbarer Text; das passiert, wenn Inhalt durch zwei Systeme gelaufen ist.

Q: Welcher Gedankenstrich ist im Deutschen richtig?

Der Halbgeviertstrich – mit Leerzeichen davor und danach, nicht der Bindestrich. Das ist der häufigste Typografie-Fehler auf deutschen Seiten.

Kurz gesagt: Mit <meta charset="UTF-8"> im Kopf der Datei kannst du ä, ö, ü, ß und € direkt tippen — Ersatzschreibweisen wie ä brauchst du dafür nicht. Zwingend als Ersatzschreibweise nötig sind nur vier Zeichen: <, >, & und ". Dazu  , wenn ein Leerzeichen nicht umbrechen soll.

Die vier Zeichen, die du ersetzen musst

Das ist der Teil, der wirklich wichtig ist. Diese vier Zeichen haben in HTML eine eigene Bedeutung — wer sie direkt tippt, zerstört die Seite:

Zeichen	Schreibweise	Warum nötig
`<`	`<`	beginnt sonst ein HTML-Tag
`>`	`>`	beendet sonst ein HTML-Tag
`&`	`&`	beginnt sonst eine Ersatzschreibweise
`"`	`"`	beendet sonst einen Attributwert

Das kaufmännische Und ist der häufigste Fall im Alltag. „Schulz & Partner" muss im Code Schulz & Partner heißen. Meist geht es trotzdem gut, weil Browser fehlertolerant sind — bis das Zeichen in einem Link steht und dort tatsächlich Schaden anrichtet.

In Links ist es kritisch: Ein & in einer Adresse trennt Parameter. Steht es in einem href unmaskiert, kann der Link ins Leere führen. In HTML-Attributen gehört dort & hin — der Browser macht daraus beim Aufruf wieder ein einzelnes &.

Umlaute: warum sie zu Zeichensalat werden

Wenn aus „Größe" plötzlich „GrÃ¶ÃŸe" wird, liegt das nie am Umlaut selbst, sondern immer an der Zeichenkodierung. Zwei Stellen müssen zusammenpassen:

Die Datei muss als UTF-8 gespeichert sein.
Der Kopf der Datei muss das ansagen: <meta charset="UTF-8">

<head>
  <meta charset="UTF-8">
</head>

Stimmen beide, kannst du ä, ö, ü, ß, €, – und „ " direkt tippen. Das ist der heutige Weg. Die Ersatzschreibweisen aus der Tabelle unten brauchst du dann nicht mehr — sie sind nur noch für Sonderfälle da, etwa wenn du nicht kontrollieren kannst, wie eine Datei gespeichert wird.

Die Reihenfolge ist wichtig: Die charset-Zeile muss ganz oben im <head> stehen, innerhalb der ersten 1024 Zeichen der Datei. Steht sie weiter unten, hat der Browser schon angefangen zu raten. Deshalb ist sie im Grundgerüst die erste Zeile nach <head> — siehe HTML-Datei erstellen.

Die Umlaute als Ersatzschreibweise

Zeichen	Schreibweise	Zeichen	Schreibweise
ä	`ä`	Ä	`Ä`
ö	`ö`	Ö	`Ö`
ü	`ü`	Ü	`Ü`
ß	`ß`	€	`€`

Das Muster ist erkennbar: Grundbuchstabe plus uml für den Umlaut. Groß- und Kleinschreibung des ersten Buchstabens entscheidet.

Leerzeichen: warum zehn wie eines aussehen

HTML fasst mehrere Leerzeichen, Tabulatoren und Zeilenumbrüche im Quelltext zu einem einzigen Leerzeichen zusammen. Das ist Absicht — so kannst du Code einrücken, ohne die Darstellung zu verändern.

Wenn du wirklich mehrere brauchst, nimmst du das geschützte Leerzeichen:

Preis:&nbsp;&nbsp;49&nbsp;€

  steht für „non-breaking space": Der Browser fasst es nicht zusammen und bricht daran nicht um.

Wofür ` ` wirklich gedacht ist

Nicht für Abstände — sondern dafür, Zusammengehörendes zusammenzuhalten. Diese vier Fälle sind der eigentliche Zweck:

Fall	So schreibst du es
Zahl und Einheit	`49 €` · `5 km`
Abkürzungen	`z. B.` · `u. a.`
Titel und Name	`Dr. Müller`
Datum	`12. September`

Ohne das geschützte Leerzeichen kann „49 €" so umbrechen, dass die Zahl am Zeilenende steht und das Euro-Zeichen allein in der nächsten Zeile — der klassische Schönheitsfehler auf Preisseiten.

Nicht für Layout missbrauchen. Wer mit fünf   etwas einrückt, bekommt auf jedem Bildschirm ein anderes Ergebnis. Einrückungen und Abstände gehören in margin und padding — siehe Zeilenumbruch und Abstände.

Die Sonderzeichen, die im Alltag vorkommen

Zeichen	Schreibweise	Name
©	`©`	Copyright
®	`®`	eingetragene Marke
™	`™`	Marke
–	`–`	Halbgeviertstrich (Gedankenstrich)
—	`—`	Geviertstrich
„ "	`&bdquo;` `“`	deutsche Anführungszeichen
…	`…`	Auslassungspunkte
→	`→`	Pfeil rechts
✓	`&check;`	Häkchen
×	`×`	Multiplikation
°	`°`	Grad
	``	bedingter Trennstrich — trennt nur, wenn nötig

Zum Gedankenstrich: Im Deutschen ist der Gedankenstrich der Halbgeviertstrich – mit Leerzeichen davor und danach — nicht der Bindestrich. Das ist der häufigste Typografie-Fehler auf deutschen Seiten und der Unterschied zwischen „sieht selbstgemacht aus" und „sieht gesetzt aus".

Emoji brauchen keine Schreibweise. Bei UTF-8 kannst du 🎉 direkt in den Text tippen. Bedenke nur: Auf jedem Betriebssystem sehen sie anders aus, und Screenreader lesen den Namen vor („Partyhütchen"). Für Bedeutungstragendes also lieber Text.

Das Zeichen ist da, erscheint aber falsch — die vier Ursachen

Die charset-Zeile fehlt oder steht nicht weit genug oben. Häufigster Fall bei Zeichensalat.
Die Datei ist nicht als UTF-8 gespeichert. Manche Editoren speichern weiterhin in einer älteren Kodierung. Im Editor erneut als UTF-8 speichern.
Das Semikolon fehlt. &auml ohne Semikolon ist unvollständig — es erscheint dann der rohe Text.
Doppelt umgewandelt. Steht &auml; im Code, erscheint ä als Text. Passiert, wenn Inhalt durch zwei Systeme gelaufen ist.

Und ohne Code?

Bei diesem Thema hat der Klick-Weg einen echten Vorteil: In einem Klick-Editor tippst du ä, ö, ü, € oder „ " einfach ein. Um Ersatzschreibweisen und Kodierung musst du dich nicht kümmern — das Tool schreibt beim Herunterladen die richtige Form in die Datei.

Im Code

Auf die charset-Zeile achten, die Datei als UTF-8 speichern, die vier kritischen Zeichen maskieren, an Semikolons denken.

Per Klick

PageFix ist ein deutschsprachiger Web-Editor für KI-gebaute HTML-Seiten: Text anklicken, Zeichen tippen, fertige Datei herunterladen. Kodierung und Maskierung passieren im Hintergrund.

Einmalzahlung von 49 €, kein Abo, Updates inklusive.

Häufige Fragen

Muss ich Umlaute in HTML als ä schreiben?

Nein, nicht mehr. Mit <meta charset="UTF-8"> im Kopf der Datei und der Datei selbst als UTF-8 gespeichert kannst du ä, ö, ü, ß und € direkt tippen. Die Ersatzschreibweisen sind nur noch für Sonderfälle nötig, etwa wenn du die Speicherform nicht kontrollieren kannst.

Warum werden meine Umlaute zu Zeichensalat?

Weil Datei und Kopfzeile nicht zusammenpassen. Ergänze <meta charset="UTF-8"> ganz oben im <head> — innerhalb der ersten 1024 Zeichen — und speichere die Datei im Editor erneut als UTF-8. Steht die Zeile weiter unten, hat der Browser schon angefangen zu raten.

Welche Zeichen muss ich in HTML unbedingt ersetzen?

Vier: < als <, > als >, & als & und " als ". Diese Zeichen haben in HTML eine eigene Bedeutung. Besonders in Links ist das kaufmännische Und kritisch, weil es dort Parameter trennt.

Wann brauche ich  ?

Wenn Zusammengehörendes nicht getrennt werden soll: zwischen Zahl und Einheit wie 49 €, in Abkürzungen wie z. B., zwischen Titel und Name oder im Datum. Für Abstände und Einrückungen ist es nicht gedacht — dafür gibt es margin und padding.

Warum erscheint mein Sonderzeichen als roher Text?

Meist fehlt das Semikolon am Ende — &auml statt ä ist unvollständig. Zweite Ursache: doppelte Umwandlung. Steht &auml; im Code, erscheint ä als lesbarer Text; das passiert, wenn Inhalt durch zwei Systeme gelaufen ist.

Welcher Gedankenstrich ist im Deutschen richtig?

Der Halbgeviertstrich – mit Leerzeichen davor und danach, nicht der Bindestrich. Das ist der häufigste Typografie-Fehler auf deutschen Seiten.

Jetzt starten

Erst ausprobieren? Öffne die Demo — der echte Editor, ohne Konto.

Zuletzt aktualisiert: 12. September 2026

← Zurück zur Startseite und PageFix ansehen