HTML-Zeichen-Codes

Weltweit eindeutige Zeichen für ein globales Medium

In Webseiten hat die Kompatibität der Zeichen noch mehr Bedeutung als in anderen Dokumenten: Der Text wird evtl. auf PC und Browsern anderer Betriebssysteme, allenfalls sogar in einem anderen Sprachraum konsumiert. Auf dieser Seite finden sie Hinweise, wie sie die Texte ihrer Webseiten so anlegen, dass sie weltweit so aussehen wie von Ihnen gewünscht.
Zeichencodes PC-Codes für Buchstaben, Ziffern und Sonderzeichen
Codes in HTML Die Rolle von Webserver, Router, PC, Browser
Codes in XML Nur 5 maskierte Zeichen
Latin-1 Der (veraltete) Zeichencode ISO-8859-1
Code-Zahl Angabe eines Zeichens durch seine Unicode-Zahl
Namen Angabe eines Zeichens durch seinen HTML-Namen
Schrift-Familie Einfluss der Schrift-Familie auf die Darstellung
Formulare Eingabe von Unicode-Zeichen in HTML-Formulare, z.B. für Datenbanken
HTML-Codierung Umwandlung von Unicode-Zeichen in HTML-Quelltext
Links Ausgewählte Links zum Thema 'Zeichencodes in HTML'

Zeichen-Codierung in HTML

HTML kennt keine Standard-Codierung für Zeichen:
Der Zeichensatz wird frei vereinbart.
Vorteil: Große Flexibilität.

Nachteil: Die Verwaltung, Codierung und Decodierung der Codes erfordert zusätzlichen Aufwand.

Web-Server

vergleichen (match) die Anfangs-Bytes angeforderter Dokumente mit einer kleinen Datenbank. Meist können sie herauszufinden, welcher Zeichencode verwendet wurde. Sie senden die Code-Information im HTTP-Header an den Client (Browser). Dieser kennt daher den Zeichensatz jeder Webseite, noch bevor deren → HTML-Quellcode eintrifft.

Darüber hinaus verfügen gängige → Webserver-Programme über weitere Möglichkeiten zur Analyse und Gestaltung der Zeichensatz - Information
Webserver und andere beteiligte Agenten (Proxy-Server...) können bei Bedarf ( Accept-Charset des Browsers) die Codierung ändern, d.h. den Original-Code einer Webseite in andere Codes übersetzen.

Programmierung:

In jedem → HTML-Dokument sollte man den verwendeten Zeichensatz ausdrücklich bekannt geben.
Rechts eine typische Quelltext-Zeile, welche die → MIME-Type text/html und den empfohlenen Standard Zeichensatz → UTF-8 festlegt:
Alle folgende Daten werden vom Browser als Zeichen des vereinbarten Codes interpretiert.
Unabhängig vom definierten Zeichensatz (charset) sollten sie im Quelltext nur die 127 → ASCII-Zeichen verwenden, und für alle anderen Zeichen deren HTML→ Maskierung. So können sie für die Ausgabe sämtliche Unicode-Zeichen verwenden, sind jedoch unabhängig von allfälligen Browser-Problemen bei der Interpretation des Quelltextes.
HTML <meta>-Element mit Festlegung des UTF-8 Zeichensatzes:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
In vielen Webseiten wird noch der Zeichensatz → ISO-8859-1 verwendet: Das ist veraltet, jedoch für Webseiten mit lokaler Bedeutung zulässig.

Beispiele für Zeichencodes: ISO-8859-1 (Latin-1), ISO-8859-5 (Cyrillisch), SHIFT-JIS oder EUC-JP (Japanisch), UTF-8, UTF-16, . .
Die IANA legt zulässige Codes fest und führt Listen der Daten.

Browser:

Die Interpretation sollte den Angaben (MIME-Type) folgen, welche der Webserver im → HTTP-Header sendet.
Der MSIE Browser kümmert sich leider nicht darum, sondern richtet sich nach der Datei-Endung, gelegentlich auch nach dem Inhalt. Das macht die Entwicklung unnötig kompliziert und teuer. MSIE lässt sich zwar (mit Extras | Internetoptionen) auch richtig einstellen, darauf können sich EntwicklerInnen jedoch nicht verlassen.

