HTML Sonderzeichen

Jede Webseite hat neben allen sichtbaren Elementen auch sogenannte Meta-Angaben, zu denen die Meta-Titel und die Meta-Description gehören. Diese werden dem Nutzer bei einer Suchmaschinenanfrage in den Ergebnissen der Suchmaschine angezeigt, ohne dass dieser die jeweilige Seite öffnet. Der hier angezeigte Text hat das Ziel den Suchenden zu einem Klick auf dieses Ergebnis zu überzeugen und ist damit enorm wichtig.

Um einzelne Keywords abzugrenzen und hervorzustechen, können in diesen Meta Angaben HTML Sonderzeichen eingebunden werden. Im Rahmen der Suchmaschinenoptimierung oder wer allgemein Digitales Marketing betreiben will, kann diese Auflistung an wichtigen und Google-konformen Sonderzeichen hilfreich sein, um die Texte auf der Suchergebnisseite dominanter zu machen und hervorzuheben.

Direkt zur Sonderzeichen-Tabelle:

Die nachfolgende Liste beinhaltet eine Übersicht an ausgewählten HTML Sonderzeichen.

Erklärungen zur Tabelle (Abkürzungen und Beschreibungen):

Zeichen: Die Ausgabeform des HTML Sonderzeichen
HTML: Der HTML-Code in UTF-8 (sogenannte named entities)
Titel: Zeichen kann im SEO-Titel verwendet werden
Description: Zeichen kann in der Meta-Description verwendet werden
Beschreibung: Eine Kurzbeschreibung zum jeweiligen HTML Sonderzeichen

HTML Sonderzeichen - Die Favoriten

Zeichen	HTML	Title	Description	Beschreibung
•	•	✔	✔	Ausgefüllter Kreis, Aufzählungszeichen
©	©	✔	✔	Copyright-Zeichen
®	®	✔	✔	Zeichen für eingetragene Handelsmarke
→	→		✔	Normaler Pfeil nach rechts
⇒	⇒	✔	✔	Doppelpfeil nach rechts
➨	-		✔	Dicker Pfeil, Dingbats
➔	-			Dicker Pfeil nach rechts (Dingbats)
«	«	✔	✔	Typographisches Anführungszeichen
»	»	✔	✔	Typographisches Anführungszeichen
★	-		✔	Ausgefüllter 5-zackiger Stern
♥	&hearts;		✔	Herz-Sonderzeichen
✆	-		✔	Telefon-Symbol
✉	-		✔	Briefumschlag-Symbol
✈	-		✔	Flugzeug-Symbol
✓	-		✔	Haken-Symbol
✔	-		✔	Haken-Symbol (fett)
€	€			Euro
¢	¢			US-Cent
£	£			britisches Pfund
¥	¥			japanischer Yen

Umlaute und Akzente

Zeichen	HTML	Title	Description	Beschreibung
Ä	Ä	✔	✔	Großbuchstabe Umlaut A
Ö	Ö	✔	✔	Großbuchstabe Umlaut O
Ü	Ü	✔	✔	Großbuchstabe Umlaut U
ä	ä	✔	✔	Kleinbuchstabe Umlaut a
ö	ö	✔	✔	Kleinbuchstabe Umlaut o
ü	ü	✔	✔	Kleinbuchstabe Umlaut u
ß	ß	✔	✔	Scharfes S / sz
À	À	✔	✔	Großbuchstabe A mit Gravis-Akzent
È	È	✔	✔	Großbuchstabe E mit Gravis-Akzent
Ì	Ì	✔	✔	Großbuchstabe I mit Gravis-Akzent
Ò	Ò	✔	✔	Großbuchstabe O mit Gravis-Akzent
Ù	Ù	✔	✔	Großbuchstabe U mit Gravis-Akzent
à	à	✔	✔	Kleinbuchstabe a mit Gravis-Akzent
è	é	✔	✔	Kleinbuchstabe e mit Gravis-Akzent
ì	í	✔	✔	Kleinbuchstabe i mit Gravis-Akzent
ò	ó	✔	✔	Kleinbuchstabe o mit Gravis-Akzent
ù	ú	✔	✔	Kleinbuchstabe u mit Gravis-Akzent
Á	Á	✔	✔	Großbuchstabe A mit Accent aigu
É	É	✔	✔	Großbuchstabe E mit Accent aigu
Í	Í	✔	✔	Großbuchstabe I mit Accent aigu
Ó	Ó	✔	✔	Großbuchstabe O mit Accent aigu
Ú	Ú	✔	✔	Großbuchstabe U mit Accent aigu
Ý	Ý	✔	✔	Großbuchstabe Y mit Accent aigu
á	á	✔	✔	Kleinbuchstabe a mit Accent aigu
é	é	✔	✔	Kleinbuchstabe e mit Accent aigu
í	í	✔	✔	Kleinbuchstabe i mit Accent aigu
ó	ó	✔	✔	Kleinbuchstabe o mit Accent aigu
ú	ú	✔	✔	Kleinbuchstabe u mit Accent aigu
ý	ý	✔	✔	Kleinbuchstabe y mit Accent aigu

