- Navigatie links
- Structuur links
- Verrijking links
Navigatie links
Navigatie links zijn hyperlinks welke aanklikbaar zijn door de gebruiker. Door het klikken op een dergelijke link wordt veelal een andere webpagina opgeroepen.Anker
Het aanklikbare deel wordt ook wel "Anker" genoemd. Veel voorkomende vormen van ankers zijn:- Tekst (ook wel ankertekst)
- Een plaatje
- Een deel van een plaatje
Bij de laatste optie wordt een plaatje vaak opgedeeld in meerdere gebieden (area's). Klikken op een dergelijk gebied leidt er toe dat de daaraan gelinkte webpagina wordt opgeroepen.
Tekstlinks zijn verreweg de meest voorkomende vorm van navigatie links. In de ankertekst kan je overigens ook weer HTML code opnemen.
Structuur links en verrijking links kennen geen anker en zijn dan ook niet klikbaar.
Structuur links
Structuur links zijn links die helpen vorm te geven aan een webpagina. Deze links geven aan welke metadata van toepassing is voor de betreffende webpagina. Dergelijke links kunnen verwijzen naar:- Opmaak bestanden (CSS) waarin staat aangegeven hoe de pagina er uit moet komen te zien
- De vorige- en volgende pagina in een artikelen reeks
- Een pagina met helpinformatie
Zie ook dit overzicht van alle mogelijke opties.
Verrijkinglinks
Verrijkinglinks zijn links die naast tekst extra content toevoegen aan de webpagina. Veel voorkomende verrijkingen zijn:- Afbeeldingen
- Javascript
De structuur van een navigatie link
Een gewone navigatie link kent minimaal de volgende onderdelen (al is formeel zelfs de bestemming niet verplicht):- Anker
- Bestemming
Een uitleg over het anker (de ankertekst) is hiervoor al gegeven.
De bestemming
De bestemming geef je op met het attribuut "href". De bestemming kan worden weergeven als een absolute of relatieve URL. De bestemming is meestal een andere webpagina, maar dat hoeft niet. Het kan bijvoorbeeld ook een PDF document zijn. Indien als bestemming "mailto:zomdir@gmail.com" wordt opgegeven, dan ga je een mail versturen als je op het anker klikt.Overige attributen
Daarnaast kunnen ook de volgende attributen voorkomen in een link:- Tooltip tekst
- Doel
- Download
- Link soort
- De taal gebruikt op de webpagina waar naar toe wordt gelinkt
- Het MIME type van het object waar naar toe wordt gelinkt
- Id
- Class
Tooltip tekst
Voor het opgeven van de tooltip tekst gebruik je het attribuut "title". Hier kan je alleen teksten opgeven. Probeer niet om hier HTML code in op te nemen. Dat gaat niet werken.Een tooltip tekst zou ik altijd opnemen omdat dat duidelijk de gebruikerservaring verhoogt. Mits er een zinnige tekst staat natuurlijk ;-)
Doel
Met het "target" attribuut geef je op of het gelinkte document al dan niet in een nieuw scherm moet worden getoond. Normaal gesproken wordt deze niet gebruikt. Mogelijk waarden zijn:- _blank
- _self
- _parent
- _top
Als de je opgeeft target="_blank" dan leidt klikken op het anker tot het openen van een nieuw scherm alwaar de bestemming wordt getoond.
Met _self geef je op dat het huidige document wordt vervangen.
Met _parent c.q. _top geef je op dat, indien mogelijk, het document moet worden vervangen in het parent c.q. het top scherm.
Parent en top schermen krijg je als een link is geopend in een nieuw scherm.
Noot: Als er geen doel is opgegeven kan de gebruiker vaak ook opgeven dat een link moet worden geopend in een nieuw scherm. Dit kan vaak met een rechtermuisklik of door tijdens het klikken de control toets ingedrukt te houden.
Download
Nieuw in de HTML5 specificatie is het "download" attribuut. Indien deze is opgegeven dan wordt de bestemming gedownload in plaats van geopend in de browser. Het is mogelijk om als waarde een filenaam op te geven.Link soort
Met het "rel" attribuut kan worden opgegeven wat voor een soort link het betreft. Je kan bijvoorbeeld aangeven dat deze link verwijst naar:- een helptekst
- de licentie voorwaarden
- de auteur
Dit attribuut kan ook de waarde "nofollow" krijgen. Hiermee geef je aan dat de link wel geplaatst is maar dat je deze eigenlijk niet steunt. Dit wordt bijvoorbeeld veel gebruikt bij blogs waar een ieder commentaar mag geven.
Noot: Zoekmachine optimalisatie specialisten hebben hele theorieën over het gebruik van de waarde "nofollow". Als ik het goed begrepen heb, is dit omdat men meent te weten dat Google de verhouding gewone links / "nofollow" links gebruikt als indicatie voor een normaal link profiel. Mocht een website geen normaal link profiel hebben, dan zou deze website stukken lager in de zoekresultaten terug te vinden zijn.
Taal
Met het "hreflang" attribuut kan je opgeven welke taal gebruikt wordt op de bestemming. Dit is een in de praktijk weinig gebruikt attribuut.MIME type
Met het "type" attribuut geef je op naar wat voor een soort document je linkt. Net als het "hreflang" attribuut wordt dit in de praktijk niet tot nauwelijks gebruikt.Id
Bijna elke HTML tag kan voorzien worden van het attribuut "id". Deze identificatie kan vervolgens worden gebruikt om naar te linken, maar kan ook worden gebruikt bij het opmaken van de link middels eventueel gerelateerde CSS code.Class
Net als het "id" attribuut kan het "class" attribuut bij nagenoeg elke HTML tag worden opgenomen. Deze is alleen van belang voor het opmaken van de link middels eventueel gerelateerde CSS code.Een link met zijn attributen
Uiteindelijk kan een link er dus als volgt uit zien:<a
href="link bestemming"
title="link tooltiptekst"
target="link doel"
download="bestandsnaam"
rel="link soort"
hreflang="taal op gelinkte webpagina"
type="MIME type van het gelinkte object"
id="link id"
class="link class">
link anker
</a>
De volgorde van de attributen doet er overigens niet toe.
Voorbeelden
Een aantal voorbeelden van links staat op de pagina example.zomdir.com/links/. Dit omdat het op deze blog niet goed mogelijk is om precies weer te geven wat ik wil.Link ze,
Hans
--
ZOMDir.com is een startpagina en een Wiki
Ook jij voegt in 10 seconden een link toe
Voor meer informatie, ga naar Slideshare
