HTML a-Element • Links

Links auf Webseiten

Das <a>-Element erzeugt ein Inlineelement, d.h., es führt nicht zu einem Zeilenvorschub. Per Voreinstellung zeigen die Browser den Inhalt des a-Elements unterstrichen und in Blau. Ein bereits besuchter Link wird violett. Auf dem Monitor des Desktoprechners wird der Mauszeiger über einem Link zum Zeigefinger.

<a href="meine-seite.html">Hier spielt die Musik</a>
<a href="meine-seite.html"><img src="" … /></a>
<a href="mein-pdf.pdf">Link zum PDF</a>

Mit dem Aufbuch in HTML 5 dürfen a-Elemente auch Blocklevel-Elemente umspannen.

a target – Linkziel

Ein Link kann sowohl auf eine andere Seite führe, in derselben Domaine oder zu einer externen URL (Uniform Resource Locator – eine (Internet)-Adresse). Bei einem Link auf eine andere Seite entscheidet das Attribut target, ob der Link im selben Fenster / Tab geöffnet wird oder in einem neuen Fenster / Tab geöffnet werden soll.

<a href="andereseite.html" target="_blank">Andere Seite</a>

Das Öffnen eines Links zu einer fremden Seite wird immer noch gern mit target="_blank" angesteuert, damit der Benutzer die eigene Seite weiterhin im Browser hält. Allerdings gibt es dann von der so geöffneten Seite kein Zurück zur zur eigenen Seite.

_blank Öffnet die Seite in einem neuen Fenster oder Tab
_self Öffnet die Seite selben Fenster oder Tab (Voreinstellung)

Für Frames (die es in HTML 5 nicht mehr gibt), gab es noch drei weitere Optionen:

_parent Öffnet die Seite im übergeordneten Frame
_top Öffnet die Seite im obersten Fenster
framename Öffnet die Seite in einen Frame mit einem Namen

a-Tag: Schreibweise und Aussehen

Der Unterstrich kann mit CSS text-decoration:none; unterdrückt werden. Liegt ein Bild innerhalb eines a-Tags, wird es in den meisten Browsern mit einem blauen Rahmen gezeigt. Dagegen hilft dann CSS a img { border: none; }.

Die CSS-Pseudoselektoren :hover, :visited und :active können die Zustände des Links optisch herausstellen.

Links dürfen nicht verschachtelt werden: Ein a-Element kann keine weiteren a-Elemente enthalten. Zwischen das öffnende und schließende Tag können beliebig lange Texte, Zeichen, Bilder und selbst HTML-Blöcke gesetzt werden.

HTML Links um Alles

In HTML4 und unter der strengen Fuchtel von XHTML durften keine Block-Elemente in einem a-Tag liegen. Darum mussten zusammengehörende Elemente in mehrere a-Tags gesetzt werden, die immer wieder auf dieselbe Adresse verwiesen haben – oft verwirrend für die unterstützenden Techniken für behinderte und ältere Benutzer.

Ein a-Element darf um ganze Absätze, Listen, Tabellen, sogar um ganze HTML section-Elemente gesetzt werden, solange kein interaktiver Inhalt zwischen dem öffnenden und schließenden a-Tag liegt (keine Button, keine Links).

<a href="/">
   <img src="logo.png" alt="" width="100" height="100" />
   <br />Home
</a>

Per Vorgabe wird die neue Seite im selben Browserfenster oder Frame dargestellt, es sei denn, das Attribut target (das in XHTM als unerwünscht gilt) bestimmt eine andere Variante.

Sprungziel innerhalb einer Seite (Anker)

Bei längeren Seiten kann es sinnvoll sein, dem Benutzer die Möglichkeit eines direkten Sprungs zu einem Bereich innerhalb der Seite anzubieten, damit er nicht scrollen und suchen muss.

