Kopsysteem: H1-, H2- en H3-regels

Een kopsysteem is de geordende set van één paginatitel en de bijbehorende sectielabels. Het verandert een lange pagina in een leesbare route voor mensen en een machineleesbare structuur voor zoekmachines, ondersteunende technologie en AI-antwoordsystemen.

De paginatitel hierboven is de enkele H1 van deze pagina. Elke hoofd specificatie hieronder is een H2, en elke onderverdeling binnen een hoofdsectie is een H3. Dat overzicht is het weergegeven element: de niveaus drukken relaties uit in plaats van lettergroottes.

Waarom dit element belangrijk is

Lezers consumeren zelden een lange pagina in één ononderbroken leessessie. Ze scannen op een herkenbare vraag, vergelijken sectielabels met hun huidige behoefte en beslissen waar ze willen vertragen. Beschrijvende koppen verminderen die inspanning omdat elke kop een kleine belofte doet over wat er volgt. “Hoe stabiele kop-ID’s citaten behouden” is in één oogopslag nuttig; “Nog wat gedachten” niet.

Dezelfde hiërarchie ondersteunt machine-extraheerbaarheid, wat betekent dat een geautomatiseerd systeem een sectie kan identificeren, begrijpen hoe deze zich verhoudt tot het pagina-onderwerp, en deze kan ophalen zonder verwarring met een naburige sectie. H1 stelt het pagina-onderwerp vast. H2 verdeelt dat onderwerp in primaire aandachtspunten. H3 verfijnt een H2 tot een methode, casus, criterium of uitzondering. Een overgeslagen niveau verbergt die relatie en dwingt een parser om te raden of een subsectie een broer, kind of een niet-gerelateerd blok is.

Koppen creëren ook adresseerbare secties. Een fragment-ID is het deel van een URL na #, zoals #qa-checklist. Zoekresultaten, interne links, browserbladwijzers en AI-antwoorden kunnen naar die exacte bestemming verwijzen. Een nonchalant hernoemd automatisch gegenereerd ID kan daarom een URL breken, zelfs als de pagina zelf nog bestaat. De kop is geen decoratie: de tekst definieert de sectie en het ID wordt een duurzaam openbaar adres.

Volg de schrijfregels voor elementen wanneer het doel van een sectie overeenkomt met een getypeerd element. Een H2 genaamd “Waarschuwing” vervangt geen waarschuwingskader en een H2 genaamd “Vergelijking” vervangt geen vergelijkingstabel. Koppen bieden documenthiërarchie; getypeerde elementen bieden doelspecifieke structuur. Beide kunnen nodig zijn.

Wanneer gebruiken

Gebruik het kopsysteem op elke inhoudelijk indexeerbare pagina. Zelfs een korte pagina heeft één H1 nodig. Voeg H2-secties toe wanneer de lezer moet schakelen tussen verschillende vragen, fasen, criteria of bewijsgroepen. Voeg H3-subsecties alleen toe wanneer een H2 ten minste twee werkelijk verschillende onderdelen bevat die baat hebben bij afzonderlijke navigatie.

De bijna-missen zijn visuele labels die eruitzien als koppen maar niet thuishoren in de artikelstructuur:

• Een kaarttitel benoemt een herhaalde kaart; het is niet automatisch een documentsectie.
• Een uitroeplabel zoals “Tip” of “Belangrijk” identificeert het kadertype; het wordt geen H2 alleen omdat het vet is.
• Een diagramtitel identificeert een figuur. Het hoort in het bijschrift of de toegankelijke naam van de figuur, tenzij het diagram een complete sectie begint.
• Een navigatiemenulabel, broodkruimel, tab, accordeonbediening, voetkop en modaltitel hebben mogelijk component-semantiek nodig, maar ze maken geen deel uit van de hoofdartikelhiërarchie.
• Een grote promotionele slogan is displaytekst. Lettergrootte kan het niet promoveren tot de H1 van het document.

Voeg geen kop toe alleen om één zin in te leiden, een doorlopende uitleg te splitsen of visuele ademruimte te creëren. Gebruik alinea-afstand of redactie voor die taken. Een nuttige kop markeert een sectie die substantieel genoeg is om een afzonderlijke lezersbehoefte te beantwoorden.

Waar koppen plaatsen

Positie geeft verwantschap weer. Plaats de H1 aan het begin van de hoofdinhoud, na broodkruimels of andere sitenavigatie en vóór de inleiding. Plaats elke H2 vóór een primaire sectie. Plaats een H3 alleen na de bovenliggende H2 en de oriënterende inhoud van die ouder, nooit vóór de eerste H2 en nooit als een peer gekozen om visuele redenen.

