Infobox : 3 colonnes — Format, règles et exemples

Une infobox trois colonnes présente exactement trois points parallèles sous une même idée partagée. Elle est utile lorsque le lecteur doit voir un véritable modèle en trois parties d’un coup : trois responsabilités, trois critères, trois résultats ou trois flux de travail coordonnés. Les colonnes promettent un statut éditorial égal, donc chaque point doit accomplir le même type de travail à une profondeur comparable.

Cet élément rendu possède un titre partagé et exactement trois éléments. Les trois titres sont des syntagmes nominaux, les trois corps décrivent un type de confiance, et les icônes ajoutent du rythme sans porter de sens. Retirez les icônes et le modèle reste inchangé.

Pourquoi cet élément est important

Les lecteurs ne perçoivent pas un paragraphe dense comme un modèle simplement parce qu’il contient trois propositions. Ils doivent garder la première proposition en mémoire, détecter la transition vers la seconde et décider si la troisième est égale, subordonnée ou simplement supplémentaire. Une infobox trois colonnes rend la relation explicite. Le titre partagé nomme ce qui reste constant ; trois éléments délimités montrent la répartition complète ; un poids visuel apparié indique aux lecteurs d’examiner chaque élément avant de considérer le modèle comme compris.

Cela aide par le chunking, le regroupement d’informations connexes en unités gérables. Trois suffit pour révéler un système sans produire un catalogue. Un lecteur peut parcourir les trois titres, entrer par le point qui le concerne le plus, puis comparer le niveau de détail. L’élément est particulièrement efficace lorsque la prose répéterait autrement le même sujet trois fois ou cacherait la distinction dans une longue phrase.

L’extractibilité machine est la capacité d’un logiciel à isoler une unité de contenu sans perdre son sujet ou ses relations. Une infobox trois colonnes typée expose un sujet parent et trois enfants ordonnés. Les systèmes de recherche, les API de contenu et les outils de récupération IA peuvent préserver le titre partagé, chaque titre d’élément, chaque corps et l’ordre source au lieu de deviner si un paragraphe contient une liste. Les titres explicites donnent également à chaque élément une étiquette de récupération utile.

L’extraction ne fonctionne que lorsque les mots sont autonomes. « La confiance technique signifie que la page s’affiche et que les liens se résolvent » peut survivre en dehors de la mise en page. « La troisième partie gère cela » ne le peut pas. La structure ne peut pas non plus fabriquer une troisième idée. Suivez les règles de rédaction des éléments : établissez le modèle de contenu avant de choisir le moteur de rendu. L’exigence spécifique à l’élément d’exactement trois éléments prévaut sur toute autorisation générale d’éléments répétables.

Quand l’utiliser

Utilisez une infobox trois colonnes uniquement lorsque les cinq conditions sont remplies :

1. Un titre partagé peut gouverner avec précision l’ensemble de l’élément.
2. Le sujet se divise naturellement en exactement trois points.
3. Les trois points répondent à la même question implicite.
4. Chaque point mérite une profondeur, des preuves et un poids visuel similaires.
5. Chaque point peut être expliqué en un ou deux courts paragraphes sans structure imbriquée.

Les utilisations pertinentes incluent trois composants d’un framework, trois responsabilités du propriétaire, trois dimensions de la qualité, trois résultats d’une capacité, ou trois vérifications effectuées à la même étape. La relation peut être complémentaire, séquentielle ou catégorielle, mais elle doit être énoncée. Si l’auteur ne peut pas compléter « Ces trois vont ensemble parce que… », le groupement est probablement un remplissage visuel.

L’erreur la plus courante est une véritable paire plus un troisième élément faible. « Personnes, processus et plus » ne devient pas un modèle en trois parties parce que la disposition a trois emplacements. Pas plus que « Rapidité, précision et valeur » lorsque l’article ne définit que la rapidité et la précision et traite la valeur comme leur résultat. Gardez la paire, expliquez le résultat en prose ou choisissez un autre élément.

