CSS, HTML und Javascript mit {stil}

HTML a • Link, Anker-Tag oder Hyperlink

HTML a Tag, auch als link oder Hyperlink oder Anker bezeichnet Zeigt ein pixeliges Zeigehändchen als Symbol für einen 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 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 Links mit einem a-Tag auch Blocklevel-Elemente umspannen.

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.

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>
Link mit optionalem direkten Download statt Öffnen im Browser

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

href: Aufbau von URLs

URLs (Uniform Resource Locator) sind Adressen von »Ressourcen« 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
target="_blank" ist anfällig für Cross-Side-Scripting und sollte niemals ohne rel="noopener" benutzt werden (wenn überhaupt).
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.
Öffnen von html-a.pngSie möchten folgende Datei öffnen:html-a.pngVom Typ: PNG-Datei (3,3 KB)Von: https://www.mediaevent.deÖffnen mitDatei speichernFür Dateien dieses Typs immer diese Aktion ausführenPreview (Standard)