Infobox: 2 kolommen — Formaat, regels en voorbeelden

Een infobox met twee kolommen splitst één idee op in precies twee parallelle punten, zodat een lezer in één oogopslag de relatie begrijpt. Gebruik het wanneer het paar nuttiger is naast elkaar dan weggestopt in een alinea: twee verantwoordelijkheden, twee fasen, twee perspectieven of twee complementaire delen van één antwoord.

Dat weergegeven voorbeeld is één infobox, één gedeelde titel en precies twee items. Beide items beantwoorden dezelfde soort vraag op vergelijkbare diepgang. Het element beweert niet dat de twee behoeften tegenpolen zijn; het toont dat een nuttige brief rekening moet houden met beide.

Waarom dit element ertoe doet

Dicht proza dwingt lezers om relaties zelf te reconstrueren. In een zin als “Een contentbrief moet de lezer dienen door een taak op te lossen en het bedrijf dienen door een gekwalificeerde actie te ondersteunen,” bestaan de twee verantwoordelijkheden wel, maar hun grenzen zijn zwak. Een infobox met twee kolommen maakt het gedeelde onderwerp eenmaal zichtbaar en geeft elke verantwoordelijkheid een benoemd gebied. Lezers kunnen beide koppen scannen, kiezen waar te beginnen en de hoeveelheid en soort detail vergelijken zonder een samengestelde zin opnieuw te lezen.

Het psychologische voordeel komt van chunking: het groeperen van gerelateerde informatie in afgebakende eenheden. De gedeelde titel vertelt de lezer wat constant blijft, terwijl de itemtitels laten zien wat verandert. Die hiërarchie is vooral nuttig wanneer geen van beide punten mag domineren. Gewoon proza geeft het eerste punt van nature meer prominentie en kan het tweede doen aanvoelen als een nabeschouwing; gelijkmatige kolommen geven beide punten een gelijkwaardig redactioneel gewicht.

Machine-uitleesbaarheid is het vermogen van software om een contenteenheid te isoleren terwijl de betekenis behouden blijft. Een getypeerde infobox toont een bovenliggend onderwerp en twee expliciete onderliggende items. Een retrievalsysteem kan de gedeelde titel, itemtitels, hoofdtekst en bronvolgorde bewaren in plaats van te raden waar de ene clausule eindigt en de andere begint. Elk item moet nog steeds zelfstandig zijn: “De zakelijke vereiste is bewijs dat een gekwalificeerde actie ondersteunt” overleeft extractie, terwijl “De andere kant” dat niet doet.

Structuur redt geen zwakke denkwijze. Als de bron één uitgewerkt punt en één zin bevat die voor symmetrie is toegevoegd, maakt de renderer de onbalans alleen maar zichtbaarder. Pas de schrijfregels voor elementen toe: schrijf eerst de volledige redenering, kies dit element pas wanneer het afgeronde idee daadwerkelijk twee parallelle delen heeft. De elementspecifieke regels op deze pagina hebben voorrang waar ze de exacte itemtoewijzing en limieten definiëren.

Wanneer gebruiken

Gebruik een infobox met twee kolommen wanneer aan alle vier de voorwaarden is voldaan:

1. Er is één duidelijk bovenliggend idee dat de hele box kan titelen.
2. Het bovenliggende idee verdeelt zich van nature in precies twee items.
3. Beide items vervullen dezelfde informatietaak, zoals het uitleggen van een verantwoordelijkheid, fase, doelgroeperspectief of dimensie.
4. Elk item kan worden begrepen in ongeveer 30–90 woorden zonder een geneste structuur.

Goede toepassingen zijn “Vóór lancering / Na lancering,” “Lezerssignaal / Bedrijfssignaal,” “Wat verandert / Wat blijft hetzelfde” en “Eigenaarsverantwoordelijkheid / Beoordelaarsverantwoordelijkheid.” De labels moeten een echte relatie blootleggen. Als de lezer de zin “Deze horen bij elkaar omdat…” niet kan afmaken, is de groepering waarschijnlijk decoratief.