Falls der verwendete Zeichensatz nicht bekannt ist, nehmen die meisten Browser → ASCII, → UTF-8 oder sogar → ISO-8859-1 an. Darauf kann man sich keinesfalls verlassen !
Sie können den Zeichensatz jeder geöffneten Webseite mit dem Browser anzeigen und/oder ändern, z.B.
mit Firefox: Menü   Ansicht | Zeichencodierung
mit MSIE: Menü   Ansicht | Codierung (View | Encoding)
mit Opera: Menü   Ansicht | Zeichencodierung
 

Zeichensatz ISO-8859-1 (Latin-1)

Viele Webseiten verwenden noch immer diesen Zeichensatz. Er umfasst 8 Bit und definiert damit 256 Zeichen. Davon sollten jedoch nur die ersten 128 verwendet werden. Von diesen sind 33 nicht darstellbare Steuerzeichen. Für die Programmierung (Quelltext) bleiben daher 95 Zeichen. Einige Regeln sorgen dafür, dass weit mehr Zeichen tatsächlich angezeigt werden können - Im Idealfall alle von Menschen verwendeten Zeichen.

Steuerzeichen

Die ersten 32 Zeichen (0..31, #00..#1F) und das Lösch-Zeichen (127. #7F DEL) sind nicht darstellbare Steuerzeichen.
NULL (Code 0, nicht mit Ziffer 0 verwechseln) wird nicht angezeigt und kann bei Verwendung Probleme verursachen. Ohne zwingenden Grund niemals verwenden !
Die Zeichen 1..8 sowie 14..31 sollten ebenfalls nicht verwendet werden. Sie werden auf der Webseite meist mit Platzhalter-Symbolen angezeigt.
Die Zeichen 9..13 (#09..#0D - HT,LF,VT,FF,CR) werden von HTML als 'blank space' behandelt ( → Leerzeichen)
Tabulator HT und Zeilen-Umbruch LF dienen zur Formatierung des Quelltextes.

HTML-Quellcode für einen Zeilen-Umbruch (neue Zeile):
Das Zeichen LF bewirkt einen Umbruch im Quelltext, jedoch nicht auf der Webseite.
Das HTML-Element <br /> erzeugt einen Umbruch auf der Webseite, jedoch nicht im Quelltext:
Das Steuerzeichen LF
und ein <br /> Break
Live-Ergebnis:
Das Steuerzeichen LF und ein
Break

Leerzeichen

Das Leerzeichen 32. (#20, space, blank) wird als 'blank space' behandelt, ebenso wie die Zeichen 9..13 (↑ Steuerzeichen). Jede Kombination dieser Zeichen wird ebenfalls als 'blank space' behandelt.
Ein geschütztes (unbedingtes) Leerzeichen erhält man mit &nbsp; oder &#xA0; Jede Verwendung erzeugt auch bei Aneinanderreihung genau ein Leerzeichen.
Blank space:
Ein Zeichen ergibt einen Zeichen-Abstand, alle weiteren werden bei der Ausgabe ignoriert.

HTML-Quelltext-Beispiel:
Das     ist&nbsp;ein &nbsp; &nbsp; Test
Live HTML-Ausgabe:
Das ist ein     Test

ASCII-Bereich

Die Zeichen 33..126 (#21..#7E) werden direkt ausgegeben.
Eine Ausnahme stellen die 4 maskierten Zeichen ࢑ dar.

Beispiel: Ein Zeichen A im HTML-Quelltext wird als A auf der Webseite angezeigt.

Maskierte Zeichen:

Einige Zeichen haben in HTML eine besondere Bedeutung für die HTML-Programmierung. Um sie dennoch darzustellen, werden an Stelle der Zeichen die Zeichen-Namen verwendet.
Details zum Thema Maskierung.

Beispiel: Der HTML-Code &lt; erzeugt auf einer Webseite das Zeichen <
DecHexNameChr
34.#22&quot;"
38.#26&amp;&
60.#3C&lt;<
62.#3E&gt;>

Code > 127

Zeichen mit Codes > 127. (#7F) sollten im HTML-Quelltext nicht verwendet werden.

Zur Darstellung verwenden sie maskierte Code-Zahlen oder Zeichen-Namen.

Maskierte Zeichen-Codes in HTML

Wie die meisten anderen Programmiersprachen verfügt auch HTML über die Möglichkeit, den Code eines anzuzeigenden Zeichens direkt als Zahl anzugeben.
Dazu wird die dezimale Zahl zwischen die Zeichen &# und ; gesetzt.
Alternativ wird die hexadezimale Zahl zwischen die Zeichen &#x und ; gesetzt.
Diese 'Maskierung' funktioniert auch in → XHTML und in → XML.
HTML-Beispiel:
&#64; &#x40;
Live-Ausgabe:
@ @

Details zur Umwandlung CodeNr→Zeichen und Zeichen→CodeNr in verschiedenen Programmiersprachen
Die Zahlen-Codes der einzelnen Zeichen finden sie in den Code-Tabellen:
→ ASCII, → UNICODE.
Man muss die direkte Angabe der Zeichen-Codes mindestens dann verwenden, wenn für ein Zeichen mit Code>127 kein HTML-Name definiert oder bekannt ist.
HTML-Beispiel:
&#945; &#x3B2; &#946;
Live-Ausgabe:
α → β

Maskierung und Demaskierung

Alle modernen Programmiersprachen bieten Funktionen zur Maskierung und Demaskierung von HTML-Code. Maskierung (encode) wird u.a. immer dann eingesetzt, wenn → HTML- oder → XML-Quelltext auf Webseiten angezeigt werden soll.

Unterscheiden sie die HTML-Maskierung von der URI-Maskierung (für Sonderzeichen in Web-Adressen)

Perl: Modul HTML::Entities, Funktionen encode_entities(), decode_entities()

PHP: Funktionen htmlentities(), html_entity_decode(), htmlspecialcharacters(), nl2br()

Beispiel:
htmlentities('<b>') = '&lt;b&gt;'

Details im Kapitel HTML-Codierung dieser Seite.

Maskierte Zeichen-Codes in XML

In → XML werden nur diese 5 Zeichen (Predefined Entity References) maskiert. Weitere zusätzliche Maskierungen sind möglich, wenn man sie selbst definiert.
In XML-Dokumenten wird meist der Zeichensatz → UTF-8 eingesetzt. Alle anderen in HTML maskierten Zeichen werden in UTF-8 als Multibyte-Zeichen codiert, z.B. das Zeichen ä durch 2 Bytes #C3 A4.
<?xml version="1.0" encoding="utf-8" ?>
In XML-Dokumenten mit Zeichensatz UTF-8 kann man daher alle → Unicode-Zeichen (bis auf die 5 rechts angeführten) ohne Maskierung direkt einsetzen.
Dec.HexChrXML
60.#003C<&lt;
62.#003E>&gt;
38.#0026&&amp;
39.#0027'&apos;
34.#0022"&quot;

XHTML

In → XHTML sind zusätzlich die namentlich bezeichneten HTML-Entities definiert, z.B. &nbsp; für das geschütze Leerzeichen = &#x00A0;

In der Syntax &#x0000; sollte man die hexadezimale → Unicode-Zahl immer 4stellig angeben.

Zeichen - Namen

Für die 5 immer maskierten Zeichen ↑ und für viele häufig verwendete Zeichen sind in HTML eigene Zeichen-Namen definiert.
Ein typisches Beispiel sind die deutschen Umlaute: Ihre Namen werden von professionellen Web-Editor Programmen automatisch eingesetzt.
Zur Verwendung werden die Namen zwischen die Zeichen & und ; gesetzt.

In den → XHTML Versionen sind teilweise nur wenige dieser Zeichen-Namen definiert !
Verwenden sie dort im Zweifel die dezimale oder hexadezimale Maskierung (s.o.)

HTML-Beispiel:
Gr&ouml;&szlig;e &auml;ndern: &euro;12,-
Live-Ausgabe:
Größe ändern: €12,-

Schrift - Familie (font-family)

Alle gängigen Betriebssysteme, die meisten Browser und überhaupt alle neueren professionellen Programme 'verstehen' mittlerweile → Unicode. Sie könnten daher theoretisch alle derzeit >100000 definierten Unicode-Zeichen anzeigen.
Die Übersetzung vom Zeichen-Code in Bildpunkte (Pixel) auf Monitor oder Drucker ist Aufgabe der → Schrift-Familie.
Ein Zeichen kann nur dann dargestellt werden, wenn es in der verwendete Schrift-Familie angelegt ist. Ansonsten wird ein Platzhalter-Symbol angezeigt.


Das gleiche Zeichen (hier Code-Nr 65. oder hex #41 ) wird je nach Schrift (Familie, Schnitt, Größe, Farbe, ...) unterschiedlich dargestellt.

Details zu Schrift-Familien
Auf gängigen Betriebssystemen sind meist zahlreiche Schriften installiert, darunter jedoch nur wenige, die wirklich viele Zeichen darstellen können. Sie erkennen diese Schriften an der Größe der Schrift-Dateien (z.B. in /usr/share/fonts oder C:\Windows\Fonts). Gut geeignet sind Schrift-Dateien >200kB, sie enthalten meist eine brauchbare Anzahl Zeichen.
Ungeeignet sind kleine Schrift-Dateien und reine Schmuck-Schriften: Manche Sonderschriften können nicht einmal den kompletten ASCII-Zeichensatz darstellen.
Tipp für AnwenderInnen:
Bei der Installation der meisten Programme (auch Browser) werden die Optionen so eingestellt, dass sie Schriften mit möglichst vielen Zeichen verwenden.
Ändern sie diese Einstellung nur in begründeten Fällen.

Ändern sie insbesondere nicht die Browser-Optionen (z.B. MSIE: Extras | Internet-Optionen | Allgemein | Schriftarten)
Tipps für EntwicklerInnen:
Wenn sie Dokumente in IT-Form an andere Menschen weitergeben, dann müssen sie sich für einen der rechts angeführten Wege entscheiden:

Wenn sie sich nicht an eine dieser Regeln halten, dann werden ihre Dokumente 'falsch' angezeigt. Das gilt insbesondere für Webseiten.
Der eigene PC ist für einen Test ungeeignet, denn dort sind auf jeden Fall alle von ihnen verwendeten Schriften installiert.
Verwenden sie Standard-Schriften. Nur diese stellen einigermaßen sicher, dass ihre Dokumente auf beliebigen PC so aussehen wie von ihnen gewünscht.
Oder: Geben sie zusammen mit dem Dokument die zu verwendende Schrift weiter. Das ist technisch nur in wenigen Fällen möglich, z.B. bei Adobe-Acrobat Dokumenten.
Oder: Wenn ein Text unbedingt genau wiedergegeben werden muss (z.B. bei einem Schrift-Logo), dann setzen sie diesen nicht als Text sondern als Bild ein (wie das Schrift-Muster für das Zeichen A in diesem Kapitel).

Schriften in CSS

Mit der → CSS-Anweisung font-family wird die Schrift festgelegt.
Es folgt eine Liste von (ähnlichen) Schriften, die vom Browser in der angeführten Reihenfolge durchsucht wird. Die erste am PC gefundene Schrift der Liste wird verwendet.
Schrift-Namen, die Leerzeichen enthalten, werden in 'Single Quotes' gesetzt.

Als letzte Schrift der Liste muss eine der 3 Standard-Schriften eingesetzt werden: Jedes Betriebssystem bietet mindestens diese Schriften:
serif - Schrift mit Serifen (Häkchen an den Zeichen)
sans-serif - Schrift ohne Serifen
monospace - Schrift mit gleich breiten Zeichen
Typische Beispiele von → CSS-Klassen:
.c1{font-family:'Times New Roman',Times,serif;}
.c2{font-family:Helvetica,Verdana,Arial,sans-serif;}
.c3{font-family:'Courier New',Courier,monospace;}
.cx{font-family:'Comic Sans MS','Comic Sans';}
.cy{font-family:Rockwell;}
Beispiele c1..c3 sind korrekt: Sie enthalten jeweils eine Liste ähnlicher Schriften, von denen mindestens eine auf allen gängigen Betriebssystemen installiert ist, und zuletzt eine Standard-Schrift.
Beispiel cx verwendet eine Schrift, die zwar auf vielen privaten Windows-PC installiert ist, nicht jedoch auf anderen Betriebssystemen.
Beispiel cy verwendet eine selten installierte Schrift: Ihr Browser zeigt sie wahrscheinlich in seiner eingestellten Standardschrift an, nicht jedoch so wie am Entwickler-PC.
Die mittlere Spalte zeigt die deutschen Sonderzeichen, die rechte Spalte einige → Unicode-Zeichen - beide nicht in allen Schrift-Familien definiert !
Live-HTML (Zeichen-Größe jeweils 14pt):
BeispielASCIIUmlauteUnicode
c1
ABCxyz
ÄÖÜäöüß
αγД€∞
c2
ABCxyz
ÄÖÜäöüß
αγД€∞
c3
ABCxyz
ÄÖÜäöüß
αγД€∞
cx
ABCxyz
ÄÖÜäöüß
αγД€∞
cy
ABCxyz
ÄÖÜäöüß
αγД€∞
Die Klassen cx und cy können auf jedem PC anders aussehen...

HTML-Formulare, z.B. für Datenbanken

Felder von HTML-Formularen können beliebigen Text aufnehmen, darunter auch → Unicode-Zeichen. Es gibt mehrere Wege, um Unicode-Text in ein Eingabe-Feld zu bringen:

Tastatur: Jedes Betriebssystem bietet die Möglichkeit, das Tastatur-Layout zu ändern. Damit werden die Sonderzeichen der jeweiligen Sprache verfügbar, allerdings muss man sie 'blind' eintippen.

Zwischenablage: Text aus anderen Dokumenten kann man mit Kopieren | Einfügen in ein Eingabefeld kopieren. Dazu können sie u.a. die → Unicode-Seite dieses Webs verwenden, oder ein Hilfsprogramm, z.B. 'Zeichentabelle' (charmap.exe) auf jedem Windows-System.
Textfeld in einem HTML-Formular (gekürzt): Alle Formular-Elemente sollten gleich lautende id- und name-Attribute erhalten.
<form id="f1" name="f1">
<input id="t1" name="t1" type="text" />
</form>

Live-Beispiel:
Dieses Eingabe-Feld wird von den folgenden Beispielen verwendet. Sie können den Inhalt mit Tastatur-Eingabe oder mit Programmen ändern.
Dynamische Webseiten: In Formular-Felder lassen sich mit Programmiersprachen wie Java, → Perl oder → PHP Anfangswerte eintragen: Darin enthaltene Unicode-Zeichen >U+007F werden HTML-codiert so wie oben gezeigt.
Klicken sie um das zu simulieren. Beachten sie jedoch, dass diese Programmiersprachen am → Webserver arbeiten, daher kann man damit nur Anfangswerte eintragen, bevor die Webseite zur Verwendung abgesendet wird !
Anfangswerte in HTML-Formularen mit PHP
<?php
$v = '&#214;sterreich';
?>

<input id="t1" name="t1" type="text"
  value="<?php print $v; ?>" />
Mit Javascript kann eine Webseite Live auf AnwenderInnen reagieren: Das Beispiel zeigt, wie man mit → Javascript (z.B. mit diesen Bildschirm-Tasten) Unicode-Zeichen eintragen kann:
abc äöüß žŋĉ αβγ
DOM-Methoden sind zu bevorzugen, weil sie auch in allen → XML-Dateien, insbesondere auch mit → XHTML funktionieren. Man kann sie allerdings erst nach dem Laden des Dokuments (Ereignis onload) anwenden.
Javascript mit → DOM-Methoden (verwendet id-Attribut):
n = document.getElementById("t1");
v = n.value;
n.value = v + String.fromCharCode(97);
Javascript (veraltet, verwendet name-Attribut)
v = document.f1.t1.value;
v += String.fromCharCode(97);
document.f1.t1.value = v;
Bei der Auswertung abgesendeter Formulare (z.B. mit einem → PHP-Empfangsprogramm) ist Vorsicht geboten:
Die Formular-Daten werden im Zeichencode der Webseite gesendet, allenfalls zusätzlich in HTML-maskierter Form &#nnn;
Klicken sie um den Submit-Vorgang zu simulieren.
Empfangener Text nach dem Absenden des Formulars (Soll):
 
MS-Software neigt leider dazu, den Code-Bereich U+80..U+FF (z.B. die Umlaute ÄÖÜäöü und ß) nicht zu maskieren. Dabei können die von MS-Programmen favorisierten → CP-1250-(ANSI)-Zeichen an die Stelle der Original-Zeichen gelangen. Das ergibt insbesondere bei → UTF-8 codierten Texten zahlreiche Fehler. Man kann dieses Verhalten bei der Entwicklung eigener Software berücksichtigen.
Simulieren sie zur Demonstration das Absenden mit einem Text wie z.B. mit Klick auf 'α ist größer als ω'.
Empfangener Text mit möglichen MS-Problemen:
 
Besonders für Datenbanken ist das Verhalten von HTML-Formularen wichtig: Damit erfolgt meistens die Eingabe und Änderung von Texten. Moderne Datenbanken beherrschen ausnahmslos → Unicode, die Zeichen müssen lediglich fehlerfrei in die Datenbank gelangen.
Das Beispiel rechts zeigt den UTF-8 codierten Text - Er enthält nur mehr Zeichen U<FF und kann daher in jeder Datenbank gespeichert werden.
Empfangener Text, UTF-8 codiert zum Speichern in einer Datenbank
 
Die → UTF-8 codierten Texte aus der Datenbank werden nach dem Lesen der Daten wieder decodiert und stehen als → Unicode-Texte zur Verfügung.
Details zur Codierung von Unicode-Zeichen mit UTF-8.
Aus der Datenbank gelesener Text, zur Verwendung UTF-8 decodiert:
 

HTML-Codierung

Mehrere Programmiersprachen bieten Funktionen zur HTML-Codierung, d.h. zur Umwandlung von Text (aus allen Unicode-Zeichen) in HTML-Quelltext. Perl: Modul HTML::Entities, Funktionen encode_entities(), decode_entities()

PHP: Funktionen htmlentities(), html_entity_decode(), htmlspecialcharacters(), nl2br()

HTML-Codierung mit PHP

PHP ist derzeit die meist-verwendete Programmiersprache zur Erzeugung von dynamischen Webseiten. → PHP bietet die Standard-Funktion htmlentities() zur Umwandlung von Text in HTML-Quelltext. Diese Funktion deckt nur einen Teil des Bedarfs.

Die Funktion utf8_to_html() im Beispiel rechts codiert alle Unicode-Zeichen eines UTF8-String-Arguments $s in HTML-Quelltext und kann als Ersatz für htmlentities() verwendet werden. Damit kann man z.B. die UTF8 codierten Daten einer Datenbank direkt in eine Webseite schreiben.

Jedes Start-Byte des Strings $s wird in der Variablen $o1 gespeichert und analysiert:

Von den Steuerzeichen (Code<32) wird nur der Tabulator (mit einem Leerzeichen) und der Zeilen-Umbruch (mit einem HTML-Umbruch) übersetzt. Alle anderen Steuerzeichen werden ignoriert.

ASCII-Zeichen (Code<128) werden mit Funktion htmlentities() codiert.

Illegale Zeichen mit Code 128...191 werden mit einem ? Zeichen übersetzt.

Nach einem Start-Byte 192...223 wird ein 2. Byte in die Variable $o2 gelesen und ausgewertet.

Nach einem Start-Byte 224...239 werden 2 weitere Bytes gelesen und ausgewertet.

Start-Bytes >239 sind derzeit illegal und werden mit einem ? Zeichen übersetzt.
PHP-Funktion zur Codierung von HTML-Quelltext
<?php
function utf8_to_html($s) {
$h = '';
$i = 0;
while($i<strlen($s)) {
$c1 = substr($s,$i,1);
$o1 = ord($c1);
if($o1<32) {
if($o1==9) {$h.=' ';}
elseif($o1==10) {$h.="<br />\n";}
}
elseif($o1<128) {$h.=htmlentities($c1);}
elseif($o1<192) {$h.='?';}
elseif($o1<224) {
$o2 = ord(substr($s,$i+1,1));
$uc = ($o1-192) * 64 + $o2 - 128;
$h .= '&#'.$uc.';';
$i++;
}
elseif($o1<240) {
$o2 = ord(substr($s,$i+1,1));
$o3 = ord(substr($s,$i+2,1));
$uc = ($o1-224) * 4096 + ($o2-128) * 64 + $o3 - 128;
$h .= '&#'.$uc.';';
$i+=2;
}
else {$h.='?';}
$i++;
}
return $h;
}
?>
Das Beispiel lässt sich mit etwas Geschick in alle gängigen Programmiersprachen übertragen.


XHTML CSS