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

Une infobox à deux colonnes divise une idée en exactement deux points parallèles afin que le lecteur puisse comprendre la relation en un coup d’œil. Utilisez-la lorsque la paire est plus utile côte à côte que noyée dans un paragraphe : deux responsabilités, deux étapes, deux perspectives ou deux parties complémentaires d’une même réponse.

Cet exemple rendu est une infobox, un titre partagé et exactement deux éléments. Les deux éléments répondent au même type de question avec une profondeur comparable. L’élément n’affirme pas que les deux besoins sont opposés ; il montre qu’un brief utile doit tenir compte des deux.

Pourquoi cet élément est important

La prose dense oblige les lecteurs à reconstruire les relations. Dans une phrase telle que « Un brief de contenu doit servir le lecteur en résolvant une tâche et servir l’entreprise en soutenant une action qualifiée », les deux responsabilités existent, mais leurs limites sont floues. Une infobox à deux colonnes rend le sujet partagé visible une fois et donne à chaque responsabilité une zone nommée. Les lecteurs peuvent parcourir les deux titres, choisir par où commencer et comparer la quantité et le type de détails sans relire une phrase complexe.

Le bénéfice psychologique vient du regroupement en blocs : rassembler des informations connexes dans des unités délimitées. Le titre partagé indique au lecteur ce qui reste constant, tandis que les titres des éléments montrent ce qui change. Cette hiérarchie est particulièrement utile lorsqu’aucun point ne doit dominer. La prose ordinaire donne naturellement plus de poids au premier point et peut faire passer le second pour une réflexion après coup ; des colonnes assorties signalent un poids éditorial égal.

L’extractibilité par machine est la capacité d’un logiciel à isoler une unité de contenu tout en préservant son sens. Une infobox typée expose un sujet parent et deux éléments enfants explicites. Un système de récupération peut conserver le titre partagé, les titres des éléments, le texte du corps et l’ordre source au lieu de deviner où une proposition se termine et où l’autre commence. Chaque élément doit néanmoins être autonome : « L’exigence métier est une preuve qui soutient une action qualifiée » survit à l’extraction, contrairement à « L’autre côté ».

La structure ne sauve pas une pensée faible. Si la source contient un point développé et une phrase ajoutée pour la symétrie, le rendu ne fait que rendre le déséquilibre plus évident. Appliquez les règles d’écriture des éléments : rédigez d’abord le raisonnement complet, puis choisissez cet élément uniquement lorsque l’idée finie comporte vraiment deux parties parallèles. Les règles spécifiques à l’élément sur cette page prévalent lorsqu’elles définissent son mappage et ses limites exacts d’éléments.

Quand l’utiliser

Utilisez une infobox à deux colonnes lorsque les quatre conditions sont réunies :

1. Il existe une idée parente claire qui peut titrer l’ensemble du bloc.
2. L’idée parente se divise naturellement en exactement deux éléments.
3. Les deux éléments remplissent le même rôle informationnel, comme expliquer une responsabilité, une étape, une perspective d’audience ou une dimension.
4. Chaque élément peut être compris en environ 30 à 90 mots sans structure imbriquée.

Les bons usages incluent « Avant le lancement / Après le lancement », « Signal lecteur / Signal entreprise », « Ce qui change / Ce qui reste identique » et « Responsabilité du propriétaire / Responsabilité du relecteur ». Les étiquettes doivent révéler une relation réelle. Si le lecteur ne peut pas terminer la phrase « Ces deux éléments vont ensemble parce que… », le regroupement est probablement décoratif.