Bijna-goede gevallen zijn belangrijk omdat een tweekolomslay-out bijna elk paar opzettelijk kan laten lijken. Gebruik het niet voor een enkel idee dat op een willekeurige zinsgrens is opgedeeld. Zet een lijst van vier items niet om in twee lange kolommen alleen om verticale ruimte te besparen; de bronvolgorde en scanbaarheid worden dan dubbelzinnig. Gebruik het niet voor een gedetailleerde productvergelijking met meerdere criteria, omdat een vergelijkingstabel elk criterium een expliciete rij geeft. Gebruik het niet voor voor- en nadelen wanneer het aantal punten verschilt of wanneer lezers meerdere afwegingen moeten maken. Koppel geen definitie aan een promotionele call-to-action: die blokken vervullen verschillende taken en verdienen geen gelijke behandeling.

Het sterkste waarschuwingssignaal is een label als “Overig,” “Meer” of “Aanvullende informatie.” Die labels onthullen dat de splitsing de beschikbare ruimte volgt in plaats van betekenis. Breng de content terug naar proza, of vind het daadwerkelijke onderscheid voordat je het element gebruikt.

Waar plaatsen

Plaats de infobox direct na de alinea die het gedeelde idee introduceert. De lezer heeft één zin context nodig voordat hij de splitsing tegenkomt, maar mag niet over niet-gerelateerd bewijs of een andere subsectie heen moeten om er te komen. Ga na de box verder met analyse, voorbeelden of instructies die voor beide items gelden.

De box mag direct onder een H2 staan wanneer de H2 zelf het bovenliggende idee levert en de infobox een eigen, specifiekere titel heeft. Hij mag ook volgen op een korte definitie wanneer de twee items dimensies van die definitie uitleggen. Hij mag niet verschijnen tussen een bewering en het bijbehorende citaat, tussen een stap en de voorwaarde om die stap uit te voeren, of binnen een item in een genummerde lijst. Die posities verbreken relaties die aaneengesloten moeten blijven.

Plaats het niet naast een andere infobox met twee kolommen, vergelijkingstabel, tabbladen of een voor- en nadelenblok. Aangrenzende parallelle structuren dwingen de lezer te beslissen welke visuele relatie ertoe doet en kunnen op brede schermen vier schijnbare kolommen creëren. Voeg verklarend proza in tussen verschillende structuren, of combineer het materiaal in één beter geschikte tabel of sectie. Vermijd plaatsing direct voor of na een call-to-action met twee kolommen; identieke geometrie kan redactionele uitleg er promotioneel laten uitzien.

Gebruik niet meer dan één infobox met twee kolommen in een korte sectie. Herhaling verandert een nuttig contrast in paginameubilair. Wanneer een lang artikel meerdere echte paren bevat, scheid ze dan onder verschillende koppen en bevestig dat elk paar een eigen bovenliggend idee heeft.

Anatomie

De anatomie bevat één bovenliggend gebied en twee herhaalde onderliggende gebieden. De schermafbeelding moet semantische delen labelen, niet opvulling of kleurwaarden, zodat de specificatie bruikbaar blijft als het visuele systeem verandert.

1. Buitengrens: Groepeert de bovenliggende titel en beide items als één redactionele eenheid.
2. Gedeelde titel: Benoemt het idee dat beide items uitleggen. Het is geen derde punt.
3. Eerste itemtitel en -tekst: Benoemt het eerste lid van het paar in volledige, extraheerbare taal.
4. Tweede itemtitel en -tekst: Beantwoordt dezelfde soort vraag met vergelijkbare diepgang.
5. Lay-outrelatie: Gebruikt kolommen van gelijke breedte wanneer de ruimte het toelaat en stapelt item één vóór item twee op smalle schermen.

Randen, achtergrond, tussenruimte, radius, letterschaal en breekpunt behoren tot de renderer. Auteurs controleren de contenthiërarchie en -volgorde, niet visuele kenmerken.

Ontwerpvoorbeelden

Er is één semantisch element met vier ondersteunde content- en viewportvarianten. Varianten veranderen de titelverwerking of responsieve presentatie; ze veranderen nooit de vereiste van precies twee items.

