Vollständiger Leitfaden zu HTML-Entities
HTML-Entities sind einer der grundlegendsten und doch oft missverstandenen Aspekte der Webentwicklung. Sie sind der Mechanismus, der es Browsern ermöglicht, Zeichen anzuzeigen, die sonst als HTML-Markup interpretiert würden, und spielen eine entscheidende Rolle für die Websicherheit. Ob Sie Sonderzeichen kodieren, um Cross-Site-Scripting-Angriffe zu verhindern, mathematische Symbole anzeigen oder sicherstellen möchten, dass Inhalte in verschiedenen Kodierungen korrekt gerendert werden – das Verständnis von HTML-Entities ist für jeden Webentwickler unerlässlich.
Was sind HTML-Entities?
HTML-Entities sind Zeichensequenzen, die ein einzelnes Zeichen in HTML darstellen. Entities beginnen mit einem Und-Zeichen (&) und enden mit einem Semikolon (;). Wenn ein Browser auf eine Entity trifft, ersetzt er sie während des Renderns durch das entsprechende Zeichen. Dieser Mechanismus ermöglicht es Ihnen, Zeichen in HTML einzufügen, die sonst unmöglich oder problematisch wären.
<) beginnt ein Tag, das Größer-als-Zeichen (>) beendet ein Tag und das Und-Zeichen (&) beginnt eine Entity-Referenz. Wenn Sie diese Zeichen als sichtbaren Inhalt und nicht als Markup anzeigen möchten, müssen Sie sie als Entities kodieren.
Häufige HTML-Entities
Obwohl HTML über 2.000 benannte Entities definiert, werden in der täglichen Webentwicklung nur wenige häufig verwendet. Dies sind die Entities, denen Sie am häufigsten begegnen und die Sie am häufigsten verwenden:
Die fünf obligatorischen Entities
| Zeichen | Benannte Entity | Dezimale Entity | Hexadezimale Entity | Verwendung |
|---|---|---|---|---|
| & | & | & | & | Muss immer kodiert werden, um Mehrdeutigkeit mit Entity-Referenzen zu vermeiden |
| < | < | < | < | Muss kodiert werden, um das Öffnen von HTML-Tags zu verhindern |
| > | > | > | > | Muss kodiert werden, um das Schließen von HTML-Tags zu verhindern |
| " | " | " | " | Muss in doppelt gequoteten Attributwerten kodiert werden |
| ' | ' | ' | ' | Muss in einfach gequoteten Attributwerten kodiert werden |
Häufig verwendete Symbol-Entities
| Zeichen | Benannte Entity | Beschreibung |
|---|---|---|
| Geschütztes Leerzeichen (verhindert Zeilenumbruch) | © | |
| Copyright-Symbol | ® | Eingetragenes Markenzeichen |
| ™ | Markenzeichen-Symbol | — |
| Geviertstrich (langer Gedankenstrich) | – | Halbgeviertstrich (für Bereiche) |
| « | Linkes doppeltes Anführungszeichen | » |
| Rechtes doppeltes Anführungszeichen | • | Aufzählungszeichen |
| … | Horizontale Ellipse (drei Punkte) | Left-pointing double angle quotation mark |
| » | »
| Right-pointing double angle quotation mark |
| • | •
| Bullet character |
| … | …
| Horizontal ellipsis (three dots) |
Numerische vs. benannte Entities
HTML-Entities gibt es in zwei Formen: benannt und numerisch. Das Verständnis des Unterschieds hilft Ihnen, in jeder Situation die richtige Entity zu wählen.
Benannte Entities
Benannte Entities verwenden menschenlesbare Wörter zur Identifizierung von Zeichen. Beispielsweise steht < für das Kleiner-als-Zeichen und © für das Copyright-Symbol. Benannte Entities sind lesbarer und leichter zu merken, was Ihren HTML-Quellcode wartbarer macht. Benannte Entities existieren jedoch nur für einen begrenzten Zeichensatz – etwa 2.000, während Unicode über 140.000 Zeichen umfasst.
Numerische Entities
Numerische Entities referenzieren Zeichen über ihren Unicode-Codepoint. Sie gibt es in zwei Formen: dezimal und hexadezimal. Dezimale numerische Entities verwenden das Format &#NNN;, wobei NNN der dezimale Codepoint ist. Hexadezimale Entities verwenden das Format &#xHHH;, wobei HHH der hexadezimale Codepoint ist. Beispielsweise kann das Copyright-Symbol als © (dezimal) oder © (hexadezimal) geschrieben werden.
Numerische Entities können jedes Unicode-Zeichen darstellen, was sie für Zeichen ohne benannte Entity-Referenz unverzichtbar macht. Wenn Sie seltene CJK-Zeichen, historische Schriftzeichen oder Emojis ohne benannte Entity anzeigen müssen, müssen Sie die numerische Form verwenden.
Wann welche verwendet werden
- <, >, ", ') und gängige Symbole wie ©, ®, ™. Sie sind lesbarer und selbstdokumentierend.
- Verwenden Sie numerische Entities, wenn das benötigte Zeichen keine benannte Entity hat oder wenn Sie HTML programmatisch generieren und eine konsistente, universelle Kodierungsmethode benötigen.
- Verwenden Sie hexadezimale numerische Entities, wenn Sie mit Unicode-Codepoints arbeiten, da Hexadezimal die Standarddarstellung in Unicode-Dokumentation und Zeichentabellen ist.
Wann HTML-Entities verwendet werden
Zu wissen, wann Entities verwendet werden, ist genauso wichtig wie zu wissen, wie man sie verwendet. Hier sind die wichtigsten Szenarien, in denen Entities notwendig oder vorteilhaft sind:
1. Reservierte Zeichen anzeigen
< schreiben, versucht der Browser, es als Beginn eines HTML-Tags zu parsen, was Ihr Seitenlayout zerstören oder Sicherheitslücken schaffen kann.
2. Mehrdeutige Und-Zeichen vermeiden
Ein Und-Zeichen gefolgt von Buchstaben und einem Semikolon wird immer als Entity-Referenz interpretiert. Wenn Ihr Inhalt ein Und-Zeichen enthält, das nicht Teil einer Entity ist (z. B. in „Tom & Jerry"), müssen Sie es als & kodieren. Ein nicht kodiertes Und-Zeichen, gefolgt von Text, der zufällig einem Entity-Namen entspricht, wird falsch dekodiert. Beispielsweise könnte nicht kodiertes „AT&T" zu „AT&T" werden, wenn der Browser &T als Entity-Referenz interpretiert (obwohl &T keine gültige Entity ist, ist dieses Verhalten technisch dennoch falsch).
3. Nicht über die Tastatur eingebbare Zeichen einfügen
Zeichen wie Gedankenstriche, Copyright-Symbole und mathematische Operatoren können auf einer Standardtastatur schwer einzugeben sein. Entities bieten eine zuverlässige Möglichkeit, diese Zeichen einzufügen, ohne auf die Eingabemethode oder Zeichentabelle Ihres Editors angewiesen zu sein. Beispielsweise ist — in der Regel einfacher einzugeben, als das Gedankenstrich-Zeichen auf der Tastatur zu suchen.
4. Geschützte Leerzeichen
Die -Entity erstellt ein geschütztes Leerzeichen, das den Browser daran hindert, an dieser Stelle einen Zeilenumbruch einzufügen. Dies ist entscheidend, um zusammengehörige Wörter in derselben Zeile zu halten, wie z. B. „10 kg", „Kapitel 3" oder Markennamen, die nicht über Zeilen getrennt werden sollten. Es wird auch häufig verwendet, um visuelle Abstände in Layouts zu schaffen, in denen CSS ungeeignet ist.
Sicherheitsauswirkungen: XSS-Schutz
Die HTML-Entity-Kodierung ist eine der wichtigsten Verteidigungslinien gegen Cross-Site-Scripting (XSS)-Angriffe. XSS tritt auf, wenn ein Angreifer ausführbaren Code in eine Webseite einschleusen kann, die von anderen Benutzern betrachtet wird. Die Entity-Kodierung verhindert dies, indem sie gefährliche Zeichen in ihre sicheren Entity-Äquivalente umwandelt.
Wie Entity-Kodierung XSS verhindert
sucht und die Seite dies ohne Kodierung rendert, führt der Browser das Skript aus. Wenn die Ausgabe jedoch entity-kodiert ist, wird sie zu <script>alert('xss')</script>, und der Browser zeigt sie als literalen Text an, anstatt den Code auszuführen.
Kontextspezifische Kodierungsregeln
Die Entity-Kodierung funktioniert in HTML-Inhalts- und Attributkontexten, aber verschiedene Kontexte erfordern unterschiedliche Kodierungsstrategien:
- <, >, & als Entities. Dies verhindert das Einschleusen neuer HTML-Tags.
- <, >, &, ", ' als Entities. Anführungszeichen müssen kodiert werden, um das Ausbrechen aus dem Attributwert zu verhindern.