HTML <a>-Tag
Der HTML <a>-Tag erstellt Hyperlinks zu Seiten, Dateien, Abschnitten sowie E-Mail- und Telefonlinks. Beispiele zu target, rel und download.
Der <a>-Tag wird verwendet, um Hyperlinks zu anderen Seiten, Dateien, Bereichen innerhalb derselben Seite, E-Mail-Adressen oder beliebigen anderen URLs einzufügen. Sowohl Text als auch Bilder können als Hyperlink verwendet werden.
Im Browser unterscheiden sich Hyperlinks in Erscheinungsbild und Farbe. Standardmäßig erscheinen HTML-Links als unterstrichener blauer Text. Beim Überfahren mit der Maus wird ein Link rot (aktiver Link). Bereits besuchte Links werden lila dargestellt.
Sie können die Farbe von Links ändern, die Unterstreichung entfernen oder die Farbe der Links anpassen, indem Sie CSS-Stile verwenden.
Die Attribute "download", "media", "hreflang", "target", "rel" und "type" sind nur vorhanden, wenn das Attribut "href" gesetzt ist.
Solange kein anderes Ziel festgelegt ist, wird eine verlinkte Seite im aktuellen Browserfenster angezeigt.
Syntax
Der <a>-Tag wird paarweise verwendet. Das Ziel des Links wird mit dem href-Attribut im öffnenden Tag festgelegt, und der klickbare Inhalt (Text oder ein Bild) wird zwischen dem öffnenden (<a>) und dem schließenden (</a>) Tag geschrieben.
<a href="https://www.w3docs.com/">Visit W3docs</a>Der Text "Visit W3docs" wird zum klickbaren Hyperlink, und ein Klick darauf führt zur URL in href.
Attribute
Der <a>-Tag kann Attribute enthalten, die zusätzliche Informationen bereitstellen.
Das href-Attribut
Das href-Attribut ist ein Pflichtattribut des <a>-Tags. Es definiert einen Link auf der Webseite oder eine Stelle auf derselben Webseite, zu der der Benutzer nach dem Klick auf den Link navigiert. Der Wert des Attributs ist entweder ein Anker oder eine URL. Der Anker verweist auf die ID (eindeutiger Bezeichner) des referenzierten Teils der Webseite. Vor der ID wird ein Raute-Zeichen (#) gesetzt.
Es sieht folgendermaßen aus:
HTML <a>-Tag
<a href="url">the link text</a>
<a href="#a">the link text</a>Beispiel des HTML <a>-Tags mit dem href-Attribut:
Example of the HTML <a> Tag|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<a href="https://www.w3docs.com/">W3docs.com</a>
</body>
</html>Ergebnis
Klicken Sie auf den Link, und Sie werden zur Startseite unserer Website weitergeleitet.
Mit dem href-Attribut des <a>-Tags und dem <img>-Tag können Sie ein verlinktes Bild erstellen.
Beispiel des HTML <a>-Tags zum Erstellen eines verlinkten Bildes:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
height: 90vh;
}
</style>
</head>
<body>
<a href="https://en.wikipedia.org/wiki/France">
<img src="https://images.unsplash.com/photo-1549144511-f099e773c147?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" alt="France" />
</a>
</body>
</html>Das target-Attribut
Das target-Attribut gibt dem Browser an, wo das Dokument geöffnet werden soll (standardmäßig öffnen sich Links im aktuellen Fenster).
Das target-Attribut kann folgende Werte annehmen:
_blank– öffnet den Link in einem neuen Fenster oder Tab._self– öffnet den Link im aktuellen Fenster (dies ist der Standard)._parent– öffnet das Dokument im übergeordneten Frame._top– öffnet das Dokument im vollständigen Fensterkörper.
Beispiel des HTML <a>-Tags mit dem target-Attribut:
Example of the HTML <a> Tag with a target attribute|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<a href="https://www.w3docs.com/" target="_blank">W3docs.com</a>
</body>
</html>Ergebnis
Sicherheit bei target="_blank": rel="noopener noreferrer"
Wenn Sie einen Link in einem neuen Tab mit target="_blank" öffnen, kann die neu geöffnete Seite in älteren Browsern über die JavaScript-Eigenschaft window.opener Zugriff auf Ihre Seite erlangen. Eine bösartige Seite könnte dies nutzen, um Ihren ursprünglichen Tab auf eine Phishing-Seite umzuleiten – ein Angriff, der als Reverse Tabnabbing bekannt ist.
Um dies zu verhindern, fügen Sie rel="noopener noreferrer" hinzu:
<a href="https://example.com/" target="_blank" rel="noopener noreferrer">
External site
</a>noopener– setztwindow.openerim neuen Tab aufnull, sodass die Zielseite die Seite, die sie geöffnet hat, weder steuern noch referenzieren kann.noreferrer– bewirkt dasselbe wienoopenerund verhindert zusätzlich, dass der Browser denReferer-Header sendet, sodass die Zielseite nicht erfährt, von welcher Seite der Besucher kam.
Moderne Browser setzen noopener inzwischen automatisch für alle target="_blank"-Links voraus, es ist jedoch eine bewährte Praxis, rel explizit zu setzen, damit der Schutz auch in älteren Browsern greift und im Code sichtbar ist.
Das rel-Attribut
Dieses Attribut legt die Beziehung des aktuellen Dokuments zum verlinkten Dokument fest. Die Attributwerte können folgende sein:
alternate– eine alternative Version des Dokuments.author– Verweis auf den Autor des Dokuments oder Artikels.bookmark– ein dauerhafter Link, der als Lesezeichen verwendet werden kann.nofollow– verlinkt auf ein nicht empfohlenes Dokument (dies weist Suchmaschinen an, dass der Crawler diesem Link nicht folgen soll).noopener/noreferrer– Sicherheitswerte, die mittarget="_blank"verwendet werden (siehe oben).
Der nofollow-Wert
Wenn Sie einen nofollow-Link erstellen möchten, verwenden Sie rel="nofollow". Damit teilen Sie Suchmaschinen mit, dass Sie den Inhalt am anderen Ende des Links nicht unterstützen. Der nofollow-Attributwert wird in der Regel bei bezahlten Links und Werbung verwendet. Manchmal wird nofollow als Tag oder Attribut betrachtet, es handelt sich jedoch tatsächlich um einen Wert des rel-Attributs.
Beispiel des rel-Attributs mit dem Wert "nofollow":
Example of the "rel" attribute with the "nofollow" value:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
<p>This text is from <a href="https://www.lipsum.com/" rel="nofollow" target="_blank">Lorem Ipsum</a>.</p>
</body>
</html>Das download-Attribut
Das download-Attribut weist den Browser an, die verlinkte Ressource herunterzuladen, anstatt zu ihr zu navigieren. Es funktioniert für Ressourcen, die vom selben Ursprung stammen (sowie für blob:- und data:-URLs).
Wenn Sie dem Attribut einen Wert geben, wird dieser Wert zum vorgeschlagenen Dateinamen für die gespeicherte Datei, unabhängig vom Dateinamen auf dem Server. Wenn Sie es leer lassen, behält der Browser den ursprünglichen Dateinamen.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<!-- Saves the file using its original name -->
<a href="/files/report.pdf" download>Download the report</a>
<!-- Saves the same file as "annual-report.pdf" -->
<a href="/files/report.pdf" download="annual-report.pdf">
Download the annual report
</a>
</body>
</html>E-Mail- und Telefonlinks: mailto: und tel:
Neben regulären URLs kann das href-Attribut spezielle Schemata enthalten, die die E-Mail- oder Telefon-App des Besuchers öffnen, anstatt eine Webseite aufzurufen.
Ein mailto:-Link öffnet den Standard-E-Mail-Client mit der vorausgefüllten Adresse. Sie können auch einen Betreff und einen Text über Query-Parameter hinzufügen:
<a href="mailto:[email protected]">Email us</a>
<a href="mailto:[email protected]?subject=Hello&body=I%20have%20a%20question">
Email us about your question
</a>Ein tel:-Link fordert das Gerät auf, die Nummer anzurufen, was besonders auf Mobiltelefonen nützlich ist:
<a href="tel:+1234567890">Call us: +1 (234) 567-890</a>Verlinkung zu einem Abschnitt auf derselben Seite (Fragmente)
Um zu einem bestimmten Teil einer Seite zu springen, setzen Sie href auf ein Raute-Zeichen (#), gefolgt von der id des Zielelements. Dies wird als Fragment- oder Anker-Link bezeichnet.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<!-- The link -->
<a href="#section2">Go to Section 2</a>
<h2 id="section1">Section 1</h2>
<p>First section content...</p>
<!-- The target: its id matches the href without the # -->
<h2 id="section2">Section 2</h2>
<p>Second section content...</p>
</body>
</html>Ein Klick auf den Link scrollt die Seite zu dem Element, dessen id mit dem Wert nach dem # übereinstimmt. Sie können auch auf einen Abschnitt einer anderen Seite verlinken, indem Sie eine URL und ein Fragment kombinieren, zum Beispiel href="page.html#section2". Weitere Informationen zum Aufbau von Link-Adressen finden Sie unter HTML URL.
Das hreflang-Attribut
Das hreflang-Attribut gibt die Sprache des Dokuments an, auf das der Link verweist (zum Beispiel hreflang="es" für eine spanische Seite). Es ist rein informativ – es wird von Suchmaschinen und assistiver Technologie verwendet – und ändert die aktuelle Seite nicht. Dies unterscheidet sich vom globalen lang-Attribut, das die Sprache des Elements deklariert, auf dem es platziert ist.
<a href="https://es.example.com/" hreflang="es">Versión en español</a>Barrierefreiheit: aussagekräftigen Linktext schreiben
Benutzer von Screenreadern navigieren oft von Link zu Link und hören nur den Linktext ohne Kontext. Generischer Text wie "hier klicken" oder "mehr lesen" sagt ihnen nichts über das Ziel aus. Stellen Sie immer sicher, dass der Linktext beschreibt, wohin der Link führt.
<!-- Avoid -->
<p>To read our pricing, <a href="/pricing">click here</a>.</p>
<!-- Better: the link text is meaningful on its own -->
<p>Read about <a href="/pricing">our pricing plans</a>.</p>Weitere Informationen zu Best Practices beim Verlinken finden Sie unter HTML Links.
Attribute
| Attribut | Wert | Beschreibung |
|---|---|---|
| charset | char_encoding | Definiert den Zeichensatz eines verlinkten Dokuments. Nicht in HTML5 verwendet. |
| coords | coordinates | Definiert die Koordinaten eines Links. Nicht in HTML5 verwendet. |
| download | filename | Legt fest, dass das Ziel beim Klick auf einen Hyperlink heruntergeladen wird. |
| href | URL | Definiert die URL des verlinkten Dokuments. |
| hreflang | language_code | Definiert die Sprache des verlinkten Dokuments. |
| media | media_query | Definiert, für welches Medium/Gerät das verlinkte Dokument optimiert ist. |
| name | section_name | Definiert den Namen eines Ankers. Nicht in HTML5 verwendet. |
| ping | list_of_URLs | Definiert eine durch Leerzeichen getrennte Liste von URLs, an die beim Folgen des Links POST-Anfragen mit dem Body ping vom Browser gesendet werden (im Hintergrund). Wird typischerweise für das Tracking verwendet. |
| rel | alternate author bookmark external help license next nofollow noreferrer noopener prev search tag | Definiert die Beziehung zwischen dem Zielobjekt und dem verlinkten Dokument. |
| rev | text | Definiert einen umgekehrten Link, die inverse Beziehung des "rel"-Attributs. Nicht in HTML5 verwendet. |
| shape | default rect circle poly | Definiert die Form des Hyperlinks. Nicht in HTML5 verwendet. |
| target | _blank _parent _self _top | Definiert, wo das verlinkte Dokument geöffnet wird. |
| type | media_type | Definiert den Medientyp in Form eines MIME-Typs für die verlinkte URL. |
Der <a>-Tag unterstützt auch die globalen Attribute und die Ereignis-Attribute.
So gestalten Sie einen HTML <a>-Tag
Links haben vier Zustände, die Sie mit CSS-Pseudoklassen separat gestalten können. Damit sie korrekt funktionieren, müssen sie in dieser Reihenfolge geschrieben werden: :link, :visited, :hover, :active (als Eselsbrücke: "LoVe HAte").
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
a:link { color: #1a73e8; } /* unvisited link */
a:visited { color: #6f42c1; } /* visited link */
a:hover { text-decoration: none; } /* on mouse-over */
a:active { color: #d93025; } /* on click */
</style>
</head>
<body>
<a href="https://www.w3docs.com/">W3docs.com</a>
</body>
</html>Sie können auch die Unterstreichung entfernen oder die Farbe der Links ändern mit CSS.