Infobox: 2 kolumner — Format, regler och exempel

En tvåkolumns-infobox delar upp en idé i exakt två parallella punkter så att en läsare kan förstå sambandet vid en blick. Använd den när paret är mer användbart sida vid sida än nedgrävt i ett stycke: två ansvarsområden, två stadier, två perspektiv eller två kompletterande delar av ett svar.

Det renderade exemplet är en infobox, en gemensam rubrik och exakt två objekt. Båda objekten besvarar samma typ av fråga med jämförbart djup. Elementet påstår inte att de två behoven är motsatser; det visar att en användbar brief måste ta hänsyn till båda.

Varför detta element är viktigt

Tät prosa tvingar läsare att rekonstruera relationer. I en mening som “En innehållsbrief måste tjäna läsaren genom att lösa en uppgift och tjäna verksamheten genom att stödja en kvalificerad åtgärd” finns de två ansvarsområdena, men deras gränser är svaga. En tvåkolumns-infobox gör det gemensamma ämnet synligt en gång och ger varje ansvarsområde en namngiven region. Läsare kan skanna båda rubrikerna, välja var de vill börja och jämföra mängden och typen av detaljer utan att läsa om en sammansatt mening.

Den psykologiska fördelen kommer från chunking: att gruppera relaterad information i avgränsade enheter. Den gemensamma rubriken berättar för läsaren vad som är konstant, medan objektens rubriker visar vad som förändras. Den hierarkin är särskilt användbar när ingen punkt bör dominera. Vanlig prosa ger naturligt den första punkten mer framträdande plats och kan få den andra att kännas som en eftertanke; matchade kolumner signalerar likvärdig redaktionell vikt.

Maskinextraherbarhet är förmågan hos programvara att isolera en innehållsenhet samtidigt som dess betydelse bevaras. En maskinskriven infobox exponerar ett överordnat ämne och två explicita underobjekt. Ett hämtningssystem kan bevara den gemensamma rubriken, objektens rubriker, brödtext och källordning istället för att gissa var en sats slutar och en annan börjar. Varje objekt måste fortfarande vara självständigt: “Verksamhetskravet är bevisning som stödjer en kvalificerad åtgärd” överlever extraktion, medan “Den andra sidan” inte gör det.

Struktur räddar inte svagt tänkande. Om källan innehåller en utvecklad punkt och en mening som lagts till för symmetrins skull, gör renderaren bara obalansen mer uppenbar. Tillämpa skrivreglerna för element : skriv först hela resonemanget, välj sedan detta element endast när den färdiga idén verkligen har två parallella delar. De elementspecifika reglerna på denna sida har företräde där de definierar elementets exakta objektmappning och begränsningar.

När du ska använda det

Använd en tvåkolumns-infobox när alla fyra villkoren är uppfyllda:

1. Det finns en tydlig överordnad idé som kan rubriksätta hela boxen.
2. Den överordnade idén delas naturligt upp i exakt två objekt.
3. Båda objekten utför samma informationsuppgift, såsom att förklara ett ansvar, en fas, ett målgruppsperspektiv eller en dimension.
4. Varje objekt kan förstås på ungefär 30–90 ord utan en nästlad struktur.

Bra användningsområden inkluderar “Före lansering / Efter lansering,” “Läsarsignal / Verksamhetssignal,” “Vad förändras / Vad förblir samma” och “Ägaransvar / Granskarens ansvar.” Etiketterna bör exponera en verklig relation. Om läsaren inte kan fullfölja meningen “Dessa hör ihop för att…” är grupperingen troligen dekorativ.

Gränsfallsituationer är viktiga eftersom en tvåkolumnslayout kan få nästan vilket par som helst att se avsiktligt ut. Använd det inte för en enskild idé som delats vid en godtycklig meningsbrytning. Förvandla inte en lista med fyra objekt till två långa kolumner enbart för att spara vertikalt utrymme; källordning och skanning blir tvetydiga. Använd det inte för en detaljerad produktjämförelse med flera kriterier, eftersom en jämförelsetabell ger varje kriterium en explicit rad. Använd det inte för för- och nackdelar när antalet punkter skiljer sig eller när läsare måste väga flera avvägningar. Para inte ihop en definition med en marknadsföringsåtgärd: dessa block utför olika jobb och förtjänar inte likvärdig behandling.

Den starkaste varningssignalen är en etikett som “Annat,” “Mer” eller “Ytterligare information.” Dessa etiketter avslöjar att uppdelningen följer tillgängligt utrymme snarare än mening. Återför innehållet till prosa, eller hitta den faktiska distinktionen innan du använder elementet.

Var du ska placera det

Placera infoboxen omedelbart efter det stycke som introducerar den gemensamma idén. Läsaren behöver en mening med sammanhang innan de möter uppdelningen, men bör inte behöva passera orelaterad bevisning eller en annan underavdelning för att nå den. Efter boxen, fortsätt med analys, exempel eller instruktioner som gäller båda objekten.

