charset und Unicode: Sonderzeichen verarbeiten
Verwenden Sie UTF-8 und HTML-Entities, um jedes Zeichen korrekt darzustellen
charset und Unicode: Sonderzeichen verarbeiten ist eine kostenlose HTML Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des HTML Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.
Die charset-Deklaration
Jedes HTML-Dokument muss seine Zeichenkodierung deklarieren. Der Standard ist UTF-8: <meta charset="utf-8"> als allererstes Element von <head>. Ohne diese Deklaration muss der Browser die Kodierung erraten, was bei Nicht-ASCII-Text häufig zu Fehlern führt.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Page</title>Warum UTF-8?
UTF-8 kodiert jedes Unicode-Zeichen: jede Schrift, jedes Emoji und jedes Symbol. Die Kodierung ist abwärtskompatibel mit ASCII (a-z und 0-9 bleiben ein Byte lang) und ist die vorherrschende Kodierung im modernen Web – 2024 waren über 98 % der Seiten UTF-8-kodiert.
Die Platzierung ist entscheidend
Das charset-Meta-Tag muss in den ersten 1024 Bytes des Dokuments stehen – normalerweise in der ersten Zeile von <head>. Der Browser ermittelt die Kodierung anhand dieser Bytes; eine spätere charset-Deklaration hat möglicherweise keinen Einfluss mehr auf dieses Ermittlungsergebnis.
Dateien in UTF-8 speichern
Das Meta-Tag deklariert die Kodierung, aber Ihr Editor muss die Datei tatsächlich in dieser Kodierung speichern. VS Code, IntelliJ und Sublime verwenden in modernen Versionen standardmäßig UTF-8. Als Windows-1252 oder ISO-8859-1 gespeicherte Dateien erzeugen trotz des richtigen Meta-Tags Mojibake (verstümmelte Zeichen).
HTML-Entitäten
Spezielle HTML-Zeichen (<, >, &, ") müssen maskiert werden, damit der Parser nicht durcheinanderkommt: < für <, > für >, & für & und " für ". Innerhalb von Attributwerten ist " vorgeschrieben, wenn der Wert in doppelten Anführungszeichen steht.
Numerische Zeichenreferenzen
Jedes Unicode-Zeichen kann über seinen Codepunkt referenziert werden: ☃ oder ☃ für einen Schneemann (☃). Verwenden Sie dies, wenn die direkte Eingabe des Zeichens unpraktisch ist (etwa bei seltenen Symbolen oder Steuerzeichen), bevorzugen Sie aber das eigentliche Unicode-Zeichen, wenn Ihr Editor es unterstützt.
Emojis und Surrogatpaare
Emojis sind Unicode-Zeichen oberhalb von U+FFFF und werden in UTF-16 (der Kodierung innerhalb von JavaScript-Zeichenfolgen) als Surrogatpaare dargestellt. UTF-8 kodiert sie als 4-Byte-Sequenzen. Wenn charset="utf-8" gesetzt ist, werden Emojis ohne Entitäten nativ dargestellt.
Häufige Kodierungsfehler
Wenn "Don't" als "Donât" dargestellt wird, wird die Datei als Latin-1 interpretiert, obwohl sie als UTF-8 gespeichert wurde. Speichern Sie die Datei als UTF-8 und stellen Sie sicher, dass <meta charset="utf-8"> vorhanden ist. Moderne Browser verwenden nur dann standardmäßig UTF-8, wenn das Meta-Tag fehlt und die Datei plausibel UTF-8-kodiert ist.
HTTP-Content-Type-Header
Der Server kann die Kodierung auch über den Response-Header deklarieren: Content-Type: text/html; charset=utf-8. Der Header hat Vorrang vor dem Meta-Tag. Fehlkonfigurierte Server können daher Kodierungsfehler verursachen, selbst wenn das HTML einwandfrei geschrieben ist.
Arbeiten mit Formularen
Formulare werden standardmäßig mit der Kodierung der Seite übermittelt. UTF-8-Seiten senden UTF-8-Formulardaten, die der Server als UTF-8 dekodieren sollte. Eine Abweichung zwischen der Seitenkodierung und der serverseitigen Dekodierung ist auf mehrsprachigen Websites eine häufige Ursache für verstümmelte Benutzereingaben.
BOM vermeiden
UTF-8-Dateien können mit einer Byte Order Mark beginnen (BOM, 0xEF 0xBB 0xBF). Die meisten Browser tolerieren sie, einige Tools und CDNs jedoch nicht – außerdem erscheint die BOM in manchen Texteditoren als sichtbares Zeichen. Speichern Sie Dateien als "UTF-8 ohne BOM", um Überraschungen zu vermeiden.
Wissensüberprüfung
Warum muss innerhalb der ersten 1024 Bytes eines HTML-Dokuments stehen?
Zusammenfassung
Deklarieren Sie <meta charset="utf-8"> als erstes untergeordnetes Element von <head> und speichern Sie Dateien in UTF-8. UTF-8 kodiert jedes Unicode-Zeichen, einschließlich Emojis und aller Schriften. Maskieren Sie <, >, & und " als Entitäten; verwenden Sie für seltene Zeichen numerische Referenzen. Beachten Sie, dass der HTTP-Content-Type das Meta-Tag überschreiben kann und die BOM in manchen Tools als sichtbares Zeichen erscheint.
Lerne HTML mit einem KI-Tutor — kostenlos
Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.
- Kurse
- 40
- Lektionen
- 159
Häufig gestellte Fragen
Ist die Lektion „charset und Unicode: Sonderzeichen verarbeiten“ kostenlos?
Ja — der vollständige Text von „charset und Unicode: Sonderzeichen verarbeiten“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des HTML Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „charset und Unicode: Sonderzeichen verarbeiten“?
Verwenden Sie UTF-8 und HTML-Entities, um jedes Zeichen korrekt darzustellen Du übst HTML Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um HTML Academy zu starten?
Keine Vorkenntnisse erforderlich. HTML Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.
Wie lange dauert die Lektion „charset und Unicode: Sonderzeichen verarbeiten“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser HTML Academy-Lektion Code schreiben und ausführen?
Ja. Jede HTML Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Das lang-Attribut und Screenreader
- dir=rtl für Text von rechts nach links
- Die Elemente bdi und bdo
- charset und Unicode: Sonderzeichen verarbeiten