Les cas limites sont importants car une mise en page à deux colonnes peut donner à presque n’importe quelle paire un aspect intentionnel. Ne l’utilisez pas pour une idée unique coupée à une coupure de phrase arbitraire. Ne transformez pas une liste de quatre éléments en deux longues colonnes simplement pour gagner de l’espace vertical ; l’ordre source et le balayage deviennent ambigus. Ne l’utilisez pas pour une comparaison détaillée de produits avec plusieurs critères, car un tableau comparatif donne à chaque critère une ligne explicite. Ne l’utilisez pas pour les avantages et inconvénients lorsque le nombre de points diffère ou lorsque les lecteurs doivent peser plusieurs compromis. N’associez pas une définition à un appel à l’action promotionnel : ces blocs remplissent des fonctions différentes et ne méritent pas un traitement égal.

Le signe d’alerte le plus fort est une étiquette telle que « Autre », « Plus » ou « Informations supplémentaires ». Ces étiquettes révèlent que la division suit l’espace disponible plutôt que le sens. Revenez à la prose ou trouvez la distinction réelle avant d’utiliser l’élément.

Où le placer

Placez l’infobox immédiatement après le paragraphe qui introduit l’idée partagée. Le lecteur a besoin d’une phrase de contexte avant de rencontrer la division, mais ne doit pas traverser des preuves non liées ou une autre sous-section pour y parvenir. Après le bloc, poursuivez avec une analyse, des exemples ou des instructions qui s’appliquent aux deux éléments.

Il peut se situer directement sous un H2 lorsque le H2 fournit lui-même l’idée parente et que l’infobox a son propre titre plus spécifique. Il peut également suivre une courte définition lorsque les deux éléments expliquent les dimensions de cette définition. Il ne doit pas apparaître entre une affirmation et sa citation, entre une étape et la condition requise pour accomplir cette étape, ni à l’intérieur d’un élément de liste ordonnée. Ces positions brisent des relations qui doivent rester contiguës.

Ne le placez pas à côté d’une autre infobox à deux colonnes, d’un tableau comparatif, d’un jeu d’onglets ou d’un bloc d’avantages et inconvénients. Des structures parallèles adjacentes obligent le lecteur à décider quelle relation visuelle compte et peuvent créer quatre colonnes apparentes sur les écrans larges. Insérez une prose explicative entre des structures distinctes, ou combinez le matériel en un tableau ou une section mieux adapté. Évitez de le placer immédiatement avant ou après un appel à l’action à deux colonnes ; une géométrie identique peut donner à une explication éditoriale un aspect promotionnel.

N’utilisez pas plus d’une infobox à deux colonnes dans une section courte. La répétition transforme un contraste utile en mobilier de page. Lorsqu’un long article contient plusieurs paires authentiques, séparez-les sous différents titres et confirmez que chaque paire a une idée parente distincte.

Anatomie

L’anatomie contient une région parente et deux régions enfants répétées. La capture d’écran doit étiqueter les parties sémantiques, et non le remplissage ou les jetons de couleur, afin que la spécification reste utile si le système visuel change.

1. Limite extérieure : Regroupe le titre parent et les deux éléments en une seule unité éditoriale.
2. Titre partagé : Nomme l’idée que les deux éléments expliquent. Il ne s’agit pas d’un troisième point.
3. Titre et corps du premier élément : Énonce le premier membre de la paire dans un langage complet et extractible.
4. Titre et corps du second élément : Répond au même type de question avec une profondeur assortie.
5. Relation de disposition : Utilise des colonnes de largeur égale lorsque l’espace le permet et empile l’élément un avant l’élément deux sur les écrans étroits.

Les bordures, l’arrière-plan, l’espacement, le rayon, l’échelle typographique et le point de rupture appartiennent au rendu. Les auteurs contrôlent la hiérarchie et l’ordre du contenu, pas les jetons visuels.

Exemples de design

Il existe un élément sémantique avec quatre variantes de contenu et de fenêtre d’affichage prises en charge. Les variantes modifient la gestion du titre ou la présentation responsive ; elles ne changent jamais l’exigence d’exactement deux éléments.

Variante titrée par défaut : Préférée pour une utilisation autonome. Un titre partagé nomme l’idée parente, et les deux éléments enfants ont des titres concis.

