HTML Umlaute Problem und UTF-8 auf Webseiten lösen?

Wenn auf der Webseite HTML Umlaute falsch dargestellt werden

- HTML Umlaute, z.b. das deutsche ü wird als ü angezeigt

- An Stellen, wo HTML Umlaute oder Sonderzeichen wie € stehen sollten werden nur schwarze Flächen angezeigt

Wichtig für die richtige Darstellung der falschen Umlaute auf der Webseite ist das Zusammenspiel vom Zeichensatz UTF8 mit HTML, PHP und MySQL.

HTML Umlaute, UTF-8, PHP und MySql in den Griff bekommen!

Beim Aufruf einer Webseite erhält der Browser vom Webserver nur eine Textdatei geliefert. Diese enthält den anzuzeigenden Text und Information wie die Elemente auf der Webseite angezeigt werden solle. Der Browser hat dann die Aufgabe, diese Angaben auszuwerten und als Webseite anzuzeigen.

Werbung

Dabei wäre es einfach, wenn es nur eine Sprache und einen Zeichensatz gäbe. Es gibt auf der Erde jedoch eine Menge verschiedenster Sprachen und Schreibweisen. Für Computer wurden verschiedene Zeichensätze entwickelt, um diese Sprachen darstellen zu können. Einer der wohl gebräuchlichsten Zeichensätze ist UTF8. Dieser Zeichensatz hat sich zum Quasi-Standard im Internet entwickelt. Die ersten 128 Zeichen sind mit dem Ascii-Zeichensatz identisch, so dass eine gewisse Kompatibilität besteht.

Um die verschiedenen Zeichen richtig darstellen zu können muss der Browser beim Aufruf einer Webseite wissen, in welcher Sprache (= in welchem Zeichensatz) die Webseite angezeigt werden soll. In der deutschen Sprache stellen die Umlaute manchmal ein Problem dar.

Wo nun überall bei der Webseitenerstellung UTF-8 (bzw. UTF8 bei MySQL) eingestellt werden kann, will ich hier zeigen. Wer einen Webserver selbst betreut, kann diese Einstellungen natürlich schon per Default bei Apache, PHP und MySQL einstellen. Damit lassen sich sehr viele der utf-8 Umlaute Probleme beseitigen.

Beim Umzug von Webseiten auf andere Server ist es sehr interessant zu wissen, wie Umlautprobleme entstehen und gelöst werden können.

Übrigens zähle ich diese Maßnahmen auch zur Suchmaschinenoptimierung. Und SEO kann man selber machen! Die Seite lädt schneller, der Besucher wird nicht durch aufflackernde fehlerhafte Umlaute irritiert und hat einfach mehr Freude auf der Webseite.

UTF8-fähigen Editor verwenden, wenn auf der Webseite HTML Umlaute falsch dargestellt werden

Für die Bearbeitung der Textdateien ist wichtigste Voraussetzung, dass ein UTF-8 fähiger Texteditor verwendet wird. Das kann Notepad++ oder psPad sein. Der windows eigene notepad ist dazu erst ab Windows7 geeignet. Da könnte es nämlich passieren, dass man sich die falsche Umlaute gleich wieder selbst einbaut.

Im Texteditor sollte dann auch auf die eingestellte Zeichenkodierung geachtet werden. Werden Dateien für in UTF-8 codierte Webseiten bearbeitet ist UTF-8 ohne BOM meist die richtige Einstellung. In notepad++ findet sich das unter Kodierung -> UTF-8 ohne BOM. In (Windows)Notepad lässt sich die Zeichencodierung etwas umständlich erst beim Speichern der Datei umstellen, allerdings ist UTF-8 ohne BOM standardmäßig voreingestellt.

Übrigens ist das Problem immer, dass die Umlaute im HTML falsch eingebaut werden. Die Ursache dafür ist jedoch, dass PHP die Umlaute nicht richtig einfügt, möglicherweise weil die Datenbank MySQL die Umlaute falsch ausliefert. Hierfür könnte wieder das fehlerhafte Speichern der Daten die eigentliche Ursache sein. Dafür könnte wieder eine falsche Eingabe der Umlaute in Formularen, z.B. im Backend eines Webshop oder eines CMS verantwortlich sein.

