Hyperlinks zijn ingebedde verwijzingen die een naadloze navigatie mogelijk maken tussen documenten, websites en verschillende onderdelen binnen een pagina.
Wat is een hyperlink?
Een hyperlink, vaak kortweg link genoemd, is een verwijzing in een digitaal document waarmee gebruikers van de ene locatie naar de andere kunnen navigeren binnen hetzelfde document, tussen verschillende documenten of naar volledig andere websites. Deze verwijzing is meestal ingebed in tekst of een afbeelding en geeft, wanneer erop geklikt wordt, de browser of applicatie de opdracht om de opgegeven bestemming te laden. Hyperlinks zijn een essentieel onderdeel van hypertext, het systeem dat niet-lineaire navigatie door informatie op het internet mogelijk maakt.
Link versus hyperlink
De termen "link" en "hyperlink" worden vaak door elkaar gebruikt, maar er bestaat een subtiel onderscheid tussen de twee.
Een "link" is een brede term die over het algemeen verwijst naar elk element in een document of webpagina dat verbinding maakt met een andere locatie, wat zowel tekst als afbeeldingen kan bevatten. Aan de andere kant verwijst een "hyperlink" specifiek naar een link die is ingebed in hypertekst, wat tekst is die wordt weergegeven op een computer of digitaal apparaat met hyperlinks die toegang bieden tot andere tekst of informatie.
Hoewel alle hyperlinks links zijn, worden niet alle links als hyperlinks beschouwd. Een URL die in een gewoon tekstdocument is getypt, is bijvoorbeeld een link, maar pas een hyperlink als deze klikbaar wordt binnen een hypertextsysteem. In essentie is een hyperlink een specifiekere vorm van een link, ontworpen om eenvoudige en interactieve navigatie binnen en tussen digitale documenten mogelijk te maken.
Wat is het doel van hyperlinks?
Het primaire doel van hyperlinks is om eenvoudige en intuïtieve navigatie tussen verschillende stukken digitale content te vergemakkelijken, of dit nu binnen hetzelfde document is of over meerdere documenten en websites. Hyperlinks stellen gebruikers in staat om snel toegang te krijgen tot gerelateerde informatie, wat de algehele gebruikerservaring verbetert door een naadloze manier te bieden om onderling verbonden bronnen te verkennen. Ze dienen als de basis van de structuur van het web, waardoor de niet-lineaire verkenning van content mogelijk is, wat centraal staat in de manier waarop het internet functioneert.
Naast het helpen bij navigatie, zijn hyperlinks cruciaal voor het organiseren en structureren van informatie op een manier die het toegankelijker en begrijpelijker maakt. Ze verbinden relevante onderwerpen, bieden aanvullende context en helpen gebruikers om dieper in specifieke interessegebieden te duiken zonder de primaire content te vervuilen.
Hyperlinks spelen ook een belangrijke rol bij SEO (zoekmachineoptimalisatie). Ze helpen zoekmachines bij het indexeren en rangschikken van content op basis van de relaties tussen gelinkte pagina's. Zo beïnvloeden ze de manier waarop informatie wordt ontdekt en geprioriteerd in zoekresultaten.
Een korte geschiedenis van hyperlinks
Het concept van hyperlinks vindt zijn oorsprong in de vroege visie van hypertekst, een systeem dat tekst op een niet-lineaire manier met elkaar verbindt. Dit idee werd voor het eerst verwoord door Vannevar Bush in zijn essay uit 1945 "As We May Think", waarin hij een machine genaamd "Memex" voor ogen had waarmee gebruikers tussen documenten konden navigeren met behulp van gekoppelde associaties.
De moderne hyperlink kreeg vorm in de jaren zestig met de ontwikkeling van het Hypertext Editing System (HES) en later met de meer geavanceerde systemen zoals Ted Nelson's Project Xanadu, dat tot doel had een wereldwijd netwerk van gekoppelde informatie te creëren.
De echte doorbraak kwam eind jaren 1980 en begin jaren 1990 met de uitvinding van het World Wide Web door Sir Tim Berners-Lee. Hij stelde het gebruik van hyperlinks voor als een fundamenteel onderdeel van de webarchitectuur, waardoor gebruikers op gemarkeerde tekst of afbeeldingen konden klikken om tussen gerelateerde webpagina's te navigeren. De eerste succesvolle implementatie van hyperlinks vond plaats met de release van Berners-Lee's webbrowser, WorldWideWeb, in 1991, waarmee gebruikers het snelgroeiende web konden verkennen via klikbare links.
Sindsdien zijn hyperlinks een alomtegenwoordig element van het internet geworden, dat vormgeeft aan de manier waarop informatie wereldwijd wordt verbonden, benaderd en gedeeld. Ze zijn geëvolueerd van simpele tekstgebaseerde links naar meer geavanceerde vormen, waaronder ingebedde multimedia en dynamische content, maar hun kerndoel van het koppelen van informatie blijft hetzelfde.
Hyperlink-typen
Hyperlinks komen in verschillende vormen voor, elk ontworpen om specifieke functies binnen digitale content te dienen. Het begrijpen van de verschillende typen hyperlinks is essentieel voor effectief webdesign en gebruikersnavigatie. Hieronder volgt een uitleg van de primaire typen hyperlinks die vaak worden gebruikt.
Tekst-hyperlinks
Teksthyperlinks zijn het meest voorkomende type. Hierbij leidt klikbare tekst (vaak onderstreept en in een andere kleur) gebruikers naar een andere locatie. Deze links zijn doorgaans ingebed in de body van een document of webpagina en worden gedefinieerd door de HTML- tag <a>, die de bestemmings-URL bevat. Wanneer erop geklikt wordt, kunnen gebruikers via een teksthyperlink naar een nieuwe pagina, een ander gedeelte van dezelfde pagina of een externe website navigeren.
Afbeeldingshyperlinks
Afbeeldingshyperlinks zijn klikbare afbeeldingen die op dezelfde manier functioneren als teksthyperlinks. In plaats van tekst wordt een afbeelding gebruikt als klikbaar element. Deze hyperlinks zijn handig voor het maken van visueel aantrekkelijke navigatie-elementen, zoals knoppen, banners of pictogrammen die naar andere pagina's of bronnen leiden wanneer erop wordt geklikt.
Inline-hyperlinks
Inline hyperlinks zijn ingebed in een tekstblok en worden gebruikt om te verwijzen naar gerelateerde content of om aanvullende informatie te verstrekken zonder de leesstroom te verstoren. Deze links worden vaak gebruikt in artikelen of documenten om lezers te leiden naar bronnen, definities of uitgebreide uitleg die relevant zijn voor de hoofdinhoud.
Ankerlinks (springlinks)
Anchor links, ook wel jump links genoemd, stellen gebruikers in staat om naar een specifiek deel van dezelfde webpagina te navigeren. Deze hyperlinks zijn met name handig voor lange webpagina's, zoals artikelen, FAQ's of websites van één pagina, waar ze snelle toegang tot verschillende secties mogelijk maken door direct naar de gewenste content te springen.
E-mail hyperlinks
E-mail hyperlinks openen de standaard e-mailclient van een gebruiker en maken een nieuw e-mailbericht wanneer erop wordt geklikt. Deze links worden opgemaakt met behulp van het mailto: URL-schema en worden vaak gebruikt op websites om gebruikers in staat te stellen eenvoudig contact met iemand op te nemen via e-mail. De link kan ook een vooraf gedefinieerde onderwerpregel of berichttekst bevatten.
Bestandshyperlinks
Bestandshyperlinks sturen gebruikers naar het downloaden van een specifiek bestand, zoals een PDF, afbeelding of document. Deze links worden vaak gebruikt in educatieve of professionele omgevingen waar gebruikers rechtstreeks vanaf een webpagina toegang moeten hebben tot downloadbare bronnen. Wanneer erop wordt geklikt, wordt het bestand doorgaans gedownload naar het apparaat van de gebruiker.
Externe hyperlinks
Externe hyperlinks leiden gebruikers naar een andere website of domein dan degene die ze op dat moment bezoeken. Deze links zijn essentieel voor het verwijzen naar bronnen, het begeleiden van gebruikers naar aanvullende bronnen of het leiden van verkeer naar partnersites. Ze openen meestal in een nieuw browsertabblad of -venster om de huidige browsersessie van de gebruiker te behouden.
Interne hyperlinks
Interne hyperlinks verbinden verschillende pagina's binnen dezelfde website of hetzelfde domein . Ze zijn cruciaal voor de navigatie op een website, omdat ze gebruikers helpen zich tussen verschillende secties of pagina's van een site te bewegen. Interne links spelen ook een belangrijke rol in SEO door de structuur van de site te verbeteren en zoekmachines te helpen de relatie tussen verschillende pagina's te begrijpen.
Hoe maak ik een hyperlink?
Het maken van een hyperlink is een eenvoudig proces waarbij u specifieke HTML-code aan uw tekst of afbeelding toevoegt om deze klikbaar te maken en gebruikers naar een andere locatie te leiden. Hieronder vindt u een stapsgewijze handleiding voor het maken van een basishyperlink:
1. Kies de tekst of afbeelding. Bepaal eerst welke tekst of afbeelding je wilt omzetten in een hyperlink. Dit kan een woord, zin, knop of afbeelding zijn waarop gebruikers kunnen klikken om naar een andere pagina of bron te navigeren.
2. Schrijf de HTML-code. Om een hyperlink te maken, gebruik je de HTML-tag <a> (ook wel bekend als de ankertag). De basissyntaxis ziet er als volgt uit:
<a href="URL">Link Text or Image</a>- . Deze tag definieert het begin van de hyperlink.
- <URL>. Het href-attribuut specificeert de bestemmings-URL, die een webpagina, bestand of een ander gedeelte van dezelfde pagina kan zijn. Vervang "URL" door het werkelijke webadres of bestandspad.
- Linktekst of afbeelding. Dit is de tekst of afbeelding die klikbaar zal zijn. Voor een tekst-hyperlink plaatst u hier gewoon de gewenste tekst. Voor een afbeelding-hyperlink plaatst u een HTML-afbeeldingstag ( ) binnen de ankertags.
3. Voorbeeld van een teksthyperlink. Om een teksthyperlink te maken die gebruikers naar "http://example.com" leidt wanneer ze op het woord "Example" klikken:
<a href="http://example.com">Example</a>4. Voorbeeld van een afbeeldingshyperlink. Om een afbeeldingshyperlink te maken met behulp van een afbeelding op "image.jpg" die linkt naar "http://example.com":
<a href="http://example.com">
<img src="image.jpg" alt="Description of Image">
</a>5. Opslaan en testen. Nadat je de HTML-code hebt geschreven, sla je de wijzigingen op en test je de hyperlink in een webbrowser. Klik op de link om te controleren of deze je naar de juiste bestemming leidt.
Extra kenmerken (optioneel)
- doel="_blank". Met dit kenmerk wordt de link geopend in een nieuw tabblad of venster.
- titel="Tooltip-tekst". Biedt aanvullende informatie over de link wanneer gebruikers eroverheen bewegen.
Om de link bijvoorbeeld in een nieuw tabblad te openen:
<a href="http://example.com" target="_blank">Example</a>Hoe u naar een andere pagina op dezelfde site kunt linken met behulp van relatieve URL's
Een koppeling naar een andere pagina op dezelfde site met behulp van relatieve URL's is een efficiënte manier om interne hyperlinks te maken zonder het volledige webadres te hoeven opgeven. Een relatieve URL verwijst naar een bestand of locatie binnen hetzelfde domein, waardoor uw site correct blijft functioneren, zelfs als de domeinnaam verandert. Zo maakt u dergelijke koppelingen:
Linken naar een pagina in dezelfde directory
Stel je voor dat je twee HTML-bestanden hebt, index.html en about.html, beide in de root directory van je site. Om te linken van index.html naar about.html, zou je het volgende gebruiken:
<a href="about.html">About Us</a>Een koppeling maken naar een pagina in een bovenliggende map
Stel dat uw huidige pagina zich in een submap bevindt met de naam blog, en u wilt linken naar index.html in de root directory. U zou het volgende gebruiken:
<a href="../index.html">Home</a>Een koppeling maken naar een pagina in een submap
Als u een koppeling maakt van index.html in de hoofdmap naar post.html in een blog submap, dan ziet uw link er als volgt uit:
<a href="blog/post.html">Read Blog Post</a>Hoe u een link naar een specifiek gedeelte van een pagina kunt maken
Een link naar een specifiek gedeelte van een pagina, ook wel bekend als het maken van een "anchor link" of "jump link", is een handige manier om gebruikers naar een bepaald gedeelte van een webpagina te leiden. Dit is vooral handig op lange pagina's waar u snel toegang wilt bieden tot specifieke gedeelten. Zo kunt u dergelijke links maken:
Stap 1: Identificeer of creëer de doelsectie
Eerst moet u een "anker" identificeren of maken in het gedeelte van de pagina waarnaar u wilt linken. Dit doet u door een id-attribuut toe te voegen aan een HTML-element, zoals een kop of een alinea, waar u de link naartoe wilt laten springen.
Als u bijvoorbeeld een sectie heeft met de kop 'Contact', kunt u als volgt een id aan de kop toevoegen:
<h2 id="contact">Contact Us</h2>Stap 2: Maak de link naar de sectie
Vervolgens maakt u een link die naar de id van de doelsectie verwijst. Dit doet u met een relatieve URL die het #-symbool bevat, gevolgd door de id-waarde.
Als u ergens anders op dezelfde pagina naar de sectie 'Contact' wilt linken, ziet de HTML-code er als volgt uit:
<a href="#contact">Go to Contact Us</a>Stap 3: Linken vanaf een andere pagina
Als u wilt linken naar een specifieke sectie vanaf een andere pagina op dezelfde site, neemt u zowel de pagina-URL als de id op in de link. Als de sectie 'Contact Us' bijvoorbeeld op een pagina staat met de naam about.html, ziet de link er zo uit:
<a href="about.html#contact">Go to Contact Us</a>Voorbeeld in de praktijk
Stel je eens voor dat je een pagina hebt met verschillende secties, zoals 'Introductie', 'Diensten' en 'Contact'. Zo kun je het instellen:
<h2 id="intro">Introduction</h2>
<p>Welcome to our website...</p>
<h2 id="services">Services</h2>
<p>We offer a variety of services...</p>
<h2 id="contact">Contact Us</h2>
<p>You can reach us at...</p>Navigatielinks
<nav>
<ul>
<li><a href="#intro">Introduction</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact Us</a></li>
</ul>
</nav>Hoe u een link in een nieuw tabblad opent
Om een link in een nieuw tabblad te openen, moet u het target-attribuut met de waarde _blank toevoegen aan de HTML- tag. Dit vertelt de browser om het gekoppelde document in een nieuw tabblad te openen in plaats van in hetzelfde tabblad als de huidige pagina. Dit is hoe u dit kunt doen:
<a href="URL" target="_blank">Link Text</a>- <URL>. Met dit kenmerk wordt de URL van de pagina of bron opgegeven waarnaar u wilt linken.
- doel="_blank". Dit kenmerk en deze waarde vertellen de browser dat de link in een nieuw tabblad moet worden geopend.
