HTML-Entity codieren / decodieren

HTML-Entities sind Kurzcodes, die Zeichen repräsentieren, die in HTML entweder reserviert sind oder schwer zu tippen wären. Jede Entity beginnt mit einem kaufmännischen Und und endet mit einem Semikolon – zum Beispiel ist &amp; ein kaufmännisches Und (&), &lt; ist ein Kleiner-als-Zeichen (<) und &copy; ist das Copyright-Symbol (©). Sie lassen ein Zeichen buchstäblich anzeigen, anstatt als Markup interpretiert zu werden, und garantieren, dass ein Symbol korrekt dargestellt wird, auch wenn die Zeichenkodierung der Seite es nicht enthält. Sie begegnen einem ständig beim manuellen Schreiben von HTML oder beim Bereinigen von Benutzereingaben in Webanwendungen.

Text in den linken Bereich einfügen und den Modus auf Kodieren belassen. Auswählen, welche Zeichen maskiert werden sollen – nur die reservierten (< > & " '), reservierte plus alle Nicht-ASCII-Zeichen oder alles – und ob Named, Dezimal- oder Hex-Codes ausgegeben werden sollen. Mit der Named-Option wird beispielsweise 'Fisch & Chips <3' zu 'Fisch &amp; Chips &lt;3'. Das Ergebnis erscheint sofort rechts. Auf Kopieren klicken und direkt in den HTML-Code einfügen. Alles geschieht im Browser – kein Datei-Upload, kein Konto erforderlich und keine Begrenzung der Textmenge, die auf einmal kodiert werden kann.

Den Modus auf Dekodieren umschalten und das kodierte HTML in den linken Bereich einfügen; der lesbare Text erscheint sofort rechts. Das Tool versteht Named, Dezimal- und Hexadezimal-Entities, sodass &lt;div&gt; Tom &amp; Jerry &#169; zu <div> Tom & Jerry © dekodiert wird. Den Tauschen-Button verwenden, um die Bereiche zu wechseln, falls das Ergebnis re-kodiert werden soll. Der Decoder verarbeitet gemischte Entity-Typen in derselben Zeichenkette – Named, Dezimal und Hex können alle zusammen vorkommen und werden jeweils korrekt dekodiert. FreeFormatter.com's Entity-Decoder erfordert ein Formular-Submit und einen Seitenneuladen für jede Konvertierung; dieses Tool aktualisiert sich in Echtzeit beim Tippen.

Dies sind die vier häufigsten HTML-Entities. &amp; ist ein kaufmännisches Und (&), &lt; ist ein Kleiner-als-Zeichen (<), &gt; ist ein Größer-als-Zeichen (>) und &nbsp; ist ein geschütztes Leerzeichen – ein Leerzeichen, das den Browser daran hindert, die Zeile dort umzubrechen oder es zu entfernen, praktisch zwischen einem Wert und seiner Einheit wie 10&nbsp;kg, damit sie nie auf zwei Zeilen aufgeteilt werden. Das & muss als &amp; maskiert werden, bevor alle anderen maskiert werden, da &amp; selbst sonst als Beginn einer neuen Entity missverstanden werden und Doppel-Kodierungsprobleme verursachen kann.

Es sind drei Schreibweisen desselben Zeichens. Eine Named Entity verwendet ein einprägsames Schlüsselwort (&amp;); eine dezimale numerische Entity verwendet den Unicode-Codepoint des Zeichens zur Basis 10 (&#38;); eine hexadezimale Entity verwendet Basis 16 (&#x26;). Alle drei erzeugen ein kaufmännisches Und. Named Entities sind am lesbarsten, aber nur etwa 2.000 Zeichen haben Namen, daher sind numerische Entities der Fallback für alles andere – einschließlich Emoji, bei denen das grinsende Gesicht 😀 als &#128512; dargestellt wird. Im Zweifelsfall sind Named Entities am sichersten für die Lesbarkeit. Der HTML5-Standard hat die Named-Entity-Liste gegenüber HTML4 deutlich erweitert; dieses Tool deckt den vollständigen HTML5-Satz von über 2.200 Named Character References ab.

Drei Zeichen haben besondere Bedeutung im Seiteninhalt und sollten immer maskiert werden: & (&amp;), < (&lt;) und > (&gt;). Innerhalb von Attributwerten sollten auch " (&quot;) und ' (&#39;) maskiert werden. Das kaufmännische Und zuerst maskieren, da &amp; selbst sonst als Beginn einer Entity missverstanden und doppelt maskiert werden kann. Die 'Reserviert'-Option im Kodieren-Modus behandelt genau diese fünf Zeichen und lässt den restlichen Text unberührt – ideal zum Bereinigen von Formulareingaben oder Template-Ausgaben, ohne Zeichen übermäßig zu kodieren, die es nicht nötig haben.

Die gängigen Pfeile sind &larr; (←), &rarr; (→), &uarr; (↑), &darr; (↓) und &harr; (↔), mit Doppellinien-Versionen &lArr;, &rArr; und &hArr; (⇐ ⇒ ⇔). Für jedes andere Symbol die durchsuchbare Liste unten verwenden – 'arrow', 'heart' oder 'euro' eingeben und dann auf den Named, Dezimal- oder Hex-Code klicken, um ihn zu kopieren. Die vollständige Liste umfasst Interpunktion, mathematische Symbole, griechische Buchstaben, Währungszeichen und Hunderte von Sonderzeichen, aktualisiert auf den HTML5-Standard für Named Character References. W3Schools listet nur rund 255 Entities; dieses Tool hat über 2.200.

Der klassische Browser-Trick besteht darin, das DOM für die Dekodierung zu nutzen: ein losgelöstes Textarea-Element erstellen, dessen innerHTML auf die Entity-Zeichenkette setzen und seinen value auslesen. Zum Beispiel: const el = document.createElement('textarea'); el.innerHTML = '&lt;b&gt; &amp; &#169;'; dann gibt el.value '<b> & ©' zurück. Es gibt kein eingebautes decodeHTMLEntities() in reinem JavaScript, daher ist dieser DOM-Ansatz – oder ein kleiner Helfer, der erkannte Entity-Token an ein Textarea-Element übergibt, damit kein fremdes Markup entkommen kann – das Standardmuster. Dieses Tool macht genau das, weshalb es sicher für nicht vertrauenswürdiges Markup ohne XSS-Risiko verwendet werden kann.

Das ist Doppel-Kodierung. Der Text wurde einmal maskiert (& wird zu &amp;) und dann erneut maskiert (das & von &amp; wird zu &amp;amp;), üblicherweise weil ein Framework die Ausgabe automatisch maskiert hat, die bereits maskiert war. Dies ist häufig in PHP-CMS-Systemen und einigen Template-Engines anzutreffen, die alle Ausgaben standardmäßig maskieren – Twig, Smarty und ältere WordPress-Hooks tun dies alle. Den Wert einmal hier in Dekodieren einfügen, um die Doppel-Kodierung zu bestätigen, und dann sicherstellen, dass das Template den Wert als sicher markiert oder ihn nur einmal an der Ausgabestelle maskiert.

Für © &copy; verwenden, für ® &reg;, für ™ &trade; und für einen langen Gedankenstrich (—) &mdash;. Für einen kurzen Gedankenstrich &ndash; (–) und für Auslassungspunkte &hellip; (…). Das Symbol kann auch direkt auf einer UTF-8-Seite eingefügt werden, aber die Named Entity ist eindeutig und übersteht eine Änderung der Kodierung. Auf einer UTF-8-Seite (was heute praktisch alles ist) funktioniert das direkte Einfügen von © problemlos. Named Entities bleiben die sicherste Wahl für HTML-E-Mails, wo Kodierungsannahmen je nach E-Mail-Client wie Outlook, Gmail und Apple Mail variieren.

Es ist &nbsp; (numerisch &#160; oder &#xA0;). Ein geschütztes Leerzeichen hält zwei Wörter, oder einen Wert und seine Einheit, in derselben Zeile und verhindert, dass der Browser mehrfache Leerzeichen zusammenzieht – zum Beispiel Herr&nbsp;Müller oder 5&nbsp;km. Es sollte aber nicht für das Layout übermäßig verwendet werden; für Abstände CSS-Margins oder Padding nutzen. Ein häufiger Fehler ist die Verwendung mehrerer &nbsp;-Entities zum Einrücken von Text oder Erstellen von Spalten – das ist schlechte Praxis und bricht zusammen, wenn die Seite in der Größe verändert oder von einem Screen-Reader gerendert wird, der für jedes Entity laut 'geschütztes Leerzeichen' vorliest.

Ja. Named Entities unterscheiden Groß- und Kleinschreibung, also funktioniert &amp;, aber &Amp; oder &AMP; möglicherweise nicht, und &Sigma; (Σ) ist ein völlig anderes Zeichen als &sigma; (σ). Numerische Entities unterscheiden nur beim optionalen x einer Hex-Entity nicht zwischen Groß- und Kleinschreibung – &#xA9; und &#xa9; ergeben beide ©. Im Zweifelsfall den genauen Code aus der Referenzliste hier kopieren, anstatt ihn aus dem Gedächtnis einzutippen. Falsche Groß-/Kleinschreibung bei einer Named Entity führt dazu, dass der Rohcode anstelle des Symbols angezeigt wird, was eine häufige Fehlerquelle in handgeschriebenen HTML-Templates ist.

FreeFormatter.com und W3Schools bieten beide statische HTML-Entity-Referenztabellen, aber es können nur Codes nachgeschlagen werden – eigener Text kann nicht kodiert oder dekodiert werden. FreeFormers Entity-Encoder ist die nächste Alternative, erfordert aber ein Formular-Submit und einen Seitenneuladen für jede Konvertierung, und seine Entity-Liste deckt nur HTML4-Named-Entities ab. W3Schools zeigt rund 255 Named Entities. Dieses Tool deckt den vollständigen HTML5-Standard für Named Character References ab – über 2.200 Einträge – und kombiniert die durchsuchbare Referenz mit einem Live-Encoder und Decoder an einem Ort, der sich in Echtzeit beim Tippen aktualisiert.

Ja, Encoder, Decoder und Entity-Liste funktionieren alle vollständig auf mobilen Browsern, einschließlich Chrome auf Android und Safari auf iPhone. Das Layout passt sich kleineren Bildschirmen an, sodass die beiden Bereiche vertikal gestapelt werden. Ein Tipp für Mobilgeräte: Eine Zelle in der Entity-Liste lang drücken, um die Kopieren-Option des Browsers auszulösen, falls der Ein-Klick-Kopieren nicht sofort reagiert. Es ist kein App-Download erforderlich – das Tool läuft als normale Webseite in jedem modernen mobilen Browser. Es gibt keine Anmeldung, kein Konto und keine Nutzungsbeschränkungen auf irgendeinem Gerät. Es funktioniert sogar offline, sobald die Seite einmal geladen wurde.