N’utilisez pas cette infobox pour trois instructions séquentielles. Les colonnes affaiblissent la séquence, surtout lorsqu’elles s’empilent à des largeurs étroites ; utilisez une liste d’étapes lorsque l’ordre d’exécution compte. Ne l’utilisez pas pour trois produits évalués selon plusieurs critères ; utilisez un tableau comparatif. Ne l’utilisez pas pour une liste qui contient trois faits aujourd’hui mais pourrait en gagner un quatrième lors de la prochaine mise à jour. Un contrat fixe à trois colonnes n’est approprié que lorsque trois est inhérent à l’idée.

Parmi les autres erreurs courantes, citons un titre plus deux éléments réels, un élément contenant toutes les réserves, trois affirmations promotionnelles sans mécanisme ni preuve, et un segment d’audience divisé en trois données démographiques arbitraires. Dans chaque cas, la mise en page exagère une relation que le contenu n’a pas méritée.

Où le placer

Placez l’infobox immédiatement après le paragraphe qui introduit l’idée parente. Ce paragraphe doit expliquer pourquoi une vue à trois volets est utile ; le titre partagé nomme ensuite le modèle et les éléments définissent ses parties. Suivez l’élément avec une interprétation, des preuves ou une transition qui s’applique à l’ensemble du groupe.

Il peut apparaître directement en dessous d’un H2 lorsque ce titre fournit le titre partagé et qu’aucun paragraphe ou composant ne s’interpose. Il peut également suivre une définition lorsque les trois éléments détaillent les dimensions du terme. Il ne doit pas interrompre une affirmation et sa citation, un avertissement et la condition qui le déclenche, une étape et son résultat attendu, ou une phrase qui introduit une liste conventionnelle. Ces relations doivent rester contiguës.

Ne le placez pas immédiatement à côté d’une autre grille trois colonnes, d’un tableau de prix, d’un contrôle d’onglets, d’un jeu de cartes ou d’un appel à l’action à trois options. La géométrie répétée donne à l’explication éditoriale un aspect interactif ou commercial et force les lecteurs à déduire quel groupement compte. Insérez une prose explicative ou choisissez une structure qui porte l’ensemble de la relation. Évitez de placer une deuxième infobox dans la même section courte ; la répétition transforme un modèle délibéré en mobilier décoratif.

Sur une page longue, plusieurs infobox trois colonnes sont acceptables uniquement sous différents titres et pour des modèles véritablement différents. Elles ne doivent pas être utilisées comme traitement par défaut pour chaque trio dans le texte.

Anatomie

L’anatomie comprend une région parente et trois régions d’élément répétées. La capture d’écran légendée doit identifier les parties sémantiques plutôt que la couleur, le rayon ou les espacements, afin que la spécification survive à une refonte.

1. Limite extérieure : Regroupe le titre et les trois éléments en une seule unité éditoriale.
2. Titre partagé : Nomme l’idée divisée par les trois éléments. Il ne s’agit pas d’un quatrième élément.
3. Emplacement d’icône facultatif : Contient une icône décorative approuvée par élément ; les trois emplacements sont utilisés ensemble ou omis ensemble.
4. Titre d’élément : Nomme un membre de l’ensemble dans un langage parallèle aux deux autres titres.
5. Corps d’élément : Explique ce membre à une profondeur appariée et reste pertinent lorsqu’il est extrait.
6. Relation de mise en page : Utilise trois colonnes égales là où l’espace le permet et empile l’élément un, l’élément deux, puis l’élément trois sur les écrans étroits.

Les auteurs contrôlent les titres, les corps, les jetons d’icônes et l’ordre source. Le moteur de rendu contrôle la largeur des colonnes, les espaces, les points de rupture, les bordures, les arrière-plans et la typographie.

Exemples de conception

Il existe un élément sémantique avec quatre variantes prises en charge et un état adaptatif. Aucune ne modifie le contrat d’exactement trois éléments.

Variante titrée par défaut : Privilégiée pour le contenu explicatif. Le titre partagé et les trois titres d’élément rendent la hiérarchie explicite ; aucune icône n’est présente.

