Das Tag <a> wird verwendet, um Hyperlinks zu anderen Seiten oder Dateien, Speicherstellen innerhalb derselben Seite, E-Mail-Adressen oder anderen URLs einzufügen. Sie können sowohl Text als auch Bild als Hyperlink verwenden.
Im Browser unterscheiden sich die Hyperlinks durch ihre Art und Farbe. Voreingestellt werden die HTML-Links als unterstrichener Text der blauen Farbe dargestellt. Bei der Cursorbewegung auf dem Link wird er rot (aktiver Link). Die besuchten Links werden violett.
Durch die CSS-Stile kann man die Farbe von Links ändern und das Unterstreichen entfernen․
Syntax
Das Tag <a> wird gepaart verwendet, das Endtag </a> ist obligatorisch.
Die Attribute
Das Tag <a> kann Attribute haben, die zusätzliche Informationen darüber liefern.
Das Attribut href
Ein notwendiges Attribut des Tages <a> ist href. Es gibt einen Link auf der Webseite oder eine Stelle auf der gleichen Webseite an, an der der Benutzer nach dem Klicken auf den Link navigiert. Der Wert des Attributs kann entweder eine URL oder ein Anker sein. Der Anker zeigt auf die ID (eindeutiger Bezeichner) des verwiesenen Teils der Webseite. Vor der ID steht ein Hash (#).
Es wird so aussehen:
<a href="url">der Linktext</a>
<a href="#a">der Linktext</a>Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
</head>
<body>
<a href="https://de.w3docs.com/">W3docs.com</a>
</body>
</html>Ergebnis
Nach dem Klick auf den Link werden Sie auf die Hompage unserer Webseite weitergeleitet.
Das Attribut target
Das Attribut target zeigt dem Browser, in welchem Fenster das Dokument geöffnet werden muss (voreingestellt werden die Links im aktuellen Fenster geöffnet).
Das Attribut target kann folgende Werte haben:
- _blank - eröffnet den Link im neuen Fenster.
- _self - eröffnet den Link im aktuellen Fenster.
- _parent - eröffnet das Dokument im Parentframe.
- _top - annuliert alle Frames und wird im Browserfenster geöffnet.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
</head>
<body>
<a href="https://de.w3docs.com/" target="_blank">W3docs.com</a>
</body>
</html>Ergebnis
Das Attribut rel
Dieses Attribut stellt die Beziehungen des laufenden Dokumentes zum Link fest. Die möglichen Werte des Attributes sind folgende:
- alternate - alternative Version des Dokumentes.
- author - Hinweis auf den Autor des Dokuments oder Artikels
- bookmark - permanenter Link, der für die Lesezeichen verwendet wird.
- nofollow - verlinkt zu einem nicht indossierten Dokument (das weist die Suchmaschinen an, dass der Crawler diesem Link folgen soll).
Attribute
| Attribut | Wert | Beschreibung |
|---|---|---|
| charset | char_encoding | Es definiert den Zeichensatz eines verlinkten Dokuments. Es wird in HTML5 nicht verwendet. |
| coords | coordinates | Es definiert die Koordinaten eines Links. Es wird in HTML5 nicht verwendet. |
| download | filename | Es definiert, dass das Ziel beim Anklicken eines Hyperlinks heruntergeladen wird. |
| href | URL | Es definiert die URL des verlinkten Dokuments. |
| hreflang | language_code | Es definiert die Sprache des verlinkten Dokuments. |
| media | media_query | Es definiert, für welches Media/Gerät das verlinkte Dokument optimiert ist. |
| name | section_name | Es definiert den Namen von Anchor.
Es wird in HTML5 nicht verwendet. |
| ping | list_of_URLs | Definiert eine durch Leerzeichen getrennte Liste von URLs, an die, wenn dem Link gefolgt wird, Post-Requests mit dem Body-Ping vom Browser (im Hintergrund) gesendet werden. Wird typischerweise für Tracking verwendet. |
| rel | alternate author bookmark external help license next nofollow noreferrer noopener prev search tag |
Es definiert die Beziehung zwischen dem Zielobjekt und dem verlinkten Dokument. |
| rev | text | Es definiert einen Reverse-Link, die umgekehrte Beziehung des Attributs rel.
Es wird in HTML5 nicht verwendet. |
| shape | default rect circle poly |
Es definiert die Form des Hyperlinks. Es wird in HTML5 nicht verwendet. |
| target | _blank _parent _self _top |
Es definiert, wo das verlinkte Dokument geöffnet werden soll. |
| type | media_type | Es definiert den Mediatyp in Form eines MIME-Types für die verlinkte URL. |
Das Tag <a> unterschtützt auch Globale Attribute und Globale Eventhandler.
Browser-Support
|
|
|
|
|
|---|---|---|---|---|
| ✓ | ✓ | ✓ | ✓ | ✓ |
Übe dein Wissen
