Solange man sich in HTML an die Buchstaben des englischen Alphabets hält, kann man alles einfach schreiben, aber schon ein Ä oder Ö muss extra codiert werden, damit es überall richtig dargestellt wird. GIGA nennt euch die Codes für die wichtigsten HTML-Sonderzeichen und die deutschen Umlaute und erklären euch, nach welchem Prinzip sie aufgebaut sind.
Wenn die HTML-Seite richtig kodiert ist, könnt ihr Sonderzeichen direkt mit der Tastatur einfügen:
HTML Umlaute
Einer der Gebrüder Grimm, der ältere Jacob Grimm, erfand den Begriff „Umlaut“ für jene Zeichen, die sich aus zwei Lauten zusammensetzen und im deutschen mit einem querliegenden Doppelpunkt über dem Buchstaben gekennzeichnet werden.
Hier seht ihr eine Liste aller deutschen und international gebräuchlichen Umlaute sowie deren Kodierung als HTML-Umlaut und in Unicode:
Zeichen | Beschreibung | HTML Code | Unicode in HTML |
Ä | A Umlaut | Ä | Ä |
ä | a Umlaut | ä | ä |
Ë | E Umlaut | Ë | Ë |
ë | e Umlaut | ë | ë |
Ï | I Umlaut | Ï | Ï |
ï | i Umlaut | ï | ï |
Ö | O Umlaut | Ö | Ö |
ö | o Umlaut | ö | ö |
Ü | U Umlaut | Ü | Ü |
ü | u Umlaut | ü | ü |
Ÿ | Y Umlaut | Ÿ | Ã |
ÿ | y Umlaut | ÿ | ÿ |
HTML Sonderzeichen
Sonderzeichen in HTML-Code zu schreiben, kann schon deswegen praktisch sein, weil viele von Ihnen ohnehin nicht auf der Tastatur zu finden sind.
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 |
|
| |
& | Und-Zeichen, Ampersand | & | & |
ß | scharfes S | ß | ß |
© | Copyright-Zeichen | © | © |
® | Registriermarke-Zeichen | ® | ® |
™ | Trademark | ™ | ™ |
« | angewinkelte Anf.zeichen links | « | « |
» | angewinkelte Anf.zeichen rechts | » | » |
• | Bullet (größerer, dickerer Punkt) | • | • |
· | Mittelpunkt | · | · |
¨ | Pünktchen oben | ¨ | ¨ |
… | Ellipsis, Auslassungspunkte | … | … |
¡ | umgekehrtes Ausrufezeichen | ¡ | ¡ |
¿ | umgekehrtes Fragezeichen | ¿ | ¿ |
¦ | durchbrochener Strich | ¦ | ¦ |
§ | Paragraph-Zeichen | § | § |
º | Ordinal-Zeichen männlich | º | º |
ª | Ordinal-Zeichen weiblich | ª | ª |
| kurzer Trennstrich | | |
¯ | Überstrich | ¯ | ¯ |
¶ | Absatz-Zeichen | ¶ | ¶ |
† | einfaches Kreuz (Dagger) | † | † |
‡ | doppeltes Kreuz | ‡ | ‡ |
° | Grad-Zeichen | ° | ° |
HTML Währungszeichen
Zeichen | Beschreibung | HTML Code | Unicode in HTML |
€ | Euro-Zeichen | € | € |
¢ | Cent-Zeichen | ¢ | ¢ |
£ | Pfund-Zeichen | £ | £ |
¤ | Währungs-Zeichen | ¤ | ¤ |
¥ | Yen-Zeichen | ¥ | ¥ |
ƒ | Florin, Gulden | ƒ | ƒ |
Aufbau der „HTML-Entities“
Man nennt die speziellen Zeichen, die für eine übergreifende Kompatibilität gesondert kodiert werden müssen, auch „HTML-Entities“. Wer sich fragt, warum so etwas überhaupt nötig ist, der sollte sich Folgendes klarmachen:
- Die Standardzeichensätze der meisten Länder enthalten nur die dort gebräuchlichen Zeichen und können die anderen nicht richtig darstellen.
- Schon zwischen der Zeichenkodierung von Windows, Apple und Android gibt es Unterschiede, sodass man im Problemfall etwa einen Satz auf dem Mac schreibt und das Ergebnis in Windows fehlerhaft ist.
Aus diesem Grund wurde als systemübergreifende Vereinbarung das System der eindeutigen Zeichenkodierung geschaffen.
Es gelten folgende Gesetzmäßigkeiten bei den HTML-Umlauten und -Sonderzeichen:
- Die Zeichen können entweder im HTML-Code oder in Unicode (Ziffern-Code) geschrieben werden.
- In beiden Fällen beginnt die Kodierung immer mit einem kaufmännischen Und (&) und endet mit einem Semikolon (;).
- Dazwischen steht entweder ein Kurzwort (HTML) oder eine Raute, gefolgt von einer dreistelligen Zahl (Unicode).
- Die Kurzworte entstammen der englischen Sprache und sind oft Abkürzungen, wie etwa „copy“ für das Copyright-Zeichen oder „auml“ (a Umlaut) für das kleine ä.
- Mit „Umlauten“ sind jene Zeichen genannt, die oben einen Doppelpunkt haben, wie etwa Ä, Ö und Ü. Sie setzen sich zusammen aus dem jeweiligen kleinen oder großen Buchstaben (etwa a oder A) sowie dem Kürzel „uml“ für „Umlaut“. Das große Ä schreibt man also Ä und das kleine ä als ä.
Der Hauptgrund für diese umständliche Schreibweise liegt darin, dass es in den Anfangszeiten von HTML noch keine eindeutige Zeichenkodierung festlegen konnte. Man konnte also nicht sagen: „Jedes Zeichen in dieser Seite wird im Unicode „UTF-8“ dargestellt“. Darum war es nötig, bei solchen nicht international gebräuchlichen Zeichen eine eindeutige Kodierung zu verwenden.
Heute schreibt man das in den Head-Bereich der HTML-Seite:
<meta http-equiv=“content-type“ content=“text/html; charset=UTF-8″>
Bei HTML5 schreibt man stattdessen:
<meta charset=“utf-8″ />