Infobox: 3 Coloane — Format, Reguli și Exemple

Un infobox cu trei coloane prezintă exact trei puncte paralele sub o singură idee comună. Este util atunci când cititorul trebuie să vadă simultan un model real format din trei părți: trei responsabilități, trei criterii, trei rezultate sau trei fluxuri de lucru coordonate. Coloanele promit un statut editorial egal, așadar fiecare punct trebuie să îndeplinească același tip de muncă la o profunzime comparabilă.

Acest element randat are un titlu comun și exact trei elemente. Toate cele trei titluri sunt sintagme nominale, toate cele trei corpuri descriu un tip de încredere, iar iconițele adaugă ritm fără a purta sens. Elimină iconițele și modelul rămâne neschimbat.

De ce contează acest element

Cititorii nu percep un paragraf dens ca pe un model doar pentru că acesta conține trei propoziții. Ei trebuie să rețină prima propoziție în memorie, să detecteze trecerea la a doua și să decidă dacă a treia este egală, subordonată sau doar adițională. Un infobox cu trei coloane face relația explicită. Titlul comun denumește ceea ce rămâne constant; trei elemente delimitate arată divizarea completă; greutatea vizuală echivalentă le spune cititorilor să examineze fiecare element înainte de a considera modelul înțeles.

Acest lucru ajută prin segmentare, gruparea informațiilor conexe în unități gestionabile. Trei este suficient pentru a dezvălui un sistem fără a produce un catalog. Un cititor poate scana cele trei titluri, poate intra prin punctul cel mai relevant pentru el și apoi poate compara nivelul de detaliu. Elementul este deosebit de eficient atunci când, altfel, proza ar repeta același subiect de trei ori sau ar ascunde distincția în interiorul unei fraze lungi.

Extractibilitatea automată este capacitatea software-ului de a izola o unitate de conținut fără a-și pierde subiectul sau relațiile. Un infobox tipizat cu trei coloane expune un subiect părinte și trei copii ordonați. Sistemele de căutare, API-urile de conținut și instrumentele de regăsire AI pot păstra titlul comun, titlul fiecărui element, fiecare corp și ordinea sursei, în loc să ghicească dacă un paragraf conține o listă. Titlurile explicite oferă, de asemenea, o etichetă utilă de regăsire pentru fiecare element.

Extragerea funcționează doar atunci când cuvintele sunt autonome. „Încrederea tehnică înseamnă că pagina se randă și linkurile se rezolvă” poate supraviețui în afara aspectului. „A treia parte se ocupă de aceasta” nu poate. Structura nu poate nici să fabrice o a treia idee. Urmează regulile de scriere a elementelor : stabilește modelul de conținut înainte de a alege motorul de randare. Cerința specifică elementului de exact trei elemente are prioritate față de orice permisiune generală pentru elemente repetabile.

Când să îl folosești

Folosește un infobox cu trei coloane doar atunci când toate cele cinci teste sunt îndeplinite:

1. Un titlu comun poate guverna cu exactitate întregul element.
2. Subiectul se împarte în mod natural în exact trei puncte.
3. Toate cele trei puncte răspund la aceeași întrebare implicită.
4. Fiecare punct merită o profunzime, dovezi și greutate vizuală similare.
5. Fiecare punct poate fi explicat într-unul sau două paragrafe scurte, fără structuri imbricate.

Utilizări solide includ trei componente ale unui cadru, trei responsabilități ale unui proprietar, trei dimensiuni ale calității, trei rezultate dintr-o singură capacitate sau trei verificări efectuate în aceeași etapă. Relația poate fi complementară, secvențială sau categorială, dar trebuie declarată. Dacă autorul nu poate completa „Aceste trei aparțin împreună pentru că…”, gruparea este probabil un adaos vizual.

Cea mai frecventă greșeală este o pereche reală plus un al treilea element slab. „Oameni, proces și mai mult” nu devine un model în trei părți doar pentru că aspectul are trei sloturi. Nici „Viteză, acuratețe și valoare” atunci când articolul definește doar viteza și acuratețea, iar valoarea este tratată ca rezultat al acestora. Păstrează perechea, explică rezultatul în proză sau alege un alt element.