Standaard getitelde variant: De voorkeur voor zelfstandig gebruik. Een gedeelde titel benoemt het bovenliggende idee en beide onderliggende items hebben beknopte titels.

Contextuele titelvariant: De direct voorafgaande H2 kan fungeren als gedeelde titel. Dit is alleen toegestaan wanneer geen alinea of component de H2 van de box scheidt en de infobox een toegankelijke naam heeft die van die kop is afgeleid.

Compacte variant: Gebruik voor twee korte definities of verantwoordelijkheden. Elke tekst vormt nog steeds een volledige zin; de lay-out wordt geen paar slogans.

Small-scherm variant: Items stapelen verticaal. De volgorde blijft betekenisvol zonder verwijzingen naar “links,” “rechts,” “boven” of “ernaast.”

Pictogrammen zijn geen contentvariant. Als het ontwerpsysteem decoratieve pictogrammen toevoegt, gebruiken ze een lege alternatieve tekst en vervangen ze geen itemtitels. Als elk item een informatieve afbeelding nodig heeft, gebruik dan een afbeeldingsgericht element in plaats van dit infoboxcontract uit te breiden.

Parameters

Het parametercontract voorkomt dat het element afdrijft naar een generiek raster. Waarden die betekenis beschrijven, horen in de geschreven content; responsieve lay-out blijft in de renderer.

De titel is vereist, tenzij de direct voorafgaande documentkop hetzelfde bovenliggende onderwerp levert en de container programmatisch kan labelen. Itemteksten staan nadruk, inline code en één nuttige link toe. Ze staan geen geneste koppen, tabellen, media, accordeons, formulieren, calls-to-action of een andere infobox toe.

Syntax en codevoorbeelden

Alle drie notaties behouden dezelfde bovenliggende titel, twee geordende items, itemtitels en itemteksten. De draagbare Markdown-richtlijn is de canonieke bron. De Hugo- en WordPress-vormen zijn adaptercontracten; hun renderers moeten equivalente semantische HTML en responsieve volgorde produceren.

Draagbare Markdown-richtlijn

:::infobox-2-columns
## Een nuttige contentbrief beantwoordt twee vragen

::item
### Wat heeft de lezer nodig?

Benoem de vraag, beslissing of taak die de pagina moet oplossen, inclusief de context die het antwoord verandert.
::

::item
### Wat heeft het bedrijf nodig?

Benoem de gekwalificeerde actie die de pagina moet ondersteunen, samen met het bewijs dat nodig is om die actie te verdienen.
::
:::

De eerste bovenliggende kop wordt toegewezen aan title. Elke ::item wijst de eerste kop toe aan item.title en de resterende tekst aan item.content. Deze exacte tweee-itemstoewijzing overschrijft de algemene toestemming voor herhaalbare items in de basisregels.

Hugo-shortcode

{{< infobox-2-columns title="A useful content brief answers two questions" >}}
  {{< infobox-item title="What does the reader need?" >}}
  State the question, decision, or task the page must resolve, including the context that changes the answer.
  {{< /infobox-item >}}
  {{< infobox-item title="What does the business need?" >}}
  State the qualified action the page should support, along with the evidence required to earn that action.
  {{< /infobox-item >}}
{{< /infobox-2-columns >}}

De adapter gebruikt alleen benoemde parameters. Het moet een derde item weigeren in plaats van het stilzwijgend in te pakken, en het moet de geschreven itemvolgorde behouden wanneer de lay-out stapelt.

WordPress-blok

<!-- wp:amicited/infobox-2-columns {"title":"A useful content brief answers two questions"} -->
  <!-- wp:amicited/infobox-item {"title":"What does the reader need?"} -->
  <p>State the question, decision, or task the page must resolve, including the context that changes the answer.</p>
  <!-- /wp:amicited/infobox-item -->
  <!-- wp:amicited/infobox-item {"title":"What does the business need?"} -->
  <p>State the qualified action the page should support, along with the evidence required to earn that action.</p>
  <!-- /wp:amicited/infobox-item -->
<!-- /wp:amicited/infobox-2-columns -->

