HTML href-Attribut: Der Link zu externen Ressourcen

Was ist das href-Attribut?

Das Hypertext Reference Attribut (href) ist ein unverzichtbares Werkzeug in der HTML-Sprache und ermöglicht es dir, Links zu externen Websites und Ressourcen innerhalb deiner Website zu erstellen. Wenn du auf einen Link klickst, leitet dich das href-Attribut zur Zielressource weiter.

Was macht das href-Attribut?

Das href-Attribut weist deinen Browser an, eine bestimmte Aktion auszuführen, wenn ein Benutzer auf den verlinkten Text oder das Bild klickt. Es gibt die URL der Zielressource an, die geladen werden soll.

Wo finde ich das href-Attribut?

Das href-Attribut wird in HTML-Code innerhalb des <a>-Tags verwendet. Das folgende Beispiel zeigt einen Link zu Google mit dem Ankertext "Google besuchen":

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

Warum benötigst du das href-Attribut?

Das href-Attribut ist entscheidend für die Navigation auf deiner Website. Es ermöglicht dir:

Besucher zu weiteren Informationen auf externen Websites zu leiten
Besuchern Zugriff auf Dokumente, Bilder und andere Ressourcen auf deiner eigenen Website zu gewähren
Benutzer zu bestimmten Abschnitten deiner Website weiterzuleiten

Verwendung des href-Attributs für Links zu externen Websites

Das href-Attribut ist unerlässlich, wenn du Links zu Websites außerhalb deiner eigenen Domäne erstellen möchtest. Du kannst damit problemlos Inhalte aus dem gesamten Web einbinden.

Externe Websites verlinken

Um einen Link zu einer externen Website zu erstellen, gib einfach die vollständige URL in das href-Attribut ein. Beispielsweise:

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

Wenn du auf diesen Link klickst, wirst du zur Website example.com weitergeleitet.

Absolute und relative Pfadangaben

Absolute Pfade geben die gesamte URL an, während relative Pfade einen Pfad in Bezug auf die aktuelle Seite verwenden. Absolute Pfade sind zuverlässiger, während relative Pfade nützlich sein können, wenn du mehrere Seiten auf demselben Server hast.

Mehrere URLs in einem Link

Du kannst auch mehrere URLs in einem einzigen Link angeben, indem du Leerzeichen als Trennzeichen verwendest. Dies wird jedoch nur von einigen Browsern unterstützt und ist nicht die empfohlene Vorgehensweise.

Ziel des Links angeben

Du kannst das target-Attribut verwenden, um anzugeben, wo der Link geöffnet werden soll. Standardmäßig wird er im selben Fenster geöffnet, aber du kannst ihn auch in einem neuen Fenster, Tab oder Frame öffnen lassen.

Verwendung des href-Attributs für Links zu Ressourcen innerhalb der Website

Wenn du Links zu Ressourcen auf derselben Website erstellst, ist das href-Attribut ein unverzichtbares Werkzeug, um deinen Besuchern eine nahtlose Navigation zu ermöglichen. Mithilfe dieses Attributs kannst du interne Links zu anderen Seiten, Abschnitten oder Elementen innerhalb deiner Website erstellen. Dies hilft nicht nur dabei, die Benutzerfreundlichkeit zu verbessern, sondern ermöglicht es dir auch, die Struktur und Hierarchie deiner Website zu organisieren.

So erstellst du interne Links mit dem href-Attribut

Um einen internen Link zu einer anderen Seite auf derselben Website zu erstellen, musst du Folgendes tun:

Öffne das HTML-Dokument für die Seite, auf der du den Link erstellen möchtest.
Schließe ein <a>-Tag ein, das den Link definiert.
Füge das href-Attribut zum <a>-Tag hinzu und setze es auf den relativen Pfad der Zielressource.
Schreibe den Ankertext für den Link zwischen das öffnende und schließende <a>-Tag.

Das folgende Beispiel zeigt, wie du einen internen Link zur Seite "über-uns.html" erstellst:

<a href="ueber-uns.html">Über uns</a>

Verwendung relativer Pfade für interne Links