Den kan placeras direkt under en H2 när H2:n själv tillhandahåller den överordnade idén och infoboxen har sin egen mer specifika rubrik. Den kan också följa en kort definition när de två objekten förklarar dimensioner av den definitionen. Den får inte placeras mellan ett påstående och dess källa, mellan ett steg och villkoret som krävs för att slutföra det steget, eller inuti ett objekt i en ordnad lista. Dessa positioner bryter relationer som bör förbli sammanhängande.

Placera den inte bredvid en annan tvåkolumns-infobox, jämförelsetabell, flikuppsättning eller för- och nackdelar-block. Intilliggande parallella strukturer tvingar läsaren att avgöra vilken visuell relation som är viktig och kan skapa fyra skenbara kolumner på breda skärmar. Infoga förklarande prosa mellan distinkta strukturer, eller kombinera materialet till en bättre anpassad tabell eller sektion. Undvik att placera den omedelbart före eller efter en tvåkolumns uppmaning till handling (CTA); identisk geometri kan få redaktionell förklaring att se ut som reklam.

Använd högst en tvåkolumns-infobox i en kort sektion. Upprepning förvandlar en användbar kontrast till sidmöbel. När en lång artikel innehåller flera genuina par, separera dem under olika rubriker och bekräfta att varje par har en distinkt överordnad idé.

Anatomi

Anatomin innehåller en överordnad region och två upprepade underregioner. Skärmdumpen bör märka semantiska delar, inte utfyllnad eller färgtoken, så att specifikationen förblir användbar om det visuella systemet ändras.

1. Yttre gräns: Grupperar den överordnade rubriken och båda objekten som en redaktionell enhet.
2. Gemensam rubrik: Namnger idén som båda objekten förklarar. Den är inte en tredje punkt.
3. Första objektets rubrik och brödtext: Anger den första medlemmen av paret i fullständigt, extraherbart språk.
4. Andra objektets rubrik och brödtext: Besvarar samma typ av fråga med matchat djup.
5. Layoutrelation: Använder kolumner med lika bredd när utrymme tillåter och staplar objekt ett före objekt två på smala skärmar.

Kanter, bakgrund, mellanrum, hörnradie, typografisk skala och brytpunkt tillhör renderaren. Författare kontrollerar innehållshierarkin och ordningen, inte visuella token.

Designexempel

Det finns ett semantiskt element med fyra varianter för innehåll och visningsyta. Varianter ändrar rubricering eller responsiv presentation; de ändrar aldrig kravet på exakt två objekt.

Standardvariant med rubrik: Föredragen för fristående användning. En gemensam rubrik namnger den överordnade idén, och båda underobjekten har koncisa rubriker.

Kontextrubrikvariant: Den omedelbart föregående H2:n kan fungera som den gemensamma rubriken. Detta är tillåtet endast när inget stycke eller komponent separerar H2:n från boxen och infoboxen har ett tillgängligt namn härlett från den rubriken.

Kompakt variant: Använd för två korta definitioner eller ansvarsområden. Varje brödtext utgör fortfarande en fullständig mening; layouten blir inte ett par taglines.

Small-visningsyta-variant: Objekt staplas vertikalt. Ordningen förblir meningsfull utan hänvisningar till “vänster,” “höger,” “ovanför” eller “bredvid.”

Ikoner är inte en innehållsvariant. Om designsystemet lägger till dekorativa ikoner använder de tom alternativtext och ersätter inte objektrubriker. Om varje objekt behöver en informativ bild, använd ett bildorienterat element istället för att utöka detta infobox-kontrakt.

Parametrar

Parameterkontraktet förhindrar att elementet driver iväg till ett generiskt rutnät. Värden som beskriver mening hör till det författade innehållet; responsiv layout stannar i renderaren.

Rubriken krävs om inte den omedelbart föregående dokumentrubriken tillhandahåller samma överordnade ämne och kan märka behållaren programmatiskt. Objektens brödtext tillåter betoning, inline-kod och en användbar länk. De tillåter inte nästlade rubriker, tabeller, media, accordions, formulär, uppmaningar till handling eller en annan infobox.

Syntax och kodexempel

Alla tre notationerna bevarar samma överordnade rubrik, två ordnade objekt, objektrubriker och objektbrödtexter. Det portabla Markdown-direktivet är den kanoniska källan. Hugo- och WordPress-formerna är adapterkontrakt; deras renderare måste producera motsvarande semantisk HTML och responsiv ordning.

Portabelt Markdown-direktiv

:::infobox-2-columns
## En användbar innehållsbrief besvarar två frågor

::item
### Vad behöver läsaren?

