Zeichenkodierung in HTML: Korrekte Verwendung des Meta-Zeichensatzes UTF-8

Was Zeichenkodierung in HTML bedeutet, welche Meta-Zeichensatzzeile jede Seite benötigt, wie HTTP-Header und BOM sie überschreiben und wie man verstümmelte Zeichen auf mehrsprachigen Websites korrigiert.
Keine Kreditkarte erforderlich Ohne Verpflichtung

· Aktualisiert · Alex B · Der Blog

Fassen Sie diesen Beitrag zusammen mit: 9 Minuten Lesezeit

Die Zeichenkodierung einer HTML-Seite ist die Regel, die die Bytes in der Datei wieder in Buchstaben umwandelt. Für jede moderne Seite lautet die Antwort dieselbe: Speichern Sie die Datei als UTF-8 und deklarieren Sie sie mit <meta charset="utf-8"> als erstes Element im Inneren <head>, innerhalb der ersten 1024 Bytes des Dokuments. Der HTML-Standard erfordert UTF-8, und wenn Ihr Server auch eine sendet Content-Type Header mit einem Zeichensatz, die beiden müssen übereinstimmen.

Wichtige Erkenntnisse

  • Verwenden Sie UTF-8. Der HTML-Standard besagt, dass die tatsächliche Kodierung des Dokuments “UTF-8 sein muss” und W3Techs Im September 2026 wurde berichtet, dass 99,1 % der Websites mit einer bekannten Kodierung diese bereits verwenden.
  • Erklären Sie es mit <meta charset="utf-8"> direkt danach <head>. Es muss in die ersten 1024 Bytes passen.
  • Deklarieren reicht nicht aus: Die Datei selbst, Ihre Datenbank und Ihr Server-Header müssen ebenfalls UTF-8 sein.
  • Wenn Deklarationen nicht übereinstimmen, schlägt eine Byte-Order-Markierung den HTTP-Header, der den <meta> Etikett.
  • Verstümmelter Text wie é statt é Bedeutet fast immer, dass UTF-8-Bytes als Legacy-Kodierung gelesen werden oder Text zweimal konvertiert wurde.

Was eine Zeichenkodierung ist

Computer speichern Text als Zahlen. Eine Kodierung ist die Tabelle, die diese Zahlen Zeichen zuordnet. Ältere Kodierungen wie ISO-8859-1 oder Windows-1252 decken ein Byte pro Zeichen und nur ein paar hundert Zeichen ab, genug für westeuropäische Sprachen und sonst nichts. UTF-8 kodiert jedes Zeichen in Unicode, sodass Englisch, Arabisch, Hindi, Japanisch und Emoji auf derselben Seite stehen können und ein bis vier Bytes pro Zeichen verwendet werden.

Das W3C stellt das Risiko klar: Wenn Sie die Kodierung nicht angeben “riskieren Sie, dass Zeichen in Ihrem Inhalt falsch interpretiert werden”, und es fügt hinzu, dass eine Kodierungsdeklaration auch erforderlich ist, um Nicht-ASCII-Text zu verarbeiten, den Benutzer in Formulare eingeben (W3C-Internationalisierung).

Die eine Zeile, die Sie brauchen

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>…</title>
  </head>
</html>

Ein paar Details, die die Leute falsch verstehen:

  • Position. Der HTML-Standard besagt, dass das Element, das die Deklaration “enthält, innerhalb der ersten 1024 Bytes des Dokuments vollständig serialisiert werden muss” (HTML-Lebensstandard). Legen Sie es zuerst hinein <head>, vor dem Titel, Drehbüchern und langen Kommentaren.
  • Nur einer. Ein Dokument kann nur eines haben <meta>-basierte Kodierungsdeklaration.
  • Der Fall spielt keine Rolle. UTF-8 „ utf-8 sind beide in Ordnung. Das W3C weist auf die längere Form hin, <meta http-equiv="Content-Type" content="text/html; charset=utf-8">, funktioniert auf die gleiche Weise, ist aber eher zum Tippen gedacht.
  • Für neue Seiten ist kein anderer Wert gültig. Der Kodierungsstandard besagt “Autoren müssen die UTF-8-Kodierung verwenden” und muss diese kennzeichnen utf-8 (WHATWG-Kodierungsstandard). Ältere Etiketten wie iso-8859-1 funktionieren immer noch in Browsern, sind aber nicht für neue Dokumente geeignet.

Die Deklaration muss mit den Bytes übereinstimmen

Die <meta> Tag beschreibt die Datei. Es konvertiert es nicht. Wenn Ihr Editor die Datei als Windows-1252 (das einige Windows-Tools “ANSI” nennen) speichert und auf dem Tag UTF-8 steht, wird jedes akzentuierte oder nicht-lateinische Zeichen kaputt gehen. Das W3C erinnert Autoren daran, dass die Verwendung von UTF-8 bedeutet “Sie müssen Ihre Inhalte auch als UTF-8 speichern” (W3C).

