1. Designer in Action
2. Tipps & Tricks
3. Web Development
4. HTML Umlaute und Sonderzeichen darstellen

HTML Umlaute und Sonderzeichen darstellen

Bei Projekten kommt es häufig vor, dass man HTML-Umlaute und HTML-Sonderzeichen schreiben möchte. Wenn UTF-8 gerade nicht geht oder man lieber ganz sicher gehen möchte, dass die HTML-Umlaute bzw. HTML-Sonderzeichen richtig dargestellt werden, helfen die nachfolgenden Übersichten weiter. Die Listen zeigen die wichtigsten Sonderzeichen für Kreative – mit Schwerpunkt auf Typografie.

Natürlich ist die Auflistung der HTML-Umlaute und HTML-Sonderzeichen nicht ganz vollständig. Daher kann es sein, dass einige der HTML-Sonderzeichen (Entities) und Symbole nicht dargestellt sind. Was man allerdings täglich in der Praxis aus Sicht von Kreativen so braucht, ist auf jeden Fall mit aufgeführt. Neben der HTML-Schreibweise findet man auch noch zusätzlich die Kürzel für die entsprechenden Unicode-Zeichen.

Die wichtigsten HTML-Umlaute für den deutschsprachigen Raum

Deutsche HTML-Umlaute merken mit Eselsbrücke

Um sich die HTML-Umlaute Ä, ä, Ö, ö, Ü und ü besser merken zu können, kann man sich eine kleine Eselsbrücke schaffen. Alle Sonderzeichen fangen schon mal mit einem & an. Check! Als nächstes kommt der Buchstabe, den man schreiben möchte. Dabei einfach die Punkte wegdenken und die Groß- und Kleinschreibung beachten. In diesem Beispiel nehmen wir ein ä. Jetzt folgt nur noch die Abkürzung für Umlaute uml. Das ; am Ende nicht vergessen – fertig!

Hier noch einmal der Weg zum Merken der HTML-Umlaute:

& + Buchstabe ohne Punkte + uml;

HTML-Umlaute mit UTF-8 darstellen

Wenn man Umlaute auf einer Website darstellen möchte, so sollte bereits im Kopf der Seiten eine entsprechende Kodierung angegeben werden. Ist diese vorhanden, kann man die gewünschten HTML-Zeichen bzw. HTML-Umlaute direkt ohne zusätzliche Konvertierungen schreiben.

Sofern die Sonderzeichen in HTML bzw. UTF-8 falsch dargestellt werden, liegt es häufig an dieser nicht vorhandenen Zeichenkodierung im Header der Seiten. Um UTF-8 auf HTML-Seiten zu aktivieren, geht man wie folgt vor:

1. Den Kopfbereich der HTML-Seite ausfindig machen (Bereich zwischen den head-Tags)
2. Die folgende Zeile möglichst weit oben im Header einfügen:

   <meta http-equiv="content-type" content="text/html; charset=utf-8">

3. HTML-Seite speichern

Mit dieser Ergänzung müssen die HTML-Sonderzeichen bzw. HTML-Umlaute nicht mehr von Hand in Zeichen wie beispielsweise „ umgewandelt werden. Wer trotzdem auf Nummer sicher gehen möchte, kann dieses jedoch ebenfalls tun. Die Sonderzeichen werden unter UTF-8 bei zusätzlicher Zeichenkodierung ebenfalls korrekt dargestellt.

Umlaute können jedoch auch in MySQL-Datenbanken zu Problemen führen. Werden diese falsch angezeigt, empfiehlt es sich, die Tabelle per Servereinstellungen ebenfalls auf UTF8 umzustellen. Aufgrund eines Fehlers in früheren MySQL-Versionen kann es ebenfalls zu falschen Darstellungen kommen. In diesem Fall sollte man es dann mal mit „utf8mb4“ probieren.

Neben den HTML-Umlauten gibt es auch noch einige typografische Sonderzeichen, die zu berücksichtigen sind. Daher folgt hier eine Übersicht mit den wichtigsten Zeichen für den deutschsprachigen Raum.

Typografische HTML-Anführungszeichen

Die wichtigsten typografischen HTML-Anführungszeichen findet man hier in der Übersicht:

HTML-Sonderzeichen für Pfeile

Code für Pfeil nach links, rechts, oben oder unten gesucht? Eine Auswahl mit Sonderzeichen für HTML-Pfeile findet man in dieser Tabelle:

Neben den Anführungszeichen und Pfeilen, gibt es auch noch eine Reihe weiterer Sonderzeichen, die man oft in HTML verwendet. Die häufigsten Zeichen für den alltäglichen Gebrauch gibt es hier:

Weitere typografisch wichtige HTML-Sonderzeichen