HTML-<a>-Tag
Das <a>-Tag wird verwendet, um Hyperlinks zu anderen Seiten, Dateien, Orten innerhalb derselben Seite, E-Mail-Adressen oder einer anderen URL einzufügen. Sie können sowohl Text als auch Bilder als Hyperlink verwenden.
Im Browser unterscheiden sich Hyperlinks in ihrer Darstellung und Farbe. Standardmäßig erscheinen HTML-Links als blau unterstrichener Text. Wenn Sie mit der Maus über einen Link fahren, wird er rot (aktiver Link). Bereits angeklickte Links (besuchte Links) werden lila.
Sie können die Farbe von Links ändern, die Unterstreichung entfernen oder die Farbe der Links ändern, indem Sie CSS-Stile verwenden.
TIP
Die Attribute "download", "media", "hreflang", "target", "rel" und "type" sind nur vorhanden, wenn das Attribut "href" vorhanden ist.
TIP
Bis Sie ein anderes Ziel definieren, wird eine verlinkte Seite im aktuellen Browserfenster angezeigt.
Syntax
Das <a>-Tag kommt paarweise vor. Der Inhalt wird zwischen dem öffnenden (<a>) und dem schließenden (</a>) Tag geschrieben.
Attribute
Das <a>-Tag kann Attribute haben, die zusätzliche Informationen darüber bereitstellen.
Das href-Attribut
Das href ist ein erforderliches Attribut des <a>-Tags. Es definiert einen Link auf der Webseite oder einen Ort auf derselben Webseite, zu dem der Benutzer nach dem Klicken auf den Link navigiert. Der Wert des Attributs ist entweder ein Anker oder eine URL. Der Anker verweist auf die ID (eindeutige Kennung) des referenzierten Teils der Webseite. Vor die ID setzen wir ein Hash-Zeichen (#).
So sieht es aus:
HTML <a>-Tag
<a href="url">the link text</a>
<a href="#a">the link text</a>Beispiel für das HTML <a>-Tag mit dem href-Attribut:
Beispiel für das 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 zusammen mit dem <img>-Tag können Sie ein verlinktes Bild erstellen.
Beispiel für das HTML <a>-Tag zum Erstellen eines verlinkten Bildes:
Beispiel für das HTML <a>-Tag 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 wird verwendet, um dem Browser mitzuteilen, wo das Dokument geöffnet werden soll (standardmäßig werden Links im aktuellen Fenster geöffnet).
Das target-Attribut kann die folgenden Werte haben:
- _blank– öffnet den Link in einem neuen Fenster.
- _self-opens the link in a current window.
- _parent - öffnet das Dokument im übergeordneten Frame.
- _top - öffnet das Dokument in voller Fensterbreite.
Beispiel für das HTML <a>-Tag mit dem target-Attribut:
Beispiel für das HTML <a>-Tag mit einem target-Attribut|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
Das rel-Attribut
Dieses Attribut legt die Beziehung des aktuellen Dokuments zum verlinkten Dokument fest. Die Attributwerte können wie folgt lauten:
- alternate - eine alternative Version des Dokuments.
- author- Verweis auf den Autor des Dokuments oder Artikels.
- bookmark - ein permanenter Link, der für Lesezeichen verwendet werden kann.
- nofollow - Links zu einem nicht empfohlenen Dokument (dies weist Suchmaschinen an, dass der Crawler diesem Link nicht folgen soll).
No-Follow-Wert
Wenn Sie einen nofollow-Link erstellen möchten, verwenden Sie rel="nofollow". Dies informiert Suchmaschinen darüber, dass Sie den Inhalt am anderen Ende des Links nicht unterstützen. Der Attributwert nofollow wird im Allgemeinen bei bezahlten Links und Werbung verwendet. Manchmal wird unfollow als Tag oder Attribut betrachtet, tatsächlich ist es jedoch ein Wert des rel-Attributs.
Beispiel für das rel-Attribut mit dem Wert "nofollow":
Beispiel für das Attribut "rel" mit dem Wert "nofollow":
<!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>Attribute
| Attribut | Wert | Beschreibung |
|---|---|---|
| charset | char_encoding | Definiert den Zeichensatz eines verlinkten Dokuments. Wird in HTML5 nicht verwendet. |
| coords | coordinates | Definiert die Koordinaten eines Links. Wird in HTML5 nicht verwendet. |
| download | filename | Definiert, dass das Ziel beim Klicken 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 welche Medien/Geräte das verlinkte Dokument optimiert ist. |
| name | section_name | Definiert den Namen eines Ankers. Wird in HTML5 nicht verwendet. |
| ping | list_of_URLs | Definiert eine durch Leerzeichen getrennte Liste von URLs, an die beim Folgen des Links vom Browser im Hintergrund POST-Anfragen mit dem Body ping gesendet werden. Typischerweise für 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. Wird in HTML5 nicht verwendet. |
| shape | default rect circle poly | Definiert die Form des Hyperlinks. Wird in HTML5 nicht verwendet. |
| target | _blank _parent _self _top | Definiert, wo das verlinkte Dokument geöffnet werden soll. |
| type | media_type | Definiert den Medientyp in Form eines MIME-Typs für die verlinkte URL. |
Das <a>-Tag unterstützt außerdem die Global Attributes und die Event Attributes.
So stylen Sie ein HTML <a>-Tag
{
"tag_name": "a"
}Practice
What are the features and uses of the HTML <a> tag?