Variante avec icônes : Ajoute une icône décorative à chaque élément. Les icônes doivent partager la famille, la taille et le poids visuel. Un mélange d’icône, de photographie et d’emplacement vide n’est pas pris en charge.

Variante à titre contextuel : Le H2 immédiatement précédent fournit le titre partagé. Cela n’est autorisé que lorsque le conteneur peut référencer ce titre visible par programmation et qu’aucun élément ne sépare le titre de l’élément.

Variante compacte : Convient à trois définitions ou vérifications courtes. Chaque corps reste une phrase complète, pas un slogan ou un fragment d’étiquette.

État pour fenêtre étroite : Les éléments s’empilent verticalement dans l’ordre d’écriture. Aucun texte ne peut dépendre d’une position gauche, centrale ou droite.

Paramètres

Le contrat sépare le sens rédactionnel de la présentation. Les colonnes adaptatives et le style des icônes appartiennent au moteur de rendu ; les champs de contenu et l’ordre sémantique appartiennent à la source.

Le titre est requis sauf si un titre immédiatement précédent fournit le même sujet parent et étiquette le conteneur. Le contenu d’un élément peut contenir de l’emphase, du code en ligne et un lien texte pertinent. Il ne peut pas contenir de titres imbriqués, de tableaux, de listes de plus de trois puces courtes, de médias, de formulaires, d’appels à l’action ou d’un autre composant.

Syntaxe et exemples de code

Les trois notations préservent le même titre, les trois éléments ordonnés, les jetons d’icônes facultatifs et les corps. La directive Markdown portable est la source canonique. Hugo et WordPress sont des contrats d’adaptation et doivent rejeter tout nombre d’éléments autre que trois.

Directive Markdown portable

:::infobox-3-columns
## Une page publiable nécessite trois types de confiance

::item{icon="reader"}
### Confiance du lecteur

La réponse est claire, complète et suffisamment spécifique pour guider une décision ou une action.
::

::item{icon="editorial"}
### Confiance éditoriale

Les affirmations sont étayées, la terminologie est cohérente et chaque qualification requise reste attachée.
::

::item{icon="technical"}
### Confiance technique

La page s'affiche, les liens se résolvent, les métadonnées sont correctement mappées et les machines peuvent retrouver sa structure.
::
:::

Le premier titre parent correspond au title. Chaque ::item fait correspondre son premier titre à item.title, le corps restant à item.content et l’attribut icon facultatif à un jeton d’icône approuvé. Trois éléments imbriqués sont requis même lorsque la disposition s’empile.

Mappage du shortcode 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 >}}

Il s’agit d’une spécification d’adaptateur portable, pas d’une promesse que le site actuel enregistre ces shortcodes. Elle utilise uniquement des paramètres nommés, préserve l’ordre source, valide les jetons d’icônes et échoue à la validation de l’auteur au lieu de supprimer silencieusement ou d’envelopper un élément supplémentaire.

Bloc 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 -->

L’éditeur doit exposer trois emplacements d’élément fixes. Il peut permettre à l’auteur de réordonner les éléments, mais il ne doit pas offrir un inserteur non restreint qui permettrait un quatrième enfant ou un bloc non lié.

Exemples

Bon exemple : un véritable modèle de fonctionnement à trois voies

Cela fonctionne parce que le titre partagé définit un modèle de responsabilité, les trois rôles sont distincts et chaque corps répond à la même question : que doit vérifier ce responsable ? Les éléments utilisent des titres nominaux parallèles et une profondeur comparable. Aucun n’existe uniquement pour remplir la ligne.

Mauvais exemple : une paire gonflée à trois

Trois façons d’améliorer une page d’atterrissage

Clarifiez l’offre : Nommez l’audience, le problème, le mécanisme et le résultat attendu dans un langage que le lecteur peut vérifier.

Prouvez l’affirmation : Ajoutez des preuves pertinentes, expliquez leurs limites et maintenez les citations attachées aux déclarations qu’elles soutiennent.

Faites-la ressortir : Ajoutez des couleurs attrayantes et tout ce qui semble engageant.