Wenn du interne Links erstellst, ist es wichtig, relative Pfade zu verwenden, anstatt absolute Pfade. Relative Pfade beziehen sich auf die Position der aktuellen Seite in der Website-Hierarchie, während absolute Pfade den vollständigen Pfad zur Ressource angeben. Die Verwendung relativer Pfade macht deine Website flexibler und einfacher zu pflegen, da du die Struktur deiner Website ändern kannst, ohne die Links aktualisieren zu müssen.

Barrierefreiheit und interne Links

Interne Links spielen eine entscheidende Rolle bei der Barrierefreiheit von Websites. Durch die Bereitstellung von Links zu anderen Ressourcen auf derselben Website können Benutzer einfach zwischen verschiedenen Seiten navigieren, auch wenn sie assistive Technologien wie Bildschirmlesegeräte verwenden. Stelle sicher, dass deine internen Links deskriptiven Ankertext haben, der den Inhalt der verknüpften Seite klar beschreibt.

Ziel des href-Attributs angeben

Wenn du einen Link zu einer externen Ressource oder einer Ressource innerhalb deiner Website erstellen möchtest, reicht es nicht aus, nur das href-Attribut anzugeben. Du musst auch das Ziel der Verknüpfung angeben, d. h. wohin der Link den Benutzer führen soll.

Absolute URLs