Ange frågan, beslutet eller uppgiften som sidan måste lösa, inklusive sammanhanget som förändrar svaret.
::

::item
### Vad behöver verksamheten?

Ange den kvalificerade åtgärd som sidan ska stödja, tillsammans med den bevisning som krävs för att förtjäna den åtgärden.
::
:::

Den första överordnade rubriken mappas till title. Varje ::item mappar sin första rubrik till item.title och den återstående brödtexten till item.content. Denna exakta tvåobjektsmappning åsidosätter den allmänna tillåtelsen för upprepningsbara objekt i basreglerna.

Hugo shortcode

{{< infobox-2-columns title="En användbar innehållsbrief besvarar två frågor" >}}
  {{< infobox-item title="Vad behöver läsaren?" >}}
  Ange frågan, beslutet eller uppgiften som sidan måste lösa, inklusive sammanhanget som förändrar svaret.
  {{< /infobox-item >}}
  {{< infobox-item title="Vad behöver verksamheten?" >}}
  Ange den kvalificerade åtgärd som sidan ska stödja, tillsammans med den bevisning som krävs för att förtjäna den åtgärden.
  {{< /infobox-item >}}
{{< /infobox-2-columns >}}

Adaptern använder endast namngivna parametrar. Den måste avvisa ett tredje objekt snarare än att tyst slå in det, och den måste bevara den författade objektordningen när layouten staplas.

WordPress-block

<!-- wp:amicited/infobox-2-columns {"title":"En användbar innehållsbrief besvarar två frågor"} -->
  <!-- wp:amicited/infobox-item {"title":"Vad behöver läsaren?"} -->
  <p>Ange frågan, beslutet eller uppgiften som sidan måste lösa, inklusive sammanhanget som förändrar svaret.</p>
  <!-- /wp:amicited/infobox-item -->
  <!-- wp:amicited/infobox-item {"title":"Vad behöver verksamheten?"} -->
  <p>Ange den kvalificerade åtgärd som sidan ska stödja, tillsammans med den bevisning som krävs för att förtjäna den åtgärden.</p>
  <!-- /wp:amicited/infobox-item -->
<!-- /wp:amicited/infobox-2-columns -->

WordPress bör exponera två fasta objektplatser istället för ett obegränsat “lägg till block”-område. Redaktörer kan ändra ordning på de två objekten men kan inte infoga ett orelaterat block mellan dem eller lägga till en tredje kolumn.

Exempel

Bra exempel

Detta fungerar eftersom den gemensamma rubriken etablerar en idé, tidsgränsen skapar ett äkta par och båda kolumnerna specificerar jämförbart mätarbete. Varje objekt förblir meningsfullt när det staplas eller extraheras oberoende.

Dåligt exempel

Förbättra ditt innehåll

Skriv väl: Skapa användbart, auktoritativt och engagerande innehåll som din publik kommer att älska och sökmotorer belöna.

Andra saker: SEO inkluderar även tekniskt arbete, länkar, konverteringsdesign, analys, varumärkesbyggande, distribution, underhåll och många fler viktiga aktiviteter.

Detta misslyckas eftersom paret är konstlat. “Skriv väl” är en vag instruktion, “Andra saker” är en blandad kategori och det andra objektet omfattar långt mer än det första. Boxen antyder likvärdiga, parallella koncept där inga finns. Ersätt med prosa som definierar det faktiska innehållsmålet, använd sedan en lista eller separata avsnitt för de distinkta arbetsströmmarna.

Schema-markup och tillgänglighet

En tvåkolumns-infobox har ingen dedikerad Schema.org-typ och skapar inte fristående strukturerad data. Dess text förblir en del av den omslutande Article, TechArticle eller WebPage när sidan kvalificerar sig för den markupen. Märk inte de två objekten som ItemList enbart för att det finns två av dem; elementet representerar en relation, inte nödvändigtvis en rangordnad eller fullständig lista. Om ett objekt oberoende innehåller ett faktum som används någon annanstans i strukturerad data, styr sidnivåns schemapolicy det faktumet.

Semantisk HTML bör uttrycka en märkt behållare med två undersektioner. Använd ett aside endast när paret är komplementärt till den omgivande berättelsen; använd en section när det är en del av huvudargumentet. Ge behållaren ett tillgängligt namn genom dess synliga rubrik och aria-labelledby. Varje underrubrik måste vara en verklig rubrik på rätt nivå, inte fetstil text vald för utseende.

Källordning är tillgänglighetsordning. Tangentbordsnavigation, skärmläsare, kopiera-och-klistra och smala skärmar måste möta objekt ett före objekt två. CSS får skapa kolumner men får inte visuellt vända på dem. Hänvisa aldrig till “den vänstra boxen” eller “den högra boxen,” eftersom dessa positioner försvinner när de staplas. Färg, ikonform och bakgrund kan inte vara det enda sättet att skilja objekt åt. Designen måste stödja textzoom utan beskärning, horisontell scrollning eller överlappande kolumner.

