Das a-Element: Der Link
Das <a> (von "anchor", Anker) macht aus Text oder Bildern anklickbare Verweise. Es ist das Element das dem HyperText seinen Namen gibt, ohne Links wäre das Web nur eine Sammlung einzelner Dokumente. Grund genug es ordentlich zu beherschen.
Syntax und Beispiel
HTML-Code
<p>Mehr dazu steht im
<a href="https://www.htmlwiki.de/tutorial/">HTML-Tutorial</a>.</p>Mehr dazu steht im HTML-Tutorial.
Das href-Attribut enthält das Ziel. Das kann eine vollständige Adresse sein, ein relativer Pfad innerhalb der eigenen Website (href="kontakt.html" oder href="/tutorial/") oder eine Sprungmarke auf derselben Seite (href="#kapitel2", das Ziel braucht dann eine passende id).
Die wichtigsten Attribute
| Attribut | Zweck |
|---|---|
href | Das Linkziel. Ohne href ist das a-Element kein Link, sondern nur eine Textmarke. |
target="_blank" | Öffnet das Ziel in einem neuen Tab. Sparsam einsetzen, viele Nutzer wollen selbst entscheiden. |
rel | Beschreibt die Beziehung zum Ziel, etwa rel="external" oder rel="nofollow" wenn Suchmaschinen dem Link nicht folgen sollen. |
download | Bietet das Ziel zum Herunterladen an statt es anzuzeigen. |
Praktisch sind auch Speziallinks: href="mailto:info@htmlwiki.de" öffnet das Mailprogramm, href="tel:+49228123456" startet auf dem Handy einen Anruf.
Gute Linktexte schreiben
Der Text zwischen den Tags sollte das Ziel beschreiben. "Hier klicken" ist der Klassiker unter den schlechten Linktexten: Aus dem Zusammenhang gerissen (und genau so hören ihn Screenreader-Nutzer, die sich Linklisten vorlesen lassen) sagt er gar nichts. Auch Suchmaschinen werten den Linktext als Hinweis worum es beim Ziel geht. Also lieber "zum HTML-Grundgerüst" als "hier".
Typische Fehler
- Links ineinander verschachteln. Ein a im a ist ungültig, der Browser bricht die Verschachtelung eigenmächtig auf.
- Ein a als Button missbrauchen. Wenn beim Klick eine Aktion passiert statt einer Navigation, ist <button> das richtige Element.
- Identischer Linktext, verschiedene Ziele. Dreimal "mehr erfahren" auf einer Seite mit drei verschiedenen Zielen verwirrt Mensch und Maschiene.
Verwandt: nav · Attribute · Zum Ausprobieren: Spielwiese