HTML - Symbole

Leon A. -

HTML-Entität

Eine HTML-Entität ist ein Textstück ("String"), das mit einem Kaufmanns-Und (&) beginnt und mit einem Semikolon (;) endet. Entitäten werden verwendet, um reservierte Zeichen (die sonst als HTML-Code gelesen würden) und unsichtbare Zeichen (wie geschützte Leerzeichen) anzuzeigen. Sie können sie auch anstelle anderer Zeichen verwenden, die mit einer Standardtastatur schwer zu tippen sind.

Es gibt zwei Haupttypen von HTML-Entitäten:

Benannte Entität

Eine benannte Entität hat einen Namen. Zum Beispiel ist die benannte Entität für das Copyright-Symbol (©) ©.

Diese sind Groß- und Kleinschreibung beachtend und enden mit einem Semikolon.

Numerische Entität

Numerische Entitäten können durch einen numerischen Wert dargestellt werden. Es gibt zwei Arten:

  • Dezimal: Dezimale numerische Entitäten werden als &#N; geschrieben, wobei N die ISO 10646 Dezimalzahl ist. Zum Beispiel ist die numerische Entität für das Copyright-Symbol (©) ©

  • Hexadezimal: Hexadezimale numerische Entitäten werden als &#xN; geschrieben, wobei N die ISO 10646 Hexadezimalzahl ist. Zum Beispiel ist die numerische Entität für das Copyright-Symbol (©) ©

Die Verwendung von HTML-Entitäten ist einfach - Sie müssen nur den Entitätsnamen oder die Nummer für das Zeichen kennen, das Sie anzeigen möchten. Entitäten können sowohl im Text Ihres HTML-Dokuments als auch innerhalb von Attributwerten verwendet werden.

Gängige HTML-Symbole

HTML bietet viele Symbole, die Sie in Webseiten verwenden können. Hier sind einige häufige Symbole und ihre entsprechenden HTML-Entities:

Währungssymbole

  • Euro: Die HTML-Entity für das Euro-Symbol (€) ist €.
  • Pfund: Die HTML-Entity für das Pfund-Symbol (£) ist £.
  • Yen: Die HTML-Entity für das Yen-Symbol (¥) ist ¥.
  • Cent: Die HTML-Entity für das Cent-Symbol (¢) ist ¢.