Mathematische Sonderzeichen

Zeichen	HTML	Title	Description	Beschreibung
×	×	✔	<✔/td>	Multiplikation
÷	÷			Division
<	<			weniger als
>	>			mehr als
≤	≤			weniger oder gleich
≥	≥			größer oder gleich
¼	¼			ein Viertel
½	½			ein Halb
¾	¾	✔	✔	drei Viertel
‰	&permil;			Promille
∑	∑			Summenzeichen
√	√	✔	✔	Quadratwurzel

Pfeile

Zeichen	HTML	Title	Description	Beschreibung
→	→		✔	Normaler Pfeil nach rechts
←	←		✔	Normaler Pfeil nach links
↑	↑		✔	Normaler Pfeil nach oben
↓	↓		✔	Normaler Pfeil nach unten
↔	↔		✔	Pfeil nach links und rechts
↵	&crarr;			Enter Pfeil
⇒	⇒	✔	✔	Doppelpfeil nach rechts
⇐	⇐	✔	✔	Doppelpfeil nach links
➨	-		✔	Dicker Pfeil, Dingbats
➔	-			Dicker Pfeil nach rechts (Dingbats)
«	«	✔	✔	Typographisches Anführungszeichen
»	»	✔	✔	Typographisches Anführungszeichen
➠	-			Pfeil mit Verlauf nach rechts
➤	-	✔	✔	Ausgefüllter Pfeil nach rechts
➸	-	✔	✔	Pfeil nach rechts

Grafiken

Zeichen	HTML	Description	Beschreibung
♥	&hearts;	✔	Herz-Sonderzeichen
♠	&spades;	✔	Pik-Sonderzeichen
♣	&clubs;	✔	Kreuz-Sonderzeichen
♦	&diams;	✔	Karo-Sonderzeichen
✁	-	✔	Schere
✂	-		Schere
✃	-		Schere
✄	-		Schere
✎	-		Stift
✞	-		lateinisches Kreuz
✤	-		Kreuz mit vier Punkten)
✗	-		Stimme abgeben - Kreuz (nein)
❀	-		Blume
✿	-		Blume
❀	-		Blume
❄	-		Schneeflocke
❆	-		Schneeflocke
❝	-		Anführungszeichen
❞	-		Anführungszeichen
❣	-		Ausrufezeichen herzform
❤	-		Großes Herz

Zahlen in Kreisen

Zeichen	HTML	Title	Description	Beschreibung
❶	-	✔	✔	Zahl 1 in schwarzem Kreis
❷	-	✔	✔	Zahl 2 in schwarzem Kreis
❸	-	✔	✔	Zahl 3 in schwarzem Kreis
❹	-	✔	✔	Zahl 4 in schwarzem Kreis
❺	-	✔	✔	Zahl 5 in schwarzem Kreis
❻	-	✔	✔	Zahl 6 in schwarzem Kreis
❼	-	✔	✔	Zahl 7 in schwarzem Kreis
❽	-	✔	✔	Zahl 8 in schwarzem Kreis
❾	-	✔	✔	Zahl 9 in schwarzem Kreis
❿	-	✔	✔	Zahl 10 in schwarzem Kreis
➀	-	✔	✔	Zahl 1 in weißem Kreis
➁	-	✔	✔	Zahl 2 in weißem Kreis
➂	-	✔	✔	Zahl 3 in weißem Kreis
➃	-	✔	✔	Zahl 4 in weißem Kreis
➄	-	✔	✔	Zahl 5 in weißem Kreis
➅	-	✔	✔	Zahl 6 in weißem Kreis
➆	-	✔	✔	Zahl 7 in weißem Kreis
➇	-	✔	✔	Zahl 8 in weißem Kreis
➈	-	✔	✔	Zahl 9 in weißem Kreis
➉	-	✔	✔	Zahl 10 in weißem Kreis

