HTML Sonderzeichen, Icons und Symbole: Eine umfassende Liste

Barrierefreie Website gestalten
York Karsten
York Karsten

Aktualisiert:

Veröffentlicht:

HTML Sonderzeichen spielen bei der Gestaltung von Webauftritten eine wichtige Rolle. Sie dienen dazu, eine Webseite funktional zu halten und Text korrekt sowie übersichtlich darzustellen.

Mann sucht nach HTML-Sonderzeichen am Laptop

Vor allem Zeichen, die bei der Programmierung eine bestimmte Bedeutung haben (zum Beispiel „>“ und „<“) lassen sich so in HTML-Dokumente integrieren und korrekt nutzen. Ebenso ist es mit HTML Icons möglich, Pfeile, Umlaute, Anführungszeichen und vieles mehr zu verwenden.

Dieser Beitrag erläutert die Bedeutung von HTML Sonderzeichen und stellt die wichtigsten und gängigsten Zeichensätze vor.

→ Leitfaden CSS & HTML für Anfänger [Kostenloser Download]

HTML Sonderzeichen in der praktischen Übersicht

Im Folgenden finden Sie verschiedene Tabellen, die einige der gängigsten und wichtigsten HTML Zeichen und HTML Symbole aufführen.

Mit diesen Listen von HTML Sonderzeichen fällt es Ihnen leicht, Ihren Webauftritt zu gestalten und verschiedene Aufgaben zu lösen. Neben der hier getroffenen Auswahl gibt es noch viele weitere Varianten, sodass Sie für Ihre ganz persönlichen Anliegen den jeweils passenden Zeichensatz nutzen können:

Beliebte HTML Sonderzeichen

Diese beliebten HTML Sonderzeichen kommen vor allem in der Kommunikation und bei der Webseitengestaltung zum Einsatz. So lassen sich beispielsweise das Impressum mit ihnen gestalten und Nachrichten an Nutzer und Nutzerinnen schicken.

Zeichen

HTML

Unicode

Beschreibung

-

&#10003;

Haken

-

&#9733;

Stern

-

&#10084;

Herz

-

&#10008;

Nein/Kreuz

©

-

&#169;

Copyright

-

&#9990;

Telefon

-

&#9993;

Brief

-

&#9992;

Flugzeug

Währungen

Gerade im wirtschaftlichen Bereich ist es wichtig, mit verschiedenen Währungen zu hantieren und diese durch spezielle HTML Zeichen auszudrücken. So erzielen Sie, dass der eigene Webauftritt international wird, und bieten beispielsweise Zahlungen in unterschiedlichen Währungen an. Gerade für global agierende Unternehmen ist das relevant.

Zeichen

HTML

Unicode

Beschreibung

&euro;

&#8364;

Euro

¢

&cent;

&#162;

US-Cent

£

&pound;

&#163;

Pfund

¥

&yen;

&#165

Yen

Mathematische HTML Sonderzeichen

Mathematische Berechnungen und Darstellungen werden mit den folgenden HTML Icons möglich. Zudem spielen diese Symbole bei Wetterinformationen und in der Statistik eine Rolle.

Zeichen

HTML

Unicode

Beschreibung

°

&deg;

&#176;

Grad

±

&plusmn;

&#177;

Plusminus

²

&sup2;

&#178;

im Quadrat

³

&sup3;

&#179;

Kubik

½

&frac12;

&#189;

ein Halb

¼

&frac14;

&#188;

ein Viertel

×

&times;

&#215;

multiplizieren

÷

&divide;

&#247;

dividieren

<

&lt;

&#60;

kleiner als

>

&gt;

&#62;

größer als

&radic;

&#8730;

Quadratwurzel

&infin;

&#8734;

unendlich

Musikalische HTML Sonderzeichen

Auch in der Musik werden diverse HTML Sonderzeichen benötigt. Mit ihnen ist es unter anderem möglich, Stücke zu komponieren oder Songs aufzuzeichnen. Ebenso lassen sich spezielle Symbole verwenden, um Lieder abzuspielen und zu stoppen.

Zeichen

HTML

Unicode

