Inhoudsopgave: Opmaak en Regels

In de elementenbibliotheek vertellen een snel overzicht en inhoudsopgave lezers wat een pagina behandelt, waar het hen bij helpt beslissen en hoe ze naar de sectie kunnen springen die ze nodig hebben.

Snel overzicht. Gebruik dit gepaarde openingselement op lange of structureel complexe pagina’s. Schrijf een overzicht van 40–90 woorden dat de reikwijdte en het verwachte resultaat vaststelt, geef vervolgens een inhoudsopgave bestaande uit stabiele H2-koppen en alleen nuttige H3-koppen. Op deze site blijft het live inhoudsmenu hieronder verborgen totdat de lezer meer dan 300 pixels heeft gescrolld; het verschijnt dan als een vast bureaublad-dropdown onder de siteheader.

Waarom dit element ertoe doet

Lezers beginnen niet elke lange pagina op hetzelfde punt. De ene persoon heeft een definitie nodig, een ander wil implementatiestappen en een derde controleert een enkele voorwaarde voordat hij werk goedkeurt. Een kort overzicht beantwoordt de vraag “Ben ik op de juiste plek?” voordat de lezer aandacht investeert. De inhoudsopgave beantwoordt “Waar is het deel dat ik nodig heb?” zonder een lineaire lezing af te dwingen.

De twee delen worden samen gespecificeerd omdat ze aangrenzende maar verschillende oriëntatieproblemen oplossen. Het overzicht legt de belofte, grenzen en het nuttige resultaat van de pagina uit in zinnen. De inhoudsopgave toont de route door die belofte als bestemmingen. Een inhoudsopgave zonder overzicht kan laten zien dat een pagina secties heeft met de naam “Configuratie” en “Toegankelijkheid”, maar kan niet uitleggen of de pagina een conceptuele inleiding of een productspecificatie is. Een overzicht zonder navigatie kan de reikwijdte vaststellen, maar een lezer toch door 3.000 woorden laten jagen.

Dit element verbetert ook de machine-extraheerbaarheid, oftewel het vermogen van software om een passage te isoleren en het doel ervan buiten de volledige pagina te behouden. Het overzicht is een tweede beknopte, zelfstandige samenvatting na de titel en beschrijving. Hugo’s broninhoudsopgave is een gelinkte, machineleesbare schets van de dekking en hiërarchie van de pagina; de huidige sticky-renderer zet die links om in opties die hun URL-fragmentwaarden behouden, het #sectie-gedeelte van een URL. Zoeksystemen, retrievaltools, browserextensies en AI-agenten kunnen de documentschets gebruiken om waarschijnlijke antwoordgebieden te identificeren voordat ze elke paragraaf verwerken. Dit garandeert geen zoekfunctie of AI-citatie; het vermindert dubbelzinnigheid over waar onderwerpen beginnen en hoe ze zich verhouden.

De koppeling mag geen herhaling creëren. Een overzicht stelt reikwijdte en resultaat vast. Een direct antwoordblok beantwoordt de primaire vraag. De belangrijkste conclusies geven conclusies die het onthouden waard zijn. Wanneer alle drie hetzelfde zeggen in verschillende kaders, wordt de opening een obstakel in plaats van een hulpmiddel.

Wanneer te gebruiken

De inhoudsopgave verdient zijn plaats wanneer springen een waarschijnlijk lezersgedrag is. Woordaantal is een nuttige proxy, maar structuur is de beslissende factor.

Gebruik alleen het overzicht wanneer de titel breed geïnterpreteerd zou kunnen worden, wanneer de pagina bewust aangrenzende onderwerpen uitsluit, of wanneer de lezer het verwachte resultaat moet weten voordat hij verdergaat. Een 900-woorden beleidspagina heeft mogelijk een overzicht van twee zinnen nodig, ook al heeft het geen navigatie nodig.

Gebruik alleen de inhoudsopgave wanneer de titel en opening de reikwijdte al ondubbelzinnig maken. Deze bijna-ontbreking komt veel voor op referentiepagina’s: de opening kan een directe definitie bevatten die de oriëntatie verzorgt, terwijl een lange reeks onafhankelijke velden nog steeds navigatie nodig heeft.

