HTML Sonderzeichen und Icons

Sonderzeichen für Webseiten und HTML-Entities

Sonderzeichen für deutsche, niederländische oder französische Schriftzeichen vom Trema bis Accent Aigu, Accent Grave gibt es dank UTF-8 genauso das griechische Alphabet vom Alpha über das Lambda bis zum Omega.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

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.

`

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

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

#

#
#
hash, Octothorpe, Doppelkreuz

@

@
@
at-Symbol

|

|
|
senkrechter Strich

\

\
∖
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)

 
 
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

4¹

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

…
…
Auslassungspunkte
drei 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

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

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

↺
↺
Pfeil gegen den Uhrzeigersinn

↻
↻
Pfeil im Uhrzeigersinn

⇐
⇐
Doppelpfeil nach links

⇑
⇑
Doppelpfeil nach oben

⇒
⇒
Doppelpfeil nach rechts

⇓
⇓
Doppelpfeil nach unten

⇔
⇔
Doppelpfeil nach links und rechts

⌘
Apple Command-Taste
Place of Interest

〈
⟨
Linke winklige Klammer

〉
⟩
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

↻
↻
Kreis mit Pfeilspitze im Uhrzeiger

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

✆
☎
Telefon

✈
Flugzeug

✉
Briefumschlag

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

✕
Multiplikationszeichen

✖
Multiplikationszeichen ✕ (fett)

✗
Stimmzettel »x« (eng.: ballot)

✘
✗
Stimmzettel »x« fett

✛
Kreuz

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

ϑ

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

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

♠
♠
Spielkarte Pik (schwarz)

♢
-
Spielkarte Kreuz (weiß)

♣
♣
Spielkarte Kreuz (schwarz)

♤
-
Spielkarte Pik (weiß)

♡
-
Spielkarte Herz (weiß)

♥
♥
Spielkarte Herz (schwarz)

♦
♦
Spielkarte Karo (schwarz)

Einfache Grafik

⌈
⌈

Grafik: Rahmen oben links

⌉
&rceil

Grafik: Rahmen oben rechts

⌊
⌊

Grafik: Rahmen unten links

⌋
&rfloor

Grafik: Rahmen unten rechts