Hyperlinks

De <a>-tag (hyperlink, anchor) maakt een link die je naar een andere pagina, afbeelding of bestand stuurt. De tekst die de gebruiker ziet en als link dient, staat tussen de openende en sluitende <a>-tags. Het attribuut href geeft de bestemming van de link weer.

Dit is een voorbeeld van een eenvoudige link:

hyperlink.html¹ (Klik op deze link om onderstaande webpagina te zien in je browser.)

<p>Klik <a href="https://www.google.com">hier</a> om naar Google te gaan.</p>

In dit voorbeeld zal de tekst "hier" een klikbare link zijn naar de startpagina van Google. href (hypertext reference) bevat de URL of bestandspad van de pagina waar de link naartoe verwijst.

Afbeeldingen

De <img>-tag (image) wordt gebruikt om afbeeldingen in HTML te tonen.

Voorbeeld van een afbeelding die niet geladen kan worden:

image.html² (Klik op deze link om onderstaande webpagina te zien in je browser.)

<img src="afbeelding.png" alt="Tekst met beschrijving voor als de afbeelding niet geladen kan worden.">

In dit voorbeeld geeft het attribuut src (source) aan waar de afbeelding zich bevindt ("afbeelding.png"). Het attribuut alt (alternate text) bevat een beschrijving van de afbeelding voor als de afbeelding niet geladen kan worden. Op die manier weet de lezer ongeveer wat er op de afbeelding staat als die niet zichtbaar is.

Enkel begintag

De img tag is een uitzondering en heeft enkel een begintag, geen eindtag.

Absolute en relatieve paden

In HTML gebruik je bestandspaden in de src van <img>-elementen om aan te geven waar de afbeelding zich bevindt die je wilt tonen.

Er zijn twee soorten bestandspaden: absolute en relative bestandspaden.

Absolute bestandspaden bevatten de volledige URL van het bestand en beginnen meestal met http:// of https://. Bijvoorbeeld:

<img src="https://www.example.com/images/afbeelding.png" alt="Een voorbeeldfoto">

Relative bestandspaden verwijzen naar het bestand ten opzichte van de locatie van de huidige HTML-pagina. Bijvoorbeeld:

<img src="images/afbeelding.png" alt="Een voorbeeldfoto">

In dit voorbeeld verwijst de relative bestandspad images/afbeelding.png naar een afbeelding in een map genaamd images die zich in dezelfde map bevindt als de huidige HTML-pagina.

Samenvatting

Kies een eenvoudige bestandsnaam, zonder spaties en zonder hoofdletters.