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.

HTML-Umlaute und HTML-Sonderzeichen

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

ZeichenNameHTML-NameUnicode
ÄA UmlautÄÄ
äa Umlautää
ËE UmlautËË
ëe Umlautëë
ÏI UmlautÏÏ
ïi Umlautïï
ÖO UmlautÖÖ
öo Umlautöö
ÜU UmlautÜÜ
üu Umlautüü
ßEszettßß
ÀA mit Accent Grave (Gravis)ÀÀ
àa mit Accent Grave (Gravis)àà
ÁA mit Accent Aigu (Akut)ÁÁ
áa mit Accent Aigu (Akut)áá
ÂA mit ZirkumflexÂÂ
âa mit ZirkumflexÂâ
ÇC mit CedilleÇÇ
çc mit Cedilleçç
ÈE mit Accent Grave (Gravis)ÈÈ
èe mit Accent Grave (Gravis)èè
ÉE mit Accent Aigu (Akut)ÉÉ
ée mit Accent Aigu (Akut)éé
ÊE mit ZirkumflexÊÊ
êe mit Zirkumflexêê
ÑN mit TildeÑÑ
ñn mit Tildeññ
ÒO mit accent grave (Gravis)ÒÒ
òo mit accent grave (Gravis)òò
ÓO mit accent aigu (Akut)ÓÓ
óo mit accent aigu (Akut)óó
ÔO mit ZirkumflexÔÔ
ôo mit Zirkumflexôô
õo mit Tildeõõ
ŸY UmlautŸÃ
ÿy Umlautÿÿ

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 &bdquo; 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:

ZeichenNameHTML-NameUnicode
Doppelte Anführungszeichen links oben&ldquo;&#8220;
Doppelte Anführungszeichen rechts oben&rdquo;&#8221;
Doppelte Anführungszeichen links unten&bdquo;&#8222;
«Guillemets links&laquo;&#171;
»Guillemets rechts&raquo;&#187;
Einfache Guillemets links&lsaquo;&#8249;
Einfache Guillemets rechts&rsaquo;&#8250;
Einfaches Anführungszeichen links oben&lsquo;&#8216;
Einfaches Anführungszeichen rechts oben&rsquo;&#8217;
Einfaches Anführungszeichen links unten&sbquo;&#8218;
Quote (oder auch Zoll-Zeichen)&quot;&#34;

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:

ZeichenNameHTML-NameUnicode
Pfeil nach links&larr;&#8592;
Pfeil nach oben&uarr;&#8593;
Pfeil nach rechts&rarr;&#8594;
Pfeil nach unten&darr;&#8595;
Pfeil nach links und rechts&harr;&#8596;
Pfeil nach oben und unten&varr;&#8597;
Doppelter Pfeil nach links&lArr;&#8656;
Doppelter Pfeil nach oben&uArr;&#8657;
Doppelter Pfeil nach rechts&rArr;&#8658;
Doppelter Pfeil nach unten&dArr;&#8659;
Doppelter Pfeil nach links und rechts&hArr;&#8660;
Doppelter Pfeil nach oben und unten&vArr;&#8661;
Langer Pfeil nach links&xlarr;&#10229;
Langer Pfeil nach rechts&xrarr;&#10230;
Langer Pfeil nach links und rechts&xharr;&#10231;
Langer doppelter Pfeil nach links&xlArr;&#10232;
Langer doppelter Pfeil nach rechts&xrArr;&#10233;
Langer doppelter Pfeil nach links und rechts&xhArr;&#10234;
Langer Pfeil nach rechts mit Strich&xmap;&#10236;
Gestrichelter Pfeil nach links&lbarr;&#10508;
Gestrichelter Pfeil nach rechts&rbarr;&#10509;
Doppelt gestrichelter Pfeil nach links&lBarr;&#10510;
Doppelt gestrichelter Pfeil nach rechts&rBarr;&#10511;
Durchgehend gestrichelter Pfeil nach rechts&DDotrahd;&#10513;
Gebogener Pfeil nach unten&cudarrr;&#10549;
Gebogener Pfeil nach links&ldca;&#10550;
Gebogener Pfeil nach rechts&rdca;&#10551;
Rotierter, gebogener Pfeil nach links&cudarrl;&#10552;
Rotierter, gebogener Pfeil nach rechts&larrpl;&#10553;

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

ZeichenNameHTML-NameUnicode
&Und-Zeichen&amp;&#38;
©Copyright-Zeichen&copy;&#169;
®Registriermarke&reg;&#174;
Trademark-Zeichen&trade;&#153;
§Paragraphen-Zeichen&sect;&#167;
Fetter Mittelpunkt&bull;&#149;
·Mittelpunkt&middot;&#183;
Gedankenstrich (Halbgeviertstrich)&ndash;&#8211;
Gedankenstrich (Geviertstrich)&mdash;&#8212;
Erzwungenes Leerzeichen&nbsp;&#160;
Auslassungspunkte&hellip;&#133;
¨Punkte oben&uml;&#168;
°Grad-Zeichen&deg;&#176;
¡Umgekehrtes Ausrufezeichen&iexcl;&#161;
¿Umgekehrtes Fragezeichen&iquest;&#191;
¦Durchbrochener Strich&brvbar;&#166;
<Öffnende spitze Klammer&lt;&#60;
>Schließende spitze Klammer&gt;&#62;
Euro-Zeichen&euro;&#8364;
£Pfund-Zeichen&pound;&#163;
$Dollar-Zeichen&dollar;&#36;
¼Viertel&frac14;&#188;
½Halb&frac12;&#189;
¾Dreiviertel&frac34;&#190;
Haken&check;&#10003;
Kreuz&cross;&#10007;
Note&sung;&#9834;
Herz&hearts;&#9829;
Stern&bigstar;&#9733;
Telefon&phone;&#9742;
5 4

Kommentieren

Ich akzeptiere die Datenschutzerklärung.