Wenn Umlaute im HTML der Webseite falsch angezeigt werden, muss also die ganze Kette überprüft werden.

Dass der Editor UTF-fähig sein, steht hier nicht zufällig als erster Punkt. Ist er nämlich nicht utf8-fähig, ist eine weitere Fehlersuche schlichtweg unmöglich.
Ich selbst habe mit dem HTML-Editor Phase5 das Webseitenbauen begonnen. Allerdings kann der nicht mit UTF8-codierten Dateien umgehen und zeigt Umlaute darin einfach immer falsch an, ohne das richtige Werkzeug dreht man sich dann immer im Kreis.

 

UTF-8 als meta-tag charset einfügen

Im html Quellcode kann per Metatag der Zeichensatz für die Webseite angegeben werden. Das hilft dem Browser, wenn bessere Informationen fehlen, die Umlaute richtig zu zeigen.

Werbung

Dazu wird im head-Tag der Seite der metatag eingetragen. Hat allerdings den Nachteil, dass der Browser die Seite schon geladen haben muss um das Metatag auszuwerten. Das kann zur Folge haben, dass während des Ladens der Webseite enthaltene Umlaute nicht korrekt angezeigt werden. Gerade beim Webseiten title kann das wenig schön aussehen.

Im html eingebaut sieht das so aus:

<head>
  <meta charset="UTF-8">
  ...
  ...
  ...
</head>

Das ist also nur der letzte Notanker für den Browser, wenn vom Webserver keine Information zum Zeichensatz übertragen wurde.

Übrigens: Mancher Browser erwartet diesen Meta-Tag innerhalb der ersten 1024 Zeichen der Webseite. Deshalb am Besten wirklich gleich als ersten Meta-Tag einfügen. Oder als zweiten, nämlich gleich nach dem http-header-Tag.

Damit vermeidet man ein kleines aber fieses Problem: Kommt nämlich am Anfang ein üppig gefüllter description und/oder keyword Meta-Tag, wandert der Meta-Tag charset nach hinten und erscheint möglicherweise erst nach mehr als 1024 Zeichen. Damit wäre er vom Browser nicht mehr zu erkennen und der Browser erfährt womöglich nichts vom Zeichensatz, macht was er für richtig hält, zeigt die Seite in iso -xxx an und die Umlaute werden auf der Webseite falsch angezeigt,  sehen also wieder mal gar nicht gut aus.

UTF 8 als character-set im Webseiten-header mitgeben

UTF8 im http-Contentheader lässt sich auf mehrere Arten angeben

Der Contenheader ist die erste Information, die der Webserver als Antwort auf die Anfrage des Browsers sendet.

Ist darin auch die Information enthalten, welchen Zeichensatz die Seite verwendet, kann sich der Browser schon auf diesen Zeichensatz einstellen und zum Beispiel Umlaute im title der Seite während des Aufbaus schon korrekt anzeigen.

Hier gibt es mehrere Möglichkeiten, die alle das Gleiche bewirken:

Contentheader im html-head angeben

Dazu wird im head-Tag der Webseite als erste Zeile folgender Code eingetragen:

<meta http-equiv="content-type" content="text/html; charset=utf-8">

Oder für xhtml-Webseiten (der Unterschied ist der / am Ende) :

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Contentheader per .htaccess-Datei

Ist der Webserver so konfiguriert, dass Webseitenbetreiber auch Änderungen über die .htaccess Datei durchführen können, kann auch der Zeichensatz für die Webseiten vorgegeben werden. Dazu fügen Sie mittels eines Texteditors die folgenden Zeilen in die .htaccess Datei ein. Diese finden Sie im Hauptverzeichnis (root) des Webspace.

Dazu kann in der .htaccess die adddefaultcharset-Direktive verwendet werden:

AddDefaultCharset UTF-8

Damit wird für alle Webseiten vom Webserver im http-Header die Information gesendet, dass die Webseite den Zeichensatz UTF8 verwendet.

Contentheader per .htaccess-Datei nur für bestimmte Dateitypen

Für Dateien mit bestimmen Endungen kann die addcharset-Direktive verwendet werden:

AddCharset UTF-8 .php