Nu folosi acest infobox pentru trei instrucțiuni secvențiale. Coloanele slăbesc secvența, mai ales când se stivuiesc la lățimi mici; folosește o listă de pași atunci când ordinea de finalizare contează. Nu îl folosi pentru trei produse evaluate după mai multe criterii; folosește un tabel comparativ. Nu îl folosi pentru o listă care se întâmplă să conțină trei fapte astăzi, dar ar putea câștiga un al patrulea la următoarea actualizare. Un contract fix de trei coloane este potrivit doar atunci când trei este inerent ideii.

Alte greșeli frecvente includ un titlu plus două elemente reale, un element care conține toate precauțiile, trei afirmații promoționale fără mecanism sau dovezi și un segment de public împărțit în trei date demografice arbitrare. În fiecare caz, aspectul exagerează o relație pe care conținutul nu a câștigat-o.

Unde să îl plasezi

Plasează infoboxul imediat după paragraful care introduce ideea principală. Acel paragraf ar trebui să explice de ce o vedere în trei direcții este utilă; titlul comun denumește apoi modelul, iar elementele îi definesc părțile. Urmează elementul cu interpretare, dovezi sau o tranziție care se aplică întregului grup.

Poate apărea direct sub un H2 atunci când acea rubrică oferă titlul comun și niciun paragraf sau componentă nu intervine. Poate urma, de asemenea, unei definiții atunci când cele trei elemente desfac dimensiunile termenului. Nu trebuie să întrerupă o afirmație și citarea acesteia, un avertisment și condiția care îl declanșează, un pas și rezultatul său așteptat sau o propoziție care introduce o listă convențională. Acele relații trebuie să rămână contigue.

Nu îl plasa imediat lângă altă grilă cu trei coloane, tabel de prețuri, control cu fileuri, pachet de carduri sau îndemn la acțiune cu trei opțiuni. Geometria repetată face ca explicația editorială să pară interactivă sau comercială și forțează cititorii să deducă ce grupare contează. Inserează proză explicativă sau alege o singură structură care poartă întreaga relație. Evită plasarea unui al doilea infobox în aceeași secțiune scurtă; repetiția transformă un model deliberat în mobilier decorativ.

Pe o pagină lungă, multiple infoboxuri cu trei coloane sunt acceptabile doar sub rubrici diferite și pentru modele cu adevărat diferite. Ele nu ar trebui folosite ca tratament implicit pentru fiecare trio din text.

Anatomie

Anatomia conține o regiune părinte și trei regiuni repetate ale elementelor. Captura de ecran etichetată ar trebui să identifice părțile semantice, nu culoarea, raza sau tokenurile de spațiere, astfel încât specificația să supraviețuiască unei reproiectări.

1. Limită exterioară: Grupează titlul și toate cele trei elemente ca o singură unitate editorială.
2. Titlu comun: Denumește ideea împărțită de cele trei elemente. Nu este un al patrulea element.
3. Slot opțional pentru iconiță: Conține o iconiță decorativă aprobată pe element; toate cele trei sloturi sunt folosite împreună sau omise împreună.
4. Titlu element: Denumește un membru al setului într-un limbaj paralel cu celelalte două titluri.
5. Corp element: Explică acel membru la o profunzime echivalentă și rămâne semnificativ atunci când este extras.
6. Relație de aspect: Folosește trei coloane egale acolo unde spațiul permite și stivuiește elementul unu, elementul doi, apoi elementul trei pe ecrane înguste.

Autorii controlează titlurile, corpurile, tokenurile de iconițe și ordinea sursei. Motorul de randare controlează lățimea coloanelor, spațiile dintre coloane, punctele de întrerupere, bordurile, fundalurile și tipografia.

Exemple de design

Există un singur element semantic, cu patru variante suportate și o stare receptivă. Niciuna nu schimbă contractul exact de trei elemente.

Varianta implicită cu titlu: Preferată pentru conținut explicativ. Titlul comun și cele trei titluri ale elementelor fac ierarhia explicită; nu sunt prezente iconițe.

Varianta cu iconițe: Adaugă o iconiță decorativă la fiecare element. Iconițele trebuie să împărtășească familia, dimensiunea și greutatea vizuală. Un amestec de iconiță, fotografie și slot gol nu este suportat.

Varianta cu titlu contextual: H2-ul imediat precedent furnizează titlul comun. Acest lucru este permis doar atunci când containerul poate face referire programatică la acea rubrică vizibilă și nimic nu separă rubrica de element.

Varianta compactă: Potrivită pentru trei definiții sau verificări scurte. Fiecare corp este totuși o propoziție completă, nu un slogan sau un fragment de etichetă.