Variante à titre contextuel : Le H2 immédiatement précédent peut servir de titre partagé. Cela n’est autorisé que lorsqu’aucun paragraphe ou composant ne sépare le H2 du bloc et que l’infobox a un nom accessible dérivé de ce titre.

Variante compacte : À utiliser pour deux définitions ou responsabilités courtes. Chaque corps forme toujours une phrase complète ; la disposition ne devient pas une paire de slogans.

Variante pour fenêtre étroite : Les éléments s’empilent verticalement. L’ordre reste significatif sans références à « gauche », « droite », « au-dessus » ou « à côté ».

Les icônes ne sont pas une variante de contenu. Si le système de design ajoute des icônes décoratives, elles utilisent un texte alternatif vide et ne remplacent pas les titres des éléments. Si chaque élément nécessite une image informative, utilisez un élément orienté image plutôt que d’étendre ce contrat d’infobox.

Paramètres

Le contrat de paramètres empêche l’élément de dériver vers une grille générique. Les valeurs qui décrivent le sens appartiennent au contenu rédigé ; la disposition responsive reste dans le rendu.

Le titre est requis sauf si le titre de document immédiatement précédent fournit le même sujet parent et peut étiqueter le conteneur par programmation. Les corps d’éléments autorisent l’emphase, le code inline et un lien utile. Ils n’autorisent pas les titres imbriqués, les tableaux, les médias, les accordéons, les formulaires, les appels à l’action ni une autre infobox.

Syntaxe et exemples de code

Les trois notations préservent le même titre parent, deux éléments ordonnés, les titres des éléments et les corps des éléments. La directive Markdown portable est la source canonique. Les formulaires Hugo et WordPress sont des contrats d’adaptateur ; leurs rendus doivent produire un HTML sémantique équivalent et un ordre responsive.

Directive Markdown portable

:::infobox-2-columns
## Un brief de contenu utile répond à deux questions

::item
### De quoi le lecteur a-t-il besoin ?

Formulez la question, la décision ou la tâche que la page doit résoudre, y compris le contexte qui modifie la réponse.
::

::item
### De quoi l'entreprise a-t-elle besoin ?

Indiquez l'action qualifiée que la page doit soutenir, ainsi que les preuves nécessaires pour mériter cette action.
::
:::

Le premier titre parent correspond à title. Chaque ::item associe son premier titre à item.title et le reste du corps à item.content. Ce mappage exact à deux éléments remplace l’autorisation générale d’éléments répétables dans les règles de base.

Shortcode Hugo

{{< infobox-2-columns title="Un brief de contenu utile répond à deux questions" >}}
  {{< infobox-item title="De quoi le lecteur a-t-il besoin ?" >}}
  Formulez la question, la décision ou la tâche que la page doit résoudre, y compris le contexte qui modifie la réponse.
  {{< /infobox-item >}}
  {{< infobox-item title="De quoi l'entreprise a-t-elle besoin ?" >}}
  Indiquez l'action qualifiée que la page doit soutenir, ainsi que les preuves nécessaires pour mériter cette action.
  {{< /infobox-item >}}
{{< /infobox-2-columns >}}

L’adaptateur utilise uniquement des paramètres nommés. Il doit rejeter un troisième élément plutôt que de l’envelopper silencieusement, et il doit préserver l’ordre des éléments rédigés lorsque la disposition s’empile.

Bloc WordPress

<!-- wp:amicited/infobox-2-columns {"title":"Un brief de contenu utile répond à deux questions"} -->
  <!-- wp:amicited/infobox-item {"title":"De quoi le lecteur a-t-il besoin ?"} -->
  <p>Formulez la question, la décision ou la tâche que la page doit résoudre, y compris le contexte qui modifie la réponse.</p>
  <!-- /wp:amicited/infobox-item -->
  <!-- wp:amicited/infobox-item {"title":"De quoi l'entreprise a-t-elle besoin ?"} -->
  <p>Indiquez l'action qualifiée que la page doit soutenir, ainsi que les preuves nécessaires pour mériter cette action.</p>
  <!-- /wp:amicited/infobox-item -->