WordPress moet twee vaste itemsleuven tonen in plaats van een onbeperkt “blok toevoegen”-gebied. Redacteuren kunnen de twee items herordenen, maar kunnen geen niet-gerelateerd blok ertussen invoegen of een derde kolom toevoegen.

Voorbeelden

Goed voorbeeld

Dit werkt omdat de gedeelde titel één idee vestigt, de tijdsgrens een echt paar creëert en beide kolommen vergelijkbaar meetwerk specificeren. Elk item blijft betekenisvol wanneer het gestapeld of onafhankelijk geëxtraheerd wordt.

Slecht voorbeeld

Verbeter je content

Schrijf goed: Creëer nuttige, gezaghebbende, boeiende content waar je publiek van zal houden en die zoekmachines zullen belonen.

Andere dingen: SEO omvat ook technisch werk, links, conversieontwerp, analyses, merkopbouw, distributie, onderhoud en nog veel meer belangrijke activiteiten.

Dit faalt omdat het paar kunstmatig is. “Schrijf goed” is een vage instructie, “Andere dingen” is een diverse categorie, en het tweede item omvat veel meer dan het eerste. De box suggereert gelijke, parallelle concepten waar die niet bestaan. Vervang het door proza dat het daadwerkelijke contentdoel definieert, gebruik dan een lijst of aparte secties voor de afzonderlijke werkstromen.

Schema-opmaak en toegankelijkheid

Een infobox met twee kolommen heeft geen eigen Schema.org-type en creëert geen zelfstandige gestructureerde data. De tekst blijft onderdeel van de omringende Article, TechArticle of WebPage wanneer de pagina in aanmerking komt voor die opmaak. Markeer de twee items niet als ItemList alleen omdat het er twee zijn; het element vertegenwoordigt een relatie, niet per se een gerangschikte of volledige lijst. Als een item onafhankelijk een feit bevat dat elders in gestructureerde data wordt gebruikt, is het paginaniveau-schemabeleid van toepassing op dat feit.

Semantische HTML moet één gelabelde container met twee onderliggende secties uitdrukken. Gebruik een aside alleen wanneer het paar complementair is aan de omringende verhaallijn; gebruik een section wanneer het deel uitmaakt van de hoofdargumentatie. Geef de container een toegankelijke naam via de zichtbare titel en aria-labelledby. Elke kindtitel moet een echte kop op het juiste niveau zijn, niet vetgedrukte tekst die om visuele redenen is gekozen.

Bronvolgorde is de toegankelijkheidsvolgorde. Toetsenbordnavigatie, schermlezers, kopiëren-en-plakken en smalle schermen moeten item één vóór item twee tegenkomen. CSS mag kolommen creëren maar mag ze niet visueel omkeren. Verwijs nooit naar “de linkerkolom” of “de rechterkolom,” omdat die posities verdwijnen bij stapeling. Kleur, pictogramvorm en achtergrond mogen niet de enige manier zijn om items te onderscheiden. Het ontwerp moet tekstzoomen ondersteunen zonder afknippen, horizontaal scrollen of overlappende kolommen.

Schrijfregels

Begin met het schrijven van de bovenliggende zin: “Dit idee heeft twee delen: X en Y.” Als die zin onnauwkeurig is, gebruik het element dan niet. Geef beide itemtitels dezelfde grammaticale vorm — twee zelfstandige naamwoorden, twee vragen of twee tijdsaanduidingen — omdat parallel taalgebruik de relatie direct leesbaar maakt.

Gebruik precies twee items. Houd elke titel op 2–7 woorden en elke tekst op 30–90 woorden waar mogelijk, met een absoluut maximum van 120 woorden. Een verschil van een zin is acceptabel; een item van 35 woorden naast een item van 110 woorden vereist redactie of een andere structuur. Elke tekst moet dezelfde impliciete vraag beantwoorden en een vergelijkbare bewijsdiejpgang gebruiken. Gelijke diepgang betekent niet dat een kort antwoord moet worden opgevuld.

