Hyperlinks zijn ingebedde verwijzingen die naadloze navigatie tussen documenten mogelijk maken, websitesen verschillende secties binnen een pagina.
Wat is een hyperlink?
Een hyperlink, vaak kortweg een link genoemd, is een verwijzing in een digitaal document waarmee gebruikers van de ene locatie naar de andere kunnen navigeren binnen hetzelfde document, door verschillende documenten of naar compleet verschillende websites. Deze verwijzing is doorgaans ingebed in tekst of een afbeelding en geeft, wanneer erop wordt geklikt, de opdracht browser or toepassing om de opgegeven bestemming te laden. Hyperlinks zijn een essentieel onderdeel van hypertext, het systeem dat niet-lineaire navigatie van 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 beschouwd als hyperlinks. Bijvoorbeeld, een URL getypt in een platte tekstdocument is een link, maar geen hyperlink totdat deze klikbaar wordt binnen een hypertekstsysteem. In essentie is een hyperlink een specifiekere vorm van een link, ontworpen om eenvoudige en interactieve navigatie binnen en tussen digitale documenten te vergemakkelijken.
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 tachtig en begin jaren negentig met de uitvinding van de Wereld wijde web door Sir Tim Berners-Lee. Hij stelde het gebruik van hyperlinks voor als een fundamenteel onderdeel van de architectuur van het web, waardoor gebruikers op gemarkeerde tekst of afbeeldingen konden klikken om tussen gerelateerde webpagina's te springen. De eerste succesvolle implementatie van hyperlinks vond plaats met de release van Berners-Lee's webbrowser, WorldWideWeb, in 1991, waarmee gebruikers het opkomende 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, waarbij klikbare tekst (vaak onderstreept en in een andere kleur) gebruikers naar een andere locatie leidt. Deze links zijn doorgaans ingebed in de hoofdtekst van een document of webpagina en worden gedefinieerd door de HTML tag, die de bestemmings-URL bevat. Wanneer erop wordt geklikt, kunnen gebruikers met teksthyperlinks 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 domein. Ze zijn cruciaal voor websitenavigatie en helpen gebruikers om te navigeren tussen verschillende secties of pagina's van een site. 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 u wilt omzetten in een hyperlink. Dit kan een woord, zin, knop of afbeelding zijn waarop gebruikers klikken om naar een andere pagina of bron te navigeren.
2. Schrijf de HTML-code. Om een hyperlink te maken, gebruikt u de HTML- tag (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 tekstuele hyperlink. Om een tekstuele hyperlink te maken die gebruikers naar "http://example.com" brengt 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 u uw HTML-code hebt geschreven, slaat u de wijzigingen op en test u de hyperlink in een webbrowser. Klik op de link om te controleren of deze u 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.