Gebruik geen van beide delen als decoratie. Een TOC met zes items op een artikel van 700 woorden voegt een extra beslissing toe vóór het antwoord. Een overzicht dat zegt “Deze gids verkent alles wat je moet weten” definieert geen reikwijdte, resultaat of uitsluitingen. Gebruik het paar niet om een zwakke koppenstructuur te verbergen: als koppen overlappen, inconsistente grammatica gebruiken of één idee in veel kleine secties verdelen, repareer dan eerst het document voordat je de structuur exposeert.

Waar te plaatsen

Positie maakt deel uit van de betekenis van het element. Het overzicht moet verschijnen na de held of het openingsdirect antwoord en vóór de eerste H2. Het kan een korte paragraaf of een compacte lijst zijn, maar het moet worden gezien voordat de lezer zich aan de body committeert. De TOC-aanroep hoort onmiddellijk na het overzicht, zodat de geschreven bron oriëntatie en navigatie bij elkaar houdt, ook al wordt het sticky-menu van deze site pas zichtbaar na 300 pixels scrollen.

Het paar mag geen definitie onderbreken, een bewering niet van het bewijs scheiden, of pas halverwege het document verschijnen. Plaats het niet tussen een kop en de openingsparagraaf van die kop: de relatie tussen kop en uitleg moet direct blijven. Plaats geen ander overzicht-achtig component direct ernaast. Wanneer een direct antwoord of belangrijkste-conclusiesblok vereist is, wijs dan verschillende taken toe en gebruik deze volgorde: direct antwoord, kort reikwijdte-overzicht, TOC-aanroep, eerste body-sectie. Laat een van de samenvattingen weg als de bewoording nog steeds overlapt.

Gebruik de shortcode één keer per pagina. De gegenereerde ID’s (tocDropdown, tocSelect, selectTrigger en gerelateerde besturingen) zijn vast, dus een tweede instantie creëert dubbele document-ID’s en onvoorspelbare scripts.

Anatomie

Het element heeft zes betekenisvolle regio’s. De eerste vijf zijn content of gedrag; de voortgangsindicator is status. De legenda blijft in de pagina zodat deze leesbaar blijft wanneer de screenshot wordt geschaald of vervangen.

1. Overzicht body: 40–90 woorden die reikwijdte, beoogd resultaat en eventuele belangrijke grens aangeven.
2. Sticky-wrapper-titel: standaard de paginatitel, of het geschreven title-attribuut wanneer een korter label duidelijker is.
3. Huidige-sectielabel: begint als “Selecteer sectie…” en verandert naarmate de browser IntersectionObserver, een API die elementen detecteert die een gedefinieerd viewportgebied binnenkomen, secties als actief markeert.
4. Dropdown-trigger: opent de gegenereerde lijst met sectiebestemmingen bij klikken in de huidige implementatie.
5. Kopopties: links afgeleid van Hugo’s pagina-inhoudsopgave, momenteel H2 en H3 vanwege markup.toml.
6. Voortgangsbalk: toont het aandeel van het totale scrollbare document dat is doorlopen; het identificeert geen sectievoltooiing.

Ontwerpvoorbeelden

De galerij behandelt gedragstoestanden in plaats van decoratieve thema’s. De onderliggende inhoud blijft hetzelfde, zodat beoordelaars timing, hiërarchie, clipping en interactie kunnen vergelijken.

Er worden geen alternatieve visuele varianten via Markdown geschreven. title verandert het label en class voegt wrapper-klassen toe, maar geen van beide creëert een semantisch verschillend element. Nieuwe kleur-, kaart-, zijbalk- of inline-lijstbehandelingen vereisen een componentbeslissing in plaats van een willekeurige klasse die in content wordt toegevoegd.

Parameters

Het overzicht en de TOC delen één redactioneel contract, maar alleen de sticky TOC wordt weergegeven door de huidige shortcode. Configuratiewaarden zijn opgenomen omdat ze de uitvoer beïnvloeden, ook al kunnen auteurs ze niet per aanroep instellen.