Sprungziele oder Anker innerhalb einer HTML-Seite brauchen ein eindeutig identifizierbares Ziel, das durch ein id-Attribut erzeugt wird. Das id-Attribut kann innerhalb eines beliebigen Tags stehen – z.B. in einer Überschrift h3 oder einem div-Element. Der interne Link benutzt das href-Attribut mit dem Wert des id-Attributs.

<div id="start"> … </div>
	…
<a href="#start">Zum Seitenanfang</a>

CSS erreicht Sprungziel mit dem #-Symbol (hash) durch einen eigenen Selektor : target.

href: Aufbau von URLs

URLs (Uniform Resource Locator) sind Adressen von »Ressourcen« im Internet. Ressourcen können Webseiten, Bilder, PDF-Dokumente, zip-Archive … sein. URLs haben die Form

https://www.meineseite.de:80/seite?query#wert
  |             |         |     |     |   |
  |             |         |     |     |   +--- Hash, Sprungziel
  |             |         |     |     |
  |             |         |     |     #--- Query String 
  |             |         |     |       (PHP oder CGI-Programme)
  |             |         |     |
  |             |         |     +--- Unix-Pfadname
  |             |         |
  |             |         |
  |             |         +--- TCP-Portnummer, kann fast immer
  |             |              weggelassen werden
  |             | 
  |             +--- Host / Domainname
  |
  +--- Protokoll (entweder http:// oder https://)

Innerhalb eines Webverzeichnisses können relative oder absolute Adressen (URL – Universal Resource Identifier) benutzt werden

/index.html führt zur Datei index.html im obersten Webverzeichnis (absolute Adresse)
../index.html führt zu einer Datei index.html in einem übergeordneten Verzeichnis (relativ zur Lage der aufrufenden Datei)
#wert führt zu einem Sprungziel innerhalb desselben Dokuments.
Wenn ein Link zu einer anderen Domaine führt, muss // vor dem Domainnamen stehen (//www.meineseite.de). Fast immer wird das Protokoll (http: oder https:) vor den doppelten Slash gesetzt. Der Google Styleguide hat noch vor kurzer Zeit empfohlen, die URL ohne Protokoll zu schreiben, jetzt soll die URL mit https beginnen.
Ohne das führende http oder https wird die URL relativ. So entsteht keine Mischung zwischen http und https und Links bleiben korrekt, wenn die Domaine von http auf https umgestellt wird.

Attribute für a-Elemente

accesskey: bestimmt eine Taste auf der Tastatur, die beim Drücken zusammen mit der Alt-, Strg- oder Befehlstaste einen Link aktiviert. Das Attribut wird nur spärlich unterstützt.
href: legt die Ziel-URL für den Link fest. Das href-Attribut kann auch einen Präfix haben: tel für eine klickbare Telefonnummer oder mailto.
download: Hyperlink für einen File-Download – kann ein Dokument (z.B. PDF) direkt herunterladen statt das PDF im Browserfenster einzuspielen.
hreflang: wird nur zusammen mit dem href benutzt. Es gibt die Sprache der Seite an, auf die der Link führt.
media: Gibt an, dass die Zielseite für ein Gerät optimiert ist
rel: ist eine durch Leerzeichen getrennte Liste von Werten, mit denen die Art der Verwandschaft zur aktuellen Webseite erklärt wird. Die Werte können alternate, author, bookmark, help, icon, license, nofollow, noreferrer, prefetch, search, stylesheet, tag sowie next und prev sein.
target: wie das Linkziele vom Browser geöffnet werden soll: _blank, _parent, _self, _top
target="_blank" ist anfällig für Cross-Side-Scripting und sollte niemals ohne rel="noopener" benutzt werden (wenn überhaupt).
type: bestimmt den Inhaltstyp der Zielseite eines Links. Der Wert ist der Typ der MIME-Codierung.
charset, coords, name, rev und shape: Attribute aus alten HTML-Versionen, die heute keine Bedeutung mehr haben und von den Browsern nicht mehr unterstützt werden müssen.

HTML a • Link, Anker-Tag oder Hyperlink