Überprüfen Sie das Speicherformat Ihres Editors. In den meisten Code-Editoren wird die aktuelle Kodierung in der Statusleiste angezeigt, mit der Option “Speichern mit Kodierung” oder “Erneut öffnen mit Kodierung”. Wählen Sie UTF-8.

ANSI vs. UTF-8. “ANSI” ist keine einzelne Kodierung. Unter Windows ist damit die Legacy-Codepage des Systems gemeint, die auf westeuropäischen Systemen normalerweise Windows-1252 ist. Es kann weder Arabisch, Chinesisch noch die meisten anderen Skripte darstellen und auf diese Weise gespeicherte Dateien werden falsch angezeigt, wenn die Seite UTF-8 deklariert. Wählen Sie für das Web immer UTF-8.

Welche Erklärung gewinnt, wenn sie anderer Meinung sind

Ein Browser kann die Kodierung an drei Stellen finden. Das W3C listet die Priorität auf:

  1. Byte-Order-Markierung (BOM). Ein paar unsichtbare Bytes ganz am Anfang der Datei. Wenn vorhanden, überschreibt es alles andere “einschließlich des HTTP-Headers”.
  2. HTTP Content-Type Kopfzeile, zum Beispiel Content-Type: text/html; charset=utf-8. Es übertrifft In-Document-Deklarationen.
  3. Die <meta charset> Element.

Wenn Ihr Server also sendet charset=iso-8859-1 und auf Ihrer Seite steht UTF-8, der Server gewinnt und die Seite bricht ab. Der Rat des W3C besteht darin, die Kodierung in jedem Fall im Dokument anzugeben und, wenn Sie auch den Header verwenden, sicherzustellen, dass dort dasselbe steht.

So legen Sie den Header auf gängigen Servern fest:

  • Apache: AddDefaultCharset utf-8 fügt den Zeichensatz hinzu zu text/html „ text/plain Antworten (Apache-Dokumente). Apache weist darauf hin, dass Sie es nur verwenden sollten, wenn sich alle betroffenen Dateien tatsächlich in dieser Kodierung befinden.
  • nginx: die charset utf-8; Richtlinie in der http, server oder location Block fügt den Zeichensatz zum Content-Type Kopfzeile (Nginx-Dokumente).
  • PHP: header('Content-Type: text/html; charset=utf-8'); vor jeder Ausgabe.

Sie können sehen, was Ihr Server sendet mit curl -I https://your-site.example/ oder in den Entwicklertools des Browsers unter Netzwerk, Antwortheader.

Korrigieren verstümmelter Zeichen (Mojibake)

Verstümmelter Text folgt erkennbaren Mustern. So lesen Sie sie:

Was Sie sehenWas passiert istFix
café statt caféUTF-8-Bytes werden als Windows-1252 oder ISO-8859-1 gelesenLassen Sie den Header und die Meta beide UTF-8 sagen
caf� (ein Diamant mit einem Fragezeichen)Legacy-Bytes werden als UTF-8 gelesenSpeichern Sie die Datei erneut oder konvertieren Sie die Daten als UTF-8
caféText zweimal in UTF-8 konvertiertFinden Sie die doppelte Konvertierung, normalerweise beim Import oder in der Datenbankverbindung
??? Anstelle jedes nicht-lateinischen ZeichensZeichen, die verloren gehen, wenn sie in einer Spalte oder Datei gespeichert werden, die sie nicht speichern kannÄndern Sie den Speicher auf UTF-8 und importieren Sie ihn erneut aus der Quelle

Arbeiten Sie die Kette der Reihe nach durch: die Datei auf der Festplatte, die Datenbank, die Verbindung zwischen ihnen, den HTTP-Header und den <meta> Etikett. Jeder Link muss UTF-8 sein.

Datenbanken. In MySQL ist das alte utf8 Zeichensatz ist ein Alias für utf8mb3, das höchstens drei Bytes pro Zeichen speichert und daher keine “ergänzenden” Zeichen wie die meisten Emojis enthalten kann. MySQL-Dokumente utf8mb3 als veraltet (MySQL-Referenzhandbuch). Verwenden utf8mb4 für Tabellen und für die Verbindung.

HTML-Entitäten: wenn Sie sie noch benötigen

Mit UTF-8 können Sie tippen é, ü, ж oder 中 Direkt in die Quelle. Sie benötigen nur Zeichenreferenzen wie &amp;, &lt; „ &gt; für Zeichen, die im HTML-Markup eine Bedeutung haben. Entitäten sind auch praktisch für unsichtbare Charaktere, die in der Quelle schwer zu erkennen sind, wie zum Beispiel ein No-Break-Raum (&nbsp;) oder Richtungsmarkierungen im Text von rechts nach links.

Kodierung auf mehrsprachigen Websites

