HTML Sonderzeichen richtig einfügen: Die ultimative Anleitung

HTML Sonderzeichen: warum Ihr schönes „&" in der Datenbank plötzlich als „&" steht

Ich saß mal an einem Freitagnachmittag vor einem Newsletter, der an 4.200 Empfänger rausgehen sollte. Titel: ein Firmenname mit kaufmännischem Und. In der Vorschau stand da plötzlich „Müller & Söhne". Nicht „&". Sondern das Wort „amp" mit Semikolon. Ich hab zwanzig Minuten gesucht, bis ich kapiert habe, dass ich das Problem selbst gebaut hatte – nämlich an drei verschiedenen Stellen doppelt escaped. Seitdem habe ich eine Regel für HTML-Sonderzeichen, und die hat mir seit Jahren keinen Ärger mehr gemacht.

Um die geht es hier. Nicht um eine trockene Liste zum Kopieren – die finden Sie überall. Sondern darum, wann Sie eine Entität wie ä schreiben und wann Sie einfach das Zeichen direkt tippen. Das ist der Punkt, an dem die meisten Anleitungen aufhören, und genau da fangen die Probleme an.

Wie lautet der HTML-Code für Sonderzeichen?

Es gibt drei Schreibweisen für dasselbe Zeichen, und die Verwirrung fängt genau hier an:

• Direkt: Sie tippen das Zeichen selbst – ä, €, →.
• Benannte Entität: ä, €, →. Ein Name, den HTML kennt.
• Numerisch: ä (dezimal) oder ä (hexadezimal). Funktioniert für jedes Unicode-Zeichen, auch wenn es keinen Namen hat.

Der wichtigste Satz, den man in vielen Übersichten vergeblich sucht: Wenn Ihre Seite UTF-8 nutzt, sind die Entitäten für Umlaute überflüssig. Sie können ä, ö, ü, ß einfach direkt schreiben. Die Entität ist kein Qualitätsmerkmal, sondern eine Rückversicherung für den Fall, dass der Zeichensatz kippt.

Das ist genau die Eselsbrücke, die mir am Anfang gefehlt hat: Entitäten sind ein Sicherheitsnetz, kein Stil. Wenn der Boden sicher ist, brauchen Sie es nicht.

Wann schreibe ich die Entität, wann das Zeichen direkt?

Meine Faustregel nach ein paar verbrannten Fingern:

• Normale Webseite, im Kopf, Server liefert UTF-8: Zeichen direkt. Fertig.
• E-Mail-HTML: Entitäten. Mailclients sind ein Zoo, und ich habe schon erlebt, dass ein Umlaut in einer bestimmten Outlook-Version als Fragezeichen ankam.
• XML-Feeds, RSS, Schnittstellen zu Fremdsystemen: kritische Zeichen escapen, weil XML nur wenige nackte Zeichen erlaubt.
• Ein CMS, dem ich nicht traue: alles außerhalb von ASCII als Entität. Hässlich im Quelltext, schmerzfrei im Ergebnis.

Und die harte Regel, die für alle Fälle gilt: &, < und > werden in HTML immer escaped, auch bei UTF-8. Ein nacktes „&" ist kein Zeichen, sondern der Start einer Entität. Deshalb schreibt man &, < und >.

Was gibt es für Sonderzeichen?

Die Menge ist der Punkt. Unicode umfasst Zehntausende Zeichen, und niemand braucht sie alle im Kopf. In der Praxis sortiere ich sie in vier Gruppen, die tatsächlich auf meinem Schreibtisch landen.

Umlaute und Typografie

Der deutschsprachige Kern. Ä, Ö, Ü, ä, ö, ü, ß. Dazu die typografischen Anführungszeichen, die viele aus Bequemlichkeit durch das gerade Zollzeichen ersetzen – was in einem gedruckten Text sofort auffällt. Das ß ist übrigens ein Sonderfall: Es hat eine eigene Entität, ß, und ein großes ẞ existiert zwar als Unicode-Zeichen, aber ohne bequeme benannte Entität. Wenn Sie es brauchen, gehen Sie über den numerischen Code.

Pfeile, Kreise und Kästchen

Dinge wie → für den Pfeil, ○ und ●, ■ und □. Hier wird es interessant, weil nicht jedes Symbol einen Namen hat. Beim Pfeil gibt es →, ←, ↑, ↓ – vier Richtungen, vier Namen. Beim Kreis gibt es ● (gefüllt) und ○ (offen), aber keinen bequemen Namen dafür. Wenn eine Liste wie diese anfängt, nur noch numerische Codes zu zeigen, ist das ein ehrliches Zeichen: Der Name existiert nicht.

Telefon und Alltagszeichen

Das Tastaturzeichen für das Telefon ist ein gutes Beispiel für eine Falle. Das Symbol auf der Tastatur ist ☎ bzw. ✆, aber die klassische Entität ☎ zeigt ein anderes, kleineres Glyph, und je nach Schriftart sieht es aus wie ein Hörer aus den Neunzigern. Deshalb sehe ich in modernen Webseiten eher ein SVG oder ein Emoji statt der Entität. Die Entität funktioniert, aber sie sieht nicht immer gut aus.

Das Leerzeichen und seine getarnte Variante

Das geschützte Leerzeichen ist der Sonderling unter den Sonderzeichen. Geschrieben als  . Es verhindert, dass der Browser an dieser Stelle umbricht. Genau das brauchen Sie bei „10 kg" oder „z. B.", damit nicht „10" am Zeilenende steht und „kg" in der nächsten Zeile klebt. Ich benutze es ständig – und noch häufiger verfluche ich es, weil man ein normales und ein geschütztes Leerzeichen optisch nicht unterscheiden kann. In einem sauberen Quelltext sieht man den Unterschied nur am Code, nicht am Bildschirm.

