Sonderzeichen: Entities und UTF-8
Ein paar Zeichen haben in HTML eine Sonderrolle. Die spitze Klammer < leitet ein Tag ein, das kaufmännische Und & leitet eine Zeichenreferenz ein. Willst du diese Zeichen als normalen Text anzeigen, musst du sie maskieren, mit sogenannten Entities:
HTML-Code
<p>Ein Tag beginnt mit < und endet mit >.</p>
<p>Fischer & Söhne GmbH</p>Ein Tag beginnt mit < und endet mit >.
Fischer & Söhne GmbH
Die Entities die du wirklich brauchst
| Zeichen | Entity | Wann nötig? |
|---|---|---|
| < | < | Immer wenn eine spitze Klammer als Text erscheinen soll, zum Beispiel in Codebeispielen. Auf dieser Seite hier passiert das dauernd. |
| > | > | Genau genommen nur der Ordnung halber, aber man maskiert sie üblicherweise zusammen mit <. |
| & | & | Immer wenn ein & im Text oder in einer URL steht. |
| " | " | Innerhalb von Attributwerten die selbst in doppelten Anführungszeichen stehen. |
| geschütztes Leerzeichen | | Verhindert einen Umbruch zwischen zwei Wörtern, etwa bei "10 Euro". |
Und was ist mit Umlauten?
Früher musste man tatsächlich ä für ä und ß für ß schreiben, alte Quelltexte sind voll davon. Heute nicht mehr: Wenn dein Dokument als UTF-8 gespeichert ist und <meta charset="utf-8"> im head steht, kannst du Umlaute, Akzente und sogar Emoji einfach direkt eintippen. UTF-8 kann praktisch jedes Zeichen der Welt. Die Entity-Schreibweise für Umlaute funktioniert zwar weiterhin, macht den Quelltext aber unleserlich und ist schlicht unnötig gewordn.
Faustregel: Maskiere die vier HTML-Zeichen aus der Tabelle. Alles andere tippst du einfach so wie es aussehen soll. Wenn stattdessen Zeichensalat wie "ä" erscheint, stimmt etwas mit der Kodierung nicht, die Lösung steht beim Grundgerüst.
Typografie-Feinschliff mit Entities
Jenseits der Pflichtzeichen lohnt ein Blick auf die Kür, die typografischen Helfer:
geschütztes Leerzeichen (10 km bleibt zusammen)
­ bedingter Trennstrich (Donau­dampf­schiff)
· Mittelpunkt als Trenner (wie im Fuß dieser Seite)
→ Pfeil nach rechts
© Copyright-ZeichenDas ­ ist der unbekannte Held für lange deutsche Wörter: Es markiert unsichtbare Trennstellen, an denen der Browser bei Platznot umbrechen darf, gerade auf schmalen Handybildschirmen Gold wertt.
Wann besser direkt tippen?
Bei UTF-8 (und das Grundgerüst legt es ja fest) darfst du fast alles direkt eintippen: Umlaute, Anführungszeichen, das Eurozeichen, sogar Emoji. Entities braucht es zwingend nur für die HTML-Steuerzeichen selbst, also <, > und &. Der Rest ist Geschmackssache mit einem Argument für Entities: Sie überleben auch dann, wenn eine Datei unterwegs mal mit falscher Zeichenkodierung angefasst wird, was bei ä ein lesbares ä bleibt, wird beim direkten ä zum berüchtigten Zeichensalatt.
Weiter im Lernpfad: Block und Inline · Verwandt: Kommentare