jquery.app
Nederlands
EnglishDeutschFrancaisEspanol日本語Nederlands

HTML-tools

Gratis Inhoudsopgave Anker Generator

Plak HTML met koppen en krijg een geneste inhoudsopgave met ankerlinks.

Tool laden...

Wat is Inhoudsopgave Anker Generator?

Een inhoudsopgave is een gelinkte lijst van koppen waarmee lezers naar secties binnen een lange pagina kunnen springen. Ankerlinks gebruiken het id-attribuut op elke kop om diep linkbare URL's te maken. Voor statische sites met lange artikelen verbetert een inhoudsopgave de navigatie, toegankelijkheid en lezersbetrokkenheid doordat gebruikers een voorbeeld van de artikelstructuur krijgen.

Snel antwoord

Genereer een geneste inhoudsopgave met ankerlinks op basis van kop-tags in uw HTML. Elk inhoudsopgave-item linkt naar een geslugified id op de corresponderende kop voor eenvoudige paginanavigatie.

Last updated: 2026-06-11

Beperkingen

  • De tool genereert de inhoudsopgave-opmaak en de kop-id-waarden afzonderlijk. U moet de gegenereerde id-attributen handmatig toevoegen aan de kop-tags in uw HTML om de ankerlinks te laten werken.
  • Koppen zonder tekstinhoud of koppen genest in niet-semantische containers worden mogelijk niet correct ge锟絰traheerd door de parser.
  • De gegenereerde inhoudsopgave gebruikt platte nesting op basis van kopniveaus. Aangepaste CSS kan nodig zijn voor inspringingsstyling op meerdere niveaus.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Zo gebruik je deze tool

  1. Plak de HTML van uw artikel of pagina-inhoud in het invoergebied.
  2. Selecteer welke kopniveaus in de inhoudsopgave moeten worden opgenomen, zoals h2 tot en met h4.
  3. Controleer de gegenereerde geneste lijst en klik op een link om het ankerformaat te controleren.
  4. Kopieer de inhoudsopgave-HTML en plak deze bovenaan uw artikel, voeg vervolgens de id-attributen toe aan uw koppen.

Waarvoor je het kunt gebruiken

  • Een inhoudsopgave toevoegen aan een lange handleiding met 12 of meer secties.
  • Ankerlinks maken voor een documentatiepagina met een diepe h2- en h3-hi锟絩archie.
  • Spring-naar-sectie-links genereren voor een multisectie-landingspagina.

Gebruik

Praktische voorbeelden

Voorbeeld

Lange handleiding met 12 secties

Een publicatiehandleiding over statische site-installatie behandelt installatie, configuratie, implementatie en probleemoplossing. De inhoudsopgave vermeldt elke h2-sectie met een ankerlink, zodat lezers direct naar de relevante stap kunnen springen.

Voorbeeld

Documentatie met h2/h3-hi锟絩archie

Een API-referentie gebruikt h2 voor endpointgroepen en h3 voor individuele endpoints. De inhoudsopgave-generator behoudt de nesting, zodat lezers de ouder-kind-relatie in de zijbalk zien.

Veelgemaakte fouten

  • Een inhoudsopgave genereren met ankerlinks maar geen corresponderende id-attributen toevoegen aan de originele koppen, waardoor de links niet werken.
  • Proberen een inhoudsopgave te genereren uit geplakte inhoud die geen kop-tags bevat, wat een lege lijst oplevert.
  • Een inhoudsopgave genereren met inconsistente kopniveaus, zoals springen van h2 naar h4 zonder h3, wat de visuele nesting breekt.

Verificatie

  1. Klik op elke inhoudsopgave-link en bevestig dat de pagina naar de juiste kop-sectie scrollt zonder fouten.
  2. Controleer de pagina-URL na het klikken op een inhoudsopgave-link om te controleren of het ankerfragment correct in de adresbalk verschijnt.

FAQ

Vragen over Inhoudsopgave Anker Generator

Voegt deze tool id-attributen toe aan mijn bestaande koppen?

Het genereert de id-waarden als onderdeel van de inhoudsopgave-links. U moet die id-attributen handmatig of via uw sitegenerator toevoegen aan de corresponderende kop-tags in uw HTML.

Moet elke pagina een inhoudsopgave hebben?

Alleen pagina's met voldoende inhoud om navigatie te rechtvaardigen, hebben baat bij een inhoudsopgave. Een pagina met minder dan drie of vier koppen heeft er meestal geen nodig.

Welke kopniveaus moet de inhoudsopgave bevatten?

Neem h2 tot en met h3 of h2 tot en met h4 op voor de meeste artikelen. Begin bij h2 omdat de h1 meestal de paginatitel is. Het opnemen van te veel niveaus zoals h5 en h6 maakt de inhoudsopgave rommelig.

Hoe ga ik om met dubbele koptekst bij het genereren van inhoudsopgave-ankers?

Als twee of meer koppen identieke tekst hebben, moeten de gegenereerde anker-ID's uniek zijn. Voeg een numeriek achtervoegsel toe aan duplicaten: #introductie, #introductie-2, #introductie-3. Deze tool genereert unieke ankers door een teller toe te voegen aan dubbele ID's. Vermijd waar mogelijk identieke koptekst in uw inhoud om inhoudsopgave-links betekenisvol en voorspelbaar te houden.

Gerelateerde tools

Meer html-tools

Html

CSP Hash Generator

Genereer CSP-hashwaarden voor inline scripts en styles. Hash exacte code met SHA-256, SHA-384 of SHA-512.

Open tool

Probeer ook

Probeer ook