Der <a>
-Tag mit href
-Attribut in HTML: Links erstellen und nutzen
Der <a>
-Tag (Anker-Tag) ist eines der wichtigsten Elemente in HTML, da er verwendet wird, um Hyperlinks zu erstellen. Das href
-Attribut (Hypertext Reference) gibt dabei die Zieladresse des Links an. In diesem Artikel erfahren Sie, wie der <a>
-Tag mit dem href
-Attribut funktioniert, wie Sie ihn effektiv einsetzen und welche erweiterten Funktionen er bietet.
Grundlegende Syntax des <a>
-Tags
Der <a>
-Tag wird verwendet, um einen klickbaren Link zu erstellen. Das href
-Attribut gibt die URL an, zu der der Benutzer weitergeleitet wird.
Beispiel:
<a href="https://www.example.com">Besuchen Sie Example.com</a>
Darstellung im Browser:
Besuchen Sie Example.com
(Beim Klicken wird die Seite „https://www.example.com“ geöffnet.)
Attribute des <a>
-Tags
href
: Gibt die Zieladresse des Links an. Dies kann eine absolute oder relative URL sein.<a href="https://www.example.com">Externer Link</a> <a href="/interneseite.html">Interner Link</a>
target
: Gibt an, wie der Link geöffnet werden soll._self
(Standard): Öffnet den Link im gleichen Fenster oder Tab._blank
: Öffnet den Link in einem neuen Tab oder Fenster._parent
: Öffnet den Link im übergeordneten Frame._top
: Öffnet den Link im gesamten Fenster, ignoriert Frames.
<a href="https://www.example.com" target="_blank">In neuem Tab öffnen</a>
rel
: Gibt die Beziehung zwischen der aktuellen Seite und dem Linkziel an. Wichtig für SEO und Sicherheit.nofollow
: Verhindert, dass Suchmaschinen dem Link folgen.noopener
undnoreferrer
: Erhöhen die Sicherheit beim Öffnen von Links in einem neuen Tab.
<a href="https://www.example.com" target="_blank" rel="noopener">Sicherer externer Link</a>
title
: Zeigt einen Tooltip an, wenn der Mauszeiger über den Link bewegt wird.<a href="https://www.example.com" title="Besuchen Sie Example.com">Beispiel mit Tooltip</a>
Relative und absolute URLs
- Absolute URLs: Geben die vollständige Adresse einer Ressource an, einschließlich Protokoll (z. B.
https://
).<a href="https://www.example.com">Externer Link</a>
- Relative URLs: Verweisen auf Ressourcen im gleichen Projekt oder Server.
<a href="/kontakt.html">Interner Link</a>
E-Mail-Links erstellen
Mit dem mailto:
-Schema können Sie Links erstellen, die den Standard-E-Mail-Client des Benutzers öffnen.
Beispiel:
<a href="mailto:info@example.com">Schreiben Sie uns eine E-Mail</a>
Ankerlinks verwenden
Ankerlinks ermöglichen es, Benutzer zu einem bestimmten Abschnitt auf der gleichen Seite zu springen.
Beispiel:
<a href="#abschnitt1">Zum Abschnitt 1</a>
...
<h2 id="abschnitt1">Abschnitt 1</h2>
Styling von Links mit CSS
Links können mit CSS individuell gestaltet werden. Häufig verwendete Pseudoklassen sind:
:link
: Stil für unbesuchte Links.:visited
: Stil für bereits besuchte Links.:hover
: Stil, wenn der Benutzer die Maus über den Link bewegt.:active
: Stil beim Klicken auf den Link.
Beispiel:
<style>
a {
color: blue;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
</style>
Barrierefreiheit und SEO
- Beschreibende Texte: Verwenden Sie Linktexte, die den Zielinhalt klar beschreiben. Vermeiden Sie generische Texte wie „Hier klicken“.
aria-label
: Für Screenreader kann ein zusätzliches Label hinzugefügt werden.<a href="/download.pdf" aria-label="PDF-Datei herunterladen">Download</a>
rel="nofollow"
: Vermeiden Sie, dass Suchmaschinen irrelevanten Links folgen.
Fazit
Der <a>
-Tag mit dem href
-Attribut ist ein grundlegendes Element in HTML, um Webseiten miteinander zu verknüpfen und Inhalte zugänglich zu machen. Durch den Einsatz von Attributen wie target
, rel
und title
können Links sicherer, nutzerfreundlicher und effektiver gestaltet werden. Nutzen Sie die Möglichkeiten dieses vielseitigen Tags, um eine bessere Navigation und Nutzererfahrung zu schaffen.
Letzte Bearbeitung am Montag, 30. Dezember 2024 – 9:04 Uhr von Alex, Webmaster für Google und Bing SEO.