Anchor-Tags in HTML: So erstellst du Hyperlinks

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:

Mehr dazu erfährst du in: Die Allmacht der ID in HTML: Ultimative Anleitung zur Element-Identifizierung

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.

Weitere Informationen findest du in diesem Artikel: HTML-Attribute: Der ultimative Leitfaden zur Verbesserung der Webseite

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.

Zusätzliche Details erhältst du bei: HTML-Datenattribute: Verbessern Sie Ihre Webentwicklung

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.

Für nähere Informationen besuche: Link-HTML: So fügen Sie Hyperlinks in Ihre Website ein

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:

• HTML Anchor Tag Fehlerbehebung
• HTML-Fehlerbehebung: Tipps und Tricks

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:

Mehr Informationen findest du hier: HTML-Link-Tag: Der Schlüssel zur Verknüpfung im Web

<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

Verwandte Artikel

• HTML-Tags: Bausteine für die Strukturierung und Gestaltung von Webseiten
• Semantisches HTML: Verbesserter Inhalt für Suchmaschinen und Barrierefreiheit
• Die Bedeutung von : Der Ankerpunkt im HTML-Code
• Das HTML main Tag: Der unverzichtbare Container für den Hauptinhalt deiner Webseite
• HTML -Tag: Eine umfassende Anleitung zur Markierung von Textinhalten
• Kontaktformulare in HTML: Ein umfassender Leitfaden zur Erstellung effektiver Formulare
• HTML target Attribut: Eine umfassende Anleitung
• Das
• Der HTML-Footer: Ein unverzichtbarer Abschnitt, der oft übersehen wird
• Das HTML-Element
  : Struktur und Verwendung
• Die span-Elemente in HTML: Struktur und Semantik auf dem Bildschirm
• HTML -Tag: Hervorhebung mit Stil