De afhankelijkheid is makkelijk te missen: een pagina zonder H2-koppen genereert stilletjes geen sticky TOC omdat Hugo geen bruikbare schets produceert en de partial alleen opmaak uitzendt wanneer het headers heeft. Met de huidige configuratie komen H2 en hun H3-afstammelingen in aanmerking; H4 en diepere koppen worden uitgesloten. De parseert normaal gesproken Hugo’s .TableOfContents. De HTML-terugval scant alleen weergegeven H2-elementen, dus auteurs moeten niet vertrouwen op terugvalgedrag om H3-navigatie te behouden.

Syntax en codevoorbeelden

De draagbare notatie houdt het overzicht als element body en de navigatie-instellingen als attributen. Koplinks blijven gegenereerd uit het omringende document in plaats van gedupliceerd door de auteur.

:::quick-overview-and-toc{title="On this page" class=""}
Deze gids legt uit wanneer je het element moet gebruiken, hoe het sticky Hugo-menu zich gedraagt,
en hoe je toegankelijke, stabiele sectiebestemmingen behoudt na publicatie.
:::

De huidige Hugo-mapping schrijft het overzicht als normale Markdown en roept de meegeleverde shortcode één keer aan. Er is geen JSON-body.

Deze gids legt uit wanneer je het element moet gebruiken, hoe het sticky Hugo-menu zich gedraagt,
en hoe je toegankelijke, stabiele sectiebestemmingen behoudt na publicatie.

{{< table-of-contents title="On this page" class="" >}}

De WordPress-blokmapping slaat dezelfde body en attributen op. Een site die het blok niet heeft geregistreerd, kan de equivalente shortcodevorm gebruiken; het mag de koplinks niet handmatig schrijven.

<!-- wp:amicited/quick-overview-and-toc {"title":"On this page","className":""} -->
<p>Deze gids legt uit wanneer je het element moet gebruiken, hoe het sticky-menu zich gedraagt,
en hoe je toegankelijke, stabiele sectiebestemmingen behoudt na publicatie.</p>
<!-- /wp:amicited/quick-overview-and-toc -->

[amicited_quick_overview_toc title="On this page" class=""]
Deze gids legt de reikwijdte, het gedrag en het ankerbeleid van het element uit.
[/amicited_quick_overview_toc]

In alle drie de systemen is de bron van waarheid de werkelijke koppenhiërarchie van het document. Een handmatig onderhouden lijst zal afwijken naarmate koppen veranderen en kan verwijzen naar ID’s die niet meer bestaan.

Voorbeelden

Goed voorbeeld

Snel overzicht. Deze gids laat contentteams zien hoe ze een vergelijkingspagina kunnen plannen, schrijven, beoordelen en onderhouden. Het behandelt bewijsnormen, vergelijkingscriteria, productclaims, toegankelijke tabellen en controles na publicatie. Het behandelt geen betaalde plaatsing of affiliatecommissievoorwaarden.

Op deze pagina: Definieer de beslissing · Selecteer vergelijkingscriteria · Verzamel bewijs · Stel de pagina op · Beoordeel claims · Meet en onderhoud

Dit werkt omdat het overzicht het publiek, het resultaat, de dekking en de grens in 48 woorden benoemt. De zes bestemmingen zijn verschillende taken die een lezer mogelijk onafhankelijk opnieuw wil bezoeken. Hun labels gebruiken parallelle werkwoordsfrases, zodat zowel mensen als machines een proces kunnen afleiden. Geen van de items herhaalt de paginatitel of toont een triviale subsectie.

Slecht voorbeeld

Overzicht: Welkom bij onze complete gids. In de veranderende wereld van vandaag valt er veel te weten, dus lees verder om alles te leren.

Inhoud: Inleiding · Meer informatie · Belangrijke dingen · Andere dingen · Conclusie

Dit faalt om twee redenen. Het overzicht gebruikt 22 woorden zonder reikwijdte, lezer, resultaat of uitsluiting te definiëren. De items labelen retorische containers in plaats van onderwerpen, dus helpen ze een lezer niet te voorspellen waar een antwoord leeft. Meer koppen toevoegen zou het niet oplossen; het document heeft eerst betekenisvolle sectiegrenzen nodig.

