Wanneer je veel tekst op je pagina hebt staan, kan dat ervoor zorgen dat een bezoeker van je website veel moet scrollen. Daardoor wordt de kans groter dat de bezoeker niet alle tekst leest en halverwege afhaakt. Om ervoor te zorgen dat een bezoeker de tekst snel kan scannen en naar een bepaald hoofdstuk van de tekst kan gaan, kun je een inhoudsopgave maken. De inhoudsopgave bestaat uit HTML links en wanneer je op een link klikt, spring je naar de juiste plaats in de tekst. In dit blogartikel leer ik je hoe je een inhoudsopgave op je pagina met HTML links kan maken.

Voor de HTML links in de inhoudsopgave gebruik je de volgende HTML code:
<a href=”#hoofdstuk”> Hoofdstuk 1 </a>
Let er op dat je het # gebruikt voor de link.

Onderstaand is een voorbeeld van een inhoudsopgave.
Hoofdstuk 1
Hoofdstuk 2
Hoofdstuk 3
Hoofdstuk 4
Hoofdstuk 5
Hoofdstuk 6

Vervolgens maken we voor iedere titel van een hoofdstuk een anker. De anker geven we een specifieke naam zodat we er naartoe kunnen gaan vanuit de inhoudsopgave. Deze naam moet hetzelfde zijn als de naam die je hebt opgegeven bij het href-attribuut in de inhoudsopgave. We laten het href-attribuut weg zodat de titel geen link wordt. Voor de titels van de hoofdstukken gebruik je de volgende HTML code:
<a name=”hoofdstuk”>Hoofdstuk 1</a> 
Wat je invult bij ‘name‘ moet hetzelfde zijn als wat je hebt ingevuld bij ‘href‘ in de inhoudsopgave en dan zonder #.
De naam van de anker moet voor iedere titel uniek zijn, om ervoor te zorgen dat je naar de juiste positie springt.

Klik in de inhoudsopgave op Hoofdstuk 1 en je zult op de plaats van het kopje hieronder terecht komen.

Hoofdstuk 1

Wat je ook kunt doen is rechtstreeks naar een plaats op een andere pagina verwijzen. Je moet hierbij het volledige pad gebruiken, bijvoorbeeld:
<a href=”pagina.html#hoofdstuk1″>

Heb je iets aan deze tip gehad of heb je een vraag? Laat dan hieronder een reactie achter.