UTF-8-Kodierung
UTF steht für Unicode Transformation Format. Die „8" bedeutet, dass 8-Bit-Blöcke zur Darstellung eines Zeichens verwendet werden.
Jedes Zeichen, das Sie auf einer Webseite eingeben – ein einfacher lateinischer Buchstabe, ein akzentuiertes é, ein griechisches π, das Euro-Zeichen € oder ein Emoji – muss in Bytes umgewandelt werden, bevor es gespeichert oder über das Netzwerk übertragen werden kann. Die Regeln, die Zeichen auf Bytes abbilden, werden als Zeichenkodierung bezeichnet. Unicode ist der universelle Katalog, der jedem Zeichen eine eindeutige Nummer (einen Codepunkt) zuweist, und UTF-8 ist die Kodierung, die diese Codepunkte als Bytes schreibt. Als HTML-Autor entscheidet die korrekte Kodierung darüber, ob Sie dem gefürchteten „Mojibake" begegnen – unlesbarer Ausgabe wie é anstelle eines é. Diese Seite erklärt, was UTF-8 ist, wie man es deklariert, wie man ein beliebiges Unicode-Zeichen über seinen Codepunkt einfügt, und enthält eine Referenztabelle häufig verwendeter Unicode-Bereiche.
Verwandte Kapitel: HTML-Entities listet die benannten Abkürzungen wie
©und&auf, und HTML-Zeichensätze erklärt, wie Unicode, UTF-8 und der Dokument-Zeichensatz zusammenhängen.
Was ist UTF-8?
Das 8-Bit Unicode Transformation Format, kurz UTF-8, ist eine Zeichenkodierung variabler Breite, die alle 1.114.112 gültigen Codepunkte in Unicode mit einem bis vier 8-Bit-Bytes kodieren kann. Die Zahl „8" bedeutet, dass 8-Bit-Blöcke von UTF zur Darstellung eines Zeichens verwendet werden.
Seit 2009 ist UTF-8 die führende Kodierung für das World Wide Web, und heute wird es von der überwältigenden Mehrheit aller Webseiten verwendet.
Deklaration der Kodierung in HTML
Ein Browser kann nicht zuverlässig erraten, welche Kodierung Ihre Bytes verwenden, daher sollten Sie es ihm immer mitteilen. In HTML5 geschieht dies mit einem einzigen <meta>-Tag, das als erstes Element innerhalb von <head> platziert wird (innerhalb der ersten 1024 Bytes des Dokuments):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>UTF-8 example</title>
</head>
<body>
<p>Prices: €10 · Greek letter: π · Smiley: 😀</p>
</body>
</html>Speichern Sie die Datei selbst als UTF-8 in Ihrem Editor und deklarieren Sie <meta charset="UTF-8">, damit beide übereinstimmen. Fehlt das <meta charset>, fällt der Browser auf eine Schätzung zurück (historisch windows-1252 für viele westliche Gebietsschemata oder eine Heuristik), was genau dazu führt, wie unlesbarer Text entsteht. Erfahren Sie mehr im Kapitel HTML <meta>-Tag.
Warum die Deklaration früh stehen muss
Ein Browser wartet nicht, bis die gesamte HTML-Datei eingetroffen ist, bevor er mit der Arbeit beginnt – er fängt an, Bytes in Zeichen zu dekodieren, sobald der erste Datenblock eintrifft. Dazu muss er eine Kodierung wählen, bevor er das gesamte Dokument gelesen hat. Die HTML-Spezifikation verlangt daher, dass <meta charset> innerhalb der ersten 1024 Bytes erscheint, damit der Browser es beim ersten Durchlauf finden kann.
Wenn Sie die Kodierung zu spät deklarieren (zum Beispiel nach einem langen Block mit Kommentaren oder Inhalten), hat der Browser die früheren Bytes bereits mit seiner Fallback-Schätzung dekodiert. Diese Bytes werden falsch interpretiert, und wenn die späte Deklaration gefunden wird, muss die Seite möglicherweise vollständig neu geparst werden – oder zeigt einfach unlesbaren Text an. <meta charset="UTF-8"> als erstes Kindelement von <head> zu platzieren garantiert, dass es rechtzeitig gefunden wird.
Unicode-Codepunkte in HTML verwenden
Sie müssen ein exotisches Zeichen nicht direkt eintippen, um es zu verwenden. Jeder Unicode-Codepunkt kann mit einer numerischen Zeichenreferenz eingefügt werden, in Dezimal (&#NNNN;) oder Hexadezimal (&#xHHHH;). Viele gebräuchliche Zeichen haben auch eine einprägsame benannte Entity.
Zum Beispiel kann das Euro-Zeichen (Codepunkt U+20AC) auf drei gleichwertige Weisen geschrieben werden:
<p>Euro: € € €</p>
<!-- all three render as: € -->Das Gleiche gilt für Buchstaben aus beliebigen Schriftsystemen, wie dem griechischen Großbuchstaben Sigma (U+03A3):
<p>Greek sigma: Σ Σ Σ</p>
<!-- renders as: Σ -->Numerische Referenzen sind praktisch für Zeichen, die schwer einzutippen sind, oder um explizit zu sein und Kodierungsmehrdeutigkeiten zu vermeiden. Die vollständige Liste der benannten Abkürzungen (wie ©, &, <) finden Sie unter HTML-Entities.
Numerische Zeichenreferenzen
Sowohl &#NNN; (dezimal) als auch &#xHHHH; (hexadezimal) benennen ein Zeichen über seinen Unicode-Codepunkt – dieselbe Zahl, die Unicode ihm zuweist, nur in zwei verschiedenen Zahlensystemen geschrieben. Das x nach &# kennzeichnet die Ziffern als hexadezimal. Da sie den Codepunkt direkt referenzieren, funktionieren numerische Referenzen für jedes Unicode-Zeichen, auch für solche ohne benannte Entity.
Zum Beispiel hat das schwere schwarze Herz (Codepunkt U+2764, dezimal 10084) keine weit verbreitete benannte Entity, kann aber dennoch geschrieben werden:
<p>Heart: ❤ and the same in hex: ❤</p>
<!-- both render as: ❤ -->Die führenden Nullen sind optional, sodass ❤ und ❤ gleichwertig sind. Hexadezimal ist praktisch, weil es der U+....-Notation in Unicode-Tabellen entspricht.
Tipp: Einen Überblick darüber, wie Kodierungen, Codepunkte und der Dokument-Zeichensatz zusammenpassen, finden Sie unter HTML-Zeichensätze.
Wie viele Bytes ein Zeichen benötigt
UTF-8 ist variabel breit: Zeichen mit kleinen Codepunkten benötigen weniger Bytes, sodass einfacher englischer Text kompakt bleibt und trotzdem der gesamte Unicode-Bereich unterstützt wird. Der Wert eines Codepunkts allein bestimmt, wie viele Bytes UTF-8 dafür verwendet, gemäß vier inklusiver Bereiche:
| Codepunkt-Bereich | Dezimal | Bytes | Beispielzeichen |
|---|---|---|---|
| U+0000 – U+007F | 0 – 127 | 1 Byte | A (U+0041) |
| U+0080 – U+07FF | 128 – 2047 | 2 Bytes | é (U+00E9), π (U+03C0) |
| U+0800 – U+FFFF | 2048 – 65535 | 3 Bytes | € (U+20AC), 中 (U+4E2D) |
| U+10000 – U+10FFFF | 65536 – 1114111 | 4 Bytes | 😀 (U+1F600) |
- 1 Byte (U+0000–U+007F). Diese Bytes sind identisch mit den ursprünglichen ASCII-Werten, weshalb jede reine ASCII-Datei bereits gültiges UTF-8 ist.
- 2 Bytes (U+0080–U+07FF). Umfasst die meisten lateinischen Buchstaben mit Akzenten sowie Griechisch, Kyrillisch, Hebräisch und Arabisch.
- 3 Bytes (U+0800–U+FFFF). Enthält die meisten anderen modernen Schriftsysteme sowie viele Symbole und CJK-Zeichen (Chinesisch, Japanisch, Koreanisch). Dieser Bereich erstreckt sich bis einschließlich U+FFFF.
- 4 Bytes (U+10000–U+10FFFF). Enthält weniger verbreitete Schriftsysteme, historische Zeichen und Emoji, bis zum höchsten gültigen Unicode-Codepunkt, U+10FFFF.
Warum UTF-8 das Web gewann
Ältere Kodierungen wie ASCII, Latin-1 (ISO-8859-1) und Windows-1252 verwendeten jeweils ein einziges Byte pro Zeichen, konnten also nur bis zu 256 Zeichen darstellen. Das reicht für eine Sprache, aber eine Seite kann nicht, zum Beispiel, Französisch, Russisch und Japanisch in einer Datei mischen. UTF-8 löst dieses Problem, indem es jedes Zeichen in Unicode abdeckt und gleichzeitig abwärtskompatibel mit ASCII bleibt – die ersten 128 Codepunkte werden auf exakt dieselben einzelnen Bytes abgebildet. Diese Kompatibilität, zusammen mit der Kompaktheit für englischen Text, ist der Grund, warum UTF-8 die veralteten Einzelbyte-Kodierungen verdrängte und zum Standard des Webs wurde.
Das Byte Order Mark (BOM)
Einige Editoren fügen am Anfang einer UTF-8-Datei einige unsichtbare Bytes hinzu, das sogenannte Byte Order Mark (BOM).
Sollten Sie ein BOM in HTML verwenden?
In UTF-8 besteht das BOM aus der drei-Byte-Sequenz EF BB BF. Es kann als Signal dienen, dass eine Datei UTF-8-kodiert ist, aber für HTML ist es unnötig und am besten zu vermeiden: Ihre <meta charset="UTF-8">-Deklaration gibt die Kodierung bereits an, und ein unerwünschtes BOM kann zu subtilen Fehlern führen (zum Beispiel unerwarteter Leerraum vor <!DOCTYPE> oder Probleme mit PHP-Skripten, die Ausgabe erzeugen). Wenn Ihr Editor die Wahl bietet, speichern Sie als „UTF-8 ohne BOM".
Unicode-Bereichsreferenz
Die folgende Liste zeigt einige häufig verwendete Unicode-Blöcke, jeweils mit dezimalem und hexadezimalem Codepunkt-Bereich. Die Beispielspalte zeigt ein Zeichen aus dem Block.
| Zeichencodes | Dezimal | Hexadezimal | Beispiel |
|---|---|---|---|
| C0 Controls and Basic Latin | 0-127 | 0000-007F | A B c 7 ? |
| C1 Controls and Latin-1 Supplement | 128-255 | 0080-00FF | é ñ ü © ÷ |
| Latin Extended-A | 256-383 | 0100-017F | ā Œ ş ž ł |
| Latin Extended-B | 384-591 | 0180-024F | ƀ Ɛ ǎ ǔ |
| Spacing Modifiers | 688-767 | 02B0-02FF | ˆ ˜ ˘ |
| Diacritical Marks | 768-879 | 0300-036F | combining accents |
| Greek and Coptic | 880-1023 | 0370-03FF | α β π Σ Ω |
| Cyrillic Basic | 1024-1279 | 0400-04FF | Д Ж и я ё |
| Cyrillic Supplement | 1280-1327 | 0500-052F | Ҡ ҩ Ӂ |
| Latin Extended Additional | 7680-7935 | 1E00-1EFF | ḅ ẁ ẞ ṩ |
| General Punctuation | 8192-8303 | 2000-206F | — … ‹ › † |
| Currency Symbols | 8352-8399 | 20A0-20CF | € £ ¥ ₽ ₹ |
| Letterlike Symbols | 8448-8527 | 2100-214F | ™ ℃ № ℅ |
| Arrows | 8592-8703 | 2190-21FF | ← ↑ → ↓ ↔ |
| Mathematical Operators | 8704-8959 | 2200-22FF | ∑ √ ∞ ≠ ≤ |
| Box Drawings | 9472-9599 | 2500-257F | ─ │ ┌ ┐ └ |
| Block Elements | 9600-9631 | 2580-259F | ░ ▒ ▓ █ |
| Geometric Shapes | 9632-9727 | 25A0-25FF | ■ ● ▲ ◆ ◇ |
| Miscellaneous Symbols | 9728-9983 | 2600-26FF | ☀ ☂ ★ ☎ ✿ |
| Dingbats | 9984-10175 | 2700-27BF | ✂ ✈ ✉ ✏ ❤ |
| Emoji (Emoticons) | 128512-128591 | 1F600-1F64F | 😀 😂 😍 🙏 😎 |