Sterne & Sonstige

Zeichen	HTML	Beschreibung
∗	&lowast;	Stern / Multiplikation
✡	-	Davidstern
✦	-	4-eckig gefüllter Stern
✧	-	4-eckiger Stern
✩	-	5-eckiger Stern
✪	-	5-eckiger Stern im Kreis
✭	-	5-eckiger Stern
✯	-	5-eckiger Stern
✵	-	8-eckiger Stern
✻	-	6-eckiger Stern
❃	-	6-eckiger Stern
❉	-	8-eckiger Stern
✇	-	Tonband
✈	-	Flugzeug

Smileys & Emojis

Zeichen	HTML	Beschreibung
😀	&128512;	Grinsender Smiley
😁	&128513;	Lachender Smiley
😂	&128514;	Smiley mit Freudentränen
😍	&128525;	Smiley mit Herzaugen
😎	&128526;	Smiley mit Sonnenbrille
✌	&9996;	Peace Symbol
👉	&128073;	Finger nach rechts
☕	&9749;	Kaffee Tasse
🌳	&127795;	Baum
🍀	&127808;	Kleeblatt
🍕	&127829;	Pizza
💓	&128147;	Schlagendes Herz
💡	&128147;	Glühbirne

Besonderheiten der HTML Sonderzeichen

Hypertext Markup Line, kurz HTML, ist eine textbasierte Auszeichnungssprache, die der Textstrukturierung, wie Überschriften, Paragraphen, Absätze, Satzzeichen und Hervorhebungen dient. HTML Sonderzeichen sind Satzzeichen, die größtenteils nicht über die Tastatur eingegeben werden können. Diese schließen unter anderem folgende Zeichen ein:

Umlaute (ä, ü, ö)
Alltags-Symbole (Und-Zeichen, @-Zeichen)
Satzzeichen (Punkt, Komma, Fragezeichen)
Mathematische Symbole (Delta, Lambda, Pi)
Griechische Sonderzeichen (Alpha, Beta, Gamma)
Spielkartensymbole (Sterne, Blumen, Herzen, Karo)
Währungen (Euro, Dollar, Pfund)
Ornamente (Grafiken, Haken, Copyright-Zeichen)

Die Zeichen, die in den Meta-Angaben verwendet werden, dürfen eine bestimmte Anzahl nicht überschreiten, da sie sonst nicht vollständig angezeigt werden. Aus diesem Grund macht es Sinn, ein Sonderzeichen zu verwenden, anstelle das Wort auszuschreiben. So kann beispielsweise statt des Wortes “Euro”, das Zeichen „€” verwendet werden.

Sonderzeichen werden wie folgt in den HTML-Code eingebaut:

Tastatureingabe (Strg + Zahl aus Nummernblock)
Zeichen aus einer Liste
dezimal
hexadezimal
UTF-8-Code
Kurzbeschreibung des Sonderzeichens (s. Tabelle)

Damit die Zeichen im Browser richtig angezeigt werden können, müssen diese im Übrigen richtig übersetzt bzw. codiert werden.

Emojis als HTML Sonderzeichen

Nicht nur auf Instagram, Facebook & Co. ist der Einsatz von Emojis beliebt. Sie lenken die Aufmerksamkeit der Nutzer auf den jeweiligen Post und können oftmals mehr sagen als Worte. Aus diesem Grund werden Sie vermehrt in der Suchmaschinenoptimierung eingesetzt. Webseitenbetreiber wollen sich um jeden Preis bemerkbar machen, damit sie wahrgenommen werden und die Nutzer folglich auf die Seite klicken. Emojis, wie Herzen oder Pfeile, werden von vielen Webseiten-Betreibern noch nicht zum Einsatz gebracht, sodass es diese Chance ergriffen werden sollte. Grundsätzlich muss beachtet werden, dass nicht alle der Bildschriftzeichen auf die gleiche Art und Weise in jedem Browser angezeigt werden. Zudem gibt es Unterschiede zwischen der Smartphone- oder Desktop-Anzeige.