HTML Schreibweise für die wichtigsten Sonderzeichen

  1. Zum Inhalt springen

webdesign
klamonfra
Klaus Franz


Welche ASCII-Zeichen werden für Sonderzeichen benötigt?

14Jun2018

HTML Schreibweise für wichtige Sonderzeichen


Um mögliche Probleme bei der Verarbeitung von bestimmten Zeichen und Umlauten zu vermeiden, sollte man diese durch ASCII (American Standard Code for Information Interchange)-Zeichen ersetzen. Neben der numerischen Unicode-Notation gibt es in HTML (HyperText Markup Language) für häufiger verwendete Sonderzeichen auch die HTML (HyperText Markup Language)-eigenen Zeichen.
Diese werden zum Beispiel hier für Codezeilen benötigt:

  Zeichen   - Name in HTML - Unicode in HTML - Beschreibung
———————————————————————————————————————————————————————————
    "      -   "     -      "      - Anführungszeichen oben
    '      -   '     -      '      - einfaches Anführungszeichen
    &      -   &      -      &      - kaufmännisches Und
    <      -   &lt;       -      &#60;      - öffnende spitze Klammer
    >      -   &gt;       -      &#62;      - schließende spitze Klammer

Durch die Verwendung der UTF-8 (8-bit Universal Character Set Transformation Format)-Schreibweise machen Sie den Gebrauch von Sonderzeichen überflüssig, weil Sie die entsprechenden Zeichen direkt verwenden können. Und der Quellcode ist dadurch auch einfacher lesbar.
In HTML5 (HyperText Markup Language) ist das Meta-Tag für die Zeichenkodierung sehr einfach gehalten:

    <meta charset="utf-8">

Bei Bildernamen sollte man allerdings auf Sonderzeichen verzichten, da sie von einigen Browsern nicht gelesen werden können. Zum Beispiel sollte man das Bild mit dem Namen
"Altes Haus im Écomusée d’Alsace_HDR.jpg"
umbenennen in
"Altes_Haus_im_Ecomusee_dAlsace_HDR.jpg".

Wenn es aber über die Zeichen der Tastatur hinausgeht, wer hat schon die Tastaturkombination für die mathematische Konstante Pi (Π) im Kopf, oder man hat seine Seiten nicht auf UTF-8 (8-bit Universal Character Set Transformation Format)-Kodierung umgesetzt, da werden dann unter anderem die folgenden HTML (HyperText Markup Language)-Sonderzeichen benötigt.

Diese Listen für die HTML Schreibweise können sie auch verwenden um die Zeichen direkt über die Tastatur einzugeben. Drücken Sie dafür zum Beispiel für das Telefonzeichen
und über den Ziffernblock links oben auf der Tastatur . Das ergibt dann: ☎


Die wichtigsten Sonderzeichen, die wir häufiger gebrauchen können

  Zeichen   - Name in HTML - Unicode in HTML - Beschreibung
———————————————————————————————————————————————————————————
    #      -   &num;      -      &#35;      - Doppelkreuz
    @      -   &commat;   -      &#64;      - at-Symbol
    ©      -   &copy;     -      &#169;     - Copyright
    ®      -   &reg;      -      &#174;     - Registrierte Handelsmarke
      -   &trade;    -      &#8482;    - Handelsmarke
      -   &euro;     -      &#8364;    - Euro-Zeichen
    |      -   &vert;     -      &#124;     - senkrechter Strich
    \      -   &backslash;-      &#92;      - Backslash
    /      -   &sol;      -      &#47;      - Schrägstrich
           -   &nbsp;     -      &#160;     - Leerzeichen

Umlaute, Gravis und Akzente

  Zeichen   - Name in HTML - Unicode in HTML - Beschreibung
