HTML- links
Links zijn te vinden in bijna alle webpagina's. Met links kunnen gebruikers van pagina naar pagina klikken.
HTML-koppelingen - Hyperlinks
HTML-links zijn hyperlinks.
U kunt op een link klikken en naar een ander document springen.
Wanneer u de muis over een link beweegt, verandert de muispijl in een handje.
Let op: Een link hoeft geen tekst te zijn. Een link kan een afbeelding of een ander HTML-element zijn!
HTML-koppelingen - Syntaxis
De HTML <a>-tag definieert een hyperlink. Het heeft de volgende syntaxis:
<a href="url">link text</a>
Het belangrijkste attribuut van het <a> element is het
hrefattribuut, dat de bestemming van de link aangeeft.
De linktekst is het deel dat zichtbaar is voor de lezer.
Als u op de linktekst klikt, wordt de lezer naar het opgegeven URL-adres gestuurd.
Voorbeeld
Dit voorbeeld laat zien hoe u een link naar W3Schools.com maakt:
<a href="https://www.w3schools.com/">Visit W3Schools.com!</a>
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
Tip: Links kunnen natuurlijk gestyled worden met CSS, voor een andere look!
HTML-links - Het doelkenmerk
Standaard wordt de gekoppelde pagina weergegeven in het huidige browservenster. Om dit te wijzigen, moet u een ander doel voor de link specificeren.
Het targetkenmerk geeft aan waar het gekoppelde document moet worden geopend.
Het targetkenmerk kan een van de volgende waarden hebben:
_self- Standaard. Opent het document in hetzelfde venster/tabblad als waarop is geklikt_blank- Opent het document in een nieuw venster of tabblad_parent- Opent het document in het bovenliggende frame_top- Opent het document in de volledige hoofdtekst van het venster
Voorbeeld
Gebruik target="_blank" om het gekoppelde document in een nieuw browservenster of tabblad te openen:
<a href="https://www.w3schools.com/"
target="_blank">Visit W3Schools!</a>
Absolute URL's versus relatieve URL's
Beide bovenstaande voorbeelden gebruiken een absolute URL (een volledig webadres) in het hrefattribuut.
Een lokale link (een link naar een pagina binnen dezelfde website) wordt gespecificeerd met een relatieve URL (zonder het "https://www" gedeelte):
Voorbeeld
<h2>Absolute URLs</h2>
<p><a href="https://www.w3.org/">W3C</a></p>
<p><a href="https://www.google.com/">Google</a></p>
<h2>Relative
URLs</h2>
<p><a href="html_images.asp">HTML Images</a></p>
<p><a href="/css/default.asp">CSS
Tutorial</a></p>
HTML-links - Gebruik een afbeelding als een link
Om een afbeelding als link te gebruiken, plaats je de <img>
tag in de <a>tag:
Voorbeeld
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>
Link naar een e-mailadres
Gebruik
mailto:binnen het
hrefattribuut om een link te maken die het e-mailprogramma van de gebruiker opent (zodat ze een nieuwe e-mail kunnen sturen):
Voorbeeld
<a href="mailto:[email protected]">Send email</a>
Knop als link
Om een HTML-knop als link te gebruiken, moet u wat JavaScript-code toevoegen.
Met JavaScript kun je specificeren wat er gebeurt bij bepaalde evenementen, zoals een klik op een knop:
Voorbeeld
<button
onclick="document.location='default.asp'">HTML Tutorial</button>
Tip: Leer meer over JavaScript in onze JavaScript-tutorial .
Titels koppelen
Het titleattribuut specificeert extra informatie over een element. De informatie wordt meestal weergegeven als tooltip-tekst wanneer de muis over het element beweegt.
Voorbeeld
<a href="https://www.w3schools.com/html/" title="Go to W3Schools HTML
section">Visit our HTML Tutorial</a>
Meer over absolute URL's en relatieve URL's
Voorbeeld
Gebruik een volledige URL om naar een webpagina te linken:
<a href="https://www.w3schools.com/html/default.asp">HTML tutorial</a>
Voorbeeld
Link naar een pagina in de html-map op de huidige website:
<a href="/html/default.asp">HTML tutorial</a>
Voorbeeld
Link naar een pagina in dezelfde map als de huidige pagina:
<a href="default.asp">HTML tutorial</a>
U kunt meer lezen over bestandspaden in het hoofdstuk HTML-bestandspaden .
Hoofdstuk samenvatting
- Gebruik het
<a>element om een link te definiëren - Gebruik het
hrefattribuut om het linkadres te definiëren - Gebruik het
targetattribuut om te definiëren waar het gekoppelde document moet worden geopend - Gebruik het
<img>element (in<a>) om een afbeelding als link te gebruiken - Gebruik het
mailto:schema binnen hethrefattribuut om een link te maken die het e-mailprogramma van de gebruiker opent
HTML-linktags
| Tag | Description |
|---|---|
| <a> | Defines a hyperlink |
Bezoek onze HTML Tag Reference voor een volledige lijst van alle beschikbare HTML-tags .