Het internet zou niet kunnen functioneren zonder hyperlinks. Het is dan immers onmogelijk om op een andere pagina te komen zonder zelf een adres in de browser in te voeren. Het zou het internet onhandig in gebruik maken, en zeer waarschijnlijk minder populair. Gelukkig hebben we dus hyperlinks in alle soorten en maten op het internet. En hoewel ze zo verschillend zijn, hebben ze allemaal wat gemeen: ze maken gebruik van één en hetzelfde HTML-element: <a>.Dit element <a> staat voor Anchor of Anker. Dit verklaart ook waarom in diverse programma’s voor het maken van websites een icoontje voor een anker wordt gebruikt. Maar de term anchor wordt meestal gebruikt voor hyperlinks binnen een pagina. Hoe dit werkt wordt besproken verderop in dit artikel. Eerst gaan we kijken naar de opbouw van het element en de verschillende soorten hyperlinks.
Opbouw van een hyperlink
Net zoals veel andere HTML-elementen bestaat het <a>-element uit een openingstag en een sluittag. Tussen deze twee tags in staat de tekst die aanklikbaar is. Een voorbeeld:
<a href="http://www.nu.nl/">Bezoek Nu.nl</a> <a href="index.html">Ga naar de homepage</a>
Hierbij valt meteen het attribuut href op. Dit attribuut wordt gebruikt om het adres van de webpagina die gelinkt moet worden op te geven. Dit kan een absoluut adres zijn (zoals in het voorbeeld naar Nu.nl) of een relatief adres (zie het tweede voorbeeld). Een relatief adres is in principe altijd op dezelfde site. Het href-attribuut zelf is altijd aanwezig bij dit element, tenzij je een anker plaatst (zie verderop).
Niet alleen naar webpagina’s: e-mailadressen
Het mooie van hyperlinks is dat ze niet alleen naar webpagina’s hoeven te verwijzen. Ook e-mailadressen zijn eenvoudig te linken met het <a>-element. Voordat ik hier een voorbeeld van geef, toch eerst een waarschuwing. Het linken van een e-mailadres wordt steeds vaker als ongewenst beschouwd. Er zijn geautomatiseerde robots actief die het internet afspeuren voor e-mailadressen om spamberichten naar te sturen. Link ook niet naar e-mailadressen anders dan die van jezelf, als je het beste met die ander voorhebt.
Na deze broodnodige waarschuwing volgt dan alsnog een mooi voorbeeld van een e-mail hyperlink:
<a href="mailto:example@example.org">E-mail versturen</a>
Zoals te zien is wordt een e-mailadres vooraf gegaan door mailto:, maar is het e-mailadres en het gebruik van het href-element niet anders. Bij het e-mailadres kunnen ook nog extra opties worden ingebouwd, zoals een onderwerp. Dat ziet er zo uit:
<a href="mailto:example@example.org?subject=Voorbeeld">E-mail versturen</a>
Handig, omdat je zo het e-mailbericht wat kunt sturen.
Binnen een pagina linken
In plaats van het attribuut href te gebruiken, kan je ook het attribuut name gebruiken. Dan maak je geen link, maar een anker aan. Dit wordt dan ook geen hyperlink, maar een plek waar je naar kan verwijzen. Dit ziet er ongeveer zo uit:
<a name="sectie"></a> <a href="#sectie">Ga naar sectie</a> <a href="langepagina.html#sectie">Ga naar sectie</a>
Met name maak je een anker voor een sectie van je webpagina aan. In het href-attribuut kan je naar dit anker verwijzen, of dat nu op dezelfde pagina is of niet. De naam van de sectie wordt vooraf gegaan door een hekje (#). Dat betekend niet dat maar een deel van de pagina geladen wordt, alleen de schuifbalk wordt direct naar de juiste plaats gestuurd.
Binnenkort vind je op Webbish een uitgebreid artikel over hoe relatieve links te maken zijn door de gehele site heen. Blijf dus op de hoogte, en schrijf je in voor onze RSS-feed!
Related posts:
