Übersicht
Das HTML-Element <a>
(auch HTML-Anker-Element) definiert einen Hyperlink, ein benanntes Ziel für einen Hyperlink oder beides.
Inhalt Kategorien | Fliessender Inhalt, Formulierung des Inhaltes, interaktiver Inhalt, fühlbarer Inhalt. |
---|---|
Erlaubter Inhalt | Transparent, beinhaltet weder fliessenden Inhalt noch Formulierung. |
Tag Wegfall | Keine, sowohl das Anfangs- als auch das End-Tag sind erforderlich. |
Erlaubte Elternelemente | Alle Elemente die Formulierungen akzeptieren, oder alle Elemente die fliessenden Inhalt erlauben. |
DOM interface | HTMLAnchorElement |
Attribute
Dieses Element besitzt die globalen Attribute.
download
HTML5- Dieses Attribut zeigt, dass der Autor möchte, dass der Hyperlink verwendet wird, um eine Datei herunterzuladen. Also soll der Browser, wenn der Benutzer auf den Link klickt, diesen fragen, wo die Datei lokal gespeichert werden soll. Falls dem Attribut ein Wert zugewiesen ist, wird dieser Wert als Dateiname zum Abspeichern vorgeschlagen (der Benutzer kann diesen Namen natürlich ändern). Es gibt keine Einschränkungen für erlaubte Werte (obgleich
/
und\
in Unterstriche konvertiert werden, um Verwechslungen mit Dateipfaden zu vermeiden). Dennoch sollten Sie beachten, dass die meisten Dateisysteme Einschränkungen bezüglich der unterstützten Interpunktion in Dateinamen haben, sowie die Browser die Dateinamen anpassen könnten.Hinweis:
- Dies kann mit
blob:
-URLs unddata:
-URLs verwendet werden, um es für Benutzer leichter zu machen, Inhalte herunterzuladen, die durch JavaScript generiert wurden (z. B. ein Bild, welches online über eine Zeichen-Anwendung erstellt wurde). - Falls der HTTP-Header
Content-Disposition:
angegeben wird und einen anderen Dateinamen vorschlägt als dieses Attribut, hat der HTTP-Header Vorrang vor diesem Attribut. - Falls das Attribut angegeben wird und
Content-Disposition:
den Wertinline
hat, gibt FirefoxContent-Disposition
eine größere Wichtigkeit, wie im Fall des Dateinamens, während Chrome demdownload
-Attribut mehr Priorität gibt. - Im Firefox 20 wird dieses Attribut nur für Links auf Dateien desselben Ursprungs angewendet.
- Dies kann mit
href
- Dieses war das einzige erforderliche Attribut für Anker, die einen Hyperlink definieren, aber es ist nicht länger erforderlich in HTML5. Wird dieses Attribut weggelassen, wird ein Platzhalter-Link erzeugt. Das
href
-Attribut zeigt das Ziel des Links an, entweder eine URL oder ein URL-Fragment. Ein URL-Fragment ist ein Name dem ein Doppelkreuz (#
) vorausgeht, welches ein internes Ziel im aktuellen Dokument (eine ID) festlegt. URLs sind nicht auf Web-(HTTP-)Dokumente beschränkt. Sie können ein beliebiges Protokoll verwenden, das von Browser unterstützt wird. Zum Biespielfile
,ftp
undmailto
funktionieren in den meisten Browsern.Hinweis: Sie können das spezielle Fragment „top“ verwenden, um Links zu erzeugen, die zurück zum Anfang der Seite springen. Zum Beispiel:
<a href="#top">Return to top</a>
. Dieses Verhalten ist in HTML5 festgelegt. media
HTML5- Dieses Attribut legt das Medium fest, zu welchem die verlinkte Seite gehört. Der Wert muss ein Media Query sein. Das Attribut ist sinnvoll, wenn auf externe Stylesheets verlinkt wird, während dem Browser erlaubt wird, das passende für das Gerät auszuwählen.
Verwendungshinweis:
- In HTML 4 ist nur eine einfache durch Leerzeichen getrennte Liste von Media Types und Media Groups definiert worden und als Werte für dieses Attribut erlaubt, z. B.
print
,screen
,aural
,braille
, … HTML 5 hat dies auf beliebige Media Queries erweitert, die eine Obermenge der erlaubten Werte von HTML 4 sind. - Browser, welche die CSS3 Media Queries nicht unterstützen, werden nicht notwendigerweise den passenden Link erkennen. Vergessen Sie also nicht Fallback-Links auf die beschränkten Werte von HTML 4 zu definieren.
- In HTML 4 ist nur eine einfache durch Leerzeichen getrennte Liste von Media Types und Media Groups definiert worden und als Werte für dieses Attribut erlaubt, z. B.
ping
HTML5- Falls das Attribut
ping
vorhanden ist, wird den URLs der Zielseiten eine Benachrichtigung gesendet, wenn der Benutzer dem Hyperlink folgt. rel
- Für Anker, die ein
href
-Attribut besitzen, legt dieses Attribut das Verhältnis des Zielobjekts zum Linkobjekt fest. Der Wert ist eine durch Leerzeichen getrennte Liste vonrel
-Werten. Diese Werte und deren Bedeutung wird von einer Behörde registriert. Der Standardwert ist eine leere Zeichenkette. Verwenden Sie dieses Attribut nur, wenn einhref
-Attribut vorhanden ist. target
- Dieses Attribut legt fest, wo die verlinkte Quelle angezeigt wird. In HTML4 ist das der Name eines Frames oder ein Schlüsselwort für ein Frame. In HTML5 ist es ein Name eines browsing contextes oder ein Schlüsselwort für einen browsing context (zum Beispiel ein Tab, Fenster oder Inline Frame). Die folgenden Schlüsselwörter haben eine spezielle Bedeutung:
_self
: Lädt die Antwort in dasselbe Frame (HTML4) bzw. denselben browsing context (HTML5) wie die aktuelle Seite. Dieser Wert ist der Standardwert._blank
: Lädt die Antwort in ein neues unbenanntes Fenster (HTML4) bzw. einen neuen browsing context (HTML5)._parent
: Lädt die Antwort in den frameset parent des aktuellen Frames (HTML4) bzw. parent browsing context (HTML5) des aktuellen. Falls es keinen parent gibt, verhält sich dieser Wert wie_self
._top
: Lädt die Antwort in das gesamte Fenster und alle Frames werden überschrieben (HTML4) bzw. in den obersten browsing context (d.h. der browsing context, der dem aktuellen übergeordnet ist und keine übergeordneten browsing contexte hat). Falls es keinen übergeordneten gibt, verhält sich dieser Wert wie_self
.
href
-Attribut vorhanden ist. charset
Veraltet seit HTML5- Dieses Attribut definiert die Zeichencodierung der verlinkten Datei. Der Wert ist eine durch Leerzeichen und/oder Komma-getrennte Liste von Zeichen-Sets nach der Definition der RFC 2045. Der Standardwert ist ISO-8859-1.
Verwendungshinweis: Dieses Attribut ist obsolet in HTML5 und sollte nicht mehr verwendet werden. Um denselben Effekt zu erhalten, verwenden Sie den HTTP-Header
Content-Type:
bei der verlinkten Datei. coords
nur HTML 4, Veraltet seit HTML5- Bei der Verwendung mit dem
shape
-Attribut gibt dieses Attribut als durch Komma getrennte Liste von Zahlen die Koordinaten des Objekts auf der Seite an. datafld
- Dieses Attribut legt den Spaltennamen des Datenquellenobjekts fest, das die Daten zur Verfügung stellt, die mit diesem Element verknüpft sind.
Verwendungshinweis: Dieses Attribut ist nicht standardisiert und sollte nicht verwendet werden. Um denselben Effekt zu erhalten, verwenden Sie Scripting und einen Mechanismus wie XMLHttpRequest, um die Seite dynamisch zu verändern.
Unterstützung Gecko Presto WebKit Trident Nicht unterstützt Nicht unterstützt Nicht unterstützt IE4, IE5, IE6, IE7 (Entfernt in IE8) Normatives Dokument Microsoft's Data Binding: dataFld Property (MSDN) datasrc
- Dieses Attribut zeigt die ID des Datenquellenobjekts an, das die Daten zur Verfügung stellt, die mit diesem Element verknüpft sind.
Verwendungshinweis: Dieses Attribut ist nicht standardisiert und sollte nicht verwendet werden. Um denselben Effekt zu erhalten, verwenden Sie Scripting und einen Mechanismus wie XMLHttpRequest, um die Seite dynamisch zu verändern.
Unterstützung Gecko Presto WebKit Trident Nicht unterstützt Nicht unterstützt Nicht unterstützt IE4, IE5, IE6, IE7 (Entfernt in IE8) Normatives Dokument Microsoft's Data Binding: dataSrc Property (MSDN) hreflang
- Dieses Attribut zeigt die Sprache der verlinkten Datei an. Es ist nur ein Hinweis. Erlaubte Werte sind bestimmt von BCP47 für HTML5 und von RFC1766 für HTML4. Verwenden Sie dieses Attribut nur, wenn ein
href
-Attribut vorhanden ist. methods
- Der Wert dieses Attributes liefert Informationen über die Funktionen, die an einem Objekt ausgeführt werden können. Die Werte werden üblicherweise vom HTTP bestimmt, wenn es verwendet wird, aber es könnte (für ähnliche Gründe wie für das
title
-Attribut) nützlich sein, hinweisende Informationen im Voraus im Link einzufügen. Zum Beispiel könnte der Browser einen Link anders anzeigen, je nachdem welche Methoden angegenben sind; etwas, das durchsuchbar ist könnte ein anderes Icon erhalten oder ein Link, der auf eine fremde Seite verweist, könnte mit einem Hinweis, die Seite zu verlassen, angezeigt werden. Dieses Attribut ist weder gut verstanden noch unterstützt, sogar vom definierenden Browser, Internet Explorer 4. Methods Property (MSDN) name
nur HTML 4, Veraltet seit HTML5- Dieses Attribut wird in einem Anker benötigt, der ein Sprungziel innerhalb einer Seite definiert. Ein Wert für name ist einem Wert für das id-Attribut ähnlich und sollte eine alphanumerische Identifikation sein, die für das Dokument eindeutig ist. Nach der HTML-4.01-Spezifikation können id und name beide mit dem
a
-Element verdendet werden, solange sie idente Werte haben.Verwendungshinweis: Dieses Attribut ist obsolet in HTML5. Verwenden Sie das globale Attribut id stattdessen.
rev
nur HTML 4, Veraltet seit HTML5- Dieses Attribut legt einen umgekehrten Link fest und ist das inverse Verhältnis zum rel-Attribut. Es ist nützlich, um anzuzeigen, woher ein Objekt kam, sowie den Autor eines Dokuments.
shape
nur HTML 4, Veraltet seit HTML5- Dieses Attribut wird verwendet, um eine auswählbare Region für Hyperlinks festzulegen, die mit einer Abbildung verbunden sind, um eine Bildkarte zu erstellen. Die Werte für das Attribut sind
circle
,default
,polygon
undrect
. Das Format des coords-Attributes hängt vom Wert jenes Attributs shape ab. Fürcircle
ist der Wertx,y,r
, wobeix
undy
die Pixelkoordinaten für den Mittelpunkt des Kreises sind undr
der Radius in Pixeln ist. Fürrect
sollte das coords-Attributx,y,w,h
sein. Die Wertex,y
legen das obere linke Eck des Rechtecks fest, währendw
undh
die Breite bzw. Höhe festlegen. Der Wertpolygon
für shape verlangt Wertex1,y1,x2,y2,...
für coords. Jedes derx,y
-Paare definiert einen Punkt des Polygons, wobei aufeinander folgende Punkte sowie der letzte Punkt mit dem ersten mit geraden Linien verbunden werden. Der Wertdefault
für shape verlangt, dass die gesamte beigefügte Fläche, üblicherweise ein Bild, verwendet wird. type
- Dieses Attribut legt den Medientyp in der Form eines MIME-Types für das Linkziel fest. Im Allgemeinen ist dies nur als hilfreiche Information verfügbar, aber in Zukunft könnte ein Browser ein kleines Icon für Multimedia-Typen hinzufügen. Beispielweise könnte ein Browser ein kleines Lautsrechersymbol anzeigen, wenn type auf
audio/wav
gesetzt ist. Für eine komplette Liste von erkannten MIME-Typen siehe https://www.w3.org/TR/html4/references.html#ref-MIMETYPES. Verwenden Sie dieses Attribut nur, wenn einhref
-Attribut vorhanden ist. urn
- Dieses angeblich von Microsoft unterstützte Attribut bezieht einen Uniform Resource Name (URN) auf den Link. Während dies auf Normungsarbeit vor Jahren basiert, ist die Bedeutung von URNs immer noch nicht gut definiert. Daher ist dieses Attribut bedeutungslos. urn Property (MSDN)
Beispiel: Link zu einem externen Ort
<!-- Link zu einer externen Datei --> <a href="https://www.mozilla.com/"> Externer Link </a>
Ergebnis
Beispiel: Erstellung eines Bildlinks
Diese kleine Beispiel verwendet ein Bild, um zur MDN-Homepage zu verlinken. Die Homepage wird in einem neun browsing context geöffnet, d.h. eine neue Seite oder ein neuer Tab.
<a href="https://developer.mozilla.org/de/" target="_blank"> <img src="https://mdn.mozillademos.org/files/6851/mdn_logo.png" alt="MDN-Logo" /> </a>
Ergebnis
Beispiel: Erstellung eines E-Mail-Links
Es ist üblich, Schaltflächen oder Links zu erstellen, die in des Benutzers E-Mail-Programm geöffnet werden, um ihnen zu erlauben, eine neue Nachricht zu senden. Dies wird mit mailto
-Links gemacht. Hier ein einfaches Beispiel:
<a href="mailto:[email protected]">E-Mail senden</a>
Dies führt zu einem Link, der so aussieht: E-Mail senden.
Für weitere Details über das mailto
-URL-Schema, z.B. wie man Betreff, Nachrichtentext oder ähnliches festlegt, siehe E-Mail-Links oder RFC 6068.
Beispiel: Verwendung des download-Attributes, um ein canvas als PNG zu speichern
Falls Sie einem Benutzer erlauben möchten, ein HTML-Canvas als Bild herunterzuladen, können Sie einen Link mit download
-Attribut und den canvas
-Daten als Datei-URL erstellen:
var link = document.createElement('a'); link.innerHTML = 'Bild herunterladen'; link.addEventListener('click', function(ev) { link.href = canvas.toDataURL(); link.download = "meinBild.png"; }, false); document.body.appendChild(link);
Hier können Sie dies in Aktion sehen https://jsfiddle.net/codepo8/V6ufG/2/
Spezifikationen
Spezifikation | Status | Anmerkung |
---|---|---|
WHATWG HTML Living Standard Die Definition von '<a>' in dieser Spezifikation. |
Lebender Standard | |
HTML5 Die Definition von '<a>' in dieser Spezifikation. |
Empfehlung | |
HTML 4.01 Specification Die Definition von '<a>' in dieser Spezifikation. |
Empfehlung |
Browser-Kompatibilität
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | (Ja) | 1.0 (1.7 oder früher) | (Ja) | (Ja) | (Ja) |
href="#top" |
(Ja) | 10.0 (10.0) | (Ja) | (Ja) | (Ja) |
download |
14 | 20.0 (20.0) | Nicht unterstützt | Nicht unterstützt | ? |
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | (Ja) | 1.0 (1.0) | (Ja) | (Ja) | (Ja) |
href="#top" |
(Ja) | 10.0 (10.0) | (Ja) | (Ja) | (Ja) |
download |
(Ja) | 20.0 (20.0) | Nicht unterstützt | ? | ? |
Hinweise
Die folgenden sind reservierte Browser Schlüsselverbindungen für die 2 Hauptbrowser und sollten nicht als Wert eines Zugangsschlüssels benutzt werden: a, c, e, f, g, h, v, Pfeil links, and Pfeil rechts.
HTML 3.2 definiert nur name, href, rel, rev, und title.
Das target Attribut ist nicht definiert in Browsern die keine Frames unterstützen, so wie Netscape 1 Generation Browser. Desweiteren, ist target nicht erlaubt in Varianten von XHTML sondern ist limitiert nur auf frameset oder Transit-Formulare.
JavaScript Empfehlungen
Es ist öfters der Fall, dass ein Anker-Tag benutzt wird zusammen mit dem onclick
Event. Um zu verhindern, dass die Seite sich neu lädt, wird href durch entweder "#" oder "javascript:void(0)" gesetzt. Beide Werte können zu unerwarteten Fehlern führen, wenn Hyperlinks kopiert oder in einem neuen Tab und/oder Fenster geöffnet werden. Seien Sie sich dieses Gebrauchs bewusst, und ausserdem, dass wenn Benutzer Anker-Tags benutzen, aber das generelle Verhalten verhindert wird.