Minimale Maskierung von Zeichen in HTML

Bedingungen, unter denen Zeichen in HTML5-Dokumenten zur Gewährleistung der Validität maskiert werden müssen.

Inhaltsverzeichnis

• Einleitung
• Regeln für die Maskierung von Zeichen
• Codebeispiel
• Weiterführende Informationen

Einleitung

Wer HTML5-Dokumente von Hand schreibt, möchte sich auf den eigentlichen Inhalt konzentrieren. Hilfreich ist dabei, überflüssiges Markup wegzulassen und auf unnötige Zeichenmaskierungen zu verzichten.

Die Unicode-Codierung (UTF-8) erlaubt die direkte Eingabe fast aller Sonderzeichen in das HTML-Dokument. Nur wenige Zeichen müssen unter bestimmten Umständen als HTML-Entität maskiert werden. Zur Maskierung sind gleichermaßen benannten Entitäten wie & und numerische Zeichenreferenzen wie & (dezimal) oder & und & (hexadezimal) zulässig. Die folgenden Faustregeln zeigen, wann eine Maskierung wirklich nötig ist.

Regeln für die Maskierung von Zeichen

Das Et-Zeichen: &

Die Maskierung als & ist zwingend erforderlich, wenn darauf ein alphanumerisches Zeichen oder das Zeichen # folgt (z. B. &text, &123, &#2) oder die Zeichenfolge wie eine bekannte Entität ohne abschließendes Semikolon aussieht (z. B. &copy). Dies gilt insbesondere auch innerhalb von Attributwerten (wie in URLs), sofern darauf ein Buchstabe, eine Zahl oder ein Gleichheitszeichen folgt.

Keine Maskierung ist nötig, wenn das & von einem Leerzeichen oder einem Tag gefolgt wird (z. B. &<b>). Innerhalb von URLs im href-Attribut von Hyperlinks (HTML-Element a) kann & nur dann direkt verwendet werden, wenn der darauffolgende Text keine der Entitäten einleitet, die kein abschließendes Semikolon erfordern: …id=1&save=true ist zulässig; …?id=1&copy=true ist wegen der benannten Entität © (aus Kompatiblitätsgründen auch &copy) unzulässig.

Anführungszeichen: " und '

Die Maskierung als " bzw. ' ist nur innerhalb von Attributwerten nötig. Sie muss nur dann erfolgen, wenn der Attributwert mit exakt demselben Anführungszeichen umschlossen ist (z. B. alt="Er sagte "Hallo"").

Im normalen Fließtext außerhalb von Tags ist keine Maskierung erforderlich.

Das Kleiner-als-Zeichen: <

Das Zeichen muß im Fließtext und innerhalb von Attributwerten ohne Anführungszeichen zwingend als < maskiert werden.

Innerhalb von Attributwerten, die in doppelten oder einfachen Anführungszeichen stehen, ist keine Maskierung erforderlich. Eine weitere Ausnahme bilden Elemente, die keine untergeordneten Tags enthalten können, wie title und textarea. Aus Kompatibilitätsgründen oder für ein konsistentes Markup kann eine Maskierung dort jedoch sinnvoll sein.

Das Größer-als-Zeichen: >

Für dieses Zeichen ist im Fließtext grundsätzlich keine Maskierung nötig.

Eine Maskierung als > ist nur in sehr seltenen historischen Ausnahmefällen oder zur Symmetrie mit < im Markup sinnvoll.

Innerhalb von style- und script-Elementen dürfen keine HTML-Zeichenentitäten verwendet werden. Der Webbrowser reicht den Inhalt direkt an den CSS- oder JavaScript-Interpreter weiter. Sonderzeichen müssen dort ausschließlich nach den spezifischen Regeln von CSS (z. B. Backslash-Escaping) oder JavaScript (z. B. \n, \") maskiert werden:

Codebeispiel

<style>
ul.terms > li:not(:first-child)::before {
  content: '\a0& ';
  white-space: pre;
}
</style>

<script>alert('1 < 2 & 2 > 1')</script>

Es gilt: 1 &lt; 2 & 2 > 1.

Die Zeichenentität &amp;#64; steht für das Zeichen @.

<img src="quotes.svg" alt="Zeichen &quot; und '" title='Zeichen " und &apos;'>

<a href="search?q=Hallo&lang=de">Hallo suchen</a>

Weiterführende Informationen

WHATWG: HTML Standard – 13.1.2 Elements

Informationen zur Codierung der Zeichen & und < in HTML5.

Mathias Bynens: Ambiguous ampersands

Informationen zur Codierung des &-Zeichens in HTML4 und HTML5.