Sonderzeichen und HTML-Entities

Sonderzeichen für Webseiten und HTML-Entities

Sonderzeichen werden mit UTF-8 ohne Codierung in den HTML-Code gesetzt. ♥, ©, ®, è, à, ±, ¾, ∑ – Deutsch, Französisch, Russisch, Pfeile und mathematische Symbole können direkt eingesetzt werden.

Aber wenn es über die Zeichen der Tastatur hinausgeht, hat nicht jeder die Tastaturkombination für Pi – Π – im Kopf. Da greifen HTML-Entities – eine memotechnische Codierung wie π (Pi) und © (Copyright) für häufig gebrauchte Symbole. Sie sind Referenzen auf die Unicode-Zeichen.

Der Server prüft anhand der ersten Bytes der HTML-Seite die Zeichenkodierung und benachrichtigt den Browser durch das Charset-Attribut im Content-Type-Header des HTTP-Protokolls.

Zeichensatz angeben

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">

Dann gibts Copyright ©, Herzen ♥ und Promille ‰, Währungen vom Euro € bis zum Yen ¥ und die Sonderzeichen für Deutsch (z.B. 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.

Sonderzeichen eingeben

Für Sonderzeichen gibt es bis zu fünf Schreibweisen:

  • 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,
  • dezimal (z.B. &#9775; – 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.

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.

Sonderzeichen Währungen, Umlaute, Symbole

Währungen

Den Euro und das Dollarzeichen finden wir schon auf der Tastatur, aber für das britische Pfund und die türkische Lira brauchen wir ein HTML-Entity.

¢

&#162;
&cent;
Cent

£

&#163;
&pound;
britisches Pfund

¤

&#164;
&curren;
Währungszeichen

¥

&#165;
&yen;
japanischer Yen

&#3065;

Rupie Tamil

&#8362;

israelischer Schekel

&#8378;

türkische Lira

&#8379;

russischer Rubel

Umlaute und Hatschek

Genauso wie den Euro und das Dollarzeichen finden wir ein é (accent aigu) oder à (accent grave) schon auf der Tastatur, ein ë (e mit zwei Punkten für Emily Brontë) allerdings nicht. ë, ÿ und auch ä gehören wie die Sonderzeichen für Währungen zu den Latin 1-Ergänzungen bzw. Latin Erweiterungen.

ë

&#235;
&euml;
e mit zwei Punkten (e Umlaut)

ñ

&#241;
&ntilde;
n mit kleiner Welle (n Tilde)

ÿ

&#255;
&yuml;
y mit zwei Punkten (y Umlaut)

š

&#352;
&scaron;
s mit Hatschek (Caron)

Alltags-Symbole

Sonderzeichen, die wir häufig brauchen: Copyright-Symbol, Registered Trademark und Trademark, Quadrat und Qubik.

#

&#35;
&num;
hash, Octothorpe, Doppelkreuz

@

&#64;
&commat;
at-Symbol

|

&#124;
&vert;
senkrechter Strich

\

&#92;
&Backslash;
Backslash, Gegenschrägstrich oder rückwärts gerichteter Schrägstrich

©

&#169;
&copy;
Copyright

®

&#174;
&reg;
Registrierte Handelsmarke

&#8482;
&trade;
Handelsmarke / Trademark

±

&#177;
&plusmn;
Plusminus

4²

&#178;
&sup2;
hoch 2 = Quadrat

4³

&#179;
&sup3;
hoch 3 = Qubik

&#7838;
Großes Eszett oder scharfes S

&#9877;
Äskulapstab

&#9874;
Symbol für Bergbau

&#9879;
Symbol für Labor

&#10102;
Zahl, Ziffer 1 weiß im gefüllten Kreis serif

&#10131;
Zahl, Ziffer 10

Satzzeichen und Pfeile

Satzzeichen, Leerzeichen und Gedankenstrich

Deutsche Anführungszeichen unten und oben, doppelte und einfache Hochkommas und Leerzeichen in verschiedenen Breiten sowie Gedankenstriche.

–– ––

&#160;
&nbsp;
Leerzeichen, nicht brechend

"­"

&#173;
&shy;
Weiches Trennzeichen

¦

&#166;
&brvbar;
gebrochener senkrechter Strich (Pipe)

«

&#171;
&laquo;
typografisches Anführungszeichen links (Guillemet)

´

&#180;
&acute;
Umlaut: Akut mit Leerraum

&#8194;
&ensp;
Typo: n-Raum

&#8195;
&emsp;
Typo: m-Raum

&#8201;
&thinsp;
Dünnes Leerzeichen (z.B. in Telefonnummern) 012 34/5 67 89

&#8204;
&zwnj;
Null-Leerraum, führt nicht zusammen (z.B. www.langerlink.de ohne Trennzeichen trennen)

--

&#8205;
&zwj;
Typo: Null-Leerraum, führt zwei Wörter zusammen

&#8211;
&ndash;
Typo: n-Strich = Viertelgeviert

&#8212;
&mdash;
Typo: m-Strich = Dreiviertelgeviert

4¹

&#185;
&sup1;
hoch 1

"

&#34;
&quot;
Hochkomma, Anführungszeichen, Quote (XML)

«

&#171;
&laquo;
typografisches Anführungszeichen links (Guillemet, Chevron)

»

&#187;
&raquo;
typografisches Anführungszeichen rechts (Guillemet, Chevron)

&#8249;
&lsaquo;
Anführungszeichen links (Guillemet, Chevron)

&#8250;
&rsaquo;
Anführungszeichen rechts (Guillemet, Chevron)

&#8220;
&ldquo;
Hochkomma, doppelte Anführungszeichen links

&#8221;
&rdquo;
Hochkomma, doppelte Anführungszeichen rechts

&#8222;
&bdquo;
Hochkomma, doppelte Anführungszeichen unten

'

&#39;
&apos;
einfaches Anführungszeichen rechts (XML)

&#8216;
&lsquo;
Hochkomma, einfache öffnende Anführungszeichen

&#8217;
&rsquo;
Hochkomma, einfache schließende Anführungszeichen bzw. Apostroph

&#8218;
&sbquo;
Hochkomma, einfache Anführungszeichen unten

&#8226;
&bull;
Kreis, gefüllt (bullet) = Aufzählungssymbol

&#8230;
&hellip;
Auslassungspunkte
drei Punkte als ein Zeichen

&#9674;
&loz;
Raute

Symbole Pfeile und Icons

Pfeile gibts in jeglicher denkbaren Form. Los gehts mit &#8592; – dem Pfeil nach links – bis &#8703;. Weiter dann mit &#10224;.

&#8592;
&larr;
Pfeil links

&#8593;
&uarr;
Pfeil oben

&#8594;
&rarr;
Pfeil rechts

&#8595;
&darr;
Pfeil unten

&#8596;
&harr;
Pfeil links / rechts

&#8629;
&crarr;
Pfeil nach unten, Ecke nach links = Zeilenumbruch (Carriage Return)

&#8634;
&olarr;
Pfeil gegen den Uhrzeigersinn

&#8635;
&orarr;
Pfeil im Uhrzeigersinn

&#8656;
&lArr;
Doppelpfeil nach links

&#8657;
&uArr;
Doppelpfeil nach oben

&#8658;
&rArr;
Doppelpfeil nach rechts

&#8659;
&dArr;
Doppelpfeil nach unten

&#8660;
&hArr;
Doppelpfeil nach links und rechts

&#9001;
&lang;
Linke winklige Klammer

&#9002;
&rang;
Rechte winklige Klammer

&#9650;
großes Dreieck, Spitze oben

&#9652;
kleines Dreieck, Spitze oben

&#9654;
großes Dreieck, Spitze rechts

&#9656;
kleines Dreieck, Spitze rechts

&#9660;
großes Dreieck, Spitze unten

&#9662;
kleines Dreieck, Spitze unten

&#9664;
großes Dreieck, Spitze links

&#9666;
kleines Dreieck, Spitze links

&#8634;
&circlearrowleft
Kreis mit Pfeilspitze gegen den Uhrzeiger

&#8635;
&circlearrowright;
Kreis mit Pfeilspitze im Uhrzeiger

&#8617;
&larrhk;
Pfeil zurück (Enter)

&#10149;
Pfeil nach rechts mit von oben geschwungenem Schaft

&#10150;
Pfeil nach rechts mit von unten geschwungenem Schaft

&#10132;
Pfeil nach rechts

&#10136;
Pfeil nach Südost (unten links)

&#10137;
Pfeil nach rechts

&#10138;
Pfeil nach Nordost (oben rechts)

&#10141;
Pfeil nach rechts

&#10142;
Pfeil nach rechts

&#10143;
Pfeil nach rechts

Icon-Sonderzeichen, Dingbats

&#8226;
Gefüllter Kreis

&#8227;
Gefülltes Dreieck

&#8408;
leerer Kreis

&#8481;
Telefon

&#8507;
Fax

&#8718;
Gefülltes Viereck

&#8729;
Gefüllter kleiner Kreis

&#9986;
Schere

&#9990;
&phone;
Telefon

&#9992;
Flugzeug

&#9993;
Briefumschlag

&#10003;
Haken, Häkchen – Geprüft und für richtig empfunden

&#10005;
Multiplikationszeichen

&#10006;
Multiplikationszeichen ✕ (fett)

&#10007;
Stimmzettel »x« (eng.: ballot)

&#10008;
&cross;
Stimmzettel »x« fett

&#10011;
Kreuz

&#10016;
&malt;
Kreuz Malteser

&#9775;
YIN YANG

&#9786;
Smilie (weiß)

Technik und Symbole der Mathematik

Mathematik Symbole und Sonderzeichen

¬

&#172;
&not;
Negierung

¼

&#188;
&frac14;
Mathe 1/4 ein Viertel

½

&#189;
&frac12;
Mathe 1/2 ein Halb

¾

&#190;
&frac34;
Mathe 3/4 drei Viertel

&#8539;
&frac18;
Mathe 1/8 ein Achtel

&#8540;
&frac38;
Mathe 3/8 drei Achtel

&#8541;
&frac58;
Mathe 5/8 fünf Achtel

&#8542;
&frac78;
Mathe 7/8 sieben Achtel

&#8531;
-
Mathe 1/3 ein Drittel

&#8532;
-
Mathe 2/3 zwei Drittel

&#8533;
-
Mathe 1/5 ein Fünftel

&#8534;
-
Mathe 2/5 zwei Fünftel

&#8535;
-
Mathe 3/5 drei Fünftel

&#8536;
-
Mathe 4/5 vier Fünftel

&#8537;
-
Mathe 1/6 ein Sechstel

Ð

&#208;
&ETH;
Latein großes ETH

×

&#215;
&times;
Mathe: Multiplikationszeichen Malzeichen

÷

&#247;
&divide;
Mathe: Divisionszeichen (geteilt)

&#8472;
&weierpv
Mathe Weierstraß'sche P-Funktion

&#8465;
&image;
Mathe: I Fraktur = imaginärer Anteil einer Zahl

&#8476;
&real;
Mathe: R Fraktur = realer Anteil einer Zahl

&#8704;
&forall;
Mathe: für alle

&#8706;
&part;
Mathe: partiales Differential

&#8707;
&exist;
Mathe: es gibt

&#8709;
&empty;
Mathe: leere Menge

&#8711;
&nabla;
Mathe: Nablafunktion

&#8712;
&isin;
Mathe: Element von

&#8713;
&notin;
Mathe: kein Element von

&#8715;
&ni;
Mathe: enthält

&#8719;
&prod;
Mathe: Produktzeichen

&#8721;
&sum;
Mathe: Summe

&#8727;
&lowast;
Mathe: Stern-Operator

&#8730;
&radic;
Mathe: Wurzel

&#8731;

Mathe: Kubikwurzel, dritte Wurzel

&#8732;

Mathe: vierte Wurzel

&#8733;
&prop;
Mathe: proportional zu

&#8734;
&infin;
Mathe: unendlich

&#8736;
&ang;
Mathe: Winkel

&#8743;
&and;
Mathe: logisches Und

&#8744;
&or;
Mathe: logisches Oder

&#8745;
&cap;
Mathe: Schnittmenge

&#8746;
&cup;
Mathe: Vereinigung

&#8747;
&int;
Mathe: Integral

&#8756;
&there4;
Mathe: darum

&#8764;
&sim;
Mathe: Tilde-Operator = ähnlich wie

&#8773;
&cong;
Mathe: ungefähr gleich

&#8776;
&asymp;
Mathe: fast gleich = asymptotisch zu

&#8800;
&ne;
Mathe: nicht gleich

&#8801;
&equiv;
Mathe: identisch

&#8804;
&le;
Mathe: kleiner gleich

&#8805;
&ge;
Mathe: größer gleich

&#8834;
&sub;
Mathe: Untermenge von

&#8835;
&sup;
Mathe: Obermenge von

&#8836;
&nsub;
Mathe: Keine Untermenge von

&#8838;
&sube;
Mathe: Untermenge oder gleich

&#8839;
&supe;
Mathe: Obermenge oder gleich

&#8853;
&oplus;
Mathe: Pluszeichen im Kreis = direkte Summe

&#8855;
&otimes;
Mathe: Multiplikationszeichen im Kreis = Vektorprodukt

&#8869;
&perp;
Mathe: senkrecht auf = orthogonal zu

&#8901;
&sdot;
Mathe: Punktoperator

&#10868;
&Colone;
doppelter Doppelpunkt ist gleich

&#8491;
&angst;
Angström

Symbole der Technik

¯

&#175;
&macr;
Makron

µ

&#181;
&micro;
Mikro

·

&#183;
&middot;
Mittelpunkt
Punkt in der Mitte der Zeile

&#10664;
&angmsdaa;
Winkel

&#10665;
&angmsdab;
Winkel

&#10666;
&angmsdac;
Winkel

&#10667;
&angmsdad;
Winkel

Delta, Lambda, Pi

Sonderzeichen aus dem griechischen Alphabet

Δ

&#916;
&Delta;
Griechisch Delta

Η

&#919;
&Eta;
Griechisch Eta

Θ

&#920;
&Theta;
Griechisch Theta

Λ

&#923;
&Lambda;
Griechisch Lambda

Π

&#928;
&Pi;
Griechisch Pi

Σ

&#931;
&Sigma;
Griechisch Sigma

Φ

&#934;
&Phi;
Griechisch Phi

Ψ

&#936;
&Psi;
Griechisch Psi

Ω

&#937;
&Omega;
Griechisch Omega

α

&#945;
&alpha;
Griechisch alpha

β

&#946;
&beta;
Griechisch beta

γ

&#947;
&gamma;
Griechisch gamma

δ

&#948;
&delta;
Griechisch delta

ε

&#949;
&epsilon;
Griechisch epsilon

ζ

&#950;
&zeta;
Griechisch zeta

η

&#951;
&eta;
Griechisch eta

θ

&#952;
&theta;
Griechisch theta

κ

&#954;
&kappa;
Griechisch kappa

λ

&#955;
&lambda;
Griechisch lambda

μ

&#956;
&mu;
Griechisch mu (z.B. für Mikrometer)

ν

&#957;
&nu;
Griechisch nu

ξ

&#958;
&xi;
Griechisch xi

ο

&#959;
&omicron;
Griechisch omicron

π

&#960;
&pi;
Griechisch pi

ρ

&#961;
&rho;
Griechisch rho

σ

&#963;
&sigma;
Griechisch sigma

τ

&#964;
&tau;
Griechisch tau

υ

&#965;
&upsilon;
Griechisch ypsilon

φ

&#966;
&phi;
Griechisch phi

χ

&#967;
&chi;
Griechisch chi

ψ

&#968;
&psi;
Griechisch psi

ω

&#969;
&omega;
Griechisch omega

ϑ

&#977;
&thetasym;
Griechisch theta

ϖ

&#982;
&piv;
Griechisch pi

Spielkarten, Sterne, Blumen und Herzen

Sterne, Sternchen, Stern-Symbole

&#9733;
5-zackiger Stern, gefüllt

&#9734;
5-zackiger Stern, weiß

&#10017;
Davidstern

&#10022;
Stern vierseitig gefüllt

&#10023;
Stern vierseitig weiß

&#10026;
Stern weiß im gefüllten Kreis

&#10032;
Stern mit Schatten

&#10035;
Stern mit acht Zacken

&#10038;
&sext;
Stern mit sechs Zacken

&#10039;
Stern mit acht Zacken

&#10057;
Stern aus Ballons (Asterisk)

&#10058;
Stern mit Tropfenzacken (Asterisk)

Blumen und Herzen und große Satzzeichen

&#10047;
Blume mit fünf Blättern

&#10049;
Blume mit acht Blättern

&#10061;
Kreis mit Schatten nach rechts

&#10070;
Vier schwarze Rauten als Kreuz

&#10075;
Dickes einzelnes Anführungszeichen

&#10076;
Dickes einzelnes Komma

&#10077;
Dickes doppeltes Anführungszeichen

&#10081;
Dickes geschwungenes Absatzzeichen

&#10082;
Dickes geschwungenes Ausrufezeichen

&#10084;
Dickes geschwungenes Herz

&#10085;
Dickes geschwungenes Herz, 90°

&#10086;
Herz, floral

&#10087;
Herz, floral, 90°

HTML Sonderzeichen – Spielkarten

&#9824;
&spades;
Spielkarte Pik (schwarz)

&#9826;
-
Spielkarte Kreuz (weiß)

&#9827;
&clubs;
Spielkarte Kreuz (schwarz)

&#9828;
-
Spielkarte Pik (weiß)

&#9825;
-
Spielkarte Herz (weiß)

&#9829;
&hearts;
Spielkarte Herz (schwarz)

&#9830;
&diams;
Spielkarte Karo (schwarz)

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 Hex-Codes direkt ausgeben:

<script>
   mytext.innerHTML = '\u262f' + ' und ' + '\u2665 ';
</script>