Kodierungsprobleme treten auf, sobald eine Site Sprachen hinzufügt. Eine Seite, auf der bisher nur Englisch angezeigt wurde, kann eine falsche Deklaration jahrelang verbergen, da einfache englische Buchstaben in UTF-8 und in den alten westlichen Kodierungen gleich sind. Die erste polnische, griechische oder japanische Übersetzung enthüllt es.

Bevor Sie Sprachen hinzufügen, überprüfen Sie drei Dinge:

  1. Jede Vorlage und statische Datei wird als UTF-8 gespeichert und erklärt <meta charset="utf-8">.
  2. Die lang Attribut wird pro Sprache festgelegt, zum Beispiel <html lang="ja">, und Seiten von rechts nach links erhalten auch dir="rtl". Die Kodierung gibt an, wie die Bytes gelesen werden; lang Gibt an, in welcher Sprache der Text vorliegt, was für Schriftarten, Silbentrennung und Bildschirmleseprogramme wichtig ist.
  3. URLs mit nicht-lateinischen Zeichen sind UTF-8 und prozentkodiert. In den Google-Richtlinien zu mehrsprachigen Websites heißt es, dass lokalisierte Wörter in URLs in Ordnung sind, aber “die UTF-8-Kodierung in der URL zu verwenden (tatsächlich empfehlen wir, wenn möglich UTF-8 zu verwenden)” und URLs beim Verlinken ordnungsgemäß zu maskieren (Google Search Central).

ConveyThis übersetzt den Text auf Ihren Seiten in eine der 210 unterstützten Sprachen, einschließlich Skripten wie Arabisch, Chinesisch, Hindi und Hebräisch, und stellt übersetzte Seiten aus den URLs ihrer eigenen Sprache bereit. Es kann jedoch keine Vorlage reparieren, die die falsche Kodierung deklariert. Führen Sie daher zuerst die obigen Prüfungen aus. Für Sprachen von rechts nach links gibt es eine Einstellung für Textrichtung auf übersetzten Seiten ändern; unser RTL-Designleitfaden deckt die Layoutseite ab. Sehen Sie sich das Ganze an Liste der Funktionen und wie übersetzte Seiten gehandhabt werden für mehrsprachige SEO, oder vergleichen Pläne und Preise.

Schnelle Checkliste

  • Datei gespeichert als UTF-8 (ohne BOM, es sei denn, Sie haben einen Grund, eine zu behalten)
  • <meta charset="utf-8"> ist das erste Element in <head>
  • Der Server-Header sagt charset=utf-8, oder nichts, nie ein anderer Zeichensatz
  • Datenbanktabellen und Verbindungsnutzung utf8mb4 (MySQL/MariaDB)
  • Formulare und APIs senden und akzeptieren UTF-8
  • lang (und dir für RTL-Sprachen) auf jeder Sprachversion festgelegt

Häufig gestellte Fragen

Was ist die richtige Zeichenkodierung für HTML?

UTF-8. Der HTML Living Standard verlangt, dass die tatsächliche Kodierung des Dokuments UTF-8 ist und dass jede Deklaration das UTF-8-Label verwendet.

Wohin sollte der Meta-Zeichensatz gehen?

Als erstes Element im Kopf. Das gesamte Element muss sich innerhalb der ersten 1024 Bytes des Dokuments befinden, also setzen Sie es vor Titel, Skripte und Stile.

Wird meta charset=“utf-8” mit einem HTTP-Header noch benötigt?

Das W3C empfiehlt, die Kodierung im Dokument auch dann zu deklarieren, wenn der Server sie sendet, da der Header verloren geht, wenn die Datei lokal gespeichert oder geöffnet wird. Wenn Sie beides verwenden, müssen sie dasselbe sagen.

Warum wird auf meiner Seite é statt é angezeigt?

Der Text ist UTF-8, wird aber als alte westliche Kodierung wie Windows-1252 dekodiert. Normalerweise deklariert der Server-Header oder das Meta-Tag den falschen Zeichensatz. Lassen Sie beide UTF-8 sagen.

Was ist der Unterschied zwischen ANSI und UTF-8?

ANSI bezieht sich normalerweise auf eine Windows-Legacy-Codepage wie Windows-1252, die nur westeuropäische Zeichen abdeckt. UTF-8 kann jedes Unicode-Zeichen in jeder Sprache darstellen und ist die einzige Kodierung, die der HTML-Standard für neue Dokumente zulässt.

Bereit, Sprachen hinzuzufügen?

Sobald Ihre Seiten sauber UTF-8 sind, ist das Hinzufügen von Sprachen hauptsächlich eine inhaltliche Aufgabe. Du kannst Erstellen Sie ein ConveyThis-Konto um Ihre Site zu übersetzen und jede Sprache auf einer eigenen URL zu veröffentlichen.

Teilen:
G2 High Performer Spring 2023
G2 Easiest Setup Fall 2024
G2 Best Support Spring 2025