Een tweede bijna-ontbreking is een antwoord van 600 woorden met “Overzicht”, “Achtergrond”, “Details”, “Tips” en “Conclusie” in de TOC. Zelfs als elk anker werkt, voegt de lijst meer interface dan navigatiewaarde toe. Houd de directe opening en verwijder de TOC.

Schema-opmaak en toegankelijkheid

Hier betekent schema-opmaak gestandaardiseerde machineleesbare code die entiteiten en eigenschappen identificeert. Dit element heeft geen toegewezen type of eigenschap in de Schema.org-vocabulaire, en de Hugo-shortcode genereert geen JSON-LD, de op scripts gebaseerde notatie die vaak wordt gebruikt om die vocabulaire te publiceren. Markeer de TOC niet als ItemList alleen omdat het een lijst is; dat zou een lijst van onderwerpen suggereren in plaats van navigatie. Het overzicht kan de description van een pagina informeren alleen wanneer de bewoording onafhankelijk geschikt is, maar het wordt niet automatisch gekopieerd naar gestructureerde data.

HTML- en ARIA-gedrag zijn hier belangrijker. ARIA, de Accessible Rich Internet Applications-standaard, levert rollen, namen en staten wanneer native HTML dat niet doet. Een landmark is een genoemd paginagebied waarnaar gebruikers van ondersteunende technologie kunnen springen. Focus is het huidige toetsenbordinteractiedoel.

Dit zijn implementatiefeiten, geen toestemming om toegankelijkheid te negeren. Contentbeoordelaars kunnen vandaag al de duidelijkheid van koppen, unieke ID’s en logische volgorde verifiëren. Componenteigenaren moeten trigger-, landmark-, focus-, URL- en verminderde-bewegingsgedrag oplossen voordat ze de sticky-variant als toetsenbordtoegankelijk beschrijven.

Schrijfregels

Schrijf het overzicht nadat de paginastructuur stabiel is. Dit voorkomt dat een vroege belofte afdrijft van de uiteindelijke dekking. Houd het tussen 40 en 90 woorden. Gebruik bij voorkeur twee of drie zinnen; gebruik drie tot vijf bullets alleen wanneer de pagina verschillende werkelijk parallelle resultaten bevat. Geef aan wat de pagina de lezer helpt begrijpen, beslissen of doen. Noem een uitsluiting wanneer de titel redelijkerwijs meer zou kunnen beloven dan de pagina levert.

Gebruik H2 voor de belangrijkste vragen, fasen of beslissingsgebieden van de pagina. Neem H3 alleen op in navigatie wanneer het een nuttige onafhankelijke bestemming onder een substantiële H2 is. Op deze site omvat de configuratie automatisch elke H2 en H3, dus het praktische beleid is strenger: maak geen kop tenzij deze het verdient om in navigatie te verschijnen. Streef naar 5–18 totale items. Als de gegenereerde lijst 18 overschrijdt, combineer overlappende secties, verwijder onnodige H3-koppen of splits de pagina. Sla nooit direct over van H2 naar H4 om een kop voor de TOC te verbergen; kopniveaus drukken hiërarchie uit, niet opmaak of navigatievoorkeur.

Gebruik beknopte, beschrijvende koptekst. Een lezer moet elke bestemming begrijpen zonder de bovenliggende paragraaf te lezen. Gebruik bij voorkeur parallelle vormen binnen een reeks: “Kies criteria”, “Verzamel bewijs” en “Beoordeel claims” zijn makkelijker te scannen dan een mengeling van zelfstandige naamwoorden, vragen en vage labels. Plaats geen citaten, promotionele claims, emoji’s, statusbadges of volledige zinnen in een kop alleen om de TOC te beïnvloeden.

Het overzicht mag nooit een tweede miniatuur-inhoudsopgave, ongegronde prestatieclaims of instructies bevatten die nergens in de body voorkomen. De TOC mag nooit handmatig getypte ankers, bestemmingen buiten de huidige pagina of links naar lege secties bevatten.

Ankerstabiliteitsbeleid

Een kop-ID is het fragmentgedeelte van een URL, zoals #ankerstabiliteitsbeleid. Gepubliceerde fragment-URL’s zijn openbare interfaces. Bladwijzers, campagnelinks, ondersteuningsdocumentatie, zoekresultaten en door AI gegenereerde antwoorden kunnen er direct naar verwijzen. Het wijzigen van de koptekst kan Hugo’s gegenereerde ID veranderen en elke inkomende ankerlink verbreken, zelfs als de pagina-URL hetzelfde blijft.