Skrivregler

Börja med att skriva den överordnade meningen: “Denna idé har två delar: X och Y.” Om den meningen är felaktig, använd inte elementet. Ge båda objektrubrikerna samma grammatiska form — två substantiv, två frågor eller två tidsfraser — eftersom parallellt språk gör relationen omedelbart läsbar.

Använd exakt två objekt. Håll varje rubrik till 2–7 ord och varje brödtext till 30–90 ord där möjligt, med ett absolut maximum på 120 ord. En menings skillnad är acceptabel; ett 35-ords objekt bredvid ett 110-ords objekt kräver redigering eller en annan struktur. Varje brödtext bör besvara samma underförstådda fråga och använda jämförbart bevisdjup. Matchat djup innebär inte att fylla ut ett kort svar med utfyllnad.

Använd direkt, neutralt språk. Ange distinktionen i rubrikerna och förklara dess konsekvens i brödtexterna. Föredra “Före lansering / Efter lansering” framför “Första / Andra,” eftersom meningsfulla etiketter överlever extraktion. Undvik “antingen/eller” om inte valen är genuint uteslutande, och undvik “kontra” när objekten är kompletterande.

Placera aldrig följande inuti elementet:

• Ett tredje objekt, även om renderaren skulle kunna slå in det.
• En procedur med flera steg, lång punktlista, datatabell, prisrutnät, formulär, rekommendation eller reklambanner.
• Oberoende H2-sektioner, nästlade infoboxar, flikar, accordions, video eller bildgallerier.
• Obligatorisk juridisk text, säkerhetsvarningar, källförteckningar eller kvalifikationer som endast gäller en mening utanför boxen.
• Två orelaterade länkar utformade för att likna konkurrerande uppmaningar till handling.

Om något objekt behöver underrubriker eller mer än två stycken, flytta upp båda objekten till vanliga sidsektioner. Om läsare behöver välja mellan objekten, lägg till besluts-kriterier i prosa eller använd ett jämförelse- eller beslutselement; visuell symmetri ensam förklarar inte ett val.

Inläggstyper som använder det

Fältet postTypes i frontmatter är källan för denna användningsuppsättning. Varje listat format har en naturlig tvådelad relation, men ingen bör inkludera elementet som standard när innehållet inte utgör ett äkta par.

QA-checklista

• En överordnad idé: Boxen har ett tydligt gemensamt ämne som förklarar varför båda objekten hör ihop.
• Exakt två objekt: Källa och renderad utdata innehåller två underobjekt — aldrig ett, tre eller en tom plats.
• Äkta parallellism: Båda objekten besvarar samma typ av fråga och använder rubriker med parallell grammatik.
• Matchat djup: Inget objekt är en token-motvikt eller en blandad kategori; detalj och bevis är jämförbara.
• Användbar placering: Boxen följer sitt introducerande sammanhang och separerar inte ett påstående från bevis eller ett steg från dess krav.
• Säkra grannar: Den är inte intilliggande till ett annat parallellt rutnät, jämförelsekomponent eller tvåkolumns-CTA.
• Extraherbar formulering: Överordnade och objektens rubriker namnger sina ämnen, och brödtexter är inte beroende av “vänster,” “höger” eller närliggande pronomen.
• Responsiv ordning: Smala layouter staplar objekt ett före objekt två utan beskärning, horisontell scrollning eller visuell omordning.
• Tillgänglig struktur: Behållaren har en synlig programmatisk etikett, underrubriker är verkliga rubriker och färg eller ikoner bär inte mening ensamma.
• Innehållsbegränsningar: Varje brödtext håller sig inom två stycken och innehåller ingen nästlad komplex komponent, procedur eller marknadsföringskontroll.
• Notationsparitet: Portabel Markdown, Hugo och WordPress bevarar samma rubrik, två objekt, brödtexter och ordning.
• Schematillbakahållning: Ingen lista eller jämförelsemarkup läggs till om inte sidans innehåll oberoende kvalificerar sig för det.

En granskare bör avvisa elementet när någon av de första fyra kontrollerna misslyckas. Dessa misslyckanden indikerar ett konceptuellt problem, inte en stildefekt, och att ändra bredd eller dekoration kan inte reparera dem.

FAQ

Frontmatterns FAQ-poster besvarar de återkommande implementeringsfrågorna: antalet objekt är fastställt till två, djup är viktigare än identiskt antal ord, detaljerade jämförelser behöver en tabell, mobil bevarar källordning och elementet genererar inte schemamarkup. Genom att hålla dessa svar i strukturerad frontmatter kan akademimallen rendera den godkända FAQ-behandlingen utan att duplicera innehållet i brödtexten.