IT & Internet · Stand:
HTML-Sonderzeichen: Umlaute, Anführungszeichen und Symbole als Entity
In HTML schreibst Du ein Sonderzeichen entweder direkt oder als Zeichenreferenz: benannt wie ä, dezimal wie ä oder hexadezimal wie ä – alle drei ergeben ä. Die Tabelle listet 71 häufig gebrauchte Zeichen mit allen Schreibweisen, von Umlauten über deutsche Anführungszeichen bis zu Pfeilen und dem Copyright-Zeichen.
Ist Deine Seite in UTF-8 gespeichert, brauchst Du Entities fast nur noch für vier Zeichen: &, <, > und ". Umlaute, € und „…“ kannst Du direkt tippen.
- ä
- ä · ä
- €
- € · €
- Deutsche Anführung „…“
- „ … “
- Geschütztes Leerzeichen
- ·  
| Zeichen | Entity-Name | Dezimal | Maskieren |
|---|---|---|---|
| & | & | & | in Text und Attributen; Pflicht, wenn sonst eine Zeichenreferenz entstehen könnte – am einfachsten immer |
| < | < | < | im Text immer, sonst beginnt ein Tag |
| > | > | > | nicht vorgeschrieben, wird aber meist mit maskiert |
| " | " | " | in Attributwerten, die in doppelten Anführungszeichen stehen |
| ' | ' | ' | in Attributwerten in einfachen Anführungszeichen; PHP schreibt dafür ' |
Regeln nach dem HTML-Standard der WHATWG (Abschnitt Syntax). ' gibt es erst seit HTML5; die dezimale Form ' funktioniert überall.
Diese Zeichen brauchen direkt in UTF-8 2 bis 3 Bytes, als Referenz 6 bis 7. „nbsp“ steht für das geschützte Leerzeichen.
| Zeichen | Entity-Name | Dezimal | Hex | Unicode | Bezeichnung | Gruppe |
|---|---|---|---|---|---|---|
| ä | ä | ä | ä | U+00E4 | a mit Umlaut | Umlaute und ß |
| Ä | Ä | Ä | Ä | U+00C4 | A mit Umlaut | Umlaute und ß |
| ö | ö | ö | ö | U+00F6 | o mit Umlaut | Umlaute und ß |
| Ö | Ö | Ö | Ö | U+00D6 | O mit Umlaut | Umlaute und ß |
| ü | ü | ü | ü | U+00FC | u mit Umlaut | Umlaute und ß |
| Ü | Ü | Ü | Ü | U+00DC | U mit Umlaut | Umlaute und ß |
| ß | ß | ß | ß | U+00DF | Eszett, scharfes s | Umlaute und ß |
| ẞ | kein Name | ẞ | ẞ | U+1E9E | großes Eszett | Umlaute und ß |
| „ | „ | „ | „ | U+201E | doppeltes Anführungszeichen unten – deutsch öffnend | Anführungszeichen |
| “ | “ | “ | “ | U+201C | doppeltes Anführungszeichen oben – deutsch schließend, englisch öffnend | Anführungszeichen |
| ” | ” | ” | ” | U+201D | doppeltes Anführungszeichen oben – englisch schließend | Anführungszeichen |
| ‚ | ‚ | ‚ | ‚ | U+201A | einfaches Anführungszeichen unten – deutsch öffnend | Anführungszeichen |
| ‘ | ‘ | ‘ | ‘ | U+2018 | einfaches Anführungszeichen oben – deutsch schließend | Anführungszeichen |
| ’ | ’ | ’ | ’ | U+2019 | Apostroph, einfaches Anführungszeichen – englisch schließend | Anführungszeichen |
| » | » | » | » | U+00BB | Guillemet nach rechts – deutsch öffnend | Anführungszeichen |
| « | « | « | « | U+00AB | Guillemet nach links – deutsch schließend | Anführungszeichen |
| › | › | › | › | U+203A | einfaches Guillemet nach rechts | Anführungszeichen |
| ‹ | ‹ | ‹ | ‹ | U+2039 | einfaches Guillemet nach links | Anführungszeichen |
| – | – | – | – | U+2013 | Halbgeviertstrich: Gedankenstrich, Bis-Strich | Striche und Punkte |
| — | — | — | — | U+2014 | Geviertstrich (englischer Gedankenstrich) | Striche und Punkte |
| ‑ | kein Name | ‑ | ‑ | U+2011 | geschützter Bindestrich (kein Zeilenumbruch) | Striche und Punkte |
| SHY | ­ | ­ | ­ | U+00AD | weiches Trennzeichen (bedingte Trennung) | Striche und Punkte |
| … | … | … | … | U+2026 | Auslassungspunkte | Striche und Punkte |
| · | · | · | · | U+00B7 | Mittelpunkt | Striche und Punkte |
| • | • | • | • | U+2022 | Aufzählungspunkt | Striche und Punkte |
| NBSP | |   |   | U+00A0 | geschütztes Leerzeichen | Leerzeichen |
| NNBSP | kein Name |   |   | U+202F | schmales geschütztes Leerzeichen | Leerzeichen |
| THSP |   |   |   | U+2009 | schmales Leerzeichen (umbrechbar) | Leerzeichen |
| ENSP |   |   |   | U+2002 | Halbgeviert-Leerzeichen | Leerzeichen |
| EMSP |   |   |   | U+2003 | Geviert-Leerzeichen | Leerzeichen |
| ZWSP | ​ | ​ | ​ | U+200B | Leerzeichen ohne Breite (erlaubt Umbruch) | Leerzeichen |
| € | € | € | € | U+20AC | Euro | Währungen |
| $ | $ | $ | $ | U+0024 | Dollar | Währungen |
| ¢ | ¢ | ¢ | ¢ | U+00A2 | Cent | Währungen |
| £ | £ | £ | £ | U+00A3 | Pfund | Währungen |
| ¥ | ¥ | ¥ | ¥ | U+00A5 | Yen | Währungen |
| ¤ | ¤ | ¤ | ¤ | U+00A4 | allgemeines Währungszeichen | Währungen |
| × | × | × | × | U+00D7 | Malzeichen | Mathematik |
| ÷ | ÷ | ÷ | ÷ | U+00F7 | Geteiltzeichen | Mathematik |
| − | − | − | − | U+2212 | Minuszeichen | Mathematik |
| ± | ± | ± | ± | U+00B1 | Plusminus | Mathematik |
| ≠ | ≠ | ≠ | ≠ | U+2260 | ungleich | Mathematik |
| ≤ | ≤ | ≤ | ≤ | U+2264 | kleiner oder gleich | Mathematik |
| ≥ | ≥ | ≥ | ≥ | U+2265 | größer oder gleich | Mathematik |
| ≈ | ≈ | ≈ | ≈ | U+2248 | ungefähr gleich | Mathematik |
| ∞ | ∞ | ∞ | ∞ | U+221E | unendlich | Mathematik |
| √ | √ | √ | √ | U+221A | Wurzel | Mathematik |
| ∑ | ∑ | ∑ | ∑ | U+2211 | Summe | Mathematik |
| ² | ² | ² | ² | U+00B2 | hochgestellte 2 (Quadrat) | Mathematik |
| ³ | ³ | ³ | ³ | U+00B3 | hochgestellte 3 (Kubik) | Mathematik |
| ½ | ½ | ½ | ½ | U+00BD | ein halb | Mathematik |
| ¼ | ¼ | ¼ | ¼ | U+00BC | ein Viertel | Mathematik |
| ¾ | ¾ | ¾ | ¾ | U+00BE | drei Viertel | Mathematik |
| ° | ° | ° | ° | U+00B0 | Grad | Mathematik |
| ‰ | ‰ | ‰ | ‰ | U+2030 | Promille | Mathematik |
| µ | µ | µ | µ | U+00B5 | Mikro | Mathematik |
| ← | ← | ← | ← | U+2190 | Pfeil nach links | Pfeile |
| → | → | → | → | U+2192 | Pfeil nach rechts | Pfeile |
| ↑ | ↑ | ↑ | ↑ | U+2191 | Pfeil nach oben | Pfeile |
| ↓ | ↓ | ↓ | ↓ | U+2193 | Pfeil nach unten | Pfeile |
| ↔ | ↔ | ↔ | ↔ | U+2194 | Pfeil nach links und rechts | Pfeile |
| ⇐ | ⇐ | ⇐ | ⇐ | U+21D0 | Doppelpfeil nach links | Pfeile |
| ⇒ | ⇒ | ⇒ | ⇒ | U+21D2 | Doppelpfeil nach rechts (daraus folgt) | Pfeile |
| ⇔ | ⇔ | ⇔ | ⇔ | U+21D4 | Doppelpfeil links und rechts (genau dann, wenn) | Pfeile |
| © | © | © | © | U+00A9 | Copyright | Recht und Verweise |
| ® | ® | ® | ® | U+00AE | eingetragene Marke | Recht und Verweise |
| ™ | ™ | ™ | ™ | U+2122 | Markenzeichen (Trademark) | Recht und Verweise |
| § | § | § | § | U+00A7 | Paragraf | Recht und Verweise |
| ¶ | ¶ | ¶ | ¶ | U+00B6 | Absatzzeichen | Recht und Verweise |
| † | † | † | † | U+2020 | Kreuz (gestorben, Fußnote) | Recht und Verweise |
| ‡ | ‡ | ‡ | ‡ | U+2021 | Doppelkreuz | Recht und Verweise |
Grau in der ersten Spalte: unsichtbare Zeichen, angegeben mit ihrem üblichen Kürzel. „Kein Name“: Für dieses Zeichen gibt es keine benannte Referenz, nur die numerische (3 Zeichen). Namen nach der WHATWG-Liste; Groß- und Kleinschreibung zählt.
Zeichen ab U+0800 belegen in UTF-8 drei Bytes, die Latin-1-Ergänzung zwei, ASCII ein Byte.
Brauchst Du Entities überhaupt?
Meistens nicht. Der Encoding-Standard der WHATWG schreibt für Webseiten UTF-8 vor, und damit lässt sich jedes Zeichen direkt in den Quelltext schreiben. Wichtig ist nur, dass die Datei wirklich als UTF-8 gespeichert ist und der Browser das erfährt: über den HTTP-Header Content-Type oder mit <meta charset="utf-8"> im Kopf der Seite.
Direkt geschriebene Zeichen sind kürzer und besser lesbar. Das Diagramm zeigt den Unterschied: Ein ä belegt in UTF-8 2 Bytes, als ä dagegen 6. Entities lohnen sich noch für die Zeichen mit Sonderbedeutung und für unsichtbare Zeichen wie oder ­, die Du im Quelltext sonst nicht erkennst.
Die Zeichen, die HTML selbst braucht
Das Kleiner-Zeichen beginnt ein Tag, das Et-Zeichen eine Zeichenreferenz, und Anführungszeichen beenden Attributwerte. Wo diese Zeichen als Text erscheinen sollen, musst Du sie maskieren. Der HTML-Standard verlangt das streng genommen nur für < im Text, für ein &, das wie eine Referenz aussieht, und für das jeweils umschließende Anführungszeichen. Sicherer ist es, & immer zu maskieren.
In PHP übernimmt das htmlspecialchars(). Aus der Eingabe
Müller & Söhne <GmbH> "Bio"
wird
Müller & Söhne <GmbH> "Bio"
Gib Nutzereingaben nie ungefiltert aus – sonst kann jemand eigenes HTML oder Skripte in Deine Seite schmuggeln.
Deutsche Anführungszeichen richtig setzen
Im Deutschen öffnet das Anführungszeichen unten und schließt oben: „so“. In HTML ist das „ am Anfang und “ am Ende – nicht ”. Die Namen stammen aus dem Englischen, wo das linke obere Zeichen öffnet; im Deutschen schließt genau dieses Zeichen. Für einfache Anführungszeichen gilt dasselbe mit ‚ und ‘: ‚so‘.
Bevorzugst Du Guillemets, zeigen die Spitzen im Deutschen nach innen: »so« mit » am Anfang und « am Ende. Das Apostroph in „geht’s“ ist typografisch das Zeichen ’.
Striche, Leerzeichen und Trennungen
- Bindestrich (-) steht auf jeder Tastatur und braucht keine Referenz.
- Halbgeviertstrich (–): mit Leerzeichen als Gedankenstrich, ohne als Bis-Strich wie in 9–17 Uhr.
- Minuszeichen (−) für negative Zahlen: −5 °C.
- Geschütztes Leerzeichen ( ) hält zusammen, was nicht getrennt werden soll: 10 €, Nr. 5. Mehrere davon fasst der Browser nicht zu einem zusammen.
- Schmales geschütztes Leerzeichen hat keinen Namen; Du schreibst es als   – etwa zwischen den Teilen von „z. B.“.   ist zwar auch schmal, erlaubt aber einen Zeilenumbruch.
- Weiches Trennzeichen (­) markiert Stellen, an denen ein langes Wort getrennt werden darf. Der Strich erscheint nur, wenn dort tatsächlich umbrochen wird.
Benannt, dezimal oder hexadezimal
Alle drei Schreibweisen sind gleichwertig. Die numerischen funktionieren für jedes Unicode-Zeichen: &# gefolgt vom Codepunkt als Dezimalzahl oder &#x gefolgt von der Hexadezimalzahl, jeweils mit Semikolon. Benannte Referenzen gibt es nur für eine feste Liste von gut 2.000 Namen im HTML-Standard. 3 Zeichen dieser Tabelle stehen nicht darauf, etwa das große ẞ.
Bei Namen zählt die Groß- und Kleinschreibung: Ä ergibt Ä, ä ergibt ä. Setze immer das Semikolon. Einige alte Namen funktionieren aus Kompatibilitätsgründen auch ohne, verlassen solltest Du Dich darauf nicht. Wie Du Codepunkte zwischen Dezimal und Hex umrechnest, zeigt die Zahlensysteme-Tabelle; die Codes 0 bis 127 findest Du in der ASCII-Tabelle.