Infobox: 2 sloupce — Formát, pravidla a příklady

Dvousloupcový infobox rozděluje jednu myšlenku na přesně dva paralelní body, takže čtenář pochopí vztah na první pohled. Použijte jej, když je dvojice užitečnější vedle sebe než zakopaná v odstavci: dvě odpovědnosti, dvě fáze, dva úhly pohledu nebo dvě komplementární části jedné odpovědi.

Tento vykreslený příklad je jeden infobox, jeden sdílený název a přesně dvě položky. Obě položky odpovídají na stejný typ otázky ve srovnatelné hloubce. Element netvrdí, že tyto dvě potřeby jsou protiklady; ukazuje, že užitečný brief musí zohlednit obě.

Proč na tomto elementu záleží

Hustá próza nutí čtenáře rekonstruovat vztahy. Ve větě jako „Obsahový brief musí sloužit čtenáři vyřešením úkolu a sloužit byznysu podporou kvalifikované akce“ obě odpovědnosti existují, ale jejich hranice jsou slabé. Dvousloupcový infobox zviditelní sdílené téma jednou a každé odpovědnosti přiřadí pojmenovanou oblast. Čtenáři mohou proskenovat oba nadpisy, vybrat si, kde začnou, a porovnat množství a typ detailů, aniž by museli znovu číst souvětí.

Psychologický přínos pramení z chunkování: seskupování souvisejících informací do ohraničených jednotek. Sdílený nadpis říká čtenáři, co zůstává konstantní, zatímco názvy položek ukazují, co se mění. Tato hierarchie je užitečná zejména tehdy, když by žádný z bodů neměl dominovat. Běžná próza přirozeně dává prvnímu bodu větší důraz a druhý může působit jako dodatečný nápad; spárované sloupce signalizují stejnou redakční váhu.

Strojová extrahovatelnost je schopnost softwaru izolovat obsahovou jednotku při zachování jejího významu. Typovaný infobox odhaluje nadřazené téma a dvě explicitní podřízené položky. Vyhledávací systém může zachovat sdílený nadpis, názvy položek, text těla a pořadí zdroje, místo aby hádal, kde jedna věta končí a druhá začíná. Každá položka musí být stále soběstačná: „Požadavek byznysu jsou důkazy podporující kvalifikovanou akci“ přežije extrakci, zatímco „Druhá strana“ nikoli.

Struktura nezachrání slabé myšlení. Pokud zdroj obsahuje jeden rozpracovaný bod a jednu větu přidanou pro symetrii, renderer nerovnováhu jen zviditelní. Aplikujte pravidla pro psaní elementů : nejprve napište celé zdůvodnění, pak tento element použijte pouze tehdy, když má hotová myšlenka skutečně dvě paralelní části. Pravidla specifická pro tento element na této stránce mají přednost tam, kde definují přesné mapování položek a omezení.

Kdy jej použít

Použijte dvousloupcový infobox, když jsou splněny všechny čtyři podmínky:

1. Existuje jedna jasná nadřazená myšlenka, která může pojmenovat celý box.
2. Nadřazená myšlenka se přirozeně dělí na přesně dvě položky.
3. Obě položky plní stejnou informační úlohu, například vysvětlují odpovědnost, fázi, perspektivu publika nebo dimenzi.
4. Každou položku lze pochopit zhruba ve 30–90 slovech bez vnořené struktury.

Mezi dobrá použití patří „Před spuštěním / Po spuštění“, „Signál čtenáře / Signál byznysu“, „Co se mění / Co zůstává stejné“ a „Odpovědnost vlastníka / Odpovědnost recenzenta“. Popisky by měly odhalovat skutečný vztah. Pokud čtenář nemůže dokončit větu „Tyto patří k sobě, protože…“, je seskupení pravděpodobně dekorativní.