Na publicatie de ID’s van alle H2- en H3-koppen bevriezen. Geef er de voorkeur aan de paragraaf onder een kop te bewerken boven het hernoemen van de kop. Wanneer een hernoeming noodzakelijk is, behoud dan de oude ID via een expliciet-ankermechanisme dat door het publicatiesysteem wordt ondersteund en verifieer vervolgens zowel het oude inkomende fragment als de nieuwe TOC-selectie. Hergebruik nooit een oude ID voor een ander onderwerp, dupliceer nooit een ID op de pagina en vertaal nooit een ID op een bestaande gelokaliseerde URL zonder een migratieplan. Registreer opzettelijke ankerwijzigingen in de release-opmerking of het contentwijzigingslogboek, zodat eigenaren van bekende inkomende links deze kunnen bijwerken.

Berichttypen die het gebruiken

De postTypes frontmatter vermeldt de formaten waarvoor dit element deel uitmaakt van het productiepatroon. Het is nog steeds voorwaardelijk: een kort exemplaar van een normaal lang formaat kan onder de TOC-drempel vallen.

Product-, categorie- en gebruiksscenariopagina’s zijn standaard niet opgenomen omdat hun primaire reizen vaak worden afgehandeld door paginanavigatie en call-to-actions. Voeg dit element alleen toe via een gedocumenteerde sjabloonbeslissing, niet omdat de pagina toevallig lang is.

QA-checklist

• Bevestig dat de pagina aan de drempel voldoet: ten minste 1.800 woorden, zeven H2-secties of een gedocumenteerde niet-lineaire navigatiebehoefte.
• Bevestig dat het overzicht 40–90 woorden is en de reikwijdte, het beoogde resultaat en eventuele noodzakelijke uitsluiting vermeldt.
• Bevestig dat het overzicht het directe antwoord of de belangrijkste conclusies niet herhaalt.
• Bevestig dat de shortcode één keer voorkomt, onmiddellijk na het overzicht en vóór de eerste H2.
• Bevestig dat elke H2 een betekenisvolle hoofdbestemming is en elke H3 nuttig genoeg is om in navigatie te verschijnen.
• Bevestig dat de gegenereerde lijst 5–18 items bevat, een logische volgorde gebruikt en geen H4-items bevat onder de huidige configuratie.
• Bevestig dat config/_default/markup.toml nog steeds startLevel = 2, endLevel = 3 en ordered = false gebruikt, of werk deze specificatie bij met de componentwijziging.
• Bevestig dat een pagina zonder in aanmerking komende H2 niet beweert een TOC te bevatten; de shortcode zal stilletjes niets weergeven.
• Bevestig dat elk gegenereerd fragment uniek is en de beoogde kop bereikt.
• Test gepubliceerde inkomende anker-URL’s voordat je H2- of H3-bewoording wijzigt; behoud oude ID’s wanneer koppen moeten veranderen.
• Op desktop, verifieer dat de sticky-wrapper verborgen is bij 300 pixels of minder en verschijnt nadat de scrollpositie 300 pixels overschrijdt.
• Verifieer dat de vaste wrapper onder de werkelijke header zit, de voortgangsbalk vooruitgaat en het actieve label sectiewijzigingen volgt.
• Verifieer dat smalle viewports de huidige besturing niet tonen, en registreer dit als verwacht huidig gedrag in plaats van een gebroken screenshot.
• Registreer de huidige toegankelijkheidsbeperkingen: geen navigatielandmark, geen toetsenbord-focusbare zichtbare trigger, geen focustransfer, geen fragmentupdate en geen tak voor verminderde beweging.
• Bevestig dat geen screenshotpad wordt weergegeven totdat het bijbehorende bestand op schijf bestaat.

FAQ

De onderstaande vragen behandelen de redactionele beslissingen die er het vaakst toe leiden dat dit element te vroeg wordt toegevoegd, te diep wordt gemaakt of na publicatie wordt gebroken.