Beschreibung

-

&#9833;

Viertelnote

-

&#9834;

Achtelnote

-

&#9835;

Achtelnote mit Balken

-

&#9836;

Sechzehntelnote mit Balken

-

&#9837;

b-Notenzeichen

-

&#9838;

Auflösungszeichen

-

&#9839;

Kreuz

-

&#9654;

Play-Zeichen

HTML Umlaute

Unterschiedliche Sprachen arbeiten mit jeweils anderen Umlauten. Neben dem Deutschen sind das beispielsweise Spanisch, Französisch und Polnisch. Mit speziellen HTML Umlauten lassen sich unterschiedliche Inhalte in verschiedenen Sprachen leicht wiedergegeben. Hierdurch sorgen Sie für Einheitlichkeit und eine größtmögliche Reichweite der Inhalte.

Zeichen

HTML

Unicode

Beschreibung

Ä

&Auml;

&#196;

großes Ä

Ö

&Ouml;

&#214;

großes Ö

Ü

&Uuml;

&#220;

großes Ü

ß

&szlig;

&#223;

sz

À

&Agrave

&#192;

großes A mit Gravis-Akzent

È

&Egrave;

&#200;

großes E mit Gravis-Akzent

Á

&Aacute;

&#193;

Großes A mit Accent aigu

É

&Eacute;

&#201;

Großes E mit Accent aigu

Dingbats

Dingbats dienen vor allem der Veranschaulichung und der Betonung. Setzen Sie diese beispielsweise ein, um dezidiert auf bestimmte Inhalte hinzuweisen und eindeutige Aufzählungen und Unterscheidungen vorzunehmen.

Zeichen

HTML

Unicode

Beschreibung

-

&#10102;

Eins in schwarzem Kreis

-

&#10103;

Zwei in schwarzem Kreis

-

&#10112;

Eins in weißem Kreis

-

&#10113;

Zwei in weißem Kreis

-

&#10122;

fette Eins in schwarzem Kreis

-

&#10123;

fette Zwei in schwarzem Kreis

Pfeile

Pfeile spielen in zahlreichen Umfeldern eine Rolle und geben ganz unterschiedliche Richtungen an. Es gibt sie in einfacher und doppelter Form. Einigen Nutzern und Nutzerinnen sind zudem fette Pfeile wichtig, um bestimmte Richtungen ausdrücklich zu betonen.

Zeichen

HTML

Unicode

Beschreibung

&larr;

&#8592;

Pfeil nach links

&uarr;

&#8593;

Pfeil nach oben

&rarr;

&#8594;

Pfeil nach rechts

&darr;

&#8595;

Pfeil nach unten

&harr;

&#8596;

Pfeil nach links und rechts

&crarr;

&#8629;

„Enter“-Pfeil

&lArr;

&#8656;

Doppelpfeil nach links

&uArr;

&#8657;

Doppelpfeil nach oben

Fazit: HTML Sonderzeichen erleichtern die Webseitengestaltung

Im Alltag treten bei der Gestaltung von Webseiten immer wieder Herausforderungen auf. So gibt es Zeichen wie „&“, die in HTML und in HTML5 eine bestimmte Funktion haben, aber gleichzeitig in mathematischen Kontexten eingesetzt werden sollen.

Zusätzlich gibt es verschiedene Bereiche, in denen spezielle Zeichen wie Leerzeichen, Doppelpfeile, Anführungszeichen und andere benötigt werden, die in sonstigen Umfeldern keine Rolle spielen.

Mit HTML Sonderzeichen ist es Ihnen möglich, diese unterschiedlichen Herausforderungen zu meistern und stets genau die Inhalte zu präsentieren, die Ihnen wichtig sind.

css html für anfänger

Titelbild: Tippapatt / iStock / Getty Images Plus

Themen: HTML

Verwandte Artikel

Mit diesem E-Book können Sie herausfinden, ob Ihre Website inklusiv und barrierefrei ist.

KOSTENLOS HERUNTERLADEN

CMS Hub is flexible for marketers, powerful for developers, and gives customers a personalized, secure experience

START FREE OR GET A DEMO