HTML Sonderzeichen: Unterschied zwischen den Versionen
(→Ähnliche Artikel) |
|||
| (7 dazwischenliegende Versionen von 2 Benutzern werden nicht angezeigt) | |||
| Zeile 1: | Zeile 1: | ||
| + | <seo title="HTML Sonderzeichen - Definition und Erklärung" metadescription="HTML Sonderzeichen sind Teile des HTML-Codes, die Symbole oder Zeichen kodieren, die nicht auf der Tastatur zu finden sind. Jetzt weiterlesen ..." /> | ||
| + | |||
== Definition == | == Definition == | ||
| + | [[File:HTML-Sonderzeichen.png|mini|450px|rechts|alt=HTML Sonderzeichen|'''Abbildung:''' HTML Sonderzeichen - Autor: Seobility - Lizenz: [[Creative Commons Lizenz BY-SA 4.0|CC BY-SA 4.0]]|link=https://www.seobility.net/de/wiki/images/d/da/HTML-Sonderzeichen.png]] | ||
HTML Sonderzeichen (oder: Special Characters) sind bestimmte Teile des HTML-Codes, die Symbole oder Zeichen kodieren, die nicht auf der Tastatur zu finden sind. Hierzu gehören mathematische und Währungssymbole, griechische Buchstaben, Haken, Pfeile, Spielkartensymbole, verschiedene Grafiken und viele mehr. Special Characters können mit dezimaler oder hexadezimaler Codierung oder als HTML-Entity in ein Dokument eingefügt werden, sodass sie vom Browser erkannt und für die Besucher einer Website ordnungsgemäß angezeigt werden können. | HTML Sonderzeichen (oder: Special Characters) sind bestimmte Teile des HTML-Codes, die Symbole oder Zeichen kodieren, die nicht auf der Tastatur zu finden sind. Hierzu gehören mathematische und Währungssymbole, griechische Buchstaben, Haken, Pfeile, Spielkartensymbole, verschiedene Grafiken und viele mehr. Special Characters können mit dezimaler oder hexadezimaler Codierung oder als HTML-Entity in ein Dokument eingefügt werden, sodass sie vom Browser erkannt und für die Besucher einer Website ordnungsgemäß angezeigt werden können. | ||
| Zeile 7: | Zeile 10: | ||
== Die Funktionsweise von Special Characters == | == Die Funktionsweise von Special Characters == | ||
| − | Damit der Browser die Special Characters richtig erkennen und darstellen kann, muss der verwendete [[ | + | Damit der Browser die Special Characters richtig erkennen und darstellen kann, muss der verwendete [[Zeichenkodierung|Zeichensatz]] in den Meta-Angaben jeder Webseite benannt werden. Hierzu werden folgende Tags verwendet: |
Ab HTML4: | Ab HTML4: | ||
| Zeile 54: | Zeile 57: | ||
Für Webmaster stehen umfangreiche Auflistungen der Special Characters mit den unterschiedlichen Varianten der Codierung im Internet zur Verfügung. Die Webseite selfhtml.org bietet beispielsweise eine vollständige Liste mit allen [http://wiki.selfhtml.org/wiki/Referenz:HTML/Zeichenreferenz HTML Zeichenreferenzen]. | Für Webmaster stehen umfangreiche Auflistungen der Special Characters mit den unterschiedlichen Varianten der Codierung im Internet zur Verfügung. Die Webseite selfhtml.org bietet beispielsweise eine vollständige Liste mit allen [http://wiki.selfhtml.org/wiki/Referenz:HTML/Zeichenreferenz HTML Zeichenreferenzen]. | ||
| − | == Bedeutung der | + | == Bedeutung der HTML Sonderzeichen für die Suchmaschinenoptimierung == |
HTML Sonderzeichen waren vor allem früher für die Suchmaschinenoptimierung von Bedeutung, da viele Browser nicht in der Lage waren, alle Sonderzeichen korrekt zu interpretieren. Dies führte dazu, dass sie dem Besucher einer Webseite nicht oder nicht richtig angezeigt wurden, woraus sich teilweise erhebliche Auswirkungen auf die [[Usability]] einer Webseite ergaben. Dies hatte wiederum zur Folge, dass die [[Bounce Rate (Absprungrate)|Absprungrate]] stieg, die [[Conversion Rate]] sank und die [[Verweildauer]] der Nutzer erheblich verkürzt wurde. Auch [[Suchmaschinen Crawler|Suchmaschinen-Crawler]] hatten teilweise Probleme, die Sonderzeichen richtig zu interpretieren. | HTML Sonderzeichen waren vor allem früher für die Suchmaschinenoptimierung von Bedeutung, da viele Browser nicht in der Lage waren, alle Sonderzeichen korrekt zu interpretieren. Dies führte dazu, dass sie dem Besucher einer Webseite nicht oder nicht richtig angezeigt wurden, woraus sich teilweise erhebliche Auswirkungen auf die [[Usability]] einer Webseite ergaben. Dies hatte wiederum zur Folge, dass die [[Bounce Rate (Absprungrate)|Absprungrate]] stieg, die [[Conversion Rate]] sank und die [[Verweildauer]] der Nutzer erheblich verkürzt wurde. Auch [[Suchmaschinen Crawler|Suchmaschinen-Crawler]] hatten teilweise Probleme, die Sonderzeichen richtig zu interpretieren. | ||
| Zeile 60: | Zeile 63: | ||
Inzwischen ist die Verwendung von Sonderzeichen jedoch weitestgehend unproblematisch geworden, denn Crawler können den Zeichencode mittlerweile richtig auslesen und ihn korrekt in den organischen Suchergebnissen darstellen. Hier sorgt Google vor und wandelt alle Webseiten, bevor sie in den SERPs angezeigt werden, in UTF-8 (Universal Character Set Transformation Format), die am weitesten verbreitete [[Unicode]]-Kodierung, um. | Inzwischen ist die Verwendung von Sonderzeichen jedoch weitestgehend unproblematisch geworden, denn Crawler können den Zeichencode mittlerweile richtig auslesen und ihn korrekt in den organischen Suchergebnissen darstellen. Hier sorgt Google vor und wandelt alle Webseiten, bevor sie in den SERPs angezeigt werden, in UTF-8 (Universal Character Set Transformation Format), die am weitesten verbreitete [[Unicode]]-Kodierung, um. | ||
| − | Stattdessen kann sich die Verwendung von Special Characters inzwischen sogar als vorteilhaft erweisen, da diese beispielsweise genutzt werden können, um Suchmaschinennutzer auf die eigene Webseite aufmerksam zu machen. So kann z.B. durch Haken, Herzen oder andere Symbole in der [[Meta-Description|Meta Description]] die [[Click-Through-Rate | + | Stattdessen kann sich die Verwendung von Special Characters inzwischen sogar als vorteilhaft erweisen, da diese beispielsweise genutzt werden können, um Suchmaschinennutzer auf die eigene Webseite aufmerksam zu machen. So kann z.B. durch Haken, Herzen oder andere Symbole in der [[Meta-Description|Meta Description]] die [[CTR (Click-Through-Rate)|Click-Through-Rate]] in den SERPs und damit der [[Traffic]] auf eine Webseite erhöht werden. |
Eine weitere nützliche Anwendung der Sonderzeichen ergibt sich durch die Ergänzung von Telefonnummern oder E-Mail-Adressen mit grafischen Symbolen wie z.B. Briefumschlägen. Diese Vorgehensweise ist heute weit verbreitet und erlaubt es Besuchern mit einem Blick den Zweck der Angaben zu verstehen. Hierbei sollten Webmaster und SEOs jedoch beachten, dass die Verwendung grafischer Symbole die Ladezeiten einer Webseite, wenn auch nur in sehr geringem Umfang, erhöhen kann. Da die Ladezeit für Google ein wichtiger Rankingfaktor ist, sollte dieser Punkt dennoch nicht vollständig außer Acht gelassen werden. | Eine weitere nützliche Anwendung der Sonderzeichen ergibt sich durch die Ergänzung von Telefonnummern oder E-Mail-Adressen mit grafischen Symbolen wie z.B. Briefumschlägen. Diese Vorgehensweise ist heute weit verbreitet und erlaubt es Besuchern mit einem Blick den Zweck der Angaben zu verstehen. Hierbei sollten Webmaster und SEOs jedoch beachten, dass die Verwendung grafischer Symbole die Ladezeiten einer Webseite, wenn auch nur in sehr geringem Umfang, erhöhen kann. Da die Ladezeit für Google ein wichtiger Rankingfaktor ist, sollte dieser Punkt dennoch nicht vollständig außer Acht gelassen werden. | ||
| Zeile 70: | Zeile 73: | ||
[[Kategorie:Web Entwicklung]] | [[Kategorie:Web Entwicklung]] | ||
| + | |||
| + | <html><script type="application/ld+json"> | ||
| + | { | ||
| + | "@context": "https://schema.org/", | ||
| + | "@type": "ImageObject", | ||
| + | "contentUrl": "https://www.seobility.net/de/wiki/images/d/da/HTML-Sonderzeichen.png", | ||
| + | "license": "https://creativecommons.org/licenses/by-sa/4.0/deed.de", | ||
| + | "acquireLicensePage": "https://www.seobility.net/de/wiki/Creative_Commons_Lizenz_BY-SA_4.0" | ||
| + | } | ||
| + | </script></html> | ||
| + | |||
| + | {| class="wikitable" style="text-align:left" | ||
| + | |- | ||
| + | |'''Über den Autor''' | ||
| + | |- | ||
| + | | [[File:Seobility S.jpg|link=|100px|left|alt=Seobility S]] Das Seobility Wiki Team besteht aus SEO-, Online-Marketing- und Web-Experten mit praktischer Erfahrung in den Bereichen Suchmaschinenoptimierung, Online-Marketing und Webentwicklung. Alle unsere Artikel durchlaufen einen mehrstufigen Redaktionsprozess, um Dir die bestmögliche Qualität und wirklich hilfreiche Informationen bieten zu können. <html><a href="https://www.seobility.net/de/wiki/Seobility_Wiki_Team" target="_blank">Mehr Informationen über das Seobility Wiki Team</a></html>. | ||
| + | |} | ||
| + | |||
| + | <html><script type="application/ld+json"> | ||
| + | { | ||
| + | "@context": "https://schema.org", | ||
| + | "@type": "Article", | ||
| + | "author": { | ||
| + | "@type": "Organization", | ||
| + | "name": "Seobility", | ||
| + | "url": "https://www.seobility.net/" | ||
| + | } | ||
| + | } | ||
| + | </script></html> | ||
Aktuelle Version vom 23. Januar 2024, 14:12 Uhr
Inhaltsverzeichnis
Definition
HTML Sonderzeichen (oder: Special Characters) sind bestimmte Teile des HTML-Codes, die Symbole oder Zeichen kodieren, die nicht auf der Tastatur zu finden sind. Hierzu gehören mathematische und Währungssymbole, griechische Buchstaben, Haken, Pfeile, Spielkartensymbole, verschiedene Grafiken und viele mehr. Special Characters können mit dezimaler oder hexadezimaler Codierung oder als HTML-Entity in ein Dokument eingefügt werden, sodass sie vom Browser erkannt und für die Besucher einer Website ordnungsgemäß angezeigt werden können.
Der Code für jedes Sonderzeichen beginnt mit einem kaufmännischen "Und" ( "&") - auch der Special Character "&" selbst. Die Eingabe wird immer mit einem Semikolon abgeschlossen. Zwischen diesen beiden Zeichen steht der Code für das eigentliche Sonderzeichen, beispielsweise für ein geschütztes Leerzeichen.
Die Funktionsweise von Special Characters
Damit der Browser die Special Characters richtig erkennen und darstellen kann, muss der verwendete Zeichensatz in den Meta-Angaben jeder Webseite benannt werden. Hierzu werden folgende Tags verwendet:
Ab HTML4:
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
Ab HTML5:
<meta charset="utf-8"/>
Diese Angabe bewirkt, dass der Browser alle Zeichen im Dokument entsprechend der UTF-8 Kodierung enkodiert. Wenn eine andere Zeichensatzkodierung für die Website verwendet wurde, ist das “utf-8” aus dem obigen Beispiel entsprechend zu ersetzen.
Einige Sonderzeichen können mit Hilfe von HTML-Entitäten (dem sogenannten "friendly code") in den HTML-Code eingegeben werden. Beispielsweise kann somit durch © das Copyright-Symbol dargestellt werden. Der "friendly code" trägt seinen Namen, weil er leicht einzugeben und zu merken ist. Es existiert jedoch auch eine Reihe von Sonderzeichen, die keinen solchen einprägsamen Code besitzen. Für diese Zeichen ist die hexadezimale oder dezimale Schreibweise zu verwenden.
Wenn Special Characters in einer der oben genannten Notationen in den HTML-Code eingefügt werden, wird den Besuchern einer Website das entsprechende Zeichen im Browser angezeigt. Voraussetzung hierfür ist allerdings, dass der Browser den zugrundeliegenden Zeichensatz laden kann, um den Inhalt einer Seite lesen und interpretieren zu können.
Auch wenn manche der HTML Sonderzeichen auf vielen Tastaturen zu finden sind, sollten sie entsprechend codiert werden, um sicherzustellen, dass alle Browser die Website richtig darstellen. Besonders wichtig ist dies für die Zeichen "größer als (>)", "kleiner als (<)" sowie das kaufmännische "Und (&)", da diese eine besondere Bedeutung im HTML-Code besitzen. So signalisiert beispielsweise "<" den Beginn eines Tags und “>” dessen Ende. Aus diesem Grund sollten die Zeichen niemals uncodiert verwendet werden, wenn sie dem Besucher einer Website angezeigt werden sollen. Stattdessen sind folgende Codierungen in den HTML-Code einzufügen:
- “Kleiner als”: <
- “Größer als”: >
- “kaufmännisches Und": &
Weitere Beispiele für Special Characters
Im deutschsprachigen Raum zählen Umlaute zu den wichtigste Special Characters für Webseiten. Ohne entsprechende Kodierung werden diese von Browsern nicht korrekt dargestellt. Der Browser Mozilla Firefox zeigt beispielsweise statt eines deutschen Umlauts ein ? an. Jeder Umlaut kann sowohl als friendly code als auch in hexadezimaler oder dezimaler Schreibweise eingegeben werden. Der friendly code für den Umlaut "Ü" ist beispielsweise "Ü", die Entsprechung für die kleingeschriebene Variante "ü" ist "ü".
Die Kodierungen aller deutschen Umlaute lauten:
| Umlaut | HTML-Entity | hexadezimal | dezimal |
|---|---|---|---|
| Ä | Ä | Ä | Ä |
| Ö | Ö | Ö | Ö |
| Ü | Ü | Ü | Ü |
| ä | ä | ä | ä |
| ö | ö | ö | ö |
| ü | ü | ü | ü |
Für Webmaster stehen umfangreiche Auflistungen der Special Characters mit den unterschiedlichen Varianten der Codierung im Internet zur Verfügung. Die Webseite selfhtml.org bietet beispielsweise eine vollständige Liste mit allen HTML Zeichenreferenzen.
Bedeutung der HTML Sonderzeichen für die Suchmaschinenoptimierung
HTML Sonderzeichen waren vor allem früher für die Suchmaschinenoptimierung von Bedeutung, da viele Browser nicht in der Lage waren, alle Sonderzeichen korrekt zu interpretieren. Dies führte dazu, dass sie dem Besucher einer Webseite nicht oder nicht richtig angezeigt wurden, woraus sich teilweise erhebliche Auswirkungen auf die Usability einer Webseite ergaben. Dies hatte wiederum zur Folge, dass die Absprungrate stieg, die Conversion Rate sank und die Verweildauer der Nutzer erheblich verkürzt wurde. Auch Suchmaschinen-Crawler hatten teilweise Probleme, die Sonderzeichen richtig zu interpretieren.
Inzwischen ist die Verwendung von Sonderzeichen jedoch weitestgehend unproblematisch geworden, denn Crawler können den Zeichencode mittlerweile richtig auslesen und ihn korrekt in den organischen Suchergebnissen darstellen. Hier sorgt Google vor und wandelt alle Webseiten, bevor sie in den SERPs angezeigt werden, in UTF-8 (Universal Character Set Transformation Format), die am weitesten verbreitete Unicode-Kodierung, um.
Stattdessen kann sich die Verwendung von Special Characters inzwischen sogar als vorteilhaft erweisen, da diese beispielsweise genutzt werden können, um Suchmaschinennutzer auf die eigene Webseite aufmerksam zu machen. So kann z.B. durch Haken, Herzen oder andere Symbole in der Meta Description die Click-Through-Rate in den SERPs und damit der Traffic auf eine Webseite erhöht werden.
Eine weitere nützliche Anwendung der Sonderzeichen ergibt sich durch die Ergänzung von Telefonnummern oder E-Mail-Adressen mit grafischen Symbolen wie z.B. Briefumschlägen. Diese Vorgehensweise ist heute weit verbreitet und erlaubt es Besuchern mit einem Blick den Zweck der Angaben zu verstehen. Hierbei sollten Webmaster und SEOs jedoch beachten, dass die Verwendung grafischer Symbole die Ladezeiten einer Webseite, wenn auch nur in sehr geringem Umfang, erhöhen kann. Da die Ladezeit für Google ein wichtiger Rankingfaktor ist, sollte dieser Punkt dennoch nicht vollständig außer Acht gelassen werden.
Ähnliche Artikel
| Über den Autor |
 |