HTML Sonderzeichen & Entities – Tabelle mit Beispielen für saubere Typografie
HTML-Sonderzeichen (auch HTML-Entities genannt) sind essenziell für professionelle Webtypografie. Sie ermöglichen kontrollierte Worttrennungen, geschützte Leerzeichen, typografisch korrekte Gedankenstriche und das sichere Escapen von Code.
Gerade bei SEO-optimierten Texten, WooCommerce-Preisangaben, technischen Dokumentationen oder rechtlichen Inhalten sorgen HTML-Entities wie , , – oder & für saubere Darstellung und kontrolliertes Layoutverhalten.
In dieser Übersicht findest du eine strukturierte Tabelle wichtiger HTML-Sonderzeichen inklusive Code-Beispiel und sichtbarem Ergebnis – ideal für Entwickler, Webdesigner und alle, die Wert auf präzise Frontend-Umsetzung legen.
Wichtige HTML-Entities & Spezialbefehle (mit Beispielen)
Allgemein
Funktion | HTML-Code | Beispiel (Code) | Ergebnis |
|---|---|---|---|
Geschütztes Leerzeichen | | 20 kg | 20 kg |
Optionaler Trennstrich | ­ | Daten­schutz | Datenschutz oder Daten-schutz (je nach breite) |
Copyright | © | 2026 © Codelab | 2026 © Codelab |
Pfeil rechts | → | Weiter → | Weiter → |
Pfeil links | ← | ← Zurück | ← Zurück |
Tiefgestellt | <sub>2</sub> | H<sub>2</sub>O | H2O |
Hochgestellt | <sup>3</sup> | m<sup>3</sup> | m3 |
Stern | ☆ | Mein ☆ | Mein ☆ |
Mathematisch
Funktion | HTML-Code | Beispiel (Code) | Ergebnis |
|---|---|---|---|
Gradzeichen | ° | 20°C | 20°C |
Multiplikation | × | 4×4 | 4×4 |
Division | ÷ | 10÷2 | 10÷2 |
Plus-Minus | ± | ±1Kg | ±1Kg |
Unendlich | ∞ | Liebe ist ∞ | Liebe ist ∞ |
Fazit:
Saubere HTML-Typografie ist kein Nice-to-Have, sondern ein Qualitätsmerkmal. Geschützte Leerzeichen, korrekte Gedankenstriche oder sauber escapte Zeichen wirken unscheinbar – machen aber im Detail den Unterschied zwischen „funktioniert“ und „professionell umgesetzt“.
Gerade bei SEO-Texten, WooCommerce-Preisen, technischen Dokumentationen oder layout-sensiblen Headlines lohnt sich der bewusste Einsatz von HTML-Entities. Wer diese kleinen Werkzeuge beherrscht, hat sein Frontend wirklich unter Kontrolle.
Wenn ihr weitere nützliche Entities, Sonderzeichen oder clevere HTML-Workarounds kennt, die hier nicht fehlen sollten, schickt sie mir gerne. CodeLab soll wachsen – und zwar mit praxisrelevanten Lösungen aus dem echten Projektalltag.