HTML <a> -tag
Voorbeeld
Maak een link naar W3Schools.com:
<a href="https://www.w3schools.com">Visit W3Schools.com!</a>
Meer "Probeer het zelf" voorbeelden hieronder.
Definitie en gebruik
De <a>tag definieert een hyperlink, die wordt gebruikt om van de ene pagina naar de andere te linken.
Het belangrijkste attribuut van het <a>element is het
hrefattribuut, dat de bestemming van de link aangeeft.
Standaard worden links als volgt weergegeven in alle browsers:
- Een niet-bezochte link is onderstreept en blauw
- Een bezochte link is onderstreept en paars
- Een actieve link is onderstreept en rood
Tips en opmerkingen
Tip: Als de <a>tag geen
hrefattribuut heeft, is het slechts een tijdelijke aanduiding voor een hyperlink.
Tip: Een gekoppelde pagina wordt normaal gesproken weergegeven in het huidige browservenster, tenzij u een ander doel opgeeft.
Tip: gebruik CSS om links op te maken: CSS-links en CSS-knoppen .
Browserondersteuning
| Element | |||||
|---|---|---|---|---|---|
| <a> | Yes | Yes | Yes | Yes | Yes |
attributen
| Attribute | Value | Description |
|---|---|---|
| download | filename | Specifies that the target will be downloaded when a user clicks on the hyperlink |
| href | URL | Specifies the URL of the page the link goes to |
| hreflang | language_code | Specifies the language of the linked document |
| media | media_query | Specifies what media/device the linked document is optimized for |
| ping | list_of_URLs | Specifies a space-separated list of URLs to which, when the link is followed, post requests with the body ping will be sent by the browser (in the background). Typically used for tracking. |
| referrerpolicy | no-referrer no-referrer-when-downgrade origin origin-when-cross-origin same-origin strict-origin-when-cross-origin unsafe-url |
Specifies which referrer information to send with the link |
| rel | alternate author bookmark external help license next nofollow noreferrer noopener prev search tag |
Specifies the relationship between the current document and the linked document |
| target | _blank _parent _self _top |
Specifies where to open the linked document |
| type | media_type | Specifies the media type of the linked document |
Algemene kenmerken
De <a>tag ondersteunt ook de Global Attributes in HTML .
Gebeurteniskenmerken
De <a>tag ondersteunt ook de Event Attributes in HTML .
Meer voorbeelden
Voorbeeld
Een afbeelding als link gebruiken:
<a href="https://www.w3schools.com">
<img border="0" alt="W3Schools"
src="logo_w3s.gif" width="100" height="100">
</a>
Voorbeeld
Een link openen in een nieuw browservenster:
<a href="https://www.w3schools.com" target="_blank">Visit W3Schools.com!</a>
Voorbeeld
Hoe link je naar een telefoonnummer:
<a href="tel:+4733378901">+47 333 78 901</a>
Voorbeeld
Hoe te linken naar een andere sectie op dezelfde pagina:
<a href="#section2">Go to Section 2</a>
Voorbeeld
Hoe te linken naar een JavaScript:
<a href="javascript:alert('Hello World!');">Execute JavaScript</a>
Gerelateerde pagina's
HTML-zelfstudie: HTML-links
HTML DOM-referentie: Ankerobject
CSS-zelfstudie: Links opmaken
Standaard CSS-instellingen
De meeste browsers geven het <a>element weer met de volgende standaardwaarden:
a:link, a:visited {
color: (internal value);
text-decoration: underline;
cursor: auto;
}
a:link:active, a:visited:active {
color: (internal value);
}