Was sind Anchor-Tags (a-Tags) in HTML?
HTML (Hypertext Markup Language) ist eine Auszeichnungssprache, die zum Erstellen von Webseiten verwendet wird. Anchor-Tags, auch bekannt als a-Tags, sind ein grundlegendes HTML-Element, mit dem Hyperlinks erstellt werden.
Was ist ein Hyperlink?
Ein Hyperlink ist ein interaktiver Text, Bild oder Symbol, das dich zu einer anderen Webseite, einem Dokument oder einem anderen Abschnitt innerhalb derselben Webseite führt.
So funktionieren Anchor-Tags
Anchor-Tags definieren zwei wichtige Informationen:
- Zieladresse: Die URL oder der Dateiname der Zielressource.
- Ankertext: Der Text oder das Element, das als klickbarer Link angezeigt wird.
Syntax eines Anchor-Tags
Der grundlegende Aufbau eines Anchor-Tags lautet:
<a href="zieladresse">Ankertext</a>
Beispielsweise erstellt folgender Code einen Link zur Wikipedia-Seite über HTML:
<a href="https://de.wikipedia.org/wiki/HTML">HTML</a>
Wenn du auf den Text "HTML" klickst, wirst du zur Wikipedia-Seite weitergeleitet.
Vorteile der Verwendung von Anchor-Tags
Die Verwendung von Anchor-Tags bietet viele Vorteile, darunter:
- Einfache Navigation: Sie ermöglichen es deinen Nutzern, mühelos zwischen verschiedenen Seiten und Abschnitten zu navigieren.
- Inhaltliche Aufteilung: Du kannst Anchor-Tags verwenden, um lange Inhalte in kleinere, übersichtlichere Abschnitte zu unterteilen.
- Verbesserte Benutzererfahrung: Hyperlinks machen deine Webseite interaktiver und benutzerfreundlicher.
- Suchmaschinenoptimierung (SEO): Anchor-Texte können von Suchmaschinen zur Indexierung und Bewertung deiner Webseite verwendet werden.
So erstellst du Hyperlinks mit Anchor-Tags
Um Hyperlinks zu erstellen, verwendest du in HTML Anchor-Tags, auch bekannt als a-Tags. Diese bestehen aus zwei Hauptkomponenten:
Die Öffnungs-Tag
Der Öffnungs-Tag beginnt mit <a> und enthält ein obligatorisches href-Attribut. Dieses Attribut gibt die Ziel-URL des Hyperlinks an. Beispiel:
<a href="https://www.beispiel.com">Beispieldomain</a>
Der Ankertext
Innerhalb der Anchor-Tags befindet sich der Ankertext, der für den Benutzer anklickbar ist und auf den Hyperlink verweist. Beispiel:
<a href="https://www.beispiel.com">Klicke hier, um die Beispieldomain zu besuchen</a>
Die Schließung-Tag
Schließe den Anchor-Tag mit </a>.
Tipps:
- Verwende beschreibenden Ankertext, der deutlich macht, wohin der Link führt.
- Gestalte Hyperlinks visuell unterschiedlich vom umgebenden Text, z. B. durch Unterstreichung oder eine andere Farbe.
- Prüfe alltid die Ziel-URLs, um sicherzustellen, dass sie korrekt sind.
Attribute von Anchor-Tags
Jedes Anchor-Tag kann verschiedene Attribute enthalten, die sein Verhalten und Aussehen steuern. Hier sind einige der gängigsten Attribute:
href (Hypertext Reference)
Dieses Attribut ist erforderlich und gibt die Ziel-URL des Hyperlinks an. Es kann auf eine interne Seite (z. B. "index.html") oder eine externe Website (z. B. "www.google.com") verweisen.
title
Das title-Attribut fügt einen Tooltip hinzu, der angezeigt wird, wenn du mit der Maus über den Link fährst. Es ist gut für die Barrierefreiheit, da es Benutzern zusätzliche Informationen zum Link gibt.
target
Das target-Attribut legt fest, wie der Link geöffnet wird. Die folgenden Werte können verwendet werden:
- _self: Öffnet den Link im aktuellen Fenster oder Tab.
- _blank: Öffnet den Link in einem neuen Fenster oder Tab.
- _parent: Öffnet den Link im übergeordneten Frame.
- _top: Öffnet den Link im obersten Fenster oder Tab.
rel
Das rel-Attribut spezifiziert die Beziehung zwischen der verlinkten Seite und der aktuellen Seite. Es kann verwendet werden, um Suchmaschinen zu helfen, den Link zu verstehen. Einige gängige Werte sind:
- nofollow: Weist Suchmaschinen an, dem Link nicht zu folgen und die verlinkte Seite nicht in den Index aufzunehmen.
- noopener: Verhindert, dass die verlinkte Seite auf die aktuelle Seite zugreifen kann, was die Sicherheit erhöht.
id
Das id-Attribut definiert eine eindeutige Kennung für das Anchor-Tag. Es kann für CSS-Styling oder JavaScript verwendet werden, um auf den Link zu verweisen.
class
Das class-Attribut weist dem Anchor-Tag eine oder mehrere CSS-Klassen zu. Es kann verwendet werden, um dem Link ein bestimmtes Aussehen oder Verhalten zu geben.
style
Das style-Attribut ermöglicht dir, Inline-CSS auf den Link anzuwenden. Dies kann nützlich sein, um das Aussehen des Links ohne eine externe Stylesheet-Datei zu ändern. Bedenke jedoch, dass Inline-CSS Vorrang vor externen Stylesheets hat.
Verwendung von Anchor-Tags für interne und externe Links
Anchor-Tags ermöglichen dir das Erstellen von Hyperlinks, die auf andere Seiten innerhalb derselben Website (interne Links) oder auf Seiten außerhalb deiner Website (externe Links) verweisen.
Interne Links
Verwende interne Links, um Besucher zu anderen relevanten Seiten auf deiner Website zu führen, z. B.:
-
Verlinken auf bestimmte Seiten:
<a href="seite-1.html">Seite 1</a> -
Verlinken auf Abschnitte innerhalb einer Seite:
<a href="#bereich-1">Bereich 1</a> -
Navigation:
Erstelle eine Navigationsleiste mit Links zu den Hauptbereichen deiner Website (z. B. Startseite, Produkte, Kontakt).
Externe Links
Verwende externe Links, um Besucher auf andere Websites zu verweisen, z. B.:
-
Bereitstellung nützlicher Ressourcen:
Verlinke auf relevante Artikel, Studien oder Tools von Drittanbietern.
-
Quellenangabe:
Gib Quellen und Zitate mit externen Links an.
-
Traffic-Generierung:
Verlinke auf Partnerwebsites oder Blogs, um den Traffic auf deine eigene Website zu lenken.
Best Practices:
- Sei spezifisch: Verwende beschreibende Linktexte, damit Benutzer wissen, wohin sie gelangen.
- Vermeide generische Linktexte: Vermeide Ausdrücke wie "Klicken Sie hier", da sie keine nützlichen Informationen liefern.
- Überprüfe Links regelmäßig: Stelle sicher, dass alle Links funktionieren und auf die richtige Seite verweisen.
Best Practices für die Verwendung von Anchor-Tags
Bei der Verwendung von Anchor-Tags in HTML gibt es bewährte Verfahren, die du befolgen solltest, um sicherzustellen, dass deine Hyperlinks effektiv und barrierefrei sind.
Hervorhebung des Linkziels
Stelle sicher, dass der Anchor-Text den Inhalt der verlinkten Seite klar und prägnant angibt. Vermeide es, generischen Text wie "Hier klicken" oder "Weitere Informationen" zu verwenden. Stattdessen solltest du eine kurze Zusammenfassung des Seiteninhalts liefern, z. B. "Erfahre mehr über HTML-Anchor-Tags".
Barrierefreiheit
Stelle sicher, dass deine Anchor-Tags für Nutzer mit eingeschränkter Sehkraft zugänglich sind. Verwende beschreibende Texte für Bildschirmleser und stelle einen ausreichenden Kontrast zwischen dem Text und dem Hintergrund her. Erwäge auch die Verwendung des title-Attributs, um zusätzliche Informationen zum Link bereitzustellen.
Suchenmaschinenoptimierung
Verwende relevante Keywords in deinem Anchor-Text, um die Sichtbarkeit deiner Seiten in Suchmaschinenergebnissen zu verbessern. Vermeide jedoch Keyword-Stuffing, das zu einer Bestrafung führen kann.
Vermeidung von defekten Links
Überprüfe deine Links regelmäßig auf Defekte. Nichts ist frustrierender für Nutzer als ein Link, der ins Leere führt. Verwende Tools wie den Google Search Console’s URL Inspection Tool, um defekte Links zu finden und zu beheben.
Konsistente Kennzeichnung
Verwende über deine gesamte Website hinweg konsistente Farben, Formatierungen und Stile für deine Anchor-Tags. Dies sorgt für ein einheitliches Nutzererlebnis und erleichtert es den Nutzern, Links zu erkennen.
Verwendung von <a> statt <button>
Verwende für Hyperlinks immer die <a>-Tags statt <button>-Tags. <buttons> sind für interaktive Elemente wie Schaltflächen und Formulare gedacht, während <a>-Tags für die Verknüpfung zu anderen Seiten verwendet werden.
Fehlerbehebung häufiger Probleme mit Anchor-Tags
Wenn du Probleme mit deinen Anchor-Tags hast, gibt es ein paar häufige Ursachen, die du prüfen solltest:
Nicht anklickbarer Link
- Ursache: Fehlender href-Attribut-Wert.
- Lösung: Vergewissere dich, dass deinem Anchor-Tag ein gültiger href-Attribut-Wert zugewiesen ist, der auf die Ziel-URL verweist.
Link führt zur falschen Seite
- Ursache: Falscher href-Attribut-Wert.
- Lösung: Überprüfe den href-Attribut-Wert und stelle sicher, dass er auf die richtige URL verweist.
Der Link öffnet sich in einem neuen Fenster
- Ursache: Fehlender target="_blank"-Attribut-Wert.
- Lösung: Füge deinem Anchor-Tag den target="_blank"-Attribut-Wert hinzu, wenn du möchtest, dass sich der Link in einem neuen Fenster/Tab öffnet.
Link wird durch andere Elemente überlagert
- Ursache: Überlappende CSS-Regeln.
- Lösung: Überprüfe deine CSS-Regeln und passe sie an, um sicherzustellen, dass deine Anchor-Tags korrekt angezeigt werden.
Link funktioniert nicht in bestimmten Browsern
- Ursache: Browser-Inkompatibilität.
- Lösung: Teste dein Anchor-Tag in verschiedenen Browsern, um Kompatibilitätsprobleme zu identifizieren.
Link wird nicht barrierefrei gehandhabt
- Ursache: Fehlender alt-Attribut-Wert.
- Lösung: Füge deinen Anchor-Tags einen beschreibenden alt-Attribut-Wert hinzu, um die Barrierefreiheit für Screenreader zu gewährleisten.
Andere Probleme
Wenn du weiterhin Probleme mit deinen Anchor-Tags hast, kannst du auch die folgenden Ressourcen zur Fehlerbehebung heranziehen:
Anchor-Tags für Barrierefreiheit
Was bedeutet Barrierefreiheit?
Barrierefreiheit bedeutet, dass alle Menschen, unabhängig von ihren Fähigkeiten oder Einschränkungen, auf Inhalte zugreifen und sie nutzen können. Dies gilt auch für das Web, wo Anchor-Tags eine wichtige Rolle bei der Gewährleistung der Barrierefreiheit spielen.
Barrierefreie Verwendung von Anchor-Tags
- Text statt Grafiken: Verwende immer beschreibenden Text für deine Links, statt dich auf Grafiken zu verlassen. Damit stellst du sicher, dass alle Nutzer, einschließlich derer, die Bildschirmlesegeräte verwenden, wissen, wohin der Link führt.
- Klar erkennbare Links: Verwende unterschiedliche Farben, Unterstreichungen oder andere visuelle Hinweise, um Links deutlich erkennbar zu machen.
- Fokusanzeige: Stelle sicher, dass Links beim Bewegen des Mauszeigers oder beim Tabben mit der Tastatur hervorgehoben werden, damit Nutzer sie leicht identifizieren können.
-
Zieltext angeben: Nutze das
title-Attribut, um einen zusätzlichen Kurztext bereitzustellen, der den Zweck des Links beschreibt. Bildschirmleser können diesen Text vorlesen, um Nutzern weitere Informationen zu geben. -
Sprachattribute verwenden: Verwende das
lang-Attribut, um die Sprache des Zieltextes anzugeben. Dies hilft Bildschirmlesegeräten, den Text richtig auszusprechen. -
ARIA-Attribute: ARIA-Attribute sind HTML-Attribute, die zusätzliche Informationen für assistive Technologien wie Bildschirmlesegeräte bereitstellen. Du kannst ARIA-Attribute verwenden, um den Linktyp anzugeben (z. B.
aria-label="Hauptmenü").
Vermeide diese Barrieren
- Leere oder nicht beschreibende Linktexte: Vermeide es, Links mit leeren Texten wie "Klicken Sie hier" zu erstellen.
- Vermeide die Verwendung von Linkfarben allein: Nicht alle Nutzer können Farbunterschiede erkennen, daher solltest du nicht nur auf Farbe setzen, um Links hervorzuheben.
- Automatisches Abspielen von Inhalten: Verwende keine Links, die automatisch Audio oder Video abspielen, ohne dass der Nutzer es erwartet. Dies kann für Nutzer mit Hör- oder Sehbehinderungen störend sein.
- Komplexe Ziel-URLs: Vermeide es, Links mit sehr langen oder komplexen Ziel-URLs zu erstellen, da diese für Bildschirmlesegeräte schwer zu interpretieren sein können.
Indem du diese Richtlinien befolgst, kannst du sicherstellen, dass deine Anchor-Tags barrierefrei sind und für alle Nutzer zugänglich sind.
Fortgeschrittene Verwendung von Anchor-Tags
Neben der grundlegenden Verwendung zur Erstellung von Hyperlinks bieten Anchor-Tags erweiterte Funktionen, die du für fortgeschrittene Zwecke nutzen kannst.
An benannte Anker verlinken
Mit der Eigenschaft name kannst du innerhalb einer Seite Anker erstellen, zu denen du verlinken kannst. Dies ist nützlich, um auf bestimmte Abschnitte einer langen Seite zu verweisen. Beispielsweise:
<a href="#ueberschrift">Gehe zu Überschrift</a>
<h2 id="ueberschrift">Überschrift</h2>
Fragment-Identifier verwenden
Du kannst auch einen Teil eines URLs als Fragment-Identifier verwenden, um auf einen bestimmten Teil einer Seite zu verweisen. Dies ist besonders nützlich für dynamische Inhalte, die sich häufig ändern. Beispielsweise:
<a href="hauptseite.html#kommentare">Gehe zu Kommentare</a>
JavaScript-Ereignisse auslösen
Anchor-Tags können auch zum Auslösen von JavaScript-Ereignissen verwendet werden. Dies ermöglicht dir, interaktive Elemente auf deiner Seite zu erstellen. Beispielsweise:
<a href="#" onclick="alert('Hallo!')">Klicke auf mich</a>
Suchmaschinenoptimierung (SEO)
Anchor-Texte sind für die Suchmaschinenoptimierung (SEO) wichtig, da sie Suchmaschinen helfen zu verstehen, worum es in dem verlinkten Inhalt geht. Wähle beschreibende und relevante Anchor-Texte, um die Sichtbarkeit deiner Website in Suchmaschinenergebnissen zu verbessern.
Barrierefreiheit
Anchor-Tags spielen eine entscheidende Rolle bei der Barrierefreiheit deiner Website. Verwende beschreibende Anker-Texte und füge nach Möglichkeit Titel-Attribute hinzu, um Benutzern mit Sehbehinderungen oder Bildschirmlesegeräten den Zugriff auf den Link-Inhalt zu ermöglichen.
Fortgeschrittene Verwendung
Zu den weiteren erweiterten Verwendungsmöglichkeiten von Anchor-Tags gehören:
- Erstellung von Mehrfachlinks (mehrere Links von demselben Tag)
- Verlinkung zu Dateien oder Ressourcen (z. B. PDF-Dateien oder E-Mail-Adressen)
- Verwendung als Platzhalter für zukünftige Inhalte (mit der Eigenschaft
href="#") - Integrieren von Social-Media-Symbolen mit Links zu Profilen oder Feeds