Okrajové případy jsou důležité, protože dvousloupcové rozvržení může téměř každý pár učinit záměrným. Nepoužívejte jej pro jedinou myšlenku rozdělenou na libovolném místě zlomu věty. Nepřeměňujte seznam čtyř položek na dva dlouhé sloupce jen kvůli úspoře vertikálního místa; pořadí zdroje a skenovatelnost se stanou nejednoznačnými. Nepoužívejte jej pro detailní srovnání produktů s více kritérii, protože srovnávací tabulka dává každému kritériu explicitní řádek. Nepoužívejte jej pro výhody a nevýhody, když se počet bodů liší nebo když čtenáři musí zvažovat několik kompromisů. Nepárujte definici s propagační výzvou k akci: tyto bloky plní různé úlohy a nezaslouží si stejné zacházení.

Nejsilnějším varovným signálem je popisek jako „Ostatní“, „Další“ nebo „Doplňující informace“. Tyto popisky odhalují, že rozdělení sleduje dostupné místo spíše než význam. Vraťte obsah do prózy, nebo najděte skutečné rozlišení před použitím elementu.

Kam jej umístit

Umístěte infobox ihned za odstavec, který představuje sdílenou myšlenku. Čtenář potřebuje jednu větu kontextu, než narazí na rozdělení, ale neměl by procházet nesouvisejícími důkazy nebo další podsekcí, aby se k němu dostal. Za boxem pokračujte analýzou, příklady nebo instrukcemi, které platí pro obě položky.

Může být umístěn přímo pod H2, když samotný H2 poskytuje nadřazenou myšlenku a infobox má svůj vlastní specifičtější název. Může také následovat po krátké definici, když dvě položky vysvětlují dimenze této definice. Nesmí se objevit mezi tvrzením a jeho citací, mezi krokem a podmínkou potřebnou k provedení tohoto kroku, ani uvnitř položky číslovaného seznamu. Tyto pozice narušují vztahy, které by měly zůstat souvislé.

Neumisťujte jej vedle jiného dvousloupcového infoboxu, srovnávací tabulky, sady záložek nebo bloku výhod a nevýhod. Sousední paralelní struktury nutí čtenáře rozhodovat, který vizuální vztah je důležitější, a mohou na širokých obrazovkách vytvářet čtyři zdánlivé sloupce. Vložte vysvětlující prózu mezi odlišné struktury, nebo materiál slučte do jedné lépe vyhovující tabulky či sekce. Vyhněte se umístění bezprostředně před nebo za dvousloupcovou výzvu k akci; identická geometrie může způsobit, že redakční vysvětlení bude vypadat propagačně.

Použijte nejvýše jeden dvousloupcový infobox v krátké sekci. Opakování promění užitečný kontrast v rozvržení stránky. Pokud dlouhý článek obsahuje několik skutečných dvojic, oddělte je pod různými nadpisy a ověřte, že každá dvojice má odlišnou nadřazenou myšlenku.

Anatomie

Anatomie obsahuje jednu nadřazenou oblast a dvě opakované podřízené oblasti. Screenshot by měl popisovat sémantické části, nikoli výplň nebo barevné tokeny, aby specifikace zůstala užitečná, pokud se vizuální systém změní.

1. Vnější ohraničení: Seskupuje nadřazený nadpis a obě položky jako jednu redakční jednotku.
2. Sdílený nadpis: Pojmenovává myšlenku, kterou obě položky vysvětlují. Není třetím bodem.
3. Nadpis a tělo první položky: Uvádí prvního člena dvojice v úplném, extrahovatelném jazyce.
4. Nadpis a tělo druhé položky: Odpovídá na stejný typ otázky se stejnou hloubkou.
5. Vztah rozvržení: Používá sloupce stejné šířky, když to prostor umožňuje, a na úzkých obrazovkách skládá první položku před druhou.

Okraje, pozadí, mezera, zaoblení, škála písma a breakpoint patří do rendereru. Autoři kontrolují hierarchii obsahu a pořadí, nikoli vizuální tokeny.

Příklady designu

Existuje jeden sémantický element se čtyřmi podporovanými variantami obsahu a zobrazení. Varianty mění zacházení s nadpisem nebo responzivní prezentaci; nikdy nemění požadavek na přesně dvě položky.

Výchozí varianta s nadpisem: Preferovaná pro samostatné použití. Sdílený nadpis pojmenovává nadřazenou myšlenku a obě podřízené položky mají stručné názvy.

