Maak een automatisch gegenereerde inhoudsopgave met HTML-slots

Inhoudsopgave kan de gebruikerservaring van veel websites aanzienlijk verbeteren, bijvoorbeeld documentatie sites of online encyclopedieën zoals Wikipedia. Een goed ontworpen inhoudsopgave geeft een overzicht van de pagina en helpt gebruikers snel naar de sectie waarin ze zijn geïnteresseerd te navigeren.

Traditioneel kun je een inhoudsopgave maken in HTML of met JavaScript, maar de recent gestandaardiseerde HTML-slots bieden een middenweg tussen beide . HTML-sleuf is een webstandaard waarmee u tijdelijke aanduidingen aan een webpagina kunt toevoegen en deze later dynamisch kunt vullen met inhoud .

Wanneer gebruiken? label

Je kunt plaatsen tags in de inhoudsopgave in uw HTML-bestand, zodat de slots later kunnen worden gevuld met de relevante koppen en subkoppen . Wanneer de rubrieken worden gewijzigd, worden de slots automatisch bijgewerkt .

Met deze techniek moet u de HTML-broncode van de inhoudsopgave handmatig maken. JavaScript genereert alleen de tekstinhoud van de inhoudsopgave automatisch, op basis van de kopjes of subkoppen op de pagina .

Als u niet wilt dat de inhoudsopgave aanwezig is in de HTML, moet u zowel de lay-out als de inhoud genereren met JavaScript .

1. Maak de HTML

De HTML-broncode voor de TOC (inhoudsopgave) bevindt zich in een