———————————————————————————————————————————————————————————
    ß      -   &szlig;    -      &#223;     - Scharfes S / sz
    À      -   &Agrave;   -      &#192;     - A mit Gravis-Akzent
    È      -   &Egrave;   -      &#200;     - E mit Gravis-Akzent
    Ì      -   &Igrave;   -      &#204;     - I mit Gravis-Akzent
    Ò      -   &Ograve;   -      &#210;     - O mit Gravis-Akzent
    Ù      -   &Ugrave;   -      &#217;     - U mit Gravis-Akzent
    à      -   &agrave;   -      &#224;     - a mit Gravis-Akzent
    è      -   &egrave;   -      &#232;     - e mit Gravis-Akzent
    ì      -   &igrave;   -      &#236;     - i mit Gravis-Akzent
    ò      -   &ograve;   -      &#242;     - o mit Gravis-Akzent
    ù      -   &ugrave;   -      &#249;     - u mit Gravis-Akzent
    Á      -   &Aacute;   -      &#193;     - A mit Akut-Akzent
    É      -   &Eacute;   -      &#201;     - E mit Akut-Akzent
    Í      -   &Iacute;   -      &#205;     - I mit Akut-Akzent
    Ó      -   &Oacute;   -      &#211;     - O mit Akut-Akzent
    Ú      -   &Uacute;   -      &#218;     - U mit Akut-Akzent
    á      -   &aacute;   -      &#225;     - a mit Akut-Akzent
    é      -   &eacute;   -      &#233;     - e mit Akut-Akzent
    í      -   &iacute;   -      &#237;     - i mit Akut-Akzent
    ó      -   &oacute;   -      &#243;     - o mit Akut-Akzent
    ú      -   &uacute;   -      &#250;     - u mit Akut-Akzent
    Â      -   &Acirc;    -      &#194;     - A mit Zirkumflex
    Ê      -   &Ecirc;    -      &#202;     - E mit Zirkumflex
    Î      -   &Icirc;    -      &#206;     - I mit Zirkumflex
    Ô      -   &Ocirc;    -      &#212;     - O mit Zirkumflex
    Û      -   &Ucirc;    -      &#219;     - U mit Zirkumflex
    â      -   &acirc;    -      &#226;     - a mit Zirkumflex
    ê      -   &ecirc;    -      &#234;     - e mit Zirkumflex
    î      -   &icirc;    -      &#238;     - i mit Zirkumflex
    ô      -   &ocirc;    -      &#244;     - o mit Zirkumflex
    û      -   &ucirc;    -      &#251;     - u mit Zirkumflex

Pfeil-Symbole

  Zeichen   - Name in HTML - Unicode in HTML - Beschreibung
———————————————————————————————————————————————————————————
      -   &larr;     -      &#8592;    - Pfeil links
      -   &rarr;     -      &#8594;    - Pfeil rechts
      -   &uarr;     -      &#8593;    - Pfeil oben
      -   &darr;     -      &#8595;    - Pfeil unten
      -   &harr;     -      &#8596;    - Pfeil links/rechts
      -   &lArr;    -      &#8656;    - Doppelpfeil links
      -   &rArr;    -      &#8658;    - Doppelpfeil rechts
      -   &uArr;     -      &#8657;    - Doppelpfeil oben
      -   &dArr;     -      &#8659;    - Doppelpfeil unten
      -   &hArr;    -      &#8660;    - Doppelpfeil links/rechts
      - &circlearrowleft; - &#8634;   - Kreis mit Pfeilspitze rechts
      - &circlearrowright;- &#8635;   - Kreis mit Pfeilspitze links

Spielkarten

  Zeichen   - Name in HTML - Unicode in HTML - Beschreibung
———————————————————————————————————————————————————————————
      -   &hearts;   -      &#9829;    - Herz
      -   &spades;   -      &#9824;    - Pik
      -   &clubs;    -      &#9827;    - Kreuz
      -   &diams;    -      &#9830;    - Karo
      -              -      &#9825;    - Herz (weiß)
     -              -      &#10084;   - dickes Herz

Sterne, Blumen und Schneeflocken

  Zeichen   - Name in HTML - Unicode in HTML - Beschreibung
———————————————————————————————————————————————————————————
     -              -      &#10017;   - Davidstern
     -              -      &#10022;   - 4-eckiger Stern
     -              -      &#10023;   - 4-eckiger Stern (weiß)
     -              -      &#10025;   - 5-eckiger Stern (weiß)
     -              -      &#10031;   - 5-eckiger 3D-Stern
     -   &sext;     -      &#10038;   - 6-eckiger Stern
     -              -      &#10035;   - 8-eckiger Stern
     -              -      &#10037;   - 8-eckiger 3D-Stern
     -              -      &#10039;   - 8-eckiger Stern
     -              -      &#10047;   - 5-blättrige Blume
     -              -      &#10049;   - 8-blättrige Blume
     -              -      &#10086;   - Herz floral
     -              -      &#10052;   - Schneeflocke
     -              -      &#10053;   - Schneeflocke
     -              -      &#10054;   - Schneeflocke

Icon-Sonderzeichen

  Zeichen   - Name in HTML - Unicode in HTML - Beschreibung
———————————————————————————————————————————————————————————
     -              -      &#9986;    - Schere
     -   &phone;    -      &#9742;    - Telefon
     -              -      &#9990;    - Telefon
     -              -      &#9992;    - Flugzeug
     -              -      &#9993;    - Brief / E-Mail
      -              -      &#9997;    - Schreibende Hand
      -              -      &#10003;   - Haken
      -              -      &#10004;   - Haken fett

Diese Listen sind sicher in vielen Situationen hilfreich.

Aber Achtung: Es gibt Browser die haben Probleme bei der Darstellung von Sonderzeichen. Dann erscheint zum Beispiel ein Kästchen □, ein Kästchen mit einem Fragezeichen oder ein Kästchen mit dem Code des jeweiligen Zeichens.

Zum Seitenanfang springen Λ