HTML Sonderzeichen und Icons

Keine Tastaturkombination für HTML-Sonderzeichen

Alle mathematischen Symbole von Plus-Minus (±), Summe (∑) und Pi (π) können genauso wie Piktogramme ♥, ©, 🐾, direkt in die Webseite gesetzt werden und für Sternzeichen ♍, Regenschirm ☂ und Schachfiguren ♚ brauchen wir keine Iconfonts. Der Server prüft anhand der ersten Bytes der HTML-Seite die Kodierung und benachrichtigt den Browser durch das Charset-Attribut im Content-Type-Header des HTTP-Protokolls. Wenn der Webserver nicht schon UTF-8 als Zeichensatz installiert, kann der Zeichensatz im HEAD-Bereich der HTML-Seite oder in der .htaccess-Datei vorgegeben 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. Da aber nicht alle HTML-Sonderzeichen einen Namen haben, lassen sich alle Unicode-Zeichen durch eine dezimale und hexadezimale Kodierung eingeben.

Umlaute, Gravis, Accent 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.

`
&grave;

Umlaut: Grave mit Leerraum (Backtick)

´
´

Umlaut: Akut mit Leerraum

â
â

Kleines â Zircumflex

ä
ä

Umlaut: kleines ä

Ë
Ë

Großes E mit zwei Punkten (E Umlaut, Trema)

Ï
Ï

Großes I mit zwei Punkten (i Umlaut, Trema)

ë
ë

e mit zwei Punkten (e Umlaut, Trema)

ï
ï

i mit zwei Punkten (i Umlaut, Trema)

ñ
ñ

n mit kleiner Welle (n Tilde)

ö
ö

Umlauf: kleines ö

ü
ü

Umlaut: kleines ü

ÿ
ÿ

y mit zwei Punkten (y Umlaut)

Š
&scaron;

s mit Hatschek (Caron)

Alltags-Symbole

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

#
&num;

hash, Octothorpe, Doppelkreuz

@
&commat;

at-Symbol

|
|

senkrechter Strich

\
&Backslash;

Backslash, Gegenschrägstrich oder rückwärts gerichteter Schrägstrich

Copyright

®
®

Registrierte Handelsmarke

™

™
™

Handelsmarke / Trademark

±
±

Plusminus

4²

²
²

hoch 2 = Quadrat

4³

³
³

hoch 3 = Qubik

ẞ

ẞ
–

Großes Eszett oder scharfes S

⚕

⚕
–

Äskulapstab

⚒

⚒
–

Symbol für Bergbau

⚗

⚗
–

Symbol für Labor

❶

❶
–

Zahl, Ziffer 1 weiß im gefüllten Kreis serif

➓

➓
–

Zahl, Ziffer 10

Satzzeichen und typografische Zeichen

Satzzeichen, Leerzeichen und Gedankenstrich

Alles für die Typografie: deutsche Anführungszeichen unten und oben, doppelte und einfache Hochkommas und Leerzeichen in verschiedenen Breiten sowie Gedankenstriche.

–– ––

Leerzeichen, nicht brechend

Weiches Trennzeichen

¦
¦

gebrochener senkrechter Strich (Pipe)

«
«

typografisches Anführungszeichen links (Guillemet)

— —

 
&ensp;

Typo: n-Raum

— —

 
&emsp;

Typo: m-Raum

— —

Dünnes Leerzeichen (z.B. in Telefonnummern) 012 34/5 67 89

–‌–

‌
&zwnj;

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

-‍-

‍
&zwj;

Typo: Null-Leerraum, führt zwei Wörter zusammen

–

–
–

Typo: n-Strich = Viertelgeviert

—

—
—

Typo: m-Strich = Dreiviertelgeviert

4¹

¹
¹

hoch 1

"
"

doppeltes Hochkomma, Quote (XML)

«
«

typografisches Anführungszeichen links (Guillemet, Chevron)

»
»

typografisches Anführungszeichen rechts (Guillemet, Chevron)

‹

‹
&lsaquo;

Anführungszeichen links (Guillemet, Chevron)

›

›
&rsaquo;

Anführungszeichen rechts (Guillemet, Chevron)

“

“
“

doppeltes Anführungszeichen links

”

”
”

doppeltes Anführungszeichen rechts

„

„
&bdquo;

Anführungszeichen unten

'
'

Hochkomma, Apostroph (XML)

‘

‘
‘

einfaches öffnendes Anführungszeichen

’

’
’

einfaches schließendes Anführungszeichen

‚

‚
&sbquo;

einfaches Anführungszeichen unten

•

•
•

Kreis, gefüllt (bullet) = Aufzählungssymbol

…

…
…

Auslassungspunkte
drei Punkte als ein Zeichen

◊

◊
&loz;

Raute

¶
¶

Absatz, neue Zeile (Pilcrow)

≡

≡
&equiv;

Identisch, steht auch für Liste

❛

❛
–

Dickes einzelnes Anführungszeichen

❜

❜
–

Dickes einzelnes Komma

❝

❝
–

Dickes doppeltes Anführungszeichen

❡

❡
–

Dickes geschwungenes Absatzzeichen

❢

❢
–

Dickes geschwungenes Ausrufezeichen

Ligaturen

großes lateinisches AE (lat. Ligatur AE)

kleines lateinisches ae (lat. Ligatur ae)

großes lateinisches OE (lat. Ligatur OE)

kleines lateinisches oe (lat. Ligatur oe)

Symbole Pfeile und Icons

Pfeile gibts in jeglicher denkbaren Form: mit gefüllter Spitze, Pfeil nach oben, Pfeil nach unten. Los gehts mit ← – dem Pfeil nach links – bis ⇿. Weiter dann mit ⟰.

Pfeil nach oben, Chevron, Circumflex

Pfeil nach links

Pfeil nach rechts

Pfeil nach oben, Chevron

Pfeil nach unten

←

←
←

Pfeil links

↑

↑
↑

Pfeil oben

→

→
→

Pfeil rechts

↓

↓
↓

Pfeil unten

↔

↔
↔

Pfeil links / rechts

↵

↵
&crarr;

Pfeil nach unten links = Zeilenumbruch
(Carriage Return, Enter)

↺

↺
&olarr;

Pfeil gegen den Uhrzeigersinn

↻

↻
&orarr;

Pfeil im Uhrzeigersinn

⇐

⇐
⇐

Doppelpfeil nach links

⇑

⇑
&uArr;

Doppelpfeil nach oben

⇒

⇒
⇒

Doppelpfeil nach rechts

⇓

⇓
&dArr;

Doppelpfeil nach unten

⇔

⇔
⇔

Doppelpfeil nach links und rechts

⌘

Apple Command-Taste
Place of Interest

⟨

〈
&lang;

Linke winklige Klammer

⟩

〉
&rang;

Rechte winklige Klammer

⌫

Backspace-Symbol

▲

großes Dreieck, Spitze oben

▴

kleines Dreieck, Spitze oben

▶

großes Dreieck, Spitze rechts

▸

kleines Dreieck, Spitze rechts

▼

großes Dreieck, Spitze unten

▾

kleines Dreieck, Spitze unten

◀

großes Dreieck, Spitze links

◂

kleines Dreieck, Spitze links

↺

↺
&circlearrowleft

Kreis mit Pfeilspitze gegen den Uhrzeiger

↻

↻
&circlearrowright;

Kreis mit Pfeilspitze im Uhrzeiger

↩

↩
&larrhk;

Pfeil zurück (Enter)

➥

➥
–

Pfeil nach rechts mit von oben geschwungenem Schaft

➦

➦
–

Pfeil nach rechts mit von unten geschwungenem Schaft

➔

➔
–

Pfeil nach rechts

➘

➘
–

Pfeil nach Südost (unten links)

➙

➙
–

Pfeil nach rechts

➚

➚
–

Pfeil nach Nordost (External Link, oben rechts)

➝

➝
–

Pfeil nach rechts

➞

➞
–

Pfeil nach rechts

➟

➟
–

Pfeil nach rechts

Mehr Dingbats

Dingbats sind eine Sammlung von einfachen Grafiken, zu denen neben den Pfeilen und Sternen Ziffern in Kreisen und Pfeilen sowie Symbole für alltägliche Anlässe gehören. Ihr Name erinnert an den Schriftschnitt von Hermann Zapfs Schrift ITC Zapf Dingbats, der heute als industrieller Standard gilt.

•

•
–

Gefüllter Kreis

‣

‣
–

Gefülltes Dreieck

℡

℡
–

Telefon

℻

℻
–

Fax

∎

∎
–

Gefülltes Viereck

∙

∙
–

Gefüllter kleiner Kreis

☺

☺
–

Smilie (weiß)

ⓧ

ⓧ
–

Kleines x im Kreis
Zeichen für einen Fehler oder ein Verbot

☯

☯
–

YIN YANG

✂

✂
–

Schere

✆

✆
&phone;

Telefon

✈

✈
–

Flugzeug

✉

✉
–

Briefumschlag

✓

✓
–

Haken, Häkchen – Geprüft und für richtig empfunden

✕
–

Multiplikationszeichen

✖

✖
–

Multiplikationszeichen ✕ (fett)

✗

✗
–

Stimmzettel »x« (eng.: ballot)

✘

✘
&cross;

Stimmzettel »x« fett

✛

✛
–

Kreuz

✠

✠
&malt;

Kreuz Malteser

⨂

⨂
–

Kreis mit großem X

Delta, Lambda, Pi

Sonderzeichen aus dem griechischen Alphabet

Δ
Δ

Griechisch Delta

Η
Η

Griechisch Eta

Θ
Θ

Griechisch Theta

Λ
Λ

Griechisch Lambda

Π
Π

Griechisch Pi

Σ
Σ

Griechisch Sigma

Φ
Φ

Griechisch Phi

Ψ
Ψ

Griechisch Psi

Ω
Ω

Griechisch Omega

α
α

Griechisch alpha

β
β

Griechisch beta

γ
γ

Griechisch gamma

δ
δ

Griechisch delta

ε
ε

Griechisch epsilon

ζ
ζ

Griechisch zeta

η
η

Griechisch eta

θ
θ

Griechisch theta

κ
κ

Griechisch kappa

λ
λ

Griechisch lambda

μ
μ

Griechisch mu (z.B. für Mikrometer)

ν
ν

Griechisch nu

ξ
ξ

Griechisch xi

ο
ο

Griechisch omicron

π
π

Griechisch pi

ρ
ρ

Griechisch rho

σ
σ

Griechisch sigma

τ
τ

Griechisch tau

υ
υ

Griechisch ypsilon

φ
φ

Griechisch phi

χ
χ

Griechisch chi

ψ
ψ

Griechisch psi

ω
ω

Griechisch omega

ϑ
&thetasym;

Griechisch theta

ϖ
ϖ

Griechisch pi

Sterne, Blumen und Herzen

Sterne, Sternchen, Stern-Symbole

★

★
–

5-zackiger Stern, gefüllt

☆

☆
–

5-zackiger Stern, weiß

✡

✡
–

Davidstern

✦

✦
–

Stern vierseitig gefüllt

✧

✧
–

Stern vierseitig weiß

✪

✪
–

Stern weiß im gefüllten Kreis

✰

✰
–

Stern mit Schatten

✳

✳
–

Stern mit acht Zacken

✶

✶
&sext;

Stern mit sechs Zacken

✷

✷
–

Stern mit acht Zacken

❉

❉
–

Stern aus Ballons (Asterisk)

❊

❊
–

Stern mit Tropfenzacken (Asterisk)

✿

✿
–

Blume mit fünf Blättern

❁

❁
–

Blume mit acht Blättern

❍

❍
–

Kreis mit Schatten nach rechts

❖

❖
–

Vier schwarze Rauten als Kreuz

❤

❤
–

Dickes geschwungenes Herz

❥

❥
–

Dickes geschwungenes Herz, 90°

❦

❦
–

Herz, floral

❧

❧
–

Herz, floral, 90°

HTML Sonderzeichen – Spielkarten

♠

♠
&spades;

Spielkarte Pik (schwarz)

♢

♢
-

Spielkarte Kreuz (weiß)

♣

♣
&clubs;

Spielkarte Kreuz (schwarz)

♤

♤
-

Spielkarte Pik (weiß)

♡

♡
-

Spielkarte Herz (weiß)

♥

♥
&hearts;

Spielkarte Herz (schwarz)

♦

♦
&diams;

Spielkarte Karo (schwarz)

Einfache Grafik

⌈

⌈
&lceil;

Grafik: Rahmen oben links

⌉

⌉
&rceil

Grafik: Rahmen oben rechts

⌊

⌊
&lfloor;

Grafik: Rahmen unten links

⌋

⌋
&rfloor

Keine Tastaturkombination für HTML-Sonderzeichen

Umlaute, Gravis, Accent und Hatschek

Umlaut: Grave mit Leerraum (Backtick)

Umlaut: Akut mit Leerraum

Kleines â Zircumflex

Umlaut: kleines ä

Großes E mit zwei Punkten (E Umlaut, Trema)

Großes I mit zwei Punkten (i Umlaut, Trema)

e mit zwei Punkten (e Umlaut, Trema)

i mit zwei Punkten (i Umlaut, Trema)

n mit kleiner Welle (n Tilde)

Umlauf: kleines ö

Umlaut: kleines ü

y mit zwei Punkten (y Umlaut)

s mit Hatschek (Caron)

Alltags-Symbole

hash, Octothorpe, Doppelkreuz

at-Symbol

senkrechter Strich

Backslash, Gegenschrägstrich oder rückwärts gerichteter Schrägstrich

Copyright

Registrierte Handelsmarke

Handelsmarke / Trademark

Plusminus

hoch 2 = Quadrat

hoch 3 = Qubik

Großes Eszett oder scharfes S

Äskulapstab

Symbol für Bergbau

Symbol für Labor

Zahl, Ziffer 1 weiß im gefüllten Kreis serif

Zahl, Ziffer 10

Satzzeichen und typografische Zeichen

Satzzeichen, Leerzeichen und Gedankenstrich

Leerzeichen, nicht brechend

Weiches Trennzeichen

gebrochener senkrechter Strich (Pipe)

typografisches Anführungszeichen links (Guillemet)

Typo: n-Raum

Typo: m-Raum

Dünnes Leerzeichen (z.B. in Telefonnummern) 012 34/5 67 89

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

Typo: Null-Leerraum, führt zwei Wörter zusammen

Typo: n-Strich = Viertelgeviert

Typo: m-Strich = Dreiviertelgeviert

hoch 1

doppeltes Hochkomma, Quote (XML)

typografisches Anführungszeichen links (Guillemet, Chevron)

typografisches Anführungszeichen rechts (Guillemet, Chevron)

Anführungszeichen links (Guillemet, Chevron)

Anführungszeichen rechts (Guillemet, Chevron)

doppeltes Anführungszeichen links

doppeltes Anführungszeichen rechts

Anführungszeichen unten

Hochkomma, Apostroph (XML)

einfaches öffnendes Anführungszeichen

einfaches schließendes Anführungszeichen

einfaches Anführungszeichen unten

Kreis, gefüllt (bullet) = Aufzählungssymbol

Auslassungspunktedrei Punkte als ein Zeichen

Raute

Absatz, neue Zeile (Pilcrow)

Identisch, steht auch für Liste

Dickes einzelnes Anführungszeichen

Dickes einzelnes Komma

Dickes doppeltes Anführungszeichen

Dickes geschwungenes Absatzzeichen

Dickes geschwungenes Ausrufezeichen

Ligaturen

großes lateinisches AE (lat. Ligatur AE)

kleines lateinisches ae (lat. Ligatur ae)

großes lateinisches OE (lat. Ligatur OE)

kleines lateinisches oe (lat. Ligatur oe)

Symbole Pfeile und Icons

Pfeil nach oben, Chevron, Circumflex

Pfeil nach links

Pfeil nach rechts

Pfeil nach oben, Chevron

Pfeil nach unten

Pfeil links

Auslassungspunkte
drei Punkte als ein Zeichen

Pfeil nach unten links = Zeilenumbruch
(Carriage Return, Enter)

Apple Command-Taste
Place of Interest

Kleines x im Kreis
Zeichen für einen Fehler oder ein Verbot