HTML-Sonderzeichen – Schreibweisen

HTML-Entities in Webseiten einsetzen

Sonderzeichen wie mathematische oder technische Symbole vom Summenzeichen über Währungen haben wir auf der Tastatur, oft verborgen hinter Tastaturkombinationen, die wie beim Klavierspiel mit mehreren Tasten angesteuert werden.

Was wir in den Tastaturkombinationen nicht finden, kann als HTML-Entity in HTML übertragen werden.

Sonderzeichen eingeben

Für Sonderzeichen gibt es bis zu fünf Schreibweisen / Methoden der Eingabe:

  • direkt durch ein Sonderzeichen auf der Tastatur (aber die Tastaturen der verschiedenen Betriebssysteme verwenden unterschiedliche Tastaturkombinationen) oder durch die Liste der Sonderzeichen der Betriebssysteme,
  • durch einen mnemotechnischen Namen oder HTML-Entity (werden von SVG nur stellenweise unterstützt, selbst © oder → nicht),
  • dezimal (z.B. ☯ – gilt als zuverlässigste Methode),
  • hexadezimal,
  • als UTF-8-Code (U+2030).

In HTML-Seiten wird am besten das Symbol direkt eingefügt und die Seite als UTF-8-Dokument gespeichert (<meta charset="utf-8">). Das macht den Quellcode besser lesbar.

Zeichen, die nicht eingesetzt werden können

Eine Reihe von Zeichen kann in HTML nicht verwendet werden. In erster Linie sind das die Symbole für kleiner < und größer >, die im HTML-Quellcode für den Anfang und das Ende eines HTML-Tags stehen. Diese Zeichen müssen kodiert werden.

&lt;
&gt;

Zeichensatz angeben

Damit Sonderzeichen in HTML richtig angezeigt werden, muss ein Zeichensatz angegeben werden. Selbst ein ä und ein ß sind in dieser Hinsicht schon Sonderzeichen. Während früher Zeichensätze für verschiedene Sprachkreise verwendet werden mussten, gibt es heute den universellen Zeichensatz UTF-8.

Der Zeichensatz kann schon vom Webserver gesendet werden. Wenn der Server keinen Charset sendet, wird der Zeichensatz über ein Meta-Tag im Head der Seite festgelegt. In HTML5 ist das Meta-Tag für die Zeichenkodierung einfach

<meta charset="utf-8">

Alternativ kann der Zeichensatz für HTML-Dokumente in die Datei .htaccess eingetragen werden: AddCharset UTF-8 .html. Mehr dazu beim W3C Einstellung der Zeichencoderung.

Dann gibts Copyright ©, Herzen ♥ und Promille ‰, Währungen vom Euro € bis zum Yen ¥ und die Sonderzeichen für Deutsch (z.B.neben ä bis ü auch das kleine ß und das neue große Eszett ẞ), Hebräisch, Regenschirm und Schneemann für das Wetter und Summe, ∑ Summe, ∫ Integral und ∞ Unendlich für die Mathematik.

Trotzdem gibt es Situationen, in denen die Sonderzeichen und Umlaute falsch erscheinen, weil der Server mit einem anderen Zeichensatz eingerichtet ist, weil Zeichen in der Schriftdatei fehlen und der Browser sie nicht mit Zeichen aus dem Systemfont ersetzen kann.

HTML-Entities

Wenn es für ein Zeichen kein HTML-Entity gibt, bleibt der dezimale numerische Code wie &#9775; für ein Yin Yang ☯. Auch die dezimalen Entities sind eine Referenz auf die UTF-8-Codes.

HTML5 hat die Liste der HTML-Symbole um Wettersymbole, Schachfiguren, Sternzeichen erweitert. So könnten wir jetzt Telefonnummern direkt mit ☎ (&phone;) kennzeichnen. Wir dürfen nicht davon ausgehen, dass unsere Webseite bei einem Besucher landet, dessen System das Symbol in einem seiner Zeichensätze hat.

Dezimales HTML-Entity

&#9660;

Hexadezimales HTML-Entity

&#x25BC;

Direkt einsetzen

Vielleicht hat das System das Zeichen schon in einer Tastaturkombination. Wenn nicht, findet man es mit etwas Suchen in diversen Listen von Sonderzeichen, kopiert es und fügt es in das Dokument ein.

Mit CSS einsetzen

Der direkte Einsatz von HTML-Entities kann die voluminösen Icon-Fonts an vielen Stellen ersetzen. Nur schade, dass es keine Twitter-, Facebook und Shopping-Card-Sonderzeichen gibt.

Weder dezimale HTML-Entites noch hexadezimale und auch die mnemotechnischen Namen wie &copy; würden in mit ::before oder ::after generiertem content nicht funktionieren: Die Zeichenfolgen würden einfach wörtlich eingesetzt.

::before und ::after mit der CSS-Eigenschaft content reagieren auf die hexadezimalen Codes für Sonderzeichen.

.icon-chevron:before {
    content: "\25BC";
}

<span class='icon-chevron'></span>

Sonderzeichen mit Javascript

In Javascript müssen wir uns schon mal mit Encodings oder Character Sets von Sonderzeichen wie UTF-8 in hexadezimaler Schreibweise wie \u262f oder \u2665 herumschlagen.

Javascript kann dezimale und Hex-Codes direkt ausgeben:

<script>
   mytext.innerHTML = '\u262f' + ' und ' + '\u2665 ';
</script>
< KLEINER &lt; > GRÖSSER &gt; © COPYRIGHT &copy; Äquivalent &equiv; Unendlich &equiv; ½ Ein Halb &infin; Δ DELTA &Delta; λ LAMBDA &lambda; PIK &spades; HERZ &hearts; Trademark &trademark; PFEIL &orarr; ¤ Währung &curren; PFEIL &rarr; Angströn &angst; Wurzel &radic; SUMME &sum; Telefon &phone; Block &block; ¦ PIPE &brvbar; ^ CEVRON &Hat; STERN &star; FEMALE &female; MALE &male; HTML-Entities Sonderzeichen