HTML a href: Der Anker zu Web-Ressourcen

Was ist das -Tag?

Das <a href>-Tag in HTML steht für "Anker" und ist ein Link zu einer anderen Web-Ressource, wie z. B. einer anderen Webseite oder einem Bild. Es ist ein grundlegendes HTML-Element, das die Grundlage für die Navigation im Web bildet.

Zweck des <a href>-Tags:

Verknüpfung zu externen Webseiten oder Dokumenten
Erstellung von Ankerpunkten für die Navigation innerhalb einer Seite
Zugriff auf Ressourcen wie Bilder, Videos oder PDFs

Aufbau des <a href>-Tags:

Das <a href>-Tag besteht aus folgenden Teilen:

<a>: Startet das Link-Element
href="URL": Gibt die Ziel-Ressource an, zu der der Link führen soll
>: Schließt den Startelement-Tag
Link-Text oder -Bild: Der sichtbare Teil des Links, der angeklickt werden kann
</a>: Schließt das Link-Element

Beispiel

<a href="https://example.com">Beispielwebsite</a>

In diesem Beispiel wird ein Link mit dem Text "Beispielwebsite" erstellt, der beim Anklicken zur Website example.com führt.

Wie wird das `<a href>`-Tag verwendet?

Das <a href>-Tag wird verwendet, um Hyperlinks zu erstellen, die Benutzer zu anderen Webseiten oder Ressourcen im Internet weiterleiten. Um einen Hyperlink zu erstellen, musst du den folgenden Code verwenden:

<a href="https://example.com">Beispiel-Website</a>

Anmerkungen zur Verwendung

Der Wert des href-Attributs ist die URL der Zielressource.
Der Text zwischen dem öffnenden und schließenden <a>-Tag ist der sichtbare Text des Links. Dieser Text wird für die Barrierefreiheit auf Bildschirmlesegeräten vorgelesen.
Um sicherzustellen, dass die Links auf allen Geräten korrekt angezeigt werden, solltest du CSS-Stile verwenden, um ihre Darstellung anzupassen.
Du kannst den Mauszeiger ändern, wenn er sich über einem href-Link befindet, indem du das cursor-Attribut verwendest. Beispiel: cursor: pointer;

Wozu dient das `<a href>`-Tag?

Das <a href>-Tag ist ein unerlässliches Werkzeug in HTML, mit dem du die Benutzerfreundlichkeit deiner Website enorm verbessern kannst. Es ermöglicht dir Folgendes:

Verknüpfung zu externen Websites

Mit dem <a href>-Tag kannst du ganz einfach Links zu anderen Websites erstellen. Dies ist besonders nützlich, um:

Auf relevante Informationen auf externen Seiten zu verweisen
Deinen Nutzern zusätzliche Ressourcen bereitzustellen
Partnerschaften und Kooperationen mit anderen Websites zu fördern

Erstellung von Ankerlinks innerhalb einer Seite

Das <a href>-Tag ermöglicht es dir auch, Ankerlinks innerhalb deiner eigenen Webseite zu erstellen. Dies ist nützlich, um:

Auf bestimmte Abschnitte oder Elemente auf einer langen Seite zu verweisen
Eine einfache Navigation durch umfangreiche Inhalte zu ermöglichen
Deinen Nutzern zu helfen, die benötigten Informationen schnell zu finden

Verbesserung der Benutzererfahrung

Durch die Verwendung von Links kannst du die Benutzerfreundlichkeit deiner Website insgesamt verbessern. Benutzer können sich mühelos durch deine Inhalte bewegen und relevante Informationen finden, was zu einem positiven Nutzererlebnis führt.

Welche Attribute kann das -Tag haben?

Das -Tag verfügt über mehrere Attribute, mit denen du das Verhalten und die Darstellung des Links anpassen kannst. Zu den wichtigsten Attributen gehören:

href

Das Attribut href ist ein Pflichtfeld und enthält die URL der verlinkten Ressource. Die URL kann relativ (z. B. "/kontakt") oder absolut (z. B. "https://deinewebsite.com/kontakt") sein.

name

Das Attribut name wird verwendet, um einen Zielanker für einen Ankerlink auf derselben Seite zu definieren. Wenn du diesen Anker mit Links aus anderen Teilen der Seite verknüpfst, springen Nutzer direkt zum entsprechenden Abschnitt.

title

Das Attribut title fügt dem Link einen Titeltext hinzu, der angezeigt wird, wenn Nutzer mit dem Mauszeiger über den Link fahren. Nutze diesen Text, um zusätzliche Informationen oder eine Beschreibung des Ziels bereitzustellen.

target

Mit dem Attribut target kannst du festlegen, in welchem Fenster oder Tab der verlinkten Ressource geöffnet werden soll. Die gängigsten Werte sind:

_self: Öffnet die Ressource im aktuellen Fenster oder Tab
_blank: Öffnet die Ressource in einem neuen Fenster oder Tab
_parent: Öffnet die Ressource im übergeordneten Fenster oder Tab

rel

Das Attribut rel definiert die Beziehung zwischen dem aktuellen Dokument und der verlinkten Ressource. Es gibt zahlreiche Werte für die Angabe verschiedener Beziehungen, darunter:

alternate: Kennzeichnet alternative Versionen des aktuellen Dokuments (z. B. Print- oder PDF-Versionen)
canonical: Gibt die bevorzugte URL für die aktuelle Seite an
nofollow: Weist Suchmaschinen an, den Link nicht zu folgen

download

Das Attribut download fügt dem Link einen Dateinamen hinzu, unter dem die verknüpfte Ressource heruntergeladen werden kann.

type

Das Attribut type gibt den MIME-Typ der verlinkten Ressource an. Dies ist besonders nützlich, wenn du Dateien mit nicht standardmäßigen Dateitypen verlinkst.

class

Mit dem Attribut class kannst du CSS-Klassen zum Link hinzufügen, um sein Aussehen und Verhalten anzupassen.

Wie verknüpfe ich mit externen Websites?

Wenn du mit einer Website außerhalb deiner eigenen Domain verlinken möchtest, füge einfach http:// oder https:// vor die entsprechende Webadresse ein. Beispielsweise würde ein Link zur Website von Google wie folgt aussehen:

<a href="https://www.google.com">Google</a>

Linktext und Title-Attribut

Der Linktext ist der sichtbare Text, auf den Benutzer klicken, um der Verknüpfung zu folgen. Du kannst ihn direkt in das href-Attribut eingeben, wie im obigen Beispiel gezeigt.

Es wird auch empfohlen, das title-Attribut zu verwenden, um zusätzliche Informationen über den Link bereitzustellen. Dieses Attribut wird als Tooltip angezeigt, wenn Benutzer mit der Maus über den Link fahren. Beispielsweise:

<a href="https://www.google.com" title="Die führende Suchmaschine">Google</a>

Neue Fenster oder Tabs

Standardmäßig öffnen sich Links im selben Browserfenster oder -tab. Du kannst jedoch das target-Attribut verwenden, um das Verhalten zu ändern:

target="_blank": Öffnet den Link in einem neuen Tab oder Fenster
target="_self": Öffnet den Link im aktuellen Fenster oder Tab

Beispielsweise:

<a href="https://www.google.com" target="_blank">Google (neuer Tab)</a>

Vorsicht vor externen Links

Denke daran, dass du beim Verlinken zu externen Websites die volle Kontrolle über deren Inhalt hast. Überprüfe daher immer die Quelle und vergewissere dich, dass sie vertrauenswürdig ist.

Wie erstelle ich einen Ankerlink innerhalb einer Seite?

Schritt-für-Schritt-Anleitung

Um einen Ankerlink innerhalb einer Seite zu erstellen, folge diesen Schritten:

Einen Anker definieren:

Setze ein HTML-Ankerelement () an die Stelle, zu der du verlinken möchtest.

Verwende das id-Attribut, um dem Anker eine eindeutige Kennung zu geben.

<a id="mein-anker"></a>