Twee koppen mogen niet aangrenzend zijn in geschreven artikelinhoud. Elke kop moet nuttige inhoud bezitten vóór de volgende kop van hetzelfde of diepere niveau. Deze regel voorkomt lege sectielabels, geeft lezers context vóór een lijst met subsecties en creëert extraheerbare passages in plaats van een kale structuur.

Anatomie

De gelabelde anatomie heeft vijf delen:

1. H1: het unieke pagina-onderwerp en de top van de inhoudsstructuur.
2. H2: een primaire vraag, fase of dimensie binnen dat onderwerp.
3. H3: een kindonderwerp dat niet correct kan worden begrepen zonder de bovenliggende H2.
4. Bezeten inhoud: het antwoord, bewijs, instructies of uitleg tussen de ene kop en de volgende kop op hetzelfde of hogere niveau.
5. Stabiel ID: de fragmentbestemming die aan de kop is gekoppeld en na publicatie behouden blijft.

De relatie blijft geldig als typografie verandert. Een thema kan H2 met een kleinere letter weergeven op mobiel, maar het moet H2 blijven in de HTML. Omgekeerd geeft het groot en vet maken van een alinea er geen kop-semantiek of fragmentbestemming aan.

Ontwerpvoorbeelden

Ontwerpvarianten corresponderen met semantische niveaus en echte omvouwtoestanden, niet met willekeurige kleuropties.

H1-pagina titel: toon het unieke onderwerp aan het begin van de hoofdinhoud. Een ondersteunende beschrijving mag volgen, maar geen wenkbrauw, logo of heldenslogan wordt een andere H1.

H2-primaire sectie: maak de sectie begrijpelijk vanuit een inhoudsopgave en volg deze met inhoud die de reikwijdte vaststelt.

H3-sub sectie: gebruik het kleinere niveau omdat het onderwerp ondergeschikt is, niet omdat de ontwerper kleinere tekst wil.

Omgevouwen kop: sta een natuurlijke omvouwing over twee regels toe op smalle schermen. Verkort een duidelijke kop niet tot een dubbelzinnig label alleen om hem op één regel te houden.

Verankerde toestanden: toon hover en toetsenbordfocus zonder het anker de enige manier te maken om de bestemming te begrijpen. Directe navigatie moet eventuele sticky header compenseren zodat de kop niet verborgen is.

Parameters

Het kopsysteem is een documentcontract in plaats van een decoratief component. De parameters definiëren de structuur, de tekst die lezers zien, de inhoud die elk knooppunt bezit en de URL waarmee dat knooppunt kan worden bereikt.

De teken- en woordlimieten zijn redactionele banden, geen redenen om noodzakelijke specificiteit weg te laten. Een kop van 94 tekens die twee vergelijkbare procedures onderscheidt, is beter dan een korte maar misleidende. De structurele limieten zijn strikt: één H1, geen overgeslagen niveaus, geen dubbele ID’s en geen lege secties.

Syntax en codevoorbeelden

De canonieke draagbare vorm omhult de native structuur in een heading-system-directive. De eerste kop komt overeen met de documenttitel; latere koppen blijven geordende inhoudsknooppunten. Expliciete ID’s worden toegevoegd zodra de koppen openbaar worden.

Draagbare Markdown-directive

:::heading-system
# Roteer een API-sleutel zonder downtime

Vervang de credential in elke afhankelijke dienst voordat je de oude sleutel intrekt.

## Bereid de vervanging voor

Noteer elke dienst die momenteel de credential leest.

### Identificeer verborgen gebruikers

Controleer geplande taken, implementatiesecreten en lokale integraties.

## Controleer en trek in

Test de vervanging en trek vervolgens de blootgestelde sleutel in.
:::

Bij publicatie zet je stabiele ID’s vast zodat toekomstige tekstwijzigingen ze niet opnieuw genereren:

## Bereid de vervanging voor {#prepare-replacement}
### Identificeer verborgen gebruikers {#identify-hidden-consumers}

Hugo shortcode

{{< heading-system h1="Roteer een API-sleutel zonder downtime" >}}
## Bereid de vervanging voor {#prepare-replacement}

Noteer elke dienst die momenteel de credential leest.

### Identificeer verborgen gebruikers {#identify-hidden-consumers}

Controleer geplande taken, implementatiesecreten en lokale integraties.
{{< /heading-system >}}

Dit is het Hugo-adaptercontract, geen bewering dat deze repository een heading-system-shortcode registreert. Een Hugo-implementatie kan de H1 blijven renderen vanuit frontmatter en de koppen in de body via Markdown, zoals deze pagina doet, mits het dezelfde hiërarchie valideert en expliciete ID’s behoudt.

WordPress-blok

<!-- wp:heading {"level":2,"anchor":"prepare-replacement"} -->
<h2 id="prepare-replacement">Bereid de vervanging voor</h2>
<!-- /wp:heading -->

<p>Noteer elke dienst die momenteel de credential leest.</p>