Varianta s kontextuálním nadpisem: Bezprostředně předcházející H2 může sloužit jako sdílený nadpis. To je povoleno pouze tehdy, když mezi H2 a boxem není žádný odstavec nebo komponenta a infobox má přístupný název odvozený z tohoto nadpisu.

Kompaktní varianta: Použijte pro dvě krátké definice nebo odpovědnosti. Každé tělo stále tvoří celou větu; rozvržení se nestává dvojicí sloganů.

Varianta pro úzké zobrazení: Položky se vertikálně skládají. Pořadí zůstává smysluplné bez odkazů na „vlevo“, „vpravo“, „nad“ nebo „vedle“.

Ikony nejsou variantou obsahu. Pokud designový systém přidá dekorativní ikony, používají prázdný alternativní text a nenahrazují názvy položek. Pokud každá položka potřebuje informativní obrázek, použijte místo rozšiřování tohoto infoboxového kontraktu element zaměřený na obrázky.

Parametry

Parametrový kontrakt zabraňuje driftování elementu do generické mřížky. Hodnoty popisující význam patří do autorovaného obsahu; responzivní rozvržení zůstává v rendereru.

Nadpis je povinný, pokud bezprostředně předcházející nadpis dokumentu neposkytuje stejné nadřazené téma a nemůže kontejner označit programově. Těla položek umožňují zvýraznění, inline kód a jeden užitečný odkaz. Nepovolují vnořené nadpisy, tabulky, média, akordeony, formuláře, výzvy k akci ani další infobox.

Syntaxe a příklady kódu

Všechny tři zápisy zachovávají stejný nadřazený nadpis, dvě uspořádané položky, názvy položek a těla položek. Přenosná Markdown direktiva je kanonickým zdrojem. Formy pro Hugo a WordPress jsou adaptérové kontrakty; jejich renderery musí produkovat ekvivalentní sémantické HTML a responzivní pořadí.

Přenosná Markdown direktiva

:::infobox-2-columns
## Užitečný obsahový brief odpovídá na dvě otázky

::item
### Co čtenář potřebuje?

Uveďte otázku, rozhodnutí nebo úkol, který musí stránka vyřešit, včetně kontextu, který mění odpověď.
::

::item
### Co potřebuje byznys?

Uveďte kvalifikovanou akci, kterou má stránka podpořit, spolu s důkazy potřebnými k získání této akce.
::
:::

První nadřazený nadpis se mapuje na title. Každý ::item mapuje svůj první nadpis na item.title a zbývající tělo na item.content. Toto přesné mapování dvou položek přepisuje obecné povolení opakovatelných položek v základních pravidlech.

Hugo shortcode

{{< infobox-2-columns title="Užitečný obsahový brief odpovídá na dvě otázky" >}}
  {{< infobox-item title="Co čtenář potřebuje?" >}}
  Uveďte otázku, rozhodnutí nebo úkol, který musí stránka vyřešit, včetně kontextu, který mění odpověď.
  {{< /infobox-item >}}
  {{< infobox-item title="Co potřebuje byznys?" >}}
  Uveďte kvalifikovanou akci, kterou má stránka podpořit, spolu s důkazy potřebnými k získání této akce.
  {{< /infobox-item >}}
{{< /infobox-2-columns >}}

Adaptér používá pouze pojmenované parametry. Musí odmítnout třetí položku místo tichého zabalení a musí zachovat autorované pořadí položek, když se rozvržení skládá.

WordPress blok

<!-- wp:amicited/infobox-2-columns {"title":"Užitečný obsahový brief odpovídá na dvě otázky"} -->
  <!-- wp:amicited/infobox-item {"title":"Co čtenář potřebuje?"} -->
  <p>Uveďte otázku, rozhodnutí nebo úkol, který musí stránka vyřešit, včetně kontextu, který mění odpověď.</p>
  <!-- /wp:amicited/infobox-item -->
  <!-- wp:amicited/infobox-item {"title":"Co potřebuje byznys?"} -->
  <p>Uveďte kvalifikovanou akci, kterou má stránka podpořit, spolu s důkazy potřebnými k získání této akce.</p>
  <!-- /wp:amicited/infobox-item -->