Stare pentru ecran îngust: Elementele se stivuiesc vertical în ordinea autorului. Niciun cuvânt nu poate depinde de poziția stânga, mijloc sau dreapta.

Parametri

Contractul separă sensul creat de autor de prezentare. Coloanele receptive și stilizarea iconițelor aparțin motorului de randare; câmpurile de conținut și ordinea semantică aparțin sursei.

Titlul este obligatoriu, cu excepția cazului în care o rubrică imediat precedentă oferă același subiect principal și etichetează containerul. Conținutul elementului poate conține accent, cod inline și o legătură text relevantă. Nu poate conține rubrici imbricate, tabele, liste mai lungi de trei puncte scurte, media, formulare, îndemnuri la acțiune sau altă componentă.

Sintaxă și exemple de cod

Toate cele trei notații păstrează același titlu, trei elemente ordonate, tokenuri opționale de iconițe și corpuri. Directiva Markdown portabilă este sursa canonică. Hugo și WordPress sunt contracte de adaptoare și trebuie să respingă orice număr de elemente altul decât trei.

Directiva Markdown portabilă

:::infobox-3-columns
## A publishable page needs three kinds of confidence

::item{icon="reader"}
### Reader confidence

The answer is clear, complete, and specific enough to guide a decision or action.
::

::item{icon="editorial"}
### Editorial confidence

Claims are supported, terminology is consistent, and every required qualification remains attached.
::

::item{icon="technical"}
### Technical confidence

The page renders, links resolve, metadata maps correctly, and machines can recover its structure.
::
:::

Prima rubrică părinte se mapează la title. Fiecare ::item mapează prima sa rubrică la item.title, corpul rămas la item.content, iar atributul opțional icon la un token de iconiță aprobat. Trei elemente imbricate sunt necesare chiar și atunci când aspectul se stivuiește.

Maparea shortcode-ului Hugo

{{< infobox-3-columns title="A publishable page needs three kinds of confidence" variant="icons" >}}
  {{< infobox-item title="Reader confidence" icon="reader" >}}
  The answer is clear, complete, and specific enough to guide a decision or action.
  {{< /infobox-item >}}
  {{< infobox-item title="Editorial confidence" icon="editorial" >}}
  Claims are supported, terminology is consistent, and every required qualification remains attached.
  {{< /infobox-item >}}
  {{< infobox-item title="Technical confidence" icon="technical" >}}
  The page renders, links resolve, metadata maps correctly, and machines can recover its structure.
  {{< /infobox-item >}}
{{< /infobox-3-columns >}}

Aceasta este o specificație de adaptor portabil, nu o promisiune că site-ul curent înregistrează acele shortcode-uri. Folosește doar parametri denumiți, păstrează ordinea sursei, validează tokenurile de iconițe și eșuează validarea autorării în loc să elimine sau să înfășoare în tăcere un element suplimentar.

Blocul WordPress

<!-- wp:amicited/infobox-3-columns {"title":"A publishable page needs three kinds of confidence","variant":"icons"} -->
  <!-- wp:amicited/infobox-item {"title":"Reader confidence","icon":"reader"} -->
  <p>The answer is clear, complete, and specific enough to guide a decision or action.</p>
  <!-- /wp:amicited/infobox-item -->
  <!-- wp:amicited/infobox-item {"title":"Editorial confidence","icon":"editorial"} -->
  <p>Claims are supported, terminology is consistent, and every required qualification remains attached.</p>
  <!-- /wp:amicited/infobox-item -->
  <!-- wp:amicited/infobox-item {"title":"Technical confidence","icon":"technical"} -->
  <p>The page renders, links resolve, metadata maps correctly, and machines can recover its structure.</p>
  <!-- /wp:amicited/infobox-item -->
<!-- /wp:amicited/infobox-3-columns -->

Editorul ar trebui să expună trei sloturi fixe pentru elemente. Poate permite autorului să reordoneze elementele, dar nu trebuie să ofere un inserator nerestricționat care să permită un al patrulea copil sau un bloc neînrudit.

Exemple

Exemplu corect: un model operațional real în trei direcții

Acest exemplu funcționează deoarece titlul comun definește un singur model de responsabilitate, cele trei roluri sunt distincte, iar fiecare corp răspunde la aceeași întrebare: ce trebuie să verifice acest responsabil? Elementele folosesc titluri nominale paralele și profunzime comparabilă. Niciunul nu există doar pentru a completa rândul.