Wenn du auf eine externe Website verlinkst, musst du eine absolute URL verwenden, die das vollständige Internetadressformat enthält, einschließlich des Protokolls (z. B. https://), des Hostnamens (z. B. www.example.com) und des Pfads zur Ressource (z. B. /index.html).

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

Relative URLs

Wenn du auf eine Ressource innerhalb deiner eigenen Website verlinkst, kannst du eine relative URL verwenden, die nur den Pfad zur Ressource angibt. Relative URLs sind relativ zum aktuellen Pfad des Dokuments, in dem der Link enthalten ist.

<a href="/unterordner/seite.html">Unterordnerseite</a>

Hash-Tags

Wenn du auf einen bestimmten Abschnitt einer Seite verlinken möchtest, kannst du ein Hash-Tag (#) verwenden, gefolgt von der ID des Abschnitts. Hash-Tags werden häufig verwendet, um zu Sprungmarken innerhalb langer Dokumente zu navigieren.

<a href="#sprungmarke">Gehe zu Sprungmarke</a>

Leere href-Attribute

Du solltest niemals ein leeres href-Attribut verwenden. Wenn du keinen Link erstellen möchtest, entferne das Attribut stattdessen vollständig.

<!-- Richtig -->
<a>Kein Link</a>

<!-- Falsch -->
<a href="">Kein Link</a>

Unterstützung verschiedener Dateitypen mit dem href-Attribut

Das href-Attribut bietet vielseitige Unterstützung für verschiedene Dateitypen, sodass du Links zu einer Vielzahl von Ressourcen erstellen kannst.

Bilder

Um einen Link zu einem Bild auf einer externen Website oder innerhalb deines eigenen Webprojekts zu erstellen, gib einfach den Pfad zur Bilddatei im href-Attribut an. Beispiel:

<a href="images/mein-bild.jpg">Mein Bild</a>

Dokumente

Erstelle Links zu Dokumenten wie PDF-, Word- oder PowerPoint-Dateien, indem du den vollständigen Pfad zur Datei angibst:

<a href="dokumente/bericht.pdf">Bericht herunterladen</a>

Webanwendungen

Das href-Attribut ermöglicht dir auch die Verlinkung zu Webanwendungen. Gib einfach die URL der Anwendung an, z. B.:

<a href="https://example.com/webapp">Webanwendung öffnen</a>

E-Mail-Adressen

Du kannst auch Links zu E-Mail-Adressen erstellen, sodass Benutzer beim Klicken auf den Link eine neue E-Mail-Nachricht an die angegebene Adresse verfassen können:

<a href="mailto:[email protected]">Kontaktiere uns</a>

Anker-Links

Verwende das href-Attribut, um Anker-Links zu erstellen, mit denen du innerhalb eines Dokuments zu einem bestimmten Abschnitt springen kannst. Gib einfach den Ankernamen im href-Attribut an:

<a href="#abschnittsname">Zum Abschnitt springen</a>

So erhälst du die Dateierweiterung

Um die Dateierweiterung einer Ressource zu ermitteln, überprüfe den Dateipfad oder separiere die Erweiterung mithilfe eines Punktes (.) vom Dateinamen. Beispiel:

https://example.com/datei.pdf

Hier ist die Dateierweiterung ".pdf".

Barrierefreiheit und das href-Attribut

Beim Entwerfen von Websites ist Barrierefreiheit von größter Bedeutung. Das href-Attribut spielt eine entscheidende Rolle dabei, barrierefreie Links zu erstellen.

Verwendung von Screenreadern

Screenreader sind Softwareprogramme, die sehbehinderten oder blinden Nutzern helfen, Inhalte auf Websites zu verstehen. Wenn du das href-Attribut verwendest, um Links zu erstellen, stelle sicher, dass du einen beschreibenden Linktext verwendest. Dies hilft Screenreadern, den Zweck des Links zu erkennen und ihn für Nutzer verständlicher zu machen.

Hervorhebung von Links

Farbgegensätze und Unterstreichungen sind bewährte Methoden, um Links auf einer Website hervorzuheben. Dies erleichtert es Nutzern, insbesondere solchen mit Sehschwäche, Links zu identifizieren.

Tastaturnavigation

Nicht alle Nutzer können eine Maus verwenden. Stelle daher sicher, dass deine Links auch über die Tastaturnavigation zugänglich sind. Du kannst dies erreichen, indem du die Tab-Reihenfolge korrekt festlegst und sicherstellst, dass Links mit der Eingabetaste angeklickt werden können.

Zu vermeidende Fehler

Vermeide es, Links in Bildern zu verbergen. Screenreader können Bilder nicht "lesen", sodass Nutzer die Links möglicherweise nicht finden können.
Verwende keine Links mit generischem Text wie "Hier klicken" oder "Weitere Informationen". Dies erschwert es Nutzern, den Zweck des Links zu verstehen.
Stelle sicher, dass deine Links zu validen URLs führen. Broken Links können frustrierend und unzugänglich sein.

Indem du diese Best Practices befolgst, kannst du sicherstellen, dass deine Links für alle Nutzer, unabhängig von ihren Fähigkeiten, barrierefrei sind. Dies macht deine Website nicht nur für einen breiteren Personenkreis zugänglich, sondern verbessert auch die Benutzerfreundlichkeit für alle.

Fehlerbehebung bei Problemen mit dem href-Attribut

Treten beim Verwenden des href-Attributs Probleme auf, kannst du folgende Schritte zur Fehlerbehebung ausführen:

Überprüfe die URL

Stelle sicher, dass die angegebene URL korrekt geschrieben ist. Überprüfe auf Rechtschreibfehler oder fehlende Zeichen.
Versuche, die URL in einen Webbrowser einzugeben, um zu prüfen, ob sie gültig ist.

Überprüfe den Dateityp

Vergewissere dich, dass die Zieldatei den unterstützten Dateitypen entspricht (siehe "Unterstützung verschiedener Dateitypen mit dem href-Attribut").

Überprüfe das Ziel

Wenn du auf eine Ressource innerhalb der Website verlinkst, stelle sicher, dass die Datei an der angegebenen Stelle existiert.
Wenn du auf eine externe Website verlinkst, überprüfe, ob die Website verfügbar ist.

Überprüfe den Zielattribut

Das target-Attribut kann das Verhalten des Links steuern. Überprüfe dessen Wert und stelle sicher, dass er für deine beabsichtigte Aktion geeignet ist. Beispielsweise öffnet target="_blank" den Link in einem neuen Tab.

Überprüfe den Browser

Stelle sicher, dass der verwendete Browser den Linktyp unterstützt. Einige ältere Browser unterstützen möglicherweise nicht bestimmte Dateitypen oder Funktionen.

Überprüfe die Barrierefreiheit

Überprüfe, ob der Link für Benutzer mit Behinderungen zugänglich ist (siehe "Barrierefreiheit und das href-Attribut"). Verwende z. B. beschreibende Linktexte.

Suchen nach Serverproblemen

Wenn du auf eine externe Ressource verlinkst, tritt das Problem möglicherweise auf dem Server der Website auf. Überprüfe den Statuscode und kontaktiere den Website-Betreiber, wenn nötig.

Überprüfe den HTML-Code

Stelle sicher, dass das href-Attribut korrekt im HTML-Code formuliert ist. Überprüfe auf fehlende Anführungszeichen, falsche Attribute oder Syntaxfehler.