<!-- /wp:amicited/infobox-2-columns -->

WordPress by měl vystavit dvě pevné pozice položek namísto neomezené oblasti „přidat blok“. Editoři mohou položky přeuspořádat, ale nemohou mezi ně vložit nesouvisející blok ani přidat třetí sloupec.

Příklady

Dobrý příklad

Toto funguje, protože sdílený nadpis stanovuje jednu myšlenku, časová hranice vytváří skutečnou dvojici a oba sloupce specifikují srovnatelnou měřicí práci. Každá položka zůstává smysluplná při samostatném zobrazení nebo extrakci.

Špatný příklad

Zlepšete svůj obsah

Pište dobře: Vytvářejte užitečný, autoritativní a poutavý obsah, který vaše publikum miluje a který vyhledávače odmění.

Ostatní věci: SEO také zahrnuje technickou práci, odkazy, konverzní design, analytiku, budování značky, distribuci, údržbu a mnoho dalších důležitých činností.

Toto selhává, protože dvojice je umělá. „Pište dobře“ je vágní instrukce, „Ostatní věci“ je různorodá kategorie a druhá položka obsahuje mnohem větší rozsah než první. Box implikuje stejné, paralelní koncepty tam, kde žádné neexistují. Nahraďte jej prózou, která definuje skutečný obsahový cíl, a poté použijte seznam nebo samostatné sekce pro jednotlivé pracovní proudy.

Schema markup a přístupnost

Dvousloupcový infobox nemá vyhrazený typ Schema.org a nevytváří samostatná strukturovaná data. Jeho text zůstává součástí obalujícího Article, TechArticle nebo WebPage, pokud stránka pro toto značení splňuje podmínky. Neoznačujte dvě položky jako ItemList jen proto, že jsou dvě; element představuje vztah, nikoli nutně seřazený nebo úplný seznam. Pokud položka samostatně obsahuje fakt použitý jinde ve strukturovaných datech, řídí se tímto faktem pravidla schema na úrovni stránky.

Sémantické HTML by mělo vyjadřovat jeden označený kontejner se dvěma podřízenými sekcemi. Použijte aside pouze tehdy, když je dvojice doplňková k okolnímu vyprávění; použijte section, když je součástí hlavního argumentu. Kontejneru poskytněte přístupný název prostřednictvím jeho viditelného nadpisu a aria-labelledby. Každý podřízený nadpis musí být skutečný nadpis na správné úrovni, nikoli tučný text zvolený pro vzhled.

Pořadí zdroje je pořadím přístupnosti. Navigace klávesnicí, čtečky obrazovky, kopírování a vkládání a úzké obrazovky musí narazit na první položku před druhou. CSS může vytvářet sloupce, ale nesmí je vizuálně obracet. Nikdy neodkazujte na „levý box“ nebo „pravý box“, protože tyto pozice při skládání mizí. Barva, tvar ikony a pozadí nemohou být jediným způsobem, jak položky rozlišit. Design musí podporovat zoom textu bez ořezávání, horizontálního posouvání nebo překrývání sloupců.

Pravidla psaní

Začněte napsáním nadřazené věty: „Tato myšlenka má dvě části: X a Y.“ Pokud je tato věta nepřesná, element nepoužívejte. Dejte oběma názvům položek stejný gramatický tvar — dvě podstatná jména, dvě otázky nebo dva časové údaje — protože paralelní jazyk činí vztah okamžitě čitelným.

Použijte přesně dvě položky. Každý název udržujte na 2–7 slovech a každé tělo na 30–90 slovech, pokud možno, s absolutním maximem 120 slov. Rozdíl jedné věty je přijatelný; 35slovná položka vedle 110slovné vyžaduje úpravu nebo jinou strukturu. Každé tělo by mělo odpovídat na stejnou implicitní otázku a používat srovnatelnou hloubku důkazů. Stejná hloubka neznamená vycpávat krátkou odpověď výplní.

