CSS, HTML und Javascript mit {stil}

HTML a • Link, Anker-Tag oder »Hyperlink«

HTML a Tag Link

Das HTML a-Tag wird mit dem href-Attribut benutzt, um einen Hyperlink – auch als Link oder Anker bezeichnet – zu erzeugen.

Durch einen einfachen Klick mit einer Maus, einem Fingertipper bei Touch-Geräten oder durch einen Tastaturbefehl kann der Besucher auf eine andere Seite wechseln oder innerhalb der Seite zu einem Sprungziel navigieren.

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

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.

Mit HTML5 kann ein a-Element um ganze Absätze, Listen, Tabellen, sogar um ganze HTML Sections 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.

href: Aufbau von URLs

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

http://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. Fast immer wird das Protokoll (http: oder https:) vor den doppelten Slash gesetzt. Der Google Styleguide empfiehlt, die URL ohne Protokoll zu schreiben.
    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.
//www.meineseite.de

Attribute für a-Tags

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.
download (HTML5)
Hyperlink für einen File-Download
hreflang
wird nur zusammen mit dem href benutzt. Es gibt die Sprache der Seite an, auf die der Link führt.
media (HTML5)
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
type (HTML5)
bestimmt den Inhaltstyp der Zielseite eines Links. Der Wert ist der Typ der MIME-Codierung.
charset (nicht mehr in HTML5 enthalten)
gibt die Zeichencodierung an, die auf einer Zielseite benutzt wird. Die Zeichencodierung bestimmt, wie eine Bytesequenz in Zeichen für die Darstellung auf dem Monitor umgewandelt wird.
coords (nicht mehr in HTML5 enthalten)
wird von den meisten Browsern nicht unterstützt. coords legt den sensitiven Bereich um ein <a>-Tag fest.
name (nicht mehr in HTML5 enthalten)
Name eines Ankers. Stattdessen soll das id-Attribut verwendet werden.
rev (nicht mehr in HTML5 enthalten)
wird von den meisten Browsern nicht zuverlässig unterstützt und ist in HTML5 als deprecated – veraltert und unerwünscht – markiert.
shape (nicht mehr in HTML5 enthalten)
wird von den meisten Browsern nicht vollständig unterstützt. Es definiert einen sensitiven Bereich rund um das <a>-Tag. Mögliche Werte sind rect, circle, poly und default.

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>

Download-Link in a-Tag

Das download-Attribut des a-Tags bietet ein Dokument zum direkten Download an – ohne dass es zuvor angezeigt wird. Gerade für lange PDF-Dokumente (und insbesondere für die kleinen Monitore von Mobilgeräten) wäre ein direkter Download oft wünschenswert.

Der direkte Download gilt für alle Dateitypen: PDF, PNG, JPEG, .zip, ….

Download

<a href="html-a.png" download>Download</a>
Öffnen von html-a.png Sie möchten folgende Datei öffnen: html-a.png Vom Typ: PNG-Datei (3,3 KB) Von: https://www.mediaevent.de Öffnen mit Datei speichern Für Dateien dieses Typs immer diese Aktion ausführen Preview (Standard)

Das Download-Attribut wird noch nicht flächendeckend unterstützt: Firefox, Chrome sind dabei, Safari und IE verlinken weiterhin auf das Dokument.