Wat maakt het World Wide Web zo krachtig? Het antwoord is eenvoudig: hyperlinks. Zonder links zou het internet simpelweg een verzameling losse, geïsoleerde documenten zijn. Dankzij links kunnen we met één muisklik van de ene pagina naar de andere springen, naar een externe website navigeren of direct afdalen naar een specifiek onderdeel op dezelfde pagina.
In deze les leer je hoe je links opbouwt met het <a> element, ontdek je het cruciale verschil tussen absolute en relatieve paden, en maak je kennis met de attributen target en id.
<a>)Om een hyperlink te maken in HTML gebruiken we het anker-element: <a> (van het Engelse anchor).
Een <a> tag heeft altijd het href attribuut (Hypertext Reference) nodig. Dit attribuut vertelt de browser naar welk webadres of bestand de gebruiker gestuurd moet worden als hij op de link klikt.
<a href="https://www.wikipedia.org">Bezoek Wikipedia</a>
De tekst tussen <a href="..."> en </a> is de klikbare tekst die de gebruiker op het scherm ziet.
Klik <a href="portfolio.html">hier</a> om mijn werk te zien. (Niet toegankelijk voor schermlezers, geeft geen context).Bekijk mijn <a href="portfolio.html">grafische portfolio</a>. (Helder, beschrijvend en professioneel).Wanneer je een URL invult in het href-attribuut, moet je kiezen tussen een absoluut pad of een relatief pad.
Een absoluut pad bevat het volledige internetadres, inclusief het protocol (https://). Je gebruikt absolute paden wanneer je verwijst naar een pagina of bestand op een andere website die niet op jouw server staat.
<!-- Absoluut pad naar een externe webpagina -->
<a href="https://www.adobe.com">Bezoek de website van Adobe</a>
Een relatief pad verwijst naar een bestand binnen jouw eigen projectmap. De locatie wordt berekend ten opzichte van het bestand waarin je op dat moment werkt.
<!-- Verwijzen naar een bestand in de hoofdmap (root) -->
<a href="index.html">Terug naar Home</a>
<!-- Verwijzen naar een bestand in een submap -->
<a href="pages/contact.html">Neem contact op</a>
<!-- Eén map omhoog gaan (../) en dan een submap in gaan -->
<a href="../images/logo.png">Bekijk het logo</a>
naam.html: Zoek het bestand in dezelfde map.mapnaam/naam.html: Ga de map mapnaam/ in en zoek daar het bestand.../naam.html: Ga één map hoger (uit de huidige map) en zoek daar het bestand.Tip: Gebruik voor je eigen webpagina's altijd relatieve paden. Als je later je hele projectmap verplaatst of uploadt naar een webserver, blijven al je interne links gewoon werken!
target)Standaard opent de browser een geklikte link in hetzelfde tabblad. Dit is prima voor navigatie binnen je eigen website. Maar als je linken gebruikt naar een externe website, wil je vaak niet dat de bezoeker jouw website verlaat.
Met het attribuut target="_blank" dwing je de browser om de link in een nieuw tabblad te openen.
<!-- De externe link opent in een nieuw tabblad -->
<a href="https://www.pinterest.com" target="_blank">
Bekijk mijn moodboards op Pinterest
</a>
Opgelet: Gebruik target="_blank" hoofdzakelijk voor externe links (andere websites). Als je dit gebruikt voor je eigen interne pagina's, raakt de bezoeker snel het overzicht kwijt door een overvloed aan openstaande tabbladen.
id Om elementen op je pagina te kunnen identificeren (voor links, CSS-styling of JavaScript), gebruiken we de attributen id en class.
id attribuut (Uniek)Het id attribuut geeft een unieke naam aan precies één element op de pagina. Geen twee elementen op dezelfde pagina mogen hetzelfde id hebben!
Met een id kun je zogenaamde ankerlinks (jump links) maken. Hiermee springt de bezoeker direct naar een specifieke sectie op dezelfde pagina.
<!-- Stap 1: Geef de doel-sectie een uniek ID -->
<h2 id="contact-sectie">Contactgegevens</h2>
<!-- Stap 2: Maak een link met een hekje (#) voor het ID -->
<a href="#contact-sectie">Ga direct naar de contactgegevens</a>
Hieronder zie je hoe we navigatie, relatieve/absolute paden, ankerlinks en class/id attributen combineren in een overzichtelijke HTML-structuur:
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<title>Mijn Portfolio - Navigatie Demo</title>
</head>
<body>
<!-- Hoofdnavigatie van de website -->
<header>
<nav>
<ul>
<li><a href="index.html" >Home</a></li>
<li><a href="pages/projecten.html" >Projecten</a></li>
<li><a href="#diensten" >Onze Diensten</a></li>
<li><a href="https://www.instagram.com" target="_blank">Instagram</a></li>
</ul>
</nav>
</header>
<main>
<h1>Welkom op mijn portfolio</h1>
<p>Blader door mijn werk of spring direct naar onze diensten.</p>
<!-- Ankerpunt lager op de pagina -->
<section id="diensten">
<h2>Onze Diensten</h2>
<p>Wij verzorgen branding, webdesign en drukwerkvoorbereiding.</p>
<!-- Relatieve link naar een afbeelding -->
<a href="images/prijslijst.pdf" class="btn-download">Download de Prijslijst (PDF)</a>
</section>
</main>
</body>
</html>
<a> (Anker-element): Wordt gebruikt om hyperlinks te maken met het verplichte href attribuut.https://...), voornamelijk gebruikt voor externe websites.pages/about.html of ../index.html).target="_blank": Opent een link in een nieuw tabblad (ideaal voor externe links).id attribuut: Uniek voor één element op de pagina. Wordt gebruikt voor ankerlinks (href="#mijn-id") en unieke identificatie.