Was ist HTML-Verlinkung?
HTML-Verlinkung ist ein grundlegendes Konzept bei der Erstellung von Webseiten. Sie ermöglicht es dir, Webseiten und andere Ressourcen miteinander zu verbinden und deinen Nutzern ein interaktives Erlebnis zu bieten.
Zweck der HTML-Verlinkung
Hyperlinks dienen mehreren Zwecken:
- Navigation: Sie ermöglichen es Nutzern, zwischen Seiten auf deiner Website oder zu externen Ressourcen wie anderen Webseiten, Dokumenten oder Bildern zu navigieren.
- Bereitstellung von Informationen: Links können zusätzliche Informationen zu einem bestimmten Thema bereitstellen, indem sie auf externe Ressourcen wie Glossare, FAQs oder verwandte Artikel verweisen.
- Verbesserung der Benutzerfreundlichkeit: Gut platzierte Links können Nutzern helfen, die benötigten Informationen schnell zu finden und deine Website effektiv zu nutzen.
Struktur eines HTML-Hyperlinks
Ein HTML-Hyperlink besteht aus zwei Hauptteilen:
-
Link-Tag
<a>: Dieser Tag definiert einen anklickbaren Bereich auf deiner Webseite. - Link-Ziel (href-Attribut): Dieses Attribut gibt die URL des Ziels an, auf das der Link verweist.
Beispiel eines einfachen Hyperlinks
<a href="https://example.com">Beispiel-Website</a>
Wenn ein Nutzer auf den Text "Beispiel-Website" klickt, wird er zur Webseite unter der URL "https://example.com" weitergeleitet.
So erstellen Sie einen Hyperlink in HTML
Um einen Hyperlink in HTML zu erstellen, verwendest du das a-Element (HTML-Anchor-Element). Ein Hyperlink besteht aus zwei Hauptkomponenten:
- Der anklickbare Text oder das Bild (auch als Ankertext bezeichnet), der den Link darstellt.
- Die Ziel-URL (auch als Href-Attribut bezeichnet), die angibt, wohin der Link führen soll.
Schritt-für-Schritt-Anleitung zum Erstellen eines Hyperlinks
- Schreibe den Ankertext, der den Link darstellen soll.
- Schließe den Ankertext in das
a-Element ein. - Füge das
href-Attribut mit dem Zielwert hinzu. - Schließe das
a-Element.
Beispiel:
<a href="https://www.beispiel.de">Beispielseite</a>
Dieser Code erstellt einen Hyperlink, der auf die Website beispiel.de verweist und den Text "Beispielseite" als Ankertext verwendet.
Verschiedene Arten von Hyperlinks
- Interne Hyperlinks: Verweisen auf eine andere Seite auf derselben Website.
- Externe Hyperlinks: Verweisen auf eine Seite auf einer anderen Website.
- Ankerlinks: Verweisen auf eine bestimmte Stelle auf derselben Seite (Zielanker).
Tipps zur Verwendung von Hyperlinks
- Verwende beschreibenden Ankertext, der angibt, wohin der Link führt.
- Vermeide es, Links in reinen Bildern zu verstecken.
- Verwende absolute URLs für externe Links und relative URLs für interne Links.
- Teste deine Hyperlinks regelmäßig auf Richtigkeit.
Attribute für HTML-Links
Neben dem href-Attribut, das die Link-URL angibt, stehen dir weitere Attribute zur Verfügung, mit denen du das Verhalten und die Anzeige deiner Hyperlinks anpassen kannst.
title
Das title-Attribut fügt einen Tooltip hinzu, der beim Bewegen des Mauszeigers über den Link erscheint. Es bietet eine kurze Beschreibung des Ziels des Links und verbessert die Barrierefreiheit für Benutzer mit Sehbehinderungen.
<a href="beispiel.html" title="Beispielseite">Beispiel</a>
target
Das target-Attribut gibt an, wo der gelinkte Inhalt geöffnet werden soll. Die häufigsten Werte sind:
-
_self: Im selben Fenster oder Tab -
_blank: In einem neuen Fenster oder Tab -
_top: Im obersten Fenster oder Tab -
_parent: Im übergeordneten Fenster oder Tab
<a href="beispiel.html" target="_blank">Beispiel in neuem Tab öffnen</a>
rel
Das rel-Attribut beschreibt die Beziehung zwischen dem aktuellen Dokument und dem gelinkten Dokument. Häufige Werte sind:
-
nofollow: Weist Suchmaschinen an, dem Link nicht zu folgen -
noopener: Öffnet den Link, ohne ein neues Browserskript auszuführen. Dies verbessert die Sicherheit und verhindert Cross-Site-Scripting-Angriffe -
noreferrer: Verhindert, dass Referrer-Informationen an den Server des gelinkten Dokuments gesendet werden
<a href="beispiel.html" rel="nofollow">Beispiel ohne Folgen für Suchmaschinen</a>
class und id
Die Attribute class und id können verwendet werden, um Links zu stylen oder sie mit JavaScript zu manipulieren.
<a href="beispiel.html" class="btn btn-primary">Beispiel-Button</a>
<a href="beispiel.html" id="link-beispiel">Beispiel-Link</a>
download
Das download-Attribut weist den Browser an, die verlinkte Datei herunterzuladen, anstatt sie im Browser zu öffnen.
<a href="beispiel.pdf" download>Beispiel-PDF herunterladen</a>
type
Das type-Attribut gibt den MIME-Typ der verlinkten Datei an. Dies ist hilfreich, wenn du eine bestimmte Dateiendung erzwingen möchtest.
<a href="beispiel.mp4" type="video/mp4">Beispiel-Video</a>
Verschiedene Arten von Hyperlinks
Als Website-Ersteller hast du eine Vielzahl von Optionen, wenn es um die Erstellung von Hyperlinks geht. Hier sind einige der gängigsten Arten:
Textlinks
Dies ist der grundlegendste Typ eines Hyperlinks. Er besteht einfach aus einem Wort oder einer Phrase, die mit einer URL verknüpft ist. Wenn du darauf klickst, wirst du zur verlinkten Seite weitergeleitet. Beispiel:
<a href="https://www.example.com/">Beispielwebsite</a>
Bildlinks
Diese Links verwenden ein Bild anstelle von Text. Wenn du auf das Bild klickst, wirst du zur verlinkten Seite weitergeleitet. Dies ist eine großartige Möglichkeit, visuelle Elemente zu deiner Website hinzuzufügen.
Button-Links
Button-Links sehen aus wie anklickbare Tasten. Sie eignen sich hervorragend für Handlungsaufrufe oder zum Verlinken zu wichtigen Seiten.
Ankerlinks
Diese Links verweisen auf einen bestimmten Abschnitt auf derselben Seite. Sie sind nützlich, um lange Seiten aufzuteilen oder Benutzern das Navigieren zu erleichtern. Beispiel:
<a href="#ueberschrift">Zur Überschrift</a>
Mailto-Links
Diese Links öffnen ein neues E-Mail-Fenster und senden eine E-Mail an eine bestimmte Adresse. Beispiel:
<a href="mailto:[email protected]">Sende uns eine E-Mail</a>
Tel-Links
Diese Links öffnen eine Telefonanruf-App und ermöglichen dem Benutzer, eine Telefonnummer anzurufen. Beispiel:
<a href="tel:0123456789">Rufe uns an</a>
Je nach deinen Anforderungen kannst du die für deine Website am besten geeigneten Arten von Hyperlinks auswählen.
Verlinkung auf interne und externe Ressourcen
Wenn du auf Ressourcen innerhalb deiner eigenen Website verlinken möchtest, verwendest du eine interne Verlinkung. Interne Links helfen Benutzern, durch deine Website zu navigieren und verwandte Inhalte zu finden.
Um einen internen Link zu erstellen, verwendest du das gleiche a-Element wie bei externen Links, aber anstelle der vollständigen URL verwendest du nur den relativen Pfad zur verlinkten Seite. Beispielsweise würde der folgende Code einen internen Link zur Seite "ueber-uns.html" erstellen:
<a href="ueber-uns.html">Über uns</a>
Um auf Ressourcen außerhalb deiner Website zu verlinken, verwendest du eine externe Verlinkung. Externe Links führen Benutzer zu Websites Dritter oder zu bestimmten Dateien wie PDFs oder Bildern.
So erstellst du einen externen Link:
- Verwende das
a-Element wie bei internen Links. - Gib die vollständige URL der verlinkten Ressource in das
href-Attribut ein.
Beispielsweise würde der folgende Code einen externen Link zur Website von Google erstellen:
<a href="https://www.google.de">Google</a>
Vorteile der internen und externen Verlinkung
Interne Verlinkung:
- Verbessert die Navigation und Benutzerfreundlichkeit
- Hilft Suchmaschinen, deine Website zu indizieren
- Kann die Verweildauer der Benutzer auf deiner Website erhöhen
Externe Verlinkung:
- Bietet zusätzliche Informationen und Ressourcen für Benutzer
- Baut Beziehungen zu anderen Websites auf
- Kann den Traffic auf deine eigene Website lenken
Best Practices für die Verlinkung auf interne und externe Ressourcen
- Verwende aussagekräftige Ankertexte, die den Inhalt der verlinkten Seite genau beschreiben.
- Öffne externe Links in einem neuen Tab oder Fenster, um das Benutzererlebnis zu verbessern.
- Verwende das
rel-Attribut, um zu kennzeichnen, ob ein externer Link zu einem "nofollow"-, "sponsored"- oder "ugc"-Link gehört. - Teste deine Links regelmäßig, um sicherzustellen, dass sie funktionieren.
- Verwende einen Link-Management-Service wie Google Search Console, um deine internen und externen Links zu verfolgen und zu verwalten.
Fehlerbehebung bei Problemen mit der Verlinkung
Wenn du Probleme mit der Verlinkung auf deiner Website hast, kannst du die folgenden Schritte zur Fehlerbehebung durchführen:
Überprüfe die HTML-Syntax
- Stelle sicher, dass deine HTML-Syntax korrekt ist. Ein fehlendes Anführungszeichen oder ein fehlender Schließ-Tag kann zu Verbindungsproblemen führen.
- Verwende einen HTML-Validator, um deine HTML-Datei auf Fehler zu überprüfen, z. B. HTML Validator.
Überprüfe die Ziel-URL
- Überprüfe, ob die Ziel-URL korrekt ist. Ein Tippfehler in der URL kann dazu führen, dass der Link nicht funktioniert.
- Verwende ein Tool wie Dead Link Checker, um veraltete oder fehlerhafte Links zu identifizieren.
Cache leeren
- Manchmal kann dein Browser den Cache speichern und verhindern, dass Aktualisierungen angezeigt werden. Lösche den Cache deines Browsers und versuche erneut, auf den Link zu klicken.
- Du kannst auch versuchen, einen anderen Browser zu verwenden, um auszuschließen, dass das Problem beim Browser liegt.
Überprüfe Berechtigungen
- Stelle sicher, dass du die erforderlichen Berechtigungen hast, um den Link zu öffnen. Wenn der Link zu einem geschützten Bereich führt, musst du möglicherweise deine Anmeldeinformationen eingeben.
- Überprüfe die Dateiberechtigungen auf deinem Server. Die Datei, auf die der Link verweist, sollte öffentlich zugänglich sein.
Überschneidende IDs oder Klassen
- Wenn du IDs oder Klassen für die Verlinkung verwendest, überprüfe, ob sie nicht mit anderen Elementen auf deiner Website übereinstimmen. Überschneidungen können zu unerwartetem Verhalten führen.
Überprüfe Weiterleitungen
- Wenn der Link zu einer anderen Website weiterleitet, überprüfe, ob die Weiterleitungen korrekt funktionieren. Schlechte Weiterleitungen können zu Verzögerungen oder Verbindungsproblemen führen.
- Verwende ein Weiterleitungs-Checker-Tool, um sicherzustellen, dass die Weiterleitungen funktionieren.
Best Practices für HTML-Verlinkung
Beim Einfügen von Hyperlinks in deine Website solltest du folgende Best Practices beachten, um die Benutzerfreundlichkeit, Zugänglichkeit und SEO-Optimierung zu verbessern:
Klarheit und Relevanz
Verwende für den Link-Text beschreibende Ausdrücke, die klar anzeigen, wohin der Link führt. Vermeide allgemeine Formulierungen wie "hier klicken" oder "weitere Informationen".
Barrierefreiheit
Stelle sicher, dass deine Links für alle Benutzer zugänglich sind, einschließlich derer mit Behinderungen. Füge Link-Text hinzu, der den Zweck des Links beschreibt, und verwende Screenreader-freundliche Attribute wie title und alt.
Konsistenz
Verwende einen einheitlichen Stil für Links auf deiner Website. Dies verbessert die Vertrautheit der Benutzer und erleichtert die Navigation. Lege beispielsweise Farben, Schriftarten und Unterstreichungen für Links fest.
Kontext
Gib einen Kontext für deine Links. Erkläre kurz, warum der Link relevant ist und was die Benutzer erwarten können, wenn sie darauf klicken. Dies hilft, Vertrauen aufzubauen und die Klickrate zu erhöhen.
Vermeide redundante Links
Verwende nicht mehrere Links zum selben Ziel. Dies kann verwirrend sein und die Navigation verlangsamen. Überprüfe deine Website regelmäßig auf doppelte Links.
Verwende Zielattribute
Gib an, wo ein Link in einem neuen Tab oder Fenster geöffnet werden soll. Verwende das Attribut target="_blank" für neue Tabs und target="_new" für neue Fenster.
Überprüfe Links regelmäßig
Links können sich ändern oder veraltet werden. Überprüfe deine Links regelmäßig, um sicherzustellen, dass sie noch funktionieren und auf die richtigen Seiten verweisen. Du kannst Tools wie Xenu Link Sleuth verwenden, um defekte Links zu suchen.
SEO-Optimierung
Verwende beschreibende Ankertexte, die relevante Keywords enthalten. Dies hilft Suchmaschinen dabei, deine Website zu indizieren und zu ranken. Vermeide die Verwendung von Stoppwörtern oder Füllwörtern in Ankertexten.
Barrierefreiheit bei Hyperlinks
Hyperlinks sind ein wesentlicher Bestandteil des Webs, aber sie können auch Barrieren für Menschen mit Behinderungen darstellen. Indem du barrierefreie Hyperlinks erstellst, kannst du sicherstellen, dass jeder auf deine Website zugreifen und sie nutzen kann.
Farbkontrast und Schriftgröße
Stelle sicher, dass der Text deines Hyperlinks deutlich vom Hintergrund abgesetzt ist. Verwende kontrastreiche Farben und eine ausreichend große Schriftgröße, damit er für alle leicht zu lesen ist.
Alternativer Text
Verwende für Bilder und andere nicht-textelemente Alternativtext, um Personen mit Sehbehinderungen eine Beschreibung des Elements zu geben. Der Alternativtext sollte prägnant und beschreibend sein und den Zweck des Links vermitteln.
Tastaturzugänglichkeit
Links sollten mit der Tastatur zugänglich sein, damit Benutzer ohne Maus auf sie zugreifen können. Verwende das Tabulatorattribut, um die Reihenfolge der fokussierbaren Elemente festzulegen, und die Enter-Taste, um den Link zu aktivieren.
Sprachattribute
Füge das Sprachattribut hinzu, um die Sprache des Linktextes anzugeben. Dies hilft Screenreadern, den Text korrekt auszusprechen.
Semantische Bedeutung
Verwende aussagekräftige Ankertexte, die die verlinkte Seite oder Ressource klar beschreiben. Vermeide die Verwendung von vage Begriffen wie "hier klicken" oder "mehr erfahren".
Testen und Validierung
Teste deine Hyperlinks regelmäßig mit verschiedenen Browsern und Hilfsmitteln wie Screenreadern, um sicherzustellen, dass sie barrierefrei sind. Verwende Validierungswerkzeuge, um sicherzustellen, dass dein HTML-Code den Barrierefreiheitsstandards entspricht.
Fortgeschrittene Techniken für die Verlinkung mit HTML
Neben den grundlegenden Verknüpfungsmethoden gibt es noch weitere fortgeschrittene Techniken, die die Funktionalität und Benutzerfreundlichkeit deiner Hyperlinks verbessern können.
JavaScript-basierte Verlinkung
Mit JavaScript kannst du die Standardfunktionalität von Hyperlinks erweitern. Du kannst beispielsweise Popups oder Modaldialoge erstellen, die beim Klicken auf einen Link angezeigt werden. Dies kann nützlich sein, um zusätzliche Informationen bereitzustellen oder Aktionen auszuführen, ohne die aktuelle Seite zu verlassen.
Anker-Links
Anker-Links ermöglichen es dir, innerhalb einer Seite auf bestimmte Abschnitte zu verlinken. Dies kann die Navigation auf längeren Seiten erleichtern und den Benutzern helfen, schnell zu den gesuchten Informationen zu gelangen.
Mehrere Ziele
Mit dem target-Attribut kannst du festlegen, wo ein Link geöffnet werden soll. Du kannst beispielsweise einen Link in einem neuen Tab oder Fenster öffnen oder ihn zu einem bestimmten Frame oder einer bestimmten Seite weiterleiten.
Barrierefreie Verlinkung
Neben der technischen Implementierung ist es wichtig, die Barrierefreiheit deiner Hyperlinks zu berücksichtigen. Verwende beschreibende Linktexte, um anzugeben, wohin der Link führt, und vermeide es, reine URLs oder allgemeine Begriffe wie "hier klicken" zu verwenden. Stelle außerdem sicher, dass deine Links auch für Benutzer zugänglich sind, die Bildschirmlesegeräte oder Tastaturen verwenden.
Ajax-basierte Verlinkung
Ajax (Asynchronous JavaScript and XML) ermöglicht es dir, Seiteninhalte dynamisch zu aktualisieren, ohne die gesamte Seite neu zu laden. Du kannst Ajax verwenden, um Links zu erstellen, die nur einen Teil der Seite aktualisieren, was die Ladezeit verbessern und die Benutzerfreundlichkeit erhöhen kann.
Verschiedene Link-Stile
HTML bietet verschiedene CSS-Eigenschaften, mit denen du das Erscheinungsbild deiner Hyperlinks anpassen kannst. Du kannst beispielsweise die Textfarbe, die Schriftart und die Größe ändern. Dies kann dir helfen, deine Hyperlinks in deinem Design hervorzuheben und die Aufmerksamkeit der Benutzer auf sie zu lenken.
