HTML Umlaute und Sonderzeichen

Jan Hoffmann

Hier findet ihr die wichtigsten HTML Umlaute und Sonderzeichen im Überblick. Außerdem erfahrt ihr, wie ihr Umlaute und Sonderzeichen in HTML automatisch umwandeln lassen könnt.

HTML Umlaute und Sonderzeichen

Weil man im normalen HTML-Quelltext ursprünglich nicht die Zeichenkodierung festlegen konnte, musste man Umlaute mittels sogenannter benannter Zeichen darstellen. Diese bestehen aus einem einleitenden &, einem symbolischen Namen und einem Semikolon.

Heute ist es zwar möglich den Zeichensatz per Meta-Anweisung übergreifend für das gesamte HTML-Dokument festzulegen, wodurch die Darstellung der Umlaute mittels benannter Zeichen somit nicht mehr nötig ist, oftmals werden die Umlaute aber noch benötigt. Ebenfalls ist es möglich, um Umlaute und Sonderzeichen dazustellen, indem man die dezimale Nummer mit &# und ; bzw. die hexadezimale Nummer mit &#x und ; umschließt.

Wer die Umlaute und Sonderzeichen in HTML nicht als benannte Zeichen oder Unicode darstellen möchte, kann sein HTML-Dokument ganz einfach entsprechend per Meta-Anweisung kodieren. Dadurch werden Umlaute und Sonderzeichen direkt in den HTML-Code gesetzt und müssen nicht manuell bzw. händisch umgewandelt werden. Außerdem wird der Quellcode dadurch besser lesbar.

Dazu müsst ihr in den <head>-Bereich eurer HTML-Datei lediglich folgenden Code einbauen:

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

Wer sein HTML-Dokument bereits als HTML5 deklariert hat, kann folgende Zeichenkodierung im Head-Bereich einbauen:

<meta charset="utf-8" />

HTML Umlaute

Umlaute für spezielle Buchstaben im deutschen Alphabet sind sprachgeschichtlich allesamt i-Umlaute: ä, ö, ü und der Diphthong äu. Der Name Umlaut rührt von Jacob Grimm her, der auch den Ausdruck Brechung für den a-Umlaut erfand.

Allgemein gilt, dass das benannte Zeichen eines Vokals mit zwei Punkten darüber in HTML nach folgendem Schema gebildet wird: & gefolgt vom Vokal gefolgt von uml;. In der folgenden Tabelle haben wir einmal die wichtigsten Umlaute aufgelistet.

Zeichen Beschreibung HTML Code Unicode in HTML
Ä A Umlaut &Auml; &#196;
ä a Umlaut &auml; &#228;
Ë E Umlaut &Euml; &#203;
ë e Umlaut &euml; &#235;
Ï I Umlaut &Iuml; &#207;
ï i Umlaut &iuml; &#239;
Ö O Umlaut &Ouml; &#214;
ö o Umlaut &ouml; &#246;
Ü U Umlaut &Uuml; &#220;
ü u Umlaut &uuml; &#252;
Ÿ Y Umlaut &Yuml; &#195;
ÿ y Umlaut &yuml; &#255;

HTML Sonderzeichen

Ein Sonderzeichen ist ein Schriftzeichen, das weder ein Buchstabe noch eine Ziffer ist. Zu den Sonderzeichen gehören beispielsweise Satzzeichen, Klammern, Währungszeichen und mathematische Symbole.

In HTML-Dokumenten können Sonderzeichen, ähnlich wie bei den Umlauten, durch sogenannte Zeichen-Entität-Referenzen dargestellt werden. Sie beginnen mit einem Und-Zeichen (&) und enden mit einem Semikolon (;), dazwischen befindet sich eine Zeichenfolge, welche das Zeichen bestimmt. In der folgenden Tabelle haben wir einmal die wichtigsten Sonderzeichen aufgelistet.

Zeichen Beschreibung HTML Code
Unicode in HTML
Erzwungenes Leerzeichen &nbsp; &#160;
& Und-Zeichen, Ampersand &amp; &#38;
ß scharfes S &szlig; &#223;
© Copyright-Zeichen &copy; &#169;
® Registriermarke-Zeichen &reg; &#174;
Trademark &trade; &#153;
« angewinkelte Anf.zeichen links &laquo; &#171;
» angewinkelte Anf.zeichen rechts &raquo; &#187;
Bullet (größerer, dickerer Punkt) &bull; &#149;
· Mittelpunkt &middot; &#183;
¨ Pünktchen oben &uml; &#168;
Ellipsis, Auslassungspunkte &hellip; &#133;
¡ umgekehrtes Ausrufezeichen &iexcl; &#161;
¿ umgekehrtes Fragezeichen &iquest; &#191;
¦ durchbrochener Strich &brvbar; &#166;
§ Paragraph-Zeichen &sect; &#167;
º Ordinal-Zeichen männlich &ordm; &#186;
ª Ordinal-Zeichen weiblich &ordf; &#170;
­ kurzer Trennstrich &shy; &#173;
¯ Überstrich &macr; &#175;
Absatz-Zeichen &para; &#182;
einfaches Kreuz (Dagger) &dagger; &#134;
doppeltes Kreuz &Dagger; &#135;
° Grad-Zeichen &deg; &#176;

HTML Währungszeichen

Zeichen Beschreibung HTML Code
Unicode in HTML
Euro-Zeichen &euro; &#8364;
¢ Cent-Zeichen &cent; &#162;
£ Pfund-Zeichen &pound; &#163;
¤ Währungs-Zeichen &curren; &#164;
¥ Yen-Zeichen &yen; &#165;
ƒ Florin, Gulden &fnof; &#131;

Zu den Kommentaren

Kommentare zu diesem Artikel

Neue Artikel von GIGA SOFTWARE

  • Video DownloadHelper für Firefox

    Video DownloadHelper für Firefox

    Mit Video DownloadHelper könnt ihr Mediendateien aller Art von Webseiten bequem herunterladen, wobei das Add-on nicht auf bestimmte Videoportale beschränkt ist, sondern von beliebigen Webseiten Videos herunterlädt.
    Marvin Basse 1
  • Tor Browser Bundle

    Tor Browser Bundle

    Das Torprojekt ist eines der ältesten Netzwerke für anonymes Surfen und bietet bis heute ein besonders hohes Anonymisierungsniveau. Mit dem Tor Browser Bundle Download bekommt ihr den Standardbrowser zum Nutzen des Tor-Netzwerks.
    Jonas Wekenborg 3
* Werbung