Interpunktionssymbole

  • Kaufmännisches Und: Die HTML-Entity für das Kaufmännische Und-Symbol (&) ist &.
  • Größer als und Kleiner als: Die HTML-Entities für Größer als (>) und Kleiner als (<) Symbole sind &gt; und &lt;.
  • Anführungszeichen: Die HTML-Entities für Linkes doppeltes Anführungszeichen ("), Rechtes doppeltes Anführungszeichen ("), Linkes einfaches Anführungszeichen (') und Rechtes einfaches Anführungszeichen ('') sind:
    • Linkes doppeltes Anführungszeichen ("): “
    • Rechtes doppeltes Anführungszeichen ("): ”
    • Linkes einfaches Anführungszeichen ('): ‘
    • Rechtes einfaches Anführungszeichen ('): ’

Mathematische Symbole

  • Plus und Minus: Die HTML-Entities für Plus (+) und Minus (-) Symbole sind:

    • Plus (+): +
    • Minus (−): -

  • Multiplikation und Division

    • Multiplikation (×): ×
    • Division (÷): ÷

Bruch

Die folgenden Brüche haben spezifische Codes:

Beispiel: Ein Viertel (¼)

&frac14;

Beispiel: Ein Halb (½)

&lt;&frac12&gt;;

Beispiel: Drei Viertel (¾)

&lt;&frac34&gt;;

Pfeilsymbol

Die folgenden Pfeilrichtungen haben spezifische Codes:

Doppelpfeile

Beispiel: Doppelpfeil nach links (⇐)

&amp;lArr;

Beispiel: Doppelpfeil nach oben (⇑)

&amp:uArr;

Beispiel: Doppelpfeil nach rechts (⇒)

&amp:rArr;

HTML-Symbole verwenden

Es gibt zwei Hauptmethoden, um Symbole in Ihren HTML-Code einzufügen:

Direktes Einfügen von Symbolen

Sie können einige Symbole direkt mit Ihrer Tastatur in Ihren HTML-Code einfügen. Sie können das Dollarzeichen ($), das Pluszeichen (+) oder das Gleichheitszeichen (=) direkt in Ihrem Code verwenden.

Beispiel: Direktes Einfügen von Symbolen

<p>Der Preis beträgt $99.</p>
<p>2 + 2 = 4</p>

Verwendung von HTML-Entitäten

Für Symbole, die auf Ihrer Tastatur nicht verfügbar sind oder eine besondere Bedeutung in HTML haben (wie < oder >), müssen Sie HTML-Entitäten verwenden. Sie können entweder benannte Entitäten oder numerische Entitäten verwenden.

Beispiel: Verwendung von HTML-Entitäten

<p>Dies ist das Copyright-Symbol: &copy;</p>
<p>Dies ist das Euro-Symbol: &euro;</p>
<p>Dies ist das Symbol für eingetragene Marke: &#174;</p>

Bei der Verwendung von Symbolen auf Ihren Webseiten sollten Sie diese bewährten Praktiken berücksichtigen:

  • Verwenden Sie Entitäten für reservierte Zeichen: Verwenden Sie immer HTML-Entitäten für Zeichen, die in HTML reserviert sind, wie < (&lt;), > (&gt;) und & (&amp;). Die Verwendung der tatsächlichen Zeichen kann Ihren HTML-Code durcheinanderbringen.
  • Seien Sie konsistent: Wählen Sie eine Methode (benannte oder numerische Entitäten) und bleiben Sie dabei auf Ihrer gesamten Website, um Konsistenz und Lesbarkeit zu gewährleisten.
  • Testen Sie Ihre Seite: Testen Sie Ihre Webseite immer in mehreren Browsern, um sicherzustellen, dass die Symbole korrekt angezeigt werden.
  • Berücksichtigen Sie die Barrierefreiheit: Einige Bildschirmleser können möglicherweise nicht alle Symbole korrekt vorlesen. Stellen Sie alternativen Text bereit, wo nötig, um sicherzustellen, dass alle Nutzer auf den Inhalt zugreifen können.

Denken Sie daran, dass Symbole zwar visuelle Attraktivität und Bedeutung zu Ihren Webseiten hinzufügen können, sie sollten jedoch sparsam und zielgerichtet eingesetzt werden, um die Benutzererfahrung zu verbessern.

Browser-Unterstützung

Die meisten modernen Webbrowser unterstützen HTML-Symbole und -Entitäten. Häufig genutzte Browser wie Google Chrome, Mozilla Firefox, Apple Safari, Microsoft Edge und Internet Explorer können die meisten Symbole problemlos anzeigen.

Es gibt einige bekannte Inkonsistenzen bei bestimmten Symbolen in spezifischen Browsern:

  • Ältere Browser-Versionen: Ältere Browser-Versionen, insbesondere Internet Explorer (vor Version 9), zeigen möglicherweise nicht alle Symbole korrekt an. Wenn Ihre Website ältere Browser unterstützen muss, testen Sie Ihre Seiten und erwägen Sie, bei Bedarf alternative Inhalte bereitzustellen.

  • Schriftarten-Unterstützung: Einige Symbole werden möglicherweise nicht korrekt angezeigt, wenn das Gerät des Benutzers keine Schriftart hat, die das Zeichen enthält. Dies ist bei weniger gebräuchlichen Symbolen wahrscheinlicher. Um dieses Problem zu minimieren, können Sie websichere Schriftarten verwenden oder Ersatzschriftarten bereitstellen.

  • Kodierungsprobleme: Wenn Ihr HTML-Dokument nicht die richtige Zeichenkodierung (wie UTF-8) angibt, werden einige Symbole möglicherweise nicht korrekt angezeigt. Legen Sie immer die passende Zeichenkodierung im HTML-Head-Bereich fest, wie hier:

Beispiel: Character Encoding

<meta charset="UTF-8">
  • Inkonsistenzen bei Entitätsnamen: Einige Browser erkennen möglicherweise Entitätsnamen in Kleinbuchstaben (wie &copy;), während andere Großbuchstaben erfordern (&COPY;). Um dieses Problem zu vermeiden, verwenden Sie immer Entitätsnamen in Kleinbuchstaben, da diese breiter unterstützt werden.

Um Benutzern eine gute Erfahrung zu bieten, testen Sie Ihre Webseiten mit Symbolen in verschiedenen Browsern und auf verschiedenen Geräten. Dies hilft Ihnen, browserspezifische Probleme und Inkonsistenzen zu erkennen und zu beheben.

Wenn Sie weniger gebräuchliche Symbole verwenden oder wenn die Browser-Unterstützung für Ihre Website ein Problem darstellt, erwägen Sie, alternativen Text oder Bilder bereitzustellen, um die gleiche Bedeutung zu vermitteln. Dies stellt sicher, dass alle Benutzer auf Ihre Inhalte zugreifen können, unabhängig von ihrem Browser oder Gerät.