HTML-Entities kodieren / dekodieren
Text für HTML escapen und Entities wieder in Text umwandeln.
Über dieses Tool
Escape <, >, &, Anführungszeichen und optional jedes Nicht-ASCII-Zeichen, damit Text sicher in HTML eingefügt werden kann, oder dekodiere benannte und numerische Entities wie &, é und 🚀 zurück in reinen Text.
So verwendest du es
- Wähle Kodieren, um Text für HTML zu escapen, oder Dekodieren, um Entities wieder in Zeichen umzuwandeln.
- Füge deinen Text ein.
- Kodiere optional jedes Nicht-ASCII-Zeichen als numerische Entity.
- Kopiere das Ergebnis.
Fragen
- Welche Zeichen müssen in HTML escapet werden?
- & und < immer; > zur Sicherheit; und " oder ' innerhalb von Attributwerten. Wenn du diese fünf escapest, kannst du Benutzertext sicher in HTML anzeigen.
- Schützt Escaping vor XSS?
- Ausgaben passend zum Kontext zu escapen ist der zentrale Schutz für HTML-Text und -Attribute. Innerhalb von script-Tags, Event-Handler-Attributen oder URLs reicht es nicht, denn die brauchen eine eigene Kodierung.
- Muss ich Buchstaben mit Akzent kodieren?
- Nicht, wenn deine Seite als UTF-8 ausgeliefert wird, was bei fast jeder modernen Seite der Fall ist. Alle Nicht-ASCII-Zeichen zu kodieren ist nur für Systeme sinnvoll, die kein UTF-8 verarbeiten können.
- Was ist der Unterschied zwischen und einem normalen Leerzeichen?
- ist ein geschütztes Leerzeichen, U+00A0. Der Browser bricht an ihm keine Zeile um und fasst mehrere davon nicht zu einem zusammen, anders als normale Leerzeichen. Nutze es, um Werte wie „10 km“ zusammenzuhalten. Für Layout und Abstände nimm CSS statt Ketten von .
- Soll ich ' oder ' für einen Apostroph verwenden?
- Beide funktionieren in HTML5 und XML, aber ' gehörte nicht zu HTML 4, ältere Parser und manche E-Mail-Clients erkennen es daher nicht. ' funktioniert überall, deshalb verwendet dieser Encoder es. Innerhalb eines Attributs in doppelten Anführungszeichen musst du den Apostroph gar nicht escapen.
- Was ist der Unterschied zwischen HTML-Escaping und URL-Kodierung?
- HTML-Escaping macht Text innerhalb von HTML sicher, URL-Kodierung macht Text innerhalb einer URL sicher. Ein Link in einem href-Attribut braucht beides: Prozentkodiere zuerst jeden Query-Wert und escape dann die ganze URL für HTML, sodass jedes & zwischen den Parametern zu & wird. Den Schritt der Prozentkodierung übernimmt das URL-Tool.
Was sind HTML-Entities?
Eine HTML-Entity ist ein kurzes Textstück, das für ein Zeichen steht. Sie beginnt mit & und endet mit einem Semikolon. Benannte Entities verwenden ein Wort, etwa & für & oder © für ©. Numerische Entities verwenden den Unicode-Codepoint, entweder dezimal wie © oder hexadezimal wie ©. Der Browser ersetzt sie beim Rendern der Seite durch das echte Zeichen, sodass das Markup selbst reines ASCII bleiben kann.
Entities lösen zwei Probleme. Erstens kannst du damit Zeichen anzeigen, die HTML sonst als Markup lesen würde: Ein literales < beginnt einen Tag, und ein alleinstehendes & beginnt eine Entity. Zweitens kannst du Zeichen schreiben, mit denen deine Tastatur oder die Dateikodierung nicht klarkommt. HTML5 definiert mehr als 2.000 benannte Entities, und jedes Unicode-Zeichen, auch Emoji wie 🚀 für 🚀, lässt sich als numerische Entity schreiben.
HTML in JavaScript escapen: so geht’s
Im Browser zeigst du Benutzertext am sichersten an, indem du gar keine HTML-Strings baust. Setze element.textContent statt innerHTML, dann behandelt der Browser den Wert als Text. Auch React, Vue, Svelte und Angular escapen interpolierte Werte standardmäßig. Das Risiko kehrt zurück, sobald du innerHTML, dangerouslySetInnerHTML oder v-html mit Daten verwendest, die du nicht kontrollierst – dort beginnen die meisten XSS-Bugs in modernen Apps.
Brauchst du doch einen escapten String, etwa für ein Template oder den Text einer E-Mail, ersetze die fünf Sonderzeichen: zuerst das kaufmännische Und, dann <, >, das doppelte und das einfache Anführungszeichen. Dass & zuerst escapt wird, ist wichtig, sonst wird aus < ein &lt;. Genau das macht dieses HTML-Escape-Tool im Modus „Kodieren“ und schreibt das einfache Anführungszeichen als '. Mit „Dekodieren“ prüfst du, was ein String aus einer Datenbank oder API wirklich enthält.
Warum steht &amp; auf meiner Seite? Doppeltes Escaping beheben
Zeigt eine Seite & oder " als wörtlichen Text, wurde der String doppelt escapt. Typischerweise wurde der Wert schon vor dem Speichern escapt, und das Template hat ihn bei der Ausgabe noch einmal escapt. Der erste Durchgang macht aus & ein &, der zweite daraus &amp;, und der Browser zeigt es als & an. Dasselbe passiert bei RSS-Feeds, CMS-Feldern und JSON-APIs, die HTML für dich escapen.
Die Lösung: Escape genau einmal, in dem Moment, in dem du in HTML schreibst, und speichere überall sonst den Rohtext. Um vorhandene Daten zu bereinigen, füge sie im Modus „Dekodieren“ ein: Jeder Durchgang entfernt eine Schicht, führe ihn also erneut aus, wenn noch Entities übrig sind. Das Dekodieren nutzt den Parser des Browsers auf einem textarea-Element, der Entities liest, ohne Tags oder Skripte auszuführen. Um die Versionen vorher und nachher zu vergleichen, nimm den Textvergleich.
Häufige HTML-Entities
Zeichen, die du in HTML escapen musst, und die typografischen Zeichen, die am häufigsten gesucht werden.
| Zeichen | Benannte Entity | Numerische Entity |
|---|---|---|
| & | & | & |
| < | < | < |
| > | > | > |
| " | " | " |
| ' | ' | ' |
| geschütztes Leerzeichen | |   |
| © | © | © |
| ® | ® | ® |
| ™ | ™ | ™ |
| € | € | € |
| £ | £ | £ |
| ° | ° | ° |
| × | × | × |
| ÷ | ÷ | ÷ |
| – | – | – |
| — | — | — |
| … | … | … |
| « | « | « |
| » | » | » |
| → | → | → |
| ← | ← | ← |
| ✓ | ✓ | ✓ |
Funktioniert etwas nicht, oder sieht ein Ergebnis falsch aus? Ein Problem mit diesem Tool melden