<!-- wp:heading {"level":3,"anchor":"identify-hidden-consumers"} -->
<h3 id="identify-hidden-consumers">Identificeer verborgen gebruikers</h3>
<!-- /wp:heading -->

WordPress moet de H1 opslaan in het paginatitelveld of een goedgekeurd hero-blok, niet als een tweede kopblok in de artikelbody. Stel de HTML-anker van elke gepubliceerde kop expliciet in zodat een latere tekstwijziging niet stilletjes de URL verandert.

Voorbeelden

Goed: de structuur voorspelt complete antwoorden

# Hoe kies je een factuurgoedkeuringsworkflow

## Definieer het goedkeuringsrisico
Leg uit welke factuurwaarden, leveranciers en uitzonderingen beoordeling nodig hebben.

### Stel waarderingsdrempels in
Wijs een benoemde goedkeurder toe aan elke drempel en documenteer wat er op de grens gebeurt.

### Routeer beleidsuitzonderingen
Stuur ontbrekende inkooporders en gewijzigde bankgegevens naar een apart beoordelingstraject.

## Test de workflow
Voer gewone en uitzonderlijke facturen door de volledige route vóór de lancering.

Dit werkt omdat de H1 één taak benoemt, elke H2 een primaire fase noemt, elke H3 bij zijn ouder hoort en elk label wordt gevolgd door inhoud die de belofte nakomt. Een lezer kan de structuur scannen en voorspellen waar drempels, uitzonderingen en tests worden behandeld.

Slecht: opmaak vervangt hiërarchie

# Factuurgoedkeuring

### Dingen om over na te denken
## Meer informatie
### Uitzonderingen
### Overig

Dit faalt om vier onafhankelijke redenen. Het springt van H1 naar H3, gebruikt labels die geen antwoord voorspellen, plaatst koppen naast elkaar zonder bezeten inhoud en laat “Uitzonderingen” zonder uitleg vóór de volgende kop. De resulterende structuur suggereert dekking die de pagina niet biedt. Het creëert ook zwakke automatisch gegenereerde ID’s zoals #overig, die dubbelzinnig zijn wanneer ze buiten de pagina worden geciteerd.

Schema-markup en toegankelijkheid

Koppen hebben geen zelfstandig Schema.org-type nodig. De H1 levert of weerspiegelt doorgaans de headline van een Article, TechArticle of een andere geschikte pagina-entiteit, maar zichtbare formulering en JSON-LD moeten hetzelfde onderwerp beschrijven. H2- en H3-secties blijven HTML-structuur; maak geen schema-entiteit voor elke kop. Een kop met de titel “Veelgestelde vragen” creëert ook niet op zichzelf FAQPage-markup — de zichtbare vraag-en-antwoordgegevens moeten voldoen aan het FAQ-elementcontract.

Toegankelijkheid hangt af van semantische HTML en logische volgorde. Gebruikers van schermlezers kunnen navigeren op kop, een koplijst inspecteren of direct tussen secties springen. Die workflow wordt verbroken wanneer de pagina niveaus overslaat voor opmaak, vetgedrukte alinea’s als nepkoppen gebruikt, of nut- en artikelkoppen in één onsamenhangende hiërarchie opneemt.

Gebruik echte <h1>, <h2>- en <h3>-elementen. Houd koptekst zichtbaar; een aria-label mag duidelijke tekst op het scherm niet vervangen. Ankerbedieningen hebben een beschrijvende toegankelijke naam, zichtbare toetsenbordfocus en een klikdoel dat gescheiden is van de koptekst wanneer het linken van de hele kop selectie zou verwarren. Wanneer een fragment-URL wordt geladen, hoeft de toetsenbordfocus niet automatisch te verplaatsen, maar de bestemmingskop moet zichtbaar zijn en niet bedekt door een sticky header.

Kop-ID’s moeten uniek zijn binnen de pagina en beginnen met een letter. Houd ze klein, met koppeltekens, leesbaar en vrij van tijdelijke data of positienummers. Een stabiel ID kan #verify-results blijven, zelfs als de zichtbare kop verbetert van “Controleer de resultaten” naar “Controleer of de nieuwe credential werkt.” Als de betekenis van de sectie volledig verandert, maak dan een nieuw ID en behoud het oude fragment via een alias of gedocumenteerd redirectgedrag wanneer het platform dit ondersteunt. De aparte specificatie voor ankerlinks regelt de ankersnavigatie en interactiedetails.

Schrijfregels

Schrijf de paginastructuur voordat je individuele labels poetst. Elke kop moet beantwoorden “wat ga ik hier leren, beslissen of doen?” in concrete taal. Geef de voorkeur aan “Vergelijk jaarlijkse en maandelijkse factuurkosten” boven “Prijsafwegingen”, en “Waarom de import dubbele ID’s afwijst” boven “Probleemoplossing.” Beschrijvend betekent niet breedsprakig; het betekent dat het label de daadwerkelijke inhoud van de sectie voorspelt.

