Links

De H in HTML staat voor hypertext: tekst die naar andere tekst linkt. Eén element, a, maakt elke link op het web.

Het ankerelement

Een link maak je met het element <a>, kort voor anchor (anker). Het attribuut href bevat het adres waar je heen gaat, en de inhoud is de tekst waarop mensen klikken. In <a href="https://developer.mozilla.org/">MDN Web Docs</a> staan de woorden MDN Web Docs onderstreept, en activeren ervan laadt dat adres. Links werken met een muis, een vinger of het toetsenbord: druk op Tab om van link naar link te gaan en op Enter om er een te volgen. Zonder href is een <a> alleen een plaatshouder en niet met Tab te bereiken.

Absolute en relatieve adressen

Een absolute URL bevat alles: het schema (https:), het domein en het pad, bijvoorbeeld https://example.com/menu/bread.html. Gebruik hem voor links naar andere sites. Een relatieve URL laat de delen weg die gelijk zijn aan de huidige pagina. Op een pagina op https://example.com/menu/index.html betekent de link bread.html het bestand in dezelfde map, ../about.html één map omhoog en /contact.html begint bij de hoofdmap van de site. Relatieve links blijven werken als de hele site naar een nieuw domein verhuist.

<a href="https://www.w3.org/">W3C</a>          <!-- another site -->
<a href="bread.html">Bread</a>                <!-- same folder -->
<a href="../about.html">About us</a>          <!-- one folder up -->
<a href="#hours">Opening hours</a>           <!-- same page -->
<a href="mailto:hello@example.com">Email us</a>

<h2 id="hours">Opening hours</h2>

Links binnen dezelfde pagina

Geef een element een id, en een link waarvan de href een hekje gevolgd door die id is, springt er direct naartoe. <a href="#hours"> scrolt naar <h2 id="hours">. Een id moet uniek zijn binnen de pagina en mag geen spaties bevatten. Lange artikelen gebruiken dit voor een inhoudsopgave, en veel sites zetten bovenaan een skiplink (Skip to main content), zodat toetsenbordgebruikers niet op elke pagina door het hele menu hoeven te tabben.

E-mail, telefoon en downloads

Andere schema's openen andere programma's. mailto:hello@example.com opent een nieuwe e-mail in het mailprogramma van de bezoeker, en tel:+82212345678 biedt aan het nummer op een telefoon te bellen. Het attribuut download op een link vraagt de browser het bestand op te slaan in plaats van te openen. Deze links zijn handig, maar zeg in de linktekst wat ze doen, want mensen verwachten niet dat er een mailprogramma opent.

Nieuwe tabbladen en goede linktekst

target="_blank" opent de link in een nieuw tabblad. Gebruik het spaarzaam: het neemt de controle van de bezoeker weg, en de knop Terug brengt hem niet meer terug. Gebruik je het toch, vermeld het dan in de linktekst, bijvoorbeeld (opent in een nieuw tabblad). Het belangrijkste is de linktekst zelf. Gebruikers van schermlezers roepen vaak een lijst op van elke link op een pagina, en een lijst van tien regels die allemaal klik hier of lees meer zeggen, vertelt hun niets. Schrijf tekst die ook zonder context klopt: Download de dienstregeling van 2026, niet klik hier.

Browsers onderstrepen links en kleuren ze standaard blauw, en tonen bezochte links paars. Je kunt links met CSS opnieuw vormgeven, maar houd iets anders dan alleen kleur, zoals de onderstreping, zodat mensen die de kleuren niet kunnen onderscheiden toch zien welke woorden links zijn. Als een link toetsenbordfocus heeft, tekenen browsers een focusrand eromheen; haal die rand nooit weg zonder er een duidelijke vervanging voor in de plaats te zetten.