<!-- /wp:amicited/infobox-2-columns -->

WordPress devrait exposer deux emplacements d’éléments fixes plutôt qu’une zone « ajouter un bloc » sans restriction. Les éditeurs peuvent réordonner les deux éléments, mais ne peuvent pas insérer un bloc non lié entre eux ni ajouter une troisième colonne.

Exemples

Bon exemple

Cela fonctionne parce que le titre partagé établit une idée unique, la limite temporelle crée une véritable paire, et les deux colonnes spécifient un travail de mesure comparable. Chaque élément reste significatif lorsqu’il est empilé ou extrait indépendamment.

Mauvais exemple

Améliorez votre contenu

Bien écrire : Créez un contenu utile, faisant autorité et engageant que votre public adorera et que les moteurs de recherche récompenseront.

Autres choses : Le SEO inclut également le travail technique, les liens, le design de conversion, l’analyse, la construction de marque, la distribution, la maintenance et bien d’autres activités importantes.

Cela échoue car la paire est artificielle. « Bien écrire » est une instruction vague, « Autres choses » est une catégorie fourre-tout, et le second élément couvre beaucoup plus de domaines que le premier. Le bloc sous-entend des concepts égaux et parallèles là où il n’y en a pas. Remplacez-le par une prose qui définit l’objectif de contenu réel, puis utilisez une liste ou des sections distinctes pour les différents volets de travail.

Balisage schema et accessibilité

Une infobox à deux colonnes n’a pas de type Schema.org dédié et ne crée pas de données structurées autonomes. Son texte reste intégré à l’Article, TechArticle ou WebPage englobant lorsque la page se qualifie pour ce balisage. Ne marquez pas les deux éléments comme ItemList simplement parce qu’ils sont deux ; l’élément représente une relation, pas nécessairement une liste classée ou complète. Si un élément contient indépendamment un fait utilisé ailleurs dans les données structurées, la politique de schema au niveau de la page régit ce fait.

Le HTML sémantique doit exprimer un conteneur étiqueté avec deux sections enfants. Utilisez un aside uniquement lorsque la paire est complémentaire au récit environnant ; utilisez une section lorsqu’elle fait partie de l’argument principal. Donnez au conteneur un nom accessible via son titre visible et aria-labelledby. Chaque titre enfant doit être un véritable titre au niveau correct, pas un texte en gras choisi pour l’apparence.

L’ordre source est l’ordre d’accessibilité. La navigation au clavier, les lecteurs d’écran, le copier-coller et les écrans étroits doivent rencontrer l’élément un avant l’élément deux. Le CSS peut créer des colonnes mais ne doit pas les inverser visuellement. Ne faites jamais référence à « la boîte de gauche » ou « la boîte de droite », car ces positions disparaissent lors de l’empilement. La couleur, la forme des icônes et l’arrière-plan ne peuvent pas être le seul moyen de distinguer les éléments. Le design doit prendre en charge le zoom du texte sans coupure, défilement horizontal ou chevauchement des colonnes.

Règles d’écriture

Commencez par rédiger la phrase parente : « Cette idée a deux parties : X et Y. » Si cette phrase est inexacte, n’utilisez pas l’élément. Donnez aux deux titres d’éléments la même forme grammaticale — deux noms, deux questions ou deux expressions temporelles — car un langage parallèle rend la relation immédiatement lisible.

Utilisez exactement deux éléments. Limitez chaque titre à 2–7 mots et chaque corps à 30–90 mots dans la mesure du possible, avec un maximum absolu de 120 mots. Une différence d’une phrase est acceptable ; un élément de 35 mots à côté d’un élément de 110 mots nécessite une révision ou une structure différente. Chaque corps doit répondre à la même question implicite et utiliser une profondeur de preuve comparable. Une profondeur assortie ne signifie pas gonfler une réponse courte avec du remplissage.