Gebruik één H1 van 20–80 tekens. Geef de voorkeur aan H2- en H3-koppen van 2–12 woorden en niet meer dan 90 tekens. Een lange gids heeft normaal gesproken 3–12 H2-secties. Een H2 heeft ten minste één reikwijdte- of antwoordzin nodig vóór een H3. Gebruik twee of meer H3-secties onder een ouder wanneer onderverdeling helpt; een enkele H3 geeft vaak aan dat de inhoud moet samenvloeien in de H2.

Gebruik kleine letters met hoofdletter aan het begin, tenzij een eigennaam of productnaam hoofdletters vereist. Vragen zijn geschikt wanneer de sectie de exacte vraag direct beantwoordt. Declaratieve labels passen bij fasen, criteria, bevindingen en specificaties. Houd parallelle secties grammaticaal parallel: gebruik werkwoorden voor een procesreeks, zelfstandige naamwoorden voor vergelijkingscriteria, of vragen voor een FAQ-set.

Stop nooit het volgende in koptekst:

• Markdown-links of onbewerkte URL’s; ze creëren concurrerende bestemmingen en instabiele toegankelijke namen.
• Voetnootmarkeringen of broncitaten; plaats bewijs in de bezeten inhoud.
• Emoji’s gebruikt als structurele labels, statusbadges of decoratieve voorvoegsels.
• Handmatige nummering tenzij het berichttype een stabiele geordende reeks definieert.
• CTA-taal zoals “Nu kopen,” prijsclaims, urgentie of promotionele badges.
• Opmaakinstructies, HTML-regeleinden of apparaatspecifieke afkortingen.
• Een tweede zin die thuishoort in de alinea eronder.

Schrijf geen slimme labels die afhankelijk zijn van omringende tekst om begrijpelijk te zijn. “Het plot wordt dikker” past misschien bij de stem van een essay, maar het geeft een zoekresultaat, inhoudsopgave, schermlezer-koplijst of AI-citatie geen bruikbare context. Bewaar persoonlijkheid in de uitleg na een precieze kop.

Berichttypes die het gebruiken

De frontmatter-array postTypes stuurt deze relaties. Elk vermeld berichttype gebruikt hetzelfde hiërarchiecontract, terwijl de eigen anatomie de exacte sectienamen en volgorde bepaalt.

QA-checklist

• De pagina geeft precies één zichtbare H1 weer, en deze benoemt het daadwerkelijke onderwerp van de pagina.
• De structuur gaat van H1 naar H2 naar H3 zonder overgeslagen niveaus.
• Elke H3 heeft één duidelijke voorafgaande H2-ouder.
• Elke kop wordt gevolgd door betekenisvolle bezeten inhoud vóór de volgende kop.
• Elke H2 bevat een oriënterende of antwoordzin vóór de eerste H3.
• Koptekst is beschrijvend wanneer deze alleen wordt gelezen in een inhoudsopgave of schermlezer-koplijst.
• Parallelle secties gebruiken parallelle grammatica en gelijkwaardige niveaus.
• Kopniveaus weerspiegelen relaties, niet lettergrootte of gewenst visueel gewicht.
• Getypeerde doelen gebruiken nog steeds hun vereiste elementen; koppen imiteren geen componenten.
• Elke gepubliceerde kop heeft één uniek, leesbaar, stabiel fragment-ID.
• Bestaande fragment-ID’s blijven ongewijzigd wanneer zichtbare formulering wordt bewerkt zonder de sectiebetekenis te veranderen.
• Directe fragmentnavigatie laat de bestemming zichtbaar onder eventuele sticky header.
• Koptekst bevat geen links, citaten, emoji-labels, promotionele badges of handmatige regeleinden.
• De HTML-structuur blijft coherent met menu’s, kaarten, accordeons, modalvensters en andere paginacomponenten.
• De weergegeven pagina werkt op smalle breedte, met omvouwing van koppen over twee regels zonder afknippen of overlap.

Wijs de pagina af wanneer het visuele ontwerp er gepolijst uitziet maar de structuur faalt. Kopgebreken stapelen zich op: één overgeslagen niveau of lege sectie zorgt ervoor dat elke stroomafwaartse consument harder moet werken om relaties te reconstrueren die de bron direct had moeten aangeven.

FAQ

De vragen hieronder lossen de gevallen op die het meest waarschijnlijk inconsistente structuren veroorzaken tussen redacteuren en platforms. Hun gezaghebbende waarden staan in de gestructureerde [[faq]]-frontmatter hierboven, zodat zichtbare uitvoer en eventuele in aanmerking komende schema-uitvoer één bron kunnen delen.