Les deux premiers éléments sont des exigences éditoriales avec des résultats observables. Le troisième est un conseil visuel vague, n’a pas de norme de preuve correspondante et remplit une fonction différente. Il a été ajouté parce que le design demandait trois colonnes, pas parce que le modèle a trois parties. Supprimez le troisième élément et utilisez une structure à deux parties, ou définissez une véritable troisième exigence telle que la réduction des frottements d’interaction et étayez-la à la même profondeur.

Balisage schema et accessibilité

Une infobox trois colonnes n’a pas de type Schema.org dédié et ne crée pas de données structurées autonomes. Son texte reste partie intégrante de l’Article, TechArticle ou WebPage englobant lorsque cette page est qualifiée. Ne marquez pas les enfants comme ItemList simplement parce qu’ils sont trois, et n’inférez pas HowTo à partir d’étiquettes à consonance séquentielle. N’alimentez le schéma au niveau de la page que lorsque le contenu sous-jacent répond indépendamment aux exigences de ce schéma.

Utilisez un conteneur sémantique étiqueté avec trois sections enfants. Utilisez <section> lorsque le modèle fait partie de l’argument principal et <aside> lorsqu’il est complémentaire. Connectez le titre partagé visible avec aria-labelledby et donnez à chaque enfant un véritable titre au niveau de document correct. Le texte en gras ne remplace pas un titre.

L’ordre source est l’ordre de lecture. Les lecteurs d’écran, la navigation au clavier, le texte copié et les mises en page mobiles doivent rencontrer l’élément un, l’élément deux, puis l’élément trois. Le CSS peut créer des colonnes mais ne doit pas utiliser de règles d’ordre pour les réorganiser. N’écrivez jamais « gauche », « milieu » ou « droite » ; ces positions disparaissent lorsque les éléments s’empilent.

Les icônes sont décoratives à moins qu’elles ne communiquent des informations absentes du titre. Les icônes décoratives utilisent aria-hidden="true" en HTML ou un texte alternatif vide lorsqu’elles sont rendues sous forme d’images. Si une icône est informative, sa signification doit également apparaître dans le texte visible ; un nom accessible caché à la vue n’aide pas les lecteurs qui peuvent voir la page mais ne peuvent pas interpréter le symbole. La couleur et la forme de l’icône ne doivent jamais être la seule distinction entre les éléments.

Aux largeurs étroites, empilez les éléments avant que le texte ne devienne trop serré. Prenez en charge le zoom du texte sans rognage, chevauchement ou défilement horizontal au niveau de la page. Une capture d’écran trois colonnes ne remplace pas un contenu sémantique adaptatif.

Règles de rédaction

Commencez par la phrase « Cette idée a trois parties : X, Y et Z. » La phrase doit rester précise après la définition de chaque partie. Si une partie est un résultat des deux autres, un fourre-tout ou un exemple mineur, le modèle n’est pas véritablement parallèle.

Utilisez exactement trois éléments. Limitez chaque titre à 2–7 mots et utilisez le même modèle grammatical : trois syntagmes nominaux, trois questions ou trois étiquettes temporelles. Limitez chaque corps à 25–80 mots lorsque possible et ne dépassez jamais 110. Une différence d’une phrase est acceptable. Un élément de 25 mots à côté de deux éléments de 100 mots nécessite une révision ou une structure différente.

Une profondeur appariée signifie un travail explicatif comparable, pas du remplissage. Chaque corps doit répondre à la même question implicite, contenir un niveau de spécificité similaire et énoncer les conséquences à un niveau similaire. Si un élément nécessite vraiment plus d’explications, déplacez le modèle dans des sections ordinaires où la longueur peut varier honnêtement.

Utilisez un langage direct et neutre. Les titres doivent identifier le sens, pas la position : « Découverte / Production / Révision » est plus fort que « Premier / Deuxième / Troisième. » Les étiquettes séquentielles ne sont acceptables que lorsque chaque élément résume une phase plutôt que d’instruire le lecteur à travers des étapes. Évitez les superlatifs, les allégations de bénéfices non étayées et trois slogans déguisés en explication.

