Hilfe, meine Umlaute sind kaputt!

So bändigst du Zeichensätze in HTML

Wer kennt es nicht: Du öffnest deine Website und statt „Über uns“ liest du plötzlich „Ãœber uns“. Keine Sorge, deine Seite ist nicht gehackt – es liegt lediglich an der fehlenden oder falschen Kommunikation zwischen deiner Datei und dem Browser über den verwendeten Zeichensatz. 

1. Die Basis: Den Zeichensatz (Charset) definieren 

Damit der Browser weiß, wie er die Bits und Bytes deiner Datei in lesbare Buchstaben übersetzt, musst du ihm den Weg weisen. Heute ist UTF-8 der absolute Standard. Es deckt nahezu alle Zeichen der Welt ab – inklusive unserer Umlaute. 

Um UTF-8 zu aktivieren, fügst du diesen Meta-Tag im Header deiner Website ein: 

<meta charset="utf-8">

Wichtig: Es reicht nicht, nur den Tag zu setzen. Du musst deine Datei auch im Editor (z.B. VS Code oder Notepad++) explizit als „UTF-8“ speichern. 

2. Was sind HTML-Entities?

Manchmal kannst oder willst du dich nicht auf die UTF-8-Kodierung verlassen – zum Beispiel in alten Systemen oder wenn du sichergehen willst, dass ein Zeichen absolut immer korrekt interpretiert wird. Hier kommen Entities ins Spiel. 

Entities sind Platzhalter, die mit einem Und-Zeichen (&) beginnen und mit einem Semikolon (;) enden. Der Browser erkennt diese Codes und ersetzt sie bei der Darstellung durch das richtige Zeichen. 

3. Die deutschen Umlaute als Entities 

Hier ist ein Spickzettel für die Entities der deutschen Umlaute:

Und im nächsten Beitrag werd ich ein paar Worte über deutsche Umlaute in CSS verlieren.