Wo finde ich Sonderzeichen?

Die ehrliche Antwort: Sie müssen sich nichts merken. Sie müssen nur wissen, wo Sie nachsehen, und welche der Quellen vertrauenswürdig ist.

• Betriebssystem-Zeichentabelle. Windows und macOS haben eine eingebaute Übersicht aller installierten Zeichen, mit Namen. Gut, um ein Zeichen zu finden, das man vor sich sieht, aber nicht benennen kann.
• Unicode-Zeichentabelle im Browser. Wenn Sie das Zeichen einmal haben, zeigt Ihnen eine Unicode-Suche den hexadezimalen Code – und damit haben Sie die numerische Entität sofort.
• Referenzlisten im Netz. Praktisch, aber Vorsicht: Viele sind unvollständig oder zeigen veraltete Glyphen. Die Liste ist nur so gut wie der Zeichensatz, mit dem sie gerendert wird.

Mein persönlicher Weg ist ein anderer: Ich habe mir ein kleines Textfile mit den fünfzehn Zeichen angelegt, die ich tatsächlich brauche. Umlaute, das kaufmännische Und, das Euro-Zeichen, die typografischen Anführungszeichen, das geschützte Leerzeichen, drei Pfeile. Alles darüber hinaus schlage ich nach, wenn es auftaucht – und das ist selten.

Welche Alt-Codes gibt es für Sonderzeichen?

Alt-Codes sind etwas anderes als HTML-Entitäten, auch wenn beide dasselbe Zeichen erzeugen können. Alt-Codes sind Tastaturkürzel für Windows: Sie halten die Alt-Taste gedrückt und tippen auf dem Ziffernblock (nicht auf der oberen Zahlenreihe) eine Zahl. Alt + 0228 ergibt ein ä, Alt + 0128 ein Euro-Zeichen.

Zwei Dinge, die ich dabei immer wieder sehe:

1. Ohne führende Null funktioniert es manchmal, aber nicht immer. Alt + 228 und Alt + 0228 sind nicht dasselbe – der eine zieht aus der alten Codepage, der andere aus Windows-1252. Deshalb liefert der eine ein ä und der andere manchmal Müll.
2. Die Codes gelten für das Windows-1252-Zeichensatz, nicht für Unicode. Wenn Sie nur auf einem Mac arbeiten, haben Sie keine Alt-Codes in diesem Sinn – dort gibt es Tastenkombinationen mit der Option-Taste, die anders funktionieren.

Wichtig: Alt-Codes haben mit HTML nichts zu tun. Sie sind ein Werkzeug für die Tastatur, nicht für den Quelltext. Verwechseln Sie die beiden nicht, sonst tippen Sie Alt-Codes in eine HTML-Datei und wundern sich, warum da Zahlen stehen.

UTF-8 oder Entitäten: die Entscheidung, die keiner erklärt

Hier kommt der Teil, der in den meisten Übersichten fehlt. Sobald Sie <meta charset="utf-8"> im Kopf Ihrer Seite haben und der Server die Datei tatsächlich als UTF-8 ausliefert, sind die Entitäten für Umlaute überflüssig. Das ist keine Meinung, das ist die Funktionsweise des Zeichensatzes.

Und trotzdem schreibe ich in manchen Projekten weiter ä. Warum? Weil die beiden Bedingungen – Meta-Tag und Server-Auslieferung – nicht immer beide erfüllt sind. Wenn der Server aus einer alten Konfiguration heraus die Datei als ISO-8859-1 schickt, hilft Ihnen das Meta-Tag im Körper der Seite wenig. Ich habe das bei einem Kundenprojekt gesehen: Auf dem Entwicklungsrechner sah alles perfekt aus, auf dem Live-Server waren sämtliche Umlaute zerschossen. Zweieinhalb Stunden Suche, eine Zeile Server-Konfiguration.

Die pragmatische Tabelle, die ich mir irgendwann gebaut habe:

Die drei Fehler, die ich selbst gemacht habe

Doppel-Encoding. Das oben erwähnte &. Wenn ein System bereits escapt hat und ein zweites System dieselbe Zeichenfolge nochmal durch den Escaper schickt, wird aus & die Zeichenfolge &, und auf dem Bildschirm steht „&". Der Fehler liegt nie im Zeichen, sondern in der Frage: Wo wurde schon escaped? Prüfen Sie die Kette, nicht das Einzelzeichen.

Nacktes & im XML. Ich habe mal einen RSS-Feed mit einem Firmennamen gebaut, der ein kaufmännisches Und enthielt. Der Feed war leer. Kein Fehler, keine Warnung, einfach nichts. Der XML-Parser hatte sich an dem nackten „&" verschluckt, weil er dachte, eine Entität fange an. Escape für XML: & wäre falsch – & ist es.

Zu viel Vertrauen in die Vorschau. Ein Zeichen, das im Editor korrekt aussieht, muss im Browser nicht korrekt ankommen. Die Vorschau rendert mit einem anderen Zeichensatz als der Live-Server. Ich prüfe heute immer im echten Browser, mit dem echten Encoding, bevor ich etwas ausliefere.

Was lernen Sie daraus? Die Sonderzeichen selbst sind trivial. Die Fehler passieren nicht am Zeichen, sondern in der Verarbeitungskette. Deshalb ist die zentrale Frage nicht „Welche Entität brauche ich?", sondern „Wer fasst diesen Text auf dem Weg zum Bildschirm alles an – und wie escaped der?"

Und wenn Sie das nächste Mal vor einem „&" sitzen, das da nicht hingehört: Suchen Sie nicht das Zeichen. Suchen Sie die Stelle, an der zweimal escaped wurde. Da ist es.