Damit wird für alle Dateien, die auf .php enden, vom Webserver im http-Header die Information gesendet, dass die Webseite den Zeichensatz UTF8 verwendet. Weitere Dateiendungen werden durch Leerzeichen getrennt angefügt.

Contentheader per php anpassen

Auch per php lässt sich der Contentheader anpassen, so dass jeder Umlaut in HTML richtig angezeigt wird:

Dazu muss der folgende php-Code in der ersten Zeile der aufgerufenen php-Datei stehen.

Eine Möglichkeit ist die Verwendung des header-Befehls:

<?php
header('Content-Type: text/html; charset=UTF-8');
?>

Eine weitere Möglichkeit ist das Überschreiben der Einstellungen der php.ini, d.h. der Grundeinstellungen von php. Allerdings muss der Server auch so konfiguriert sein, dass der Einsatz von ini_set auch zugelassen ist.

Aber sieht dann so aus:

<?php
ini_set("default_charset", "UTF-8");
?>

Auch damit wird für die aufgerufene Webseite vom Webserver im http-Header die Information gesendet, dass die Webseite den Zeichensatz UTF8 verwendet. Der Browser kann sich also wieder darauf einstellen.

UTF8 bei der Eingabe in Formularen berücksichtigen

Standardmäßig geht ein html-Formular davon aus, dass der Zeichensatz für die Eingabedaten der gleiche Zeichensatz ist wie der Zeichensatz der Webseite in der das Formular angezeigt wird.

Werbung

Wird die Webseite irrtümlich (sei es ein Fehler im html-Code oder eine Einstellung des Browsers) zum Beispiel als ISO-8859-15 angezeigt und Daten in UTF-8 eingegeben, landen falsch codierte Zeichen zuerst auf dem Webserver und dann in der Datenbank.

Um dies zu verhindern lässt sich im Form-Tag der akzeptierte Datensatz angeben:

<form accept-charset="UTF-8">
  ....Formularelemente
</form>

Diese Angabe beim Formular ist nicht unbedingt erforderlich, allerdings erhöht es die Robustheit des Programms, das mit den Daten arbeitet. Gerade im Admin-Bereich einer Webseite (CMS, Blog oder Shop) können hier kleine Fehler manches graue Haar verursachen.

UTF-8 Umlaute durch HTML-Entities ersetzen

In HTML gibt es auch die Möglichkeit, utf-8 Umlaute durch sogenannte HTML Entities zu ersetzen. Ich zähle das allerdings nur zu einer kurzfristigen Lösungsmöglichkeit. Das lässt sich einsetzen, wenn auf die Schnelle die Darstellung eines Umlautes korrigiert werden muss.

Zudem ist es natürlich auch sehr aufwändig, wenn mehrere Zeichen falsch dargestellt werden alle im Text zu bearbeiten. Unerwartete Nebeneffekte könnte auch sein, dass zum Beispiel eine Suche nach Artikel in einem Shopsystem den Artikel mit Entities im Namen nicht findet.

UTF-8 in PHP bei der Zeichenumwandlung berücksichtigen

UTF-8 Problem mit htmletities

Mittels der Funktion htmlentities lassen sich mit PHP bestimmte Zeichen in Texten in die entsprechenden HTML-Codes umwandeln.

Allerdings muss diese Funktion wissen, welcher Zeichensatz verwendet werden soll. Wird ihr der Zeichensatz nicht angegeben, verwendet sie den Standardzeichensatz, der in der PHP-Installation angegeben ist. Dieser ist in PHP-Versionen vor 5.4 ISO-8859-1, bei PHP 5.4 und 5.5 ist es UTF-8 und ab 5.6 wird default-charset verwendet.

Damit lässt sich gut verstehen, warum es bei Updates der PHP-Versionen oder beim Umzug der Seite auf einen anderen Server plötzlich falsch angezeigte Umlaute geben kann.

htmlentities sollte also immer mit Angabe des Zeichensatzes geschrieben werden:

$text = htmlentities($text, ENT_QUOTES, 'UTF-8');

UTF-8 Problem mit htmlspecialchars

Auch htmlspecialchars wandelt Zeichen in Text in HTML-Code um. Auch hier ist die Angabe des Zeichensatzes nützlich, um Fehler bei der Darstellung von Umlauten oder Sonderzeichen vermeiden.

