HTML-Sonderzeichen
Die HTML-Sonderzeichen-Übersicht liefert dir alle wichtigen Entities und Codes auf einen Blick – zum Nachschlagen, Kopieren und direkten Einsetzen in deine Webprojekte.
Was sind HTML-Sonderzeichen?
Manche Zeichen lassen sich nicht einfach so in HTML-Code schreiben. Das Kleiner-als-Zeichen (<) etwa würde der Browser als Beginn eines Tags interpretieren, das kaufmännische Und (&) als Start einer Entity. Und dann gibt es Zeichen, die auf keiner Tastatur zu finden sind: Währungssymbole, typografische Anführungszeichen, Pfeile oder mathematische Operatoren.
Für all diese Fälle existieren HTML-Entities – spezielle Zeichencodes, die der Browser in das gewünschte Symbol umwandelt. Sie beginnen mit einem Kaufmanns-Und und enden mit einem Semikolon. Das geschützte Leerzeichen schreibst du als , das Copyright-Symbol als ©, den Euro als €.
Warum Entities noch immer relevant sind
Mit UTF-8 als Standard-Zeichenkodierung könntest du theoretisch die meisten Sonderzeichen direkt eingeben. Trotzdem bleiben HTML-Entities in vielen Situationen die sicherere Wahl.
Erstens: Lesbarkeit im Code. Ein → ist im Quelltext sofort als Pfeil erkennbar, das tatsächliche Zeichen → könnte in manchen Editoren oder Schriftarten untergehen. Zweitens: Zuverlässigkeit. Bei Problemen mit der Zeichenkodierung – etwa wenn eine Datei versehentlich falsch gespeichert wird – bleiben Entities intakt, während direkte Unicode-Zeichen zu kryptischen Hieroglyphen werden. Drittens: Die bereits erwähnten reservierten Zeichen wie <, > und & müssen in bestimmten Kontexten zwingend als Entity geschrieben werden.
Typische Einsatzbereiche
Im Alltag begegnen dir HTML-Sonderzeichen an vielen Stellen: typografisch korrekte Anführungszeichen („ „) statt der geraden Variante, echte Auslassungspunkte (…) statt drei einzelner Punkte, geschützte Leerzeichen, die ungewollte Zeilenumbrüche verhindern, oder der Gedankenstrich (–), der sich vom kurzen Bindestrich unterscheidet.
Auch Icons lassen sich über Entities einbinden – etwa Pfeile, Häkchen oder geometrische Formen. Sie sind eine leichtgewichtige Alternative zu Icon-Fonts oder SVGs, wenn du nur einzelne Symbole brauchst.
So nutzt du die Übersicht
Die Sammlung ist nach Kategorien gegliedert: Typografie, Währungen, Pfeile, mathematische Zeichen und mehr. Zu jedem Zeichen siehst du die benannte Entity (falls vorhanden), den numerischen Code und das Zeichen selbst. Ein Klick kopiert den gewünschten Code in die Zwischenablage.
Die numerischen Codes (wie € für €) funktionieren universell, die benannten Varianten (wie €) sind leichter zu merken. Beide führen zum selben Ergebnis.
Tipp für den Workflow
Leg dir eine Kurzliste der Zeichen an, die du regelmäßig brauchst. Das spart das wiederholte Nachschlagen und sorgt für typografische Konsistenz in deinen Projekten. Denn gutes Webdesign zeigt sich auch in den Details – und korrekte Sonderzeichen gehören definitiv dazu.
Was sind HTML-Sonderzeichen?
Manche Zeichen lassen sich nicht einfach so in HTML-Code schreiben. Das Kleiner-als-Zeichen (<) etwa würde der Browser als Beginn eines Tags interpretieren, das kaufmännische Und (&) als Start einer Entity. Und dann gibt es Zeichen, die auf keiner Tastatur zu finden sind: Währungssymbole, typografische Anführungszeichen, Pfeile oder mathematische Operatoren.
Für all diese Fälle existieren HTML-Entities – spezielle Zeichencodes, die der Browser in das gewünschte Symbol umwandelt. Sie beginnen mit einem Kaufmanns-Und und enden mit einem Semikolon. Das geschützte Leerzeichen schreibst du als , das Copyright-Symbol als ©, den Euro als €.
Warum Entities noch immer relevant sind
Mit UTF-8 als Standard-Zeichenkodierung könntest du theoretisch die meisten Sonderzeichen direkt eingeben. Trotzdem bleiben HTML-Entities in vielen Situationen die sicherere Wahl.
Erstens: Lesbarkeit im Code. Ein → ist im Quelltext sofort als Pfeil erkennbar, das tatsächliche Zeichen → könnte in manchen Editoren oder Schriftarten untergehen. Zweitens: Zuverlässigkeit. Bei Problemen mit der Zeichenkodierung – etwa wenn eine Datei versehentlich falsch gespeichert wird – bleiben Entities intakt, während direkte Unicode-Zeichen zu kryptischen Hieroglyphen werden. Drittens: Die bereits erwähnten reservierten Zeichen wie <, > und & müssen in bestimmten Kontexten zwingend als Entity geschrieben werden.
Typische Einsatzbereiche
Im Alltag begegnen dir HTML-Sonderzeichen an vielen Stellen: typografisch korrekte Anführungszeichen („ „) statt der geraden Variante, echte Auslassungspunkte (…) statt drei einzelner Punkte, geschützte Leerzeichen, die ungewollte Zeilenumbrüche verhindern, oder der Gedankenstrich (–), der sich vom kurzen Bindestrich unterscheidet.
Auch Icons lassen sich über Entities einbinden – etwa Pfeile, Häkchen oder geometrische Formen. Sie sind eine leichtgewichtige Alternative zu Icon-Fonts oder SVGs, wenn du nur einzelne Symbole brauchst.
So nutzt du die Übersicht
Die Sammlung ist nach Kategorien gegliedert: Typografie, Währungen, Pfeile, mathematische Zeichen und mehr. Zu jedem Zeichen siehst du die benannte Entity (falls vorhanden), den numerischen Code und das Zeichen selbst. Ein Klick kopiert den gewünschten Code in die Zwischenablage.
Die numerischen Codes (wie € für €) funktionieren universell, die benannten Varianten (wie €) sind leichter zu merken. Beide führen zum selben Ergebnis.
Tipp für den Workflow
Leg dir eine Kurzliste der Zeichen an, die du regelmäßig brauchst. Das spart das wiederholte Nachschlagen und sorgt für typografische Konsistenz in deinen Projekten. Denn gutes Webdesign zeigt sich auch in den Details – und korrekte Sonderzeichen gehören definitiv dazu.
Alle Tools & Generatoren im Überblick:
Über 8.500 sind schon dabei:
KI-Guide &
Webdesign-Checkliste
sowie exklusive Webdesign-Inhalte, kostenfreie Templates + regelmäßig Webdesign-Links & -tipps:
Deine Daten sind sicher. Mehr Infos: Beispiele, Datenschutz, Analyse und Widerruf