Gebruik directe, neutrale taal. Benoem het onderscheid in de titels en leg het gevolg uit in de teksten. Geef de voorkeur aan “Vóór lancering / Na lancering” boven “Eerste / Tweede,” omdat betekenisvolle labels extractie overleven. Vermijd “of/of” tenzij de keuzes werkelijk uitsluitend zijn, en vermijd “versus” wanneer de items complementair zijn.

Plaats nooit het volgende in het element:

• Een derde item, zelfs als de renderer het zou kunnen inpakken.
• Een meerstapsprocedure, lange opsomming, gegevenstabel, prijsraster, formulier, getuigenis of promotionele banner.
• Onafhankelijke H2-secties, geneste infoboxen, tabbladen, accordeons, video of afbeeldingsgalerijen.
• Verplichte juridische tekst, veiligheidswaarschuwingen, bronlijsten of kwalificaties die slechts van toepassing zijn op één zin buiten de box.
• Twee niet-gerelateerde links die zijn ontworpen om op concurrerende calls-to-action te lijken.

Als een van beide items tussenkopjes of meer dan twee alinea’s nodig heeft, promoveer beide items dan naar gewone paginasecties. Als lezers moeten kiezen tussen de items, voeg dan beslissingscriteria toe in proza of gebruik een vergelijkings- of beslissingselement; visuele symmetrie alleen legt geen keuze uit.

Posttypes die het gebruiken

Het postTypes-veld in de frontmatter is de bron voor deze gebruiksset. Elk vermeld formaat heeft een natuurlijke tweedelige relatie, maar geen enkel formaat mag het element standaard bevatten wanneer de content geen echt paar vormt.

QA-checklist

• Eén bovenliggend idee: De box heeft één duidelijk gedeeld onderwerp dat uitlegt waarom beide items bij elkaar horen.
• Precies twee items: Bron en weergegeven uitvoer bevatten twee onderliggende items — nooit één, drie of een lege sleuf.
• Echt parallelisme: Beide items beantwoorden dezelfde soort vraag en gebruiken titels met parallelle grammatica.
• Gelijke diepgang: Geen van beide items is een symbolisch tegenwicht of een diverse verzamelpost; detail en bewijs zijn vergelijkbaar.
• Nuttige plaatsing: De box volgt op de inleidende context en scheidt geen bewering van bewijs of een stap van de vereiste.
• Veilige buren: Het staat niet naast een ander parallel raster, vergelijkingscomponent of CTA met twee kolommen.
• Extraheerbare formulering: Bovenliggende en itemtitels benoemen hun onderwerpen, en teksten zijn niet afhankelijk van “links,” “rechts” of nabijgelegen voornaamwoorden.
• Responsieve volgorde: Smalle lay-outs stapelen item één vóór item twee zonder afknippen, horizontaal scrollen of visuele herordening.
• Toegankelijke structuur: De container heeft een zichtbaar programmatisch label, kindtitels zijn echte koppen en kleur of pictogrammen dragen niet alleen betekenis.
• Contentlimieten: Elke tekst blijft binnen twee alinea’s en bevat geen genest complex onderdeel, procedure of promotioneel element.
• Notatiepariteit: Draagbare Markdown, Hugo en WordPress behouden dezelfde titel, twee items, teksten en volgorde.
• Schemabeperking: Geen lijst- of vergelijkingsopmaak wordt toegevoegd tenzij de pagina-inhoud er onafhankelijk voor in aanmerking komt.

Een beoordelaar moet het element afwijzen wanneer een van de eerste vier controles faalt. Die fouten duiden op een conceptueel probleem, niet op een stylinggebrek, en het wijzigen van de breedte of decoratie kan ze niet herstellen.

FAQ

De FAQ-items in de frontmatter beantwoorden de terugkerende implementatievragen: het aantal items is vastgesteld op twee, diepgang is belangrijker dan identieke woordtellingen, gedetailleerde vergelijkingen hebben een tabel nodig, mobiel behoudt de bronvolgorde en het element genereert geen schema-opmaak. Door deze antwoorden in gestructureerde frontmatter te houden, kan het academiesjabloon de goedgekeurde FAQ-weergave tonen zonder de content in de body te dupliceren.