Používejte přímý, neutrální jazyk. Uveďte rozlišení v názvech a vysvětlete jeho důsledek v tělech. Preferujte „Před spuštěním / Po spuštění“ před „První / Druhý“, protože smysluplné popisky přežijí extrakci. Vyhněte se „buď/nebo“, pokud volby nejsou skutečně vzájemně se vylučující, a vyhněte se „versus“, když jsou položky komplementární.

Nikdy do elementu nevkládejte:

• Třetí položku, i kdyby ji renderer mohl zabalit.
• Vícekrokový postup, dlouhý seznam odrážek, datovou tabulku, cenovou mřížku, formulář, reference nebo propagační banner.
• Samostatné sekce H2, vnořené infoboxy, záložky, akordeony, video nebo galerie obrázků.
• Povinný právní text, bezpečnostní varování, seznamy zdrojů nebo kvalifikace, které platí jen pro jednu větu mimo box.
• Dva nesouvisející odkazy navržené tak, aby připomínaly konkurenční výzvy k akci.

Pokud některá položka potřebuje podnadpisy nebo více než dva odstavce, povýšte obě položky na běžné sekce stránky. Pokud si čtenáři musí mezi položkami vybírat, přidejte rozhodovací kritéria v próze nebo použijte srovnávací či rozhodovací element; samotná vizuální symetrie volbu nevysvětlí.

Typy příspěvků, které jej používají

Pole postTypes v frontmatter je zdrojem této sady použití. Každý uvedený formát má přirozený dvoudílný vztah, ale žádný by neměl element obsahovat ve výchozím nastavení, pokud obsah netvoří skutečnou dvojici.

QA kontrolní seznam

• Jedna nadřazená myšlenka: Box má jedno jasné sdílené téma, které vysvětluje, proč obě položky patří k sobě.
• Přesně dvě položky: Zdroj a vykreslený výstup obsahují dvě podřízené položky — nikdy jednu, tři nebo prázdné místo.
• Skutečný paralelismus: Obě položky odpovídají na stejný typ otázky a používají názvy s paralelní gramatikou.
• Stejná hloubka: Žádná položka není tokenovým protiváhou nebo různorodým chytákem; detaily a důkazy jsou srovnatelné.
• Užitečné umístění: Box následuje svůj uvádějící kontext a neodděluje tvrzení od důkazů ani krok od jeho požadavku.
• Bezpeční sousedé: Není vedle jiné paralelní mřížky, srovnávací komponenty nebo dvousloupcové CTA.
• Extrahovatelná formulace: Nadřazené názvy a názvy položek pojmenovávají svá témata a těla nezávisí na „vlevo“, „vpravo“ nebo blízkých zájmenech.
• Responzivní pořadí: Úzká rozvržení skládají první položku před druhou bez ořezávání, horizontálního posouvání nebo vizuálního přeuspořádání.
• Přístupná struktura: Kontejner má viditelné programové označení, podřízené názvy jsou skutečné nadpisy a barva nebo ikony nenesou význam samy o sobě.
• Obsahové limity: Každé tělo zůstává do dvou odstavců a neobsahuje žádnou vnořenou komplexní komponentu, postup ani propagační prvek.
• Shoda zápisů: Přenosný Markdown, Hugo a WordPress zachovávají stejný nadpis, dvě položky, těla a pořadí.
• Zdrženlivost schema: Není přidáno žádné značení seznamu nebo srovnání, pokud k němu obsah stránky samostatně nesplňuje podmínky.

Recenzent by měl element odmítnout, když selže některá z prvních čtyř kontrol. Tyto selhání indikují koncepční problém, nikoli stylistickou vadu, a změna šířky nebo dekorace jej nemůže napravit.

FAQ

Položky FAQ ve frontmatter odpovídají na opakující se implementační otázky: počet položek je pevně stanoven na dvě, hloubka je důležitější než identický počet slov, detailní srovnání vyžadují tabulku, mobil zachovává pořadí zdroje a element negeneruje schema markup. Uchovávání těchto odpovědí ve strukturovaném frontmatter umožňuje akademické šabloně vykreslit schválené zpracování FAQ bez duplikování obsahu v těle.