Einen Link zum Anker erstellen:
- Setze ein weiteres HTML-Anker-Element an eine beliebige Stelle auf der Seite.
- Verwende das href-Attribut und gib den Wert der id des Ankers an, zu dem du verlinken möchtest (z. B. #mein-anker).

<a href="#mein-anker">Zum Abschnitt springen</a>

Nutzen von Ankerlinks

Ankerlinks ermöglichen es dir:

Einfachere Navigation: Erstelle schnell Links zu bestimmten Abschnitten einer langen Seite.
Verbesserte Zugänglichkeit: Ermögliche Benutzern mit Bildschirmleseprogrammen, direkt zu relevanten Abschnitten zu springen.
Vereinfachte Zielseitenerstellung: Erstelle benutzerdefinierte Zielseiten mit eindeutigen Ankern, auf die von anderen Seiten verlinkt werden kann.

Best Practices

Verwende aussagekräftige Anker-IDs: Wähle IDs, die den Inhalt des verlinkten Abschnitts beschreiben.
Platziere Anker logisch: Verwende Anker, um Abschnitttrennungen anzuzeigen oder auf wichtige Inhalte aufmerksam zu machen.
Vermeide zu viele Anker: Überlade deine Seite nicht mit zu vielen Ankerlinks, da dies die Navigation erschweren kann.
Teste die Ankerlinks: Stelle sicher, dass alle Ankerlinks wie vorgesehen funktionieren.

Best Practices für die Verwendung des -Tags

Neben der korrekten Syntax gibt es gewisse Best Practices, die du beachten solltest, um die Effektivität und Benutzerfreundlichkeit deiner Links zu maximieren.

Verwende aussagekräftigen Ankertext

Der Ankertext ist der sichtbare Text, der den Link umgibt und beschreibt, wohin der Link führt. Verwende immer einen aussagekräftigen und beschreibenden Ankertext, der den Benutzern genau sagt, was sie erwartet, wenn sie auf den Link klicken. Vermeide allgemein gehaltene Begriffe wie "hier klicken" oder "mehr lesen".

Stelle sicher, dass Links funktionieren

Nichts ist frustrierender, als auf einen Link zu klicken, der nicht funktioniert. Überprüfe daher immer die Richtigkeit deiner URLs, bevor du sie veröffentlichst. Du kannst Tools wie den W3C-Link-Checker verwenden, um defekte Links zu identifizieren.

Erkennbare Links gestalten

Links sollten optisch erkennbar sein, um den Benutzern das Auffinden und Anklicken zu erleichtern. Dies kannst du durch Unterstreichung, Farbänderung oder andere Stilisierungen erreichen.

Barrierefreiheit berücksichtigen

Stelle sicher, dass deine Links für alle Benutzer zugänglich sind, einschließlich Menschen mit Behinderungen. Verwende aussagekräftige Beschriftungen für deine Links und setze ARIA-Attribute ein, um die Barrierefreiheit zu verbessern.

Mobile Responsivität sicherstellen

In der heutigen mobilen Welt ist es unerlässlich, dass deine Links auf allen Geräten gut funktionieren. Optimiere deine Links daher für verschiedene Bildschirmgrößen.

Vermeide die Verwendung von JavaScript

Die Verwendung von JavaScript für Links kann zu Verzögerungen und Problemen mit der Barrierefreiheit führen. Verwende stattdessen immer HTML-Links, sofern dies möglich ist.

Wie kann ich die Barrierefreiheit von Links verbessern?

Als Webentwickler ist es deine Aufgabe, sicherzustellen, dass deine Website für alle zugänglich ist, einschließlich Personen mit Behinderungen. Eine Möglichkeit, dies zu tun, ist die Verbesserung der Barrierefreiheit von Links.

Verwendung von beschreibenden Linktexten

Anstatt vage Ausdrücke wie "hier klicken" zu verwenden, solltest du beschreibende Linktexte verwenden, die den Zweck des Links deutlich machen. Beispielsweise könnte "Weitere Informationen" durch "Anleitung zum Einrichten von WordPress" ersetzt werden.

Bereitstellung alternativer Textbeschreibungen

Wenn du Bilder als Links verwendest, stelle sicher, dass du alternative Textbeschreibungen (alt) hinzufügst, die den Inhalt des Bildes für Nutzer beschreiben, die Bildschirmlesegeräte verwenden.

Verwendung von ARIA-Labels

ARIA-Labels (Accessible Rich Internet Applications) sind Attribute, die zusätzliche Informationen über Elemente auf einer Website liefern. Du kannst ARIA-Labels verwenden, um die Funktion von Links für Bildschirmlesegeräte zu beschreiben. Beispiel:

<a href="#kontakt" aria-label="Zum Kontaktformular springen">Kontakt</a>

Sicherstellung einer sichtbaren Farbkontrastverhältnis

Stelle einen ausreichenden Farbkontrast zwischen Linktext und Hintergrund sicher, um die Lesbarkeit für Personen mit Sehbehinderungen zu verbessern. Du kannst Tools wie den Color Contrast Checker verwenden, um das Kontrastverhältnis zu überprüfen.

Vermeidung von "Link Farmen"

Erstelle keine "Link Farmen", also Seiten mit vielen Links zu anderen Websites, da diese für Bildschirmlesegeräte verwirrend sein können.

Bereitstellung von Tastenkombinationen

Ermögliche den Zugriff auf Links über Tastenkombinationen, wie z. B. die Tabulatortaste oder die Tastenkombination Strg+Klick (Windows) bzw. Befehlstaste+Klick (Mac).

Wie kann ich Links auf verschiedenen Geräten stylen?

Das Styling von Links ist auf verschiedenen Geräten unerlässlich, um eine konsistente Benutzererfahrung zu gewährleisten. Hier sind einige Möglichkeiten, wie du deine Links für verschiedene Bildschirmgrößen stylen kannst:

Responsive Medienabfragen verwenden

Medienabfragen ermöglichen dir, die CSS-Eigenschaften von Links basierend auf der Breite des Browserfensters anzupassen. Du kannst beispielsweise die Schriftgröße oder -farbe von Links auf kleineren Bildschirmen reduzieren.

@media (max-width: 768px) {
  a {
    font-size: 14px;
    color: #000;
  }
}

Flexbox nutzen

Flexbox bietet dir eine flexible Möglichkeit, die Ausrichtung und Größe von Links zu steuern. Du kannst damit beispielsweise eine horizontale oder vertikale Gruppierung von Links erstellen.

.links {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

Grid-Layout verwenden

Grid-Layout ist ideal für die Erstellung komplexerer Layouts, bei denen du Links positionieren musst. Mit Grid kannst du Spalten, Zeilen und Bereiche zum Platzieren deiner Links definieren.

.links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

Stil mit Bibliotheken wie Bootstrap oder Materialize

CSS-Frameworks wie Bootstrap und Materialize bieten vorgefertigte Klassen, mit denen du Links schnell und einfach stylen kannst. Diese Klassen bieten Konsistenz zwischen verschiedenen Geräten und Browsern.

<a class="btn btn-primary">Button</a>

Denke daran, dass die Barrierefreiheit beim Styling von Links wichtig ist. Verwende aussagekräftige Linktexte und stelle einen ausreichenden Kontrast zwischen Linkfarbe und Hintergrundfarbe sicher.