Sollte also so aussehen:

 

$text = htmlspecialchars($text, ENT_QUOTES, 'UTF-8');

UTF-8 Problem mit html_entity_decode

Mit der PHP-Funktion html_entity_decode lassen sich html-codierte Zeichen in ihre ursprünglichen Zeichen umwandeln. Auch hier ist die Angabe des Zeichensatzes wichtig.

Sieht dann so aus:

$text = html_entity_decode($text, ENT_QUOTES, 'UTF-8');
UTF-8 Angabe im CSS File

Auch in CSS-Dateien lässt sich die Kodierung angeben, die der Browser beim Parsen anwenden soll.

Wichtig ist dabei auch, dass die CSS-Datei in der angegeben Kodierung ohne BOM gespeichert wird.

Dazu wird in die erste Zeile der CSS-Datei folgendes geschrieben:

@charset "utf-8";
UTF8 in der MySQL Datenbank berücksichtigen

Datenbankverbindung richtig einstellen

Werden Daten per PHP in der Datenbank gespeichert muss der Verbindung zur MySQL-Datenbank noch gesagt werden, welcher Art die übertragenen Zeichen sein sollen.

Dies geschieht mit dem folgenden Code vor Ausführen des SQL-Befehls:
(wichtig ist, dass in MySQL das UTF8 wirklich ohne den Bindestrich geschrieben wird!)

mysql_query("SET NAMES 'utf8'");

Am besten kommt diese Zeile direkt nach mysql_select_db :

mysql_select_db("database");
mysql_query("SET NAMES 'utf8'");

Damit weiß die Datenbank, wie sie mit den übergebenen Zeichen umgehen muss.

Datenbank-Collation richtig einstellen

Die Kollation in der Datenbank gibt an, welche (interne) Tabelle MySQL zu Vergleichen heranziehen soll. Wirkt sich also bei der Sortierung von Datensätzen aus. Je nach angegebener Kollation erscheint z.B. Ärger nicht nach Argument.

Ein Einfluß auf die Darstellung der Zeichen auf der Webseite ist nicht vorhanden. Fehlerhafte Umlaute liegen also nicht an der Kollation von Datenbank, Tabelle oder Felder.

Die Beschreibung der Kollationen findet sich auf der MySQL Seite

Für den europäischen Raum dürfte wohl utf8_unicode_ci interessant sein, funktioniert in Deutschland und Frankreich einwandfrei.

Umlaut in Webverzeichnis richtig anzeigen

Wer seine Webseite bekannnt machen möchte, trägt diese auch in Webverzeichnisse ein. Hier wird dann gerne vorbereiteter Text in die Eingabeformulare des Webverzeichnis reinkopiert.
Wird das Webverzeichnis in ISO angezeigt, der kopierte Text aber aus einer UTF-8 Datei kopiert, könnten Umlaute im Webverzeichnis falsch angezeigt werden. Um Umlaute im Webverzeichnis richtig anzeigen zu lassen muss also darauf geachtet werden, dass das Webverzeichnis und der Text, der darin angezeigt werden soll, die gleiche Kodierung haben.

Dazu kann im Browser unter Anzeige -> Zeichenkodierung der Zeichensatz der Webseite angezeigt werden. Steht hier dann etwas mit ISO-... , dann muss der Beschreibungstext ebenfalls aus einer ISO-... codierten Datei kommen.

Man kann den Text natürlich auch direkt von Hand eingeben.

Damit kann jetzt das Webverzeichnis den Umlaut richtig anzeigen.

Natürlich würde ich mich freuen, wenn Sie mir einen Kommentar hinterlassen würden.

Kommentar abgeben:

Kommentare:

Kommentar von Tilli |

Hallo Ihr Schlauen,

ich habe eine Frage. Ist das auch ein Problem, wenn die Umlaute auf der Webseite richtig angezeigt werden und im Quelltext nicht?
Was tut man dann bei Webshopbaukästen?

Ich würde mit sehr über eine Erklärung freuen.

Freundliche Grüße
Tilli

Antwort von Magnus Geisler

Hallo Tilli,

