HTML <a> Tag
- Previous page <!DOCTYPE>
- Next page <abbr>
Definitie en gebruik
<a>
De tag definieert een hyperlink, die wordt gebruikt om van een pagina naar een andere pagina te linken.
<a>
De belangrijkste eigenschap van het element is href-eigenschaphet doel van de link aangeeft.
Standaard worden links in alle browsers weergegeven als volgt:
- De link die je nog niet hebt bezocht is met een onderstreping en blauw
- De link die je eerder hebt bezocht is met een onderstreping en paars
- De link die je nu bezoekt is met een onderstreping en rood
Tip:Je hebt mogelijk al opgemerkt dat de links op de CodeW3C.com-website zeer verschillend uitzien van de standaard linkuitzicht. Je kunt CSS pseudo-classes Voeg complexe en diverse stijlen toe aan teksthyperlinks.
Zie ook:
HTML handleiding:HTML links
HTML DOM referentiehandleiding:Anchor object
CSS handleiding:Linkstijl
Terminologie uitleg
Voorbeeld
Voorbeeld 1
Maak een link naar codew3c.com:
<a href="https://www.codew3c.com">Bezoek codew3c.com!</a>
Voorbeeld 2
Hoe je een afbeelding als link te gebruiken:
<a href="https://www.codew3c.com"> <img border="0" alt="W3School" src="w3logo.png" width="400" height="225"> </a>
Voorbeeld 3
Hoe je een link opent in een nieuw browservenster:
<a href="https://www.codew3c.com" target="_blank">Bezoek codew3c.com!</a>
Voorbeeld 4
Hoe je een e-mailadres te linken:
<a href="mailto:someone@example.com">Stuur een e-mail</a>
Voorbeeld 5
Hoe je een telefoonnummer te linken:
<a href="tel:+8613888888888">+86 138 8888 8888</a>
Voorbeeld 6
Hoe je naar een ander deel van dezelfde pagina kunt linken:
<a href="#section2">Ga naar het tweede hoofdstuk</a>
Voorbeeld 7
Hoe je naar JavaScript kunt linken:
<a href="javascript:alert('Hello World!');">JavaScript uitvoeren</a>
Tips en opmerkingen
Tip:Als de <a>-tag geen href-attribuut heeft, is het slechts een placeholder voor een hyperlink.
Tip:De gelinkte pagina wordt meestal weergegeven in het huidige browservenster, tenzij je een ander doel hebt ingesteld (met het target-attribuut).
Tip:Gebruik CSS-instellingen om de stijl van de link in te stellen:CSS links en CSS buttons.
Eigenschap
Eigenschap | Waarde | Beschrijving |
---|---|---|
Download | Bestandsnaam | Stelt het doel vast dat wordt gedownload wanneer de gebruiker op de hyperlink klikt. |
Href | URL | Stelt de URL van de pagina vast waarnaar de link verwijst. |
Hreflang | Taalcode | Stelt het taalcode van het gelinkte document vast. |
Media | Media query | Stelt vast voor welke media of apparaten het gelinkte document is geoptimaliseerd. |
Ping | URL-lijst | Stelt een lijst van URL's vast, gescheiden door spaties, die worden verzonden wanneer de link wordt bezocht. Dit wordt meestal gebruikt voor het volgen. |
Referrer policy |
|
Stelt de referentie-informatie vast die samen met de link moet worden verzonden. |
Rel |
|
Stelt het verband tussen het huidige document en het gelinkte document vast. |
Doel |
|
Stelt vast waar het gelinkte document geopend moet worden. |
type | Media Type | Stelt het mediatype van het gelinkte document vast. |
Globale attributen
<a>
De tag ondersteunt ook Globale attributen in HTML.
evenement-attributen
<a>
De tag ondersteunt ook Evenement-attributen in HTML.
Standaard CSS-instellingen
De meeste browsers zullen de volgende standaardwaarden weergeven: <a>
Element:
a:link, a:visited { color: (internal value); text-decoration: underline; cursor: auto; {} a:link:active, a:visited:active { color: (internal value); {}
Browser support
Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|
Chrome | Edge | Firefox | Safari | Opera |
Support | Support | Support | Support | Support |
- Previous page <!DOCTYPE>
- Next page <abbr>