Utilisez un langage direct et neutre. Énoncez la distinction dans les titres et expliquez sa conséquence dans les corps. Préférez « Avant le lancement / Après le lancement » à « Premier / Second », car les étiquettes significatives survivent à l’extraction. Évitez le « soit/ou » sauf si les choix sont véritablement exclusifs, et évitez « versus » lorsque les éléments sont complémentaires.

Ne placez jamais ce qui suit à l’intérieur de l’élément :

• Un troisième élément, même si le rendu pourrait l’envelopper.
• Une procédure en plusieurs étapes, une longue liste à puces, un tableau de données, une grille tarifaire, un formulaire, un témoignage ou une bannière promotionnelle.
• Des sections H2 indépendantes, des infobox imbriquées, des onglets, des accordéons, des vidéos ou des galeries d’images.
• Un texte juridique requis, des avertissements de sécurité, des listes de sources ou des qualifications qui ne s’appliquent qu’à une seule phrase en dehors du bloc.
• Deux liens non liés conçus pour ressembler à des appels à l’action concurrents.

Si l’un ou l’autre élément nécessite des sous-titres ou plus de deux paragraphes, transformez les deux éléments en sections de page ordinaires. Si les lecteurs doivent choisir entre les éléments, ajoutez des critères de décision en prose ou utilisez un élément de comparaison ou de décision ; la symétrie visuelle seule n’explique pas un choix.

Types d’articles qui l’utilisent

Le champ postTypes du frontmatter est la source de cet ensemble d’utilisations. Chaque format listé a une relation naturelle en deux parties, mais aucun ne doit inclure l’élément par défaut lorsque le contenu ne forme pas une véritable paire.

Liste de contrôle QA

• Une idée parente : Le bloc a un sujet partagé clair qui explique pourquoi les deux éléments vont ensemble.
• Exactement deux éléments : La source et le rendu contiennent deux éléments enfants — jamais un, trois ou un emplacement vide.
• Vrai parallélisme : Les deux éléments répondent au même type de question et utilisent des titres avec une grammaire parallèle.
• Profondeur assortie : Aucun élément n’est un contrepoids symbolique ou un fourre-tout ; les détails et les preuves sont comparables.
• Placement utile : Le bloc suit son contexte d’introduction et ne sépare pas une affirmation de sa preuve ni une étape de son exigence.
• Voisins sûrs : Il n’est pas adjacent à une autre grille parallèle, un composant de comparaison ou un CTA à deux colonnes.
• Formulation extractible : Les titres parent et des éléments nomment leurs sujets, et les corps ne dépendent pas de « gauche », « droite » ou de pronoms proches.
• Ordre responsive : Les dispositions étroites empilent l’élément un avant l’élément deux sans coupure, défilement horizontal ni réordonnancement visuel.
• Structure accessible : Le conteneur a une étiquette visible et programmable, les titres enfants sont de véritables titres, et la couleur ou les icônes ne portent pas le sens à elles seules.
• Limites de contenu : Chaque corps reste dans deux paragraphes et ne contient 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, deux éléments, corps et ordre.
• Retenue schema : Aucun balisage de liste ou de comparaison n’est ajouté sauf si le contenu de la page se qualifie indépendamment.

Un relecteur doit rejeter l’élément lorsque l’un des quatre premiers contrôles échoue. Ces échecs indiquent un problème conceptuel, pas un défaut de style, et changer la largeur ou la décoration ne peut pas y remédier.

FAQ

Les entrées FAQ du frontmatter répondent aux questions d’implémentation récurrentes : le nombre d’éléments est fixé à deux, la profondeur importe plus que des nombres de mots identiques, les comparaisons détaillées nécessitent un tableau, le mobile préserve l’ordre source, et l’élément ne génère pas de balisage schema. Garder ces réponses dans un frontmatter structuré permet au modèle academy de restituer le traitement FAQ approuvé sans dupliquer le contenu dans le corps.