Les icônes sont facultatives. Utilisez les trois ou aucune, sélectionnez-les dans une même famille approuvée et gardez-les visuellement cohérentes. Ne choisissez pas d’icônes avant les titres, n’utilisez pas d’emoji comme jetons d’icônes de production et ne laissez pas une icône remplacer un titre d’élément pertinent.

Ne mettez jamais ces éléments à l’intérieur du composant :

• Deux ou quatre éléments, un élément vide ou un troisième emplacement « divers ».
• Une procédure détaillée, une matrice de comparaison, un plan tarifaire, un formulaire, un carrousel de témoignages ou une bannière promotionnelle.
• Des sections H2 imbriquées, une autre infobox, des onglets, des panneaux d’accordéon, une vidéo ou une galerie d’images.
• De longues listes à puces, des listes de sources, des mentions légales, des avertissements de sécurité ou des qualifications détachées de l’affirmation qu’elles régissent.
• Trois liens non liés stylisés comme des appels à l’action égaux.

Lorsque le contenu dépasse ces limites, transformez les trois éléments en sections de page normales. La disposition fixe ne doit jamais devenir une raison pour comprimer une nuance essentielle ou masquer une qualification.

Types d’articles qui l’utilisent

Le champ postTypes dans le frontmatter est l’ensemble d’utilisation enregistré. Il identifie les formats qui contiennent souvent un modèle en trois parties pertinent ; il n’exige pas d’infobox lorsque la source n’a pas de véritable trio.

Liste de vérification QA

• Une idée parente : Un titre partagé précis explique pourquoi les trois éléments vont ensemble.
• Exactement trois éléments : La source et le rendu contiennent trois enfants complets — jamais deux, quatre ou un placeholder vide.
• Véritable division en trois : Supprimer un élément rend le modèle incomplet ; aucun n’est du remplissage, un résultat ou une catégorie diverse.
• Titres parallèles : Tous les titres d’élément utilisent la même forme grammaticale et identifient le sens plutôt que la position à l’écran.
• Profondeur appariée : Chaque corps répond à la même question implicite avec des détails et des preuves comparables.
• Placement utile : L’élément suit son contexte d’introduction et ne sépare pas une affirmation, un avertissement, une étape ou une citation de son contenu dépendant.
• Voisins sûrs : Il n’est pas adjacent à une autre grille trois colonnes, un bloc de prix, un contrôle d’onglets ou un CTA à trois options.
• Formulation extractible : Les titres partagé et d’élément nomment leurs sujets ; les corps ne dépendent pas de pronoms ou de positions visuelles à proximité.
• Cohérence des icônes : Les trois éléments utilisent des icônes approuvées d’une même famille, ou aucun élément n’utilise d’icône ; le sens reste dans le texte.
• Ordre adaptatif : Le mobile empile l’élément un, l’élément deux, puis l’élément trois sans rognage, défilement horizontal ou réorganisation CSS.
• Sémantique accessible : Le conteneur a une étiquette visible et programmable, les titres d’élément sont des titres et les icônes décoratives sont masquées aux technologies d’assistance.
• Limites de contenu : Les corps restent dans deux courts paragraphes et ne contiennent aucun composant complexe imbriqué, procédure ou contrôle promotionnel.
• Parité des notations : Le Markdown portable, Hugo et WordPress préservent le même titre, les trois éléments, les jetons d’icônes, les corps et l’ordre.
• Retenue du schéma : Le moteur de rendu n’infère pas de balisage de liste, de comparaison ou de procédure à partir de la présentation trois colonnes.

Un relecteur doit rejeter l’élément lorsque le nombre d’éléments, la logique de véritable division en trois ou la profondeur appariée échouent. Ce sont des défauts du modèle de contenu ; le polissage visuel ne peut pas les réparer.

FAQ

Les entrées FAQ du frontmatter couvrent le nombre fixe d’éléments, la profondeur appariée, les icônes facultatives, l’ordre mobile et la retenue du schéma. Le modèle academy peut afficher ces réponses approuvées sans les dupliquer dans le corps.