html css php mysql javascript
Bild zum Thema

Tag <a>

Definition

Status: Aktueller Standard


Das Tag <a> steht für anchor (Anker, Link).

Es ist eines der fundamentalsten Elemente in HTML. Es wird primär verwendet, um Hyperlinks zu erstellen, die Nutzer zu anderen Webseiten, Dateien oder Abschnitten innerhalb einer Seite führen. Dieser Tag ist alleinstehend funktionslos und sollte daher stets in Verbindung mit dem Attribut href genutzt werden. Ein <a> ohne href ist nach HTML5 syntaktisch erlaubt, stellt jedoch keinen Hyperlink dar und besitzt keine interaktive Funktion. Es kann z. B. als Platzhalter dienen, bei dem später dynamisch per JavaScript ein passendes href gesetzt wird.

Generell werden drei Arten von Links unterschieden:

Globale Links:
Globale Links haben als Schema immer das Protokoll am Anfang (https, ftp, mailto:....) gefolgt von der URL (siehe Beispiele).

Relative (lokale) Links
Relative Links beziehen sich auf Ressourcen innerhalb des selben Webprojekts. Sie können entweder mit einem relativen Pfad (z.B. docs/html/a/a.pdf) (ausgehend vom aktuellen Dokument) oder mit einem absoluten Pfad (beginnend mit einem Schrägstrich, z.B. /docs/html/a/a.pdf) angegeben werden (siehe Beispiele).

Interne Links (Sprungmarken)
Interne Links verweisen auf Sprungmarken innerhalb einer Seite. Sie werden durch ein vorangestelltes Rautezeichen (#) gekennzeichnet und verweisen auf ein Element mit dem entsprechenden id-Attribut (siehe Beispiele).

Syntax

<a [attribute] href="scheme:[//authority]path[?query][#fragment]">...</a>

Attribute

attributionsrc [Deprecated]
Nutzerinteraktionen einer späteren Aktion zuordnen
download
Veranlasst den Browser, die verlinkte Ressource herunterzuladen statt anzuzeigen
href
Definiert das Linkziel
hreflang
Gibt die Sprache des Zieldokuments an
media
Definiert das Zielmedium oder Gerät
ping
Sendet zusätzliche POST-Anfragen zu Tracking-Zwecken
referrerpolicy
Steuert, welche Referrer-Informationen übermittelt werden
rel
Beschreibt die Beziehung zum Zieldokument
target
Legt fest, wo das Ziel geöffnet wird
type
Gibt den Medientyp des Zieldokuments an (z. B. application/pdf)

Beispiele

= Tag
= Attribut
= Wert
Text
= Kommentar bzw. wichtig!
Beispiel a mit Attribut "href (Global)""

Der Code:
<a href="https://www.google.de" target="_blank">Link zu Google</a>

Ergebnis:
Ergebnis: <a>-Demo 1

Globaler Link - Dieser Link öffnet die Seite www.google.de (in neuem Fenster).
Beispiel a mit Attribut "href (Lokal)""

Der Code:
<a href="img/html.png" target="_blank">Link zu Bild "HTML"</a>

Ergebnis:
Ergebnis: <a>-Demo 2

Relativer (lokaler) Link - Dieser Link führt zu einem Bild innerhalb dieses Projekts: img/html.png (in neuem Fenster).

Zurück kommen sie wieder mit alt &

Beispiel a mit Attribut "href (Intern-Sprungmarke)""

Der Code:
<a href="#definition">Zum Absatz "Definition"</a>

Ergebnis:
Ergebnis: <a>-Demo 3

Interner Link (Sprungmarke) - Dieser Link führt innerhalb der aktuellen Webseite zur Spungmarke ([MARK2]#[/MARK]) gefolgt von der id des Elements zu dem gesprungen werden soll.
Beispiel a mit Attribut "download""

Der Code:
<a href="docs/datei.pdf" download="Testdatei.pdf";>PDF zum Download</a>

Ergebnis:
Ergebnis: <a>-Demo 4

Interner Link zur pdf-Datei a.pdf im Verzeichnis docs - Datei wird nicht geöffnet sondern der Download-Dialog öffnet sich. Wenn man keinen Dateinamen angibt, wird die Datei mit ihrem ursprünglichen Namen heruntergeladen.

Zurück kommen sie wieder mit alt &