wenn im Quelltext Umlaute falsch angezeigt werden und auf der Webseite sind sie richtig, würde ich darauf tippen, dass der Editor auf die falsche Kodierung eingestellt ist. Das bedeutet, dass es eigentlich keinen Fehler gibt, sondern nur der Editor die korrekte Anzeige nicht beherrscht. Bei der Auswahl eines Webseiteneditors sollte man darauf achten, dass sich die Kodierung auf UTF8 einstellen lässt. Gute Editoren helfen auch bei der Änderung der Kodierung, besitzen also eine Funktion wie "Konvertiere zu UTF8". Empfehlenswert sind hier notepad++ und PSPad.

viele Grüße

Magnus

Kommentar von Peter Riedel |

Wenn ich Umlaute eingebe, entsteht danach ein Feld als Leerraum
z. Beisp.: aus Blättchen wird Blä ttchen

Frage: Welche Taste habe ich beim PC falsch gedrückt?

Antwort von Magnus Geisler

Hallo Peter, das lässt sich mit den wenigen Angaben nicht ermitteln. Interessant wäre z.B. wo du den Text eingibst. In ein Formular einer Webseite oder z.B. einen Texteditor (Notepad++, PsPad). Beim Texteditor ist wichtig, dass die richtige Kodierung eingestellt ist (Ansi oder UTF8). Bei der Webseite gibt es die beschriebenen Möglichkeiten von der Formulareingabe bis zum Speichern/Auslesen aus der Datenbank.

viele Grüße

Magnus

Kommentar von Wolfgang Singer |

Ich habe ein ähnliches Problem: Worte und Sätze mit Umlauten, die aus einer SQL DAtei stammen, werden nicht dargestellt (siehe die Unterschrift "Gehäuse") auf der Startseite unter dem Bild Gehäuse.
Wäre sehr dankbar für Hilfe.
Das ist geschehen, seit wir (wegen eines anderen Problems) auf eine etwas kleinere Version von PHP heruntersteigen mussten.

Kommentar von Frank |

Danke für Eure Hinweise und Anregungen! Ich arbeite mit dem SMF Forum und habe nun die Datenbank wegen Providerwechsel umziehen müssen. Im neu installierten Forum werden in der Software, die für das Forum selbst zuständig ist (also das Layout/Theme) die Umlaute korrekt dargestellt, bei der Datenbank sind aber irgendwie die UTF8 Umlaute "verschütt" gegangen, so dass in den Forumsbeiträgen nun die Umlaute entsprechend kyrptisch dargestellt werden.
Ich bin nun ein wenig unsicher, wie ich dieses Problem systematisch angehen soll. Die .htaccess Datei brachte jedenfalls keine Veränderung der Darstellung.
Aber wie ändere ich ggf. die Texte in der Datenbank und wie finde ich heraus, welche Tabellen ggf. geändert werden müssen? Mit mysql kenne ich mich bislang nicht aus.
Habt ihr weiterführende Links dazu?

Kommentar von andreas |

Vielen Dank für Ihren Tipp. Die Umlaute wurden bei mir auf der HTML Seite richtig angzeigt. Allerdings in der SQL Datenbank falsch abgespeichert. DAnk ihres Tipps funktioniert nun alles. Ich war tagelang dabei und dank ihnen habe ich nun die Lösung :)

Kommentar von Daniel |

Ich habe eine ziemlich blöde Frage, sitze hier aber wirklich mit einem riesigen Brett vor dem Kopf. Ich nutze sehr einfach aufgebaute HTML-Seiten, die ich im Editor schreibe. Umlaute waren bislang nie ein Problem. Bei einer einzigen HTML jedoch, die eine exakte Kopie einer anderen HTML ist und sich nur inhaltlich unterscheidet, werden mir die Umlaute fehlerhaft angezeigt. Ebenso die Apostrophe.
Man kann die Quelltexte übereinanderlegen und es gibt keinen Unterschied. Dennoch bekomme ich beim Öffnen der HTML einmal die Umlaute ganz normal (wie auf allen anderen HTMLs auch), auf der einen jedoch, verbleiben die kryptischen Symbole. Die Anleitung habe ich mir zwei Mal durchgelesen, der Fehler will mir nicht auffallen.

Beste Grüße!