Exemplu greșit: o pereche umflată la trei

Trei moduri de a îmbunătăți o pagină de destinație

Clarifică oferta: Denumește publicul, problema, mecanismul și rezultatul așteptat într-un limbaj pe care cititorul îl poate verifica.

Demonstrează afirmația: Adaugă dovezi relevante, explică limitele acestora și menține citările atașate afirmațiilor pe care le susțin.

Fă-o să iasă în evidență: Adaugă culori atractive și orice altceva pare captivant.

Primele două elemente sunt cerințe editoriale cu rezultate observabile. Al treilea este un sfat vizual vag, nu are un standard de dovezi corespunzător și îndeplinește un alt rol. A fost adăugat pentru că designul cerea trei coloane, nu pentru că modelul are trei părți. Elimină cel de-al treilea element și folosește o structură în două părți sau definește o a treia cerință reală, cum ar fi reducerea frecării interacțiunii, și susține-o la același nivel de profunzime.

Markup schema și accesibilitate

Un infobox cu trei coloane nu are un tip Schema.org dedicat și nu creează date structurate independente. Textul său rămâne parte din Article, TechArticle sau WebPage care îl înconjoară, atunci când acea pagină se califică. Nu marca copiii ca ItemList doar pentru că sunt trei și nu deduce HowTo din etichete cu sunet secvențial. Alimentează schema la nivel de pagină doar atunci când conținutul de bază îndeplinește în mod independent cerințele acelei scheme.

Folosește un container semantic etichetat cu trei secțiuni copil. Folosește <section> atunci când modelul face parte din argumentul principal și <aside> atunci când este complementar. Conectează titlul comun vizibil cu aria-labelledby și oferă fiecărui copil o rubrică reală la nivelul documentului corect. Textul îngroșat nu înlocuiește o rubrică.

Ordinea sursei este ordinea de citire. Cititoarele de ecran, navigarea prin tastatură, textul copiat și aspectele mobile trebuie să întâlnească elementul unu, elementul doi, apoi elementul trei. CSS-ul poate crea coloane, dar nu trebuie să folosească reguli de ordonare pentru a le rearanja. Nu scrie niciodată „stânga”, „mijloc” sau „dreapta”; acele poziții dispar atunci când elementele se stivuiesc.

Iconițele sunt decorative, cu excepția cazului în care comunică informații care nu sunt prezente în titlu. Iconițele decorative folosesc aria-hidden="true" în HTML sau text alternativ gol atunci când sunt randate ca imagini. Dacă o iconiță este informativă, sensul său trebuie să apară și în textul vizibil; un nume accesibil ascuns vederii nu ajută cititorii care pot vedea pagina, dar nu pot interpreta simbolul. Culoarea și forma iconiței nu trebuie să fie niciodată singura distincție între elemente.

La lățimi înguste, stivuiește elementele înainte ca textul să devină înghesuit. Suportă mărirea textului fără tăiere, suprapunere sau derulare orizontală la nivel de pagină. O captură de ecran cu trei coloane nu înlocuiește conținutul semantic receptiv.

Reguli de scriere

Începe cu propoziția „Această idee are trei părți: X, Y și Z.” Propoziția trebuie să rămână corectă după ce fiecare parte este definită. Dacă o parte este un rezultat al celorlalte două, o categorie generală sau un exemplu minor, modelul nu este cu adevărat paralel.

Folosește exact trei elemente. Păstrează fiecare titlu între 2 și 7 cuvinte și folosește același model gramatical: trei sintagme nominale, trei întrebări sau trei etichete de timp. Păstrează fiecare corp între 25 și 80 de cuvinte acolo unde este posibil și nu depăși niciodată 110. O diferență de o propoziție este acceptabilă. Un element de 25 de cuvinte lângă două elemente de 100 de cuvinte necesită editare sau o structură diferită.

Adâncimea echivalentă înseamnă muncă explicativă comparabilă, nu umplutură. Fiecare corp ar trebui să răspundă la aceeași întrebare implicită, să conțină un nivel similar de specificitate și să enunțe consecințe la un nivel similar. Dacă un element are nevoie cu adevărat de mai multe explicații, mută modelul în secțiuni obișnuite unde lungimea poate varia în mod onest.

Folosește un limbaj direct și neutru. Titlurile ar trebui să identifice sensul, nu poziția: „Descoperire / Producție / Revizuire” este mai puternic decât „Primul / Al doilea / Al treilea.” Etichetele secvențiale sunt acceptabile doar atunci când fiecare element rezumă o fază, nu când instruiește cititorul prin pași. Evită superlativele, afirmațiile de beneficii nesuportate și trei sloganuri deghizate în explicație.

Iconițele sunt opționale. Folosește-le pe toate trei sau niciuna, alege-le dintr-o singură familie aprobată și menține-le consecvente din punct de vedere vizual. Nu alege iconițe înaintea titlurilor, nu folosi emoji ca tokenuri de iconiță în producție și nu lăsa o iconiță să înlocuiască o rubrică semnificativă a unui element.

Nu pune niciodată în interiorul elementului:

• Două sau patru elemente, un element gol sau un al treilea slot „diverse.”
• O procedură detaliată, matrice comparativă, plan de prețuri, formular, carusel de testimoniale sau banner promoțional.
• Secțiuni H2 imbricate, alt infobox, fileuri, panouri acordeon, video sau galerie de imagini.
• Liste lungi cu puncte, liste de surse, clauze de excludere legale, avertismente de siguranță sau calificări detașate de afirmația pe care o guvernează.
• Trei linkuri neînrudite stilizate ca îndemnuri la acțiune egale.

Atunci când conținutul depășește aceste limite, promovează cele trei elemente la secțiuni normale de pagină. Aspectul fix nu ar trebui să devină niciodată un motiv pentru a comprima nuanțe esențiale sau a ascunde o calificare.

Tipuri de posturi care îl folosesc

Câmpul postTypes din frontmatter este setul de utilizări înregistrat. Acesta identifică formatele care conțin adesea un model semnificativ în trei părți; nu necesită un infobox atunci când sursa nu are un trio real.

Lista de verificare QA

• O singură idee principală: Un titlu comun precis explică de ce toate cele trei elemente aparțin împreună.
• Exact trei elemente: Sursa și rezultatul randat conțin trei copii complete — niciodată doi, patru sau un substituent gol.
• Divizare reală în trei: Eliminarea oricărui element face modelul incomplet; niciunul nu este umplutură, un rezultat sau o categorie diversă.
• Titluri paralele: Toate titlurile elementelor folosesc aceeași formă gramaticală și identifică sensul, nu poziția pe ecran.
• Adâncime echivalentă: Fiecare corp răspunde la aceeași întrebare implicită cu detalii și dovezi comparabile.
• Amplasare utilă: Elementul urmează contextului său introductiv și nu separă o afirmație, un avertisment, un pas sau o citare de conținutul dependent.
• Vecini siguri: Nu este adiacent altei grile cu trei coloane, bloc de prețuri, control cu fileuri sau îndemn la acțiune cu trei opțiuni.
• Formulare extractibilă: Titlurile comune și ale elementelor denumesc subiectele; corpurile nu se bazează pe pronume din apropiere sau pe poziția vizuală.
• Consistența iconițelor: Toate cele trei elemente folosesc iconițe aprobate dintr-o singură familie sau niciun element nu folosește iconiță; sensul rămâne în text.
• Ordine receptivă: Pe mobil, elementele se stivuiesc în ordinea unu, doi, trei, fără tăiere, derulare orizontală sau reordonare CSS.
• Semantici accesibile: Containerul are o etichetă programatică vizibilă, titlurile elementelor sunt rubrici, iar iconițele decorative sunt ascunse tehnologiei de asistență.
• Limite de conținut: Corpurile rămân în două paragrafe scurte și nu conțin nicio componentă complexă imbricată, procedură sau control promotional.
• Paritate de notație: Markdown portabil, Hugo și WordPress păstrează același titlu, trei elemente, tokenuri de iconițe, corpuri și ordine.
• Reținere schema: Motorul de randare nu deduce markup de listă, comparație sau instrucțiuni din prezentarea cu trei coloane.

Un evaluator ar trebui să respingă elementul atunci când numărul de elemente, logica reală în trei direcții sau adâncimea echivalentă eșuează. Acestea sunt defecte ale modelului de conținut; lustruirea vizuală nu le poate repara.

FAQ

Intrările FAQ din frontmatter acoperă numărul fix de elemente, adâncimea echivalentă, iconițele opționale, ordinea pe mobil și reținerea schema. Șablonul academiei poate randa acele răspunsuri aprobate fără a le duplica în corp.