Infobox: 2 columnas — Formato, reglas y ejemplos

Un infobox de dos columnas divide una idea en exactamente dos puntos paralelos para que el lector pueda comprender la relación de un vistazo. Úsalo cuando el par sea más útil lado a lado que enterrado en un párrafo: dos responsabilidades, dos etapas, dos perspectivas o dos partes complementarias de una misma respuesta.

Ese ejemplo renderizado es un infobox, un título compartido y exactamente dos elementos. Ambos elementos responden al mismo tipo de pregunta con profundidad comparable. El elemento no afirma que las dos necesidades sean opuestas; muestra que un resumen útil debe tener en cuenta ambas.

Por qué este elemento es importante

La prosa densa obliga a los lectores a reconstruir relaciones. En una frase como «Un resumen de contenido debe servir al lector resolviendo una tarea y servir al negocio respaldando una acción calificada», las dos responsabilidades existen, pero sus límites son débiles. Un infobox de dos columnas hace visible el tema compartido una vez y le da a cada responsabilidad una región con nombre. Los lectores pueden escanear ambos encabezados, elegir por dónde empezar y comparar la cantidad y el tipo de detalle sin tener que releer una oración compuesta.

El beneficio psicológico proviene de la segmentación: agrupar información relacionada en unidades delimitadas. El título compartido le dice al lector qué permanece constante, mientras que los títulos de los elementos muestran qué cambia. Esa jerarquía es especialmente útil cuando ningún punto debe dominar. La prosa ordinaria naturalmente le da más protagonismo al primer punto y puede hacer que el segundo parezca una ocurrencia tardía; las columnas emparejadas señalan un peso editorial igual.

La extraibilidad por máquina es la capacidad del software de aislar una unidad de contenido conservando su significado. Un infobox tipificado expone un tema padre y dos elementos hijos explícitos. Un sistema de recuperación puede preservar el título compartido, los títulos de los elementos, el texto del cuerpo y el orden de origen en lugar de adivinar dónde termina una cláusula y comienza la otra. Cada elemento debe seguir siendo autocontenido: «El requisito del negocio es la evidencia que respalda una acción calificada» sobrevive a la extracción, mientras que «El otro lado» no.

La estructura no rescata un pensamiento débil. Si la fuente contiene un punto desarrollado y una oración añadida por simetría, el renderizador simplemente hace más evidente el desequilibrio. Aplica las reglas de redacción de elementos : escribe el razonamiento completo primero, luego elige este elemento solo cuando la idea terminada tenga genuinamente dos partes paralelas. Las reglas específicas del elemento en esta página tienen prioridad cuando definen su mapeo exacto de elementos y sus límites.

Cuándo usarlo

Usa un infobox de dos columnas cuando se cumplan las cuatro condiciones:

1. Hay una idea padre clara que pueda titular todo el recuadro.
2. La idea padre se divide naturalmente en exactamente dos elementos.
3. Ambos elementos realizan el mismo trabajo informativo, como explicar una responsabilidad, etapa, perspectiva de audiencia o dimensión.
4. Cada elemento puede entenderse en aproximadamente 30–90 palabras sin una estructura anidada.

Los usos adecuados incluyen «Antes del lanzamiento / Después del lanzamiento», «Señal del lector / Señal del negocio», «Lo que cambia / Lo que permanece igual» y «Responsabilidad del propietario / Responsabilidad del revisor». Las etiquetas deben exponer una relación real. Si el lector no puede completar la frase «Estos pertenecen juntos porque…», la agrupación probablemente sea decorativa.

Los casos límite importan porque un diseño de dos columnas puede hacer que casi cualquier par parezca intencionado. No lo uses para una idea única dividida en un corte de oración arbitrario. No conviertas una lista de cuatro elementos en dos columnas largas solo para ahorrar espacio vertical; el orden de origen y el escaneo se vuelven ambiguos. No lo uses para una comparación detallada de productos con múltiples criterios, porque una tabla comparativa le da a cada criterio una fila explícita. No lo uses para pros y contras cuando el número de puntos difiere o cuando los lectores deben sopesar varias compensaciones. No combines una definición con una llamada a la acción promocional: esos bloques realizan funciones diferentes y no merecen el mismo tratamiento.

La señal de advertencia más fuerte es una etiqueta como «Otro», «Más» o «Información adicional». Esas etiquetas revelan que la división sigue el espacio disponible en lugar del significado. Devuelve el contenido a la prosa, o encuentra la distinción real antes de usar el elemento.

Dónde colocarlo

Coloca el infobox inmediatamente después del párrafo que introduce la idea compartida. El lector necesita una oración de contexto antes de encontrar la división, pero no debería tener que cruzar evidencia no relacionada u otra subsección para llegar a ella. Después del recuadro, continúa con análisis, ejemplos o instrucciones que se apliquen a ambos elementos.

Puede situarse directamente debajo de un H2 cuando el propio H2 proporciona la idea padre y el infobox tiene su propio título más específico. También puede seguir a una definición breve cuando los dos elementos explican dimensiones de esa definición. No debe aparecer entre una afirmación y su cita, entre un paso y la condición requerida para completar ese paso, ni dentro de un elemento de lista ordenada. Esas posiciones rompen relaciones que deberían permanecer contiguas.

No lo coloques junto a otro infobox de dos columnas, tabla comparativa, conjunto de pestañas o bloque de pros y contras. Las estructuras paralelas adyacentes obligan al lector a decidir qué relación visual importa y pueden crear cuatro columnas aparentes en pantallas anchas. Inserta prosa explicativa entre estructuras distintas, o combina el material en una tabla o sección más adecuada. Evita colocarlo inmediatamente antes o después de una llamada a la acción de dos columnas; una geometría idéntica puede hacer que una explicación editorial parezca promocional.

No uses más de un infobox de dos columnas en una sección corta. La repetición convierte un contraste útil en mobiliario de página. Cuando un artículo largo contiene varios pares genuinos, sepáralos bajo diferentes encabezados y confirma que cada par tenga una idea padre distinta.

Anatomía

La anatomía contiene una región padre y dos regiones hijos repetidas. La captura de pantalla debe etiquetar las partes semánticas, no el relleno o los tokens de color, para que la especificación siga siendo útil si el sistema visual cambia.

1. Límite exterior: Agrupa el título padre y ambos elementos como una unidad editorial.
2. Título compartido: Nombra la idea que explican ambos elementos. No es un tercer punto.
3. Título y cuerpo del primer elemento: Expresa el primer miembro del par en lenguaje completo y extraíble.
4. Título y cuerpo del segundo elemento: Responde al mismo tipo de pregunta con profundidad equivalente.
5. Relación de diseño: Utiliza columnas de igual ancho cuando el espacio lo permite y apila el elemento uno antes que el elemento dos en pantallas estrechas.

Los bordes, fondo, espacio, radio, escala tipográfica y punto de ruptura pertenecen al renderizador. Los autores controlan la jerarquía y el orden del contenido, no los tokens visuales.

Ejemplos de diseño

Hay un elemento semántico con cuatro variantes admitidas de contenido y ventana gráfica. Las variantes cambian el manejo del título o la presentación responsiva; nunca modifican el requisito de exactamente dos elementos.

Variante titulada predeterminada: Preferida para uso independiente. Un título compartido nombra la idea padre, y ambos elementos hijos tienen títulos concisos.

Variante de título contextual: El H2 inmediatamente anterior puede actuar como título compartido. Esto solo está permitido cuando ningún párrafo o componente separa el H2 del recuadro y el infobox tiene un nombre accesible derivado de ese encabezado.

Variante compacta: Úsala para dos definiciones o responsabilidades breves. Cada cuerpo sigue formando una oración completa; el diseño no se convierte en un par de eslóganes.

Variante de ventana estrecha: Los elementos se apilan verticalmente. El orden sigue siendo significativo sin referencias a «izquierda», «derecha», «arriba» o «al lado».

Los iconos no son una variante de contenido. Si el sistema de diseño añade iconos decorativos, utilizan texto alternativo vacío y no reemplazan los títulos de los elementos. Si cada elemento necesita una imagen informativa, usa un elemento orientado a imágenes en lugar de expandir este contrato de infobox.

Parámetros

El contrato de parámetros evita que el elemento se desvíe hacia una cuadrícula genérica. Los valores que describen significado pertenecen al contenido creado por el autor; el diseño responsivo se mantiene en el renderizador.

El título es obligatorio a menos que el encabezado del documento inmediatamente anterior proporcione el mismo tema padre y pueda etiquetar el contenedor mediante programación. Los cuerpos de los elementos permiten énfasis, código inline y un enlace útil. No permiten encabezados anidados, tablas, medios, acordeones, formularios, llamadas a la acción ni otro infobox.

Sintaxis y ejemplos de código

Las tres notaciones preservan el mismo título padre, dos elementos ordenados, títulos de elementos y cuerpos de elementos. La directiva Markdown portátil es la fuente canónica. Los formatos de Hugo y WordPress son contratos de adaptador; sus renderizadores deben producir HTML semántico equivalente y orden responsivo.

Directiva Markdown portátil

:::infobox-2-columns
## A useful content brief answers two questions

::item
### What does the reader need?

State the question, decision, or task the page must resolve, including the context that changes the answer.
::

::item
### What does the business need?

State the qualified action the page should support, along with the evidence required to earn that action.
::
:::

El primer encabezado padre se asigna a title. Cada ::item asigna su primer encabezado a item.title y el cuerpo restante a item.content. Este mapeo exacto de dos elementos anula la disposición general de elementos repetibles en las reglas base.

Shortcode de Hugo

{{< infobox-2-columns title="A useful content brief answers two questions" >}}
  {{< infobox-item title="What does the reader need?" >}}
  State the question, decision, or task the page must resolve, including the context that changes the answer.
  {{< /infobox-item >}}
  {{< infobox-item title="What does the business need?" >}}
  State the qualified action the page should support, along with the evidence required to earn that action.
  {{< /infobox-item >}}
{{< /infobox-2-columns >}}

El adaptador usa solo parámetros con nombre. Debe rechazar un tercer elemento en lugar de envolverlo silenciosamente, y debe preservar el orden de los elementos creados por el autor cuando el diseño se apila.

Bloque de WordPress

<!-- wp:amicited/infobox-2-columns {"title":"A useful content brief answers two questions"} -->
  <!-- wp:amicited/infobox-item {"title":"What does the reader need?"} -->
  <p>State the question, decision, or task the page must resolve, including the context that changes the answer.</p>
  <!-- /wp:amicited/infobox-item -->
  <!-- wp:amicited/infobox-item {"title":"What does the business need?"} -->
  <p>State the qualified action the page should support, along with the evidence required to earn that action.</p>
  <!-- /wp:amicited/infobox-item -->
<!-- /wp:amicited/infobox-2-columns -->

WordPress debería exponer dos ranuras fijas para elementos en lugar de un área de «añadir bloque» sin restricciones. Los editores pueden reordenar los dos elementos, pero no pueden insertar un bloque no relacionado entre ellos ni añadir una tercera columna.

Ejemplos

Ejemplo correcto

Esto funciona porque el título compartido establece una idea, el límite temporal crea un par genuino y ambas columnas especifican un trabajo de medición comparable. Cada elemento sigue siendo significativo cuando se apila o se extrae de forma independiente.

Ejemplo incorrecto

Mejora tu contenido

Escribe bien: Crea contenido útil, autoritario y atractivo que tu audiencia ame y los motores de búsqueda recompensen.

Otras cosas: El SEO también incluye trabajo técnico, enlaces, diseño de conversión, analítica, construcción de marca, distribución, mantenimiento y muchas otras actividades importantes.

Esto falla porque el par es artificial. «Escribe bien» es una instrucción vaga, «Otras cosas» es una categoría miscelánea, y el segundo elemento contiene mucho más alcance que el primero. El recuadro implica conceptos iguales y paralelos donde no existen. Reemplázalo con prosa que defina el objetivo real del contenido, luego usa una lista o secciones separadas para los distintos flujos de trabajo.

Marcado de esquema y accesibilidad

Un infobox de dos columnas no tiene un tipo dedicado de Schema.org y no crea datos estructurados independientes. Su texto sigue siendo parte del Article, TechArticle o WebPage contenedor cuando la página califica para ese marcado. No marques los dos elementos como ItemList simplemente porque hay dos; el elemento representa una relación, no necesariamente una lista jerarquizada o completa. Si un elemento contiene independientemente un hecho utilizado en otra parte de los datos estructurados, la política de esquema a nivel de página rige ese hecho.

El HTML semántico debe expresar un contenedor etiquetado con dos secciones hijas. Usa un aside solo cuando el par sea complementario a la narrativa circundante; usa un section cuando sea parte del argumento principal. Dale al contenedor un nombre accesible a través de su título visible y aria-labelledby. Cada título hijo debe ser un encabezado real en el nivel correcto, no texto en negrita elegido por apariencia.

El orden de origen es el orden de accesibilidad. La navegación por teclado, los lectores de pantalla, copiar y pegar, y las pantallas estrechas deben encontrar el elemento uno antes que el elemento dos. CSS puede crear columnas pero no debe invertirlas visualmente. Nunca te refieras a «el recuadro izquierdo» o «el recuadro derecho», porque esas posiciones desaparecen cuando se apilan. El color, la forma del icono y el fondo no pueden ser la única forma de distinguir los elementos. El diseño debe admitir el zoom de texto sin recortes, desplazamiento horizontal o columnas superpuestas.

Reglas de redacción

Comienza escribiendo la frase padre: «Esta idea tiene dos partes: X e Y». Si esa frase es inexacta, no uses el elemento. Dale a ambos títulos de elementos la misma forma gramatical —dos sustantivos, dos preguntas o dos frases temporales— porque el lenguaje paralelo hace que la relación sea inmediatamente legible.

Usa exactamente dos elementos. Mantén cada título entre 2 y 7 palabras y cada cuerpo entre 30 y 90 palabras cuando sea posible, con un máximo absoluto de 120 palabras. Una diferencia de una oración es aceptable; un elemento de 35 palabras junto a uno de 110 palabras requiere edición o una estructura diferente. Cada cuerpo debe responder la misma pregunta implícita y usar una profundidad de evidencia comparable. Profundidad equivalente no significa rellenar una respuesta corta con contenido de relleno.

Usa un lenguaje directo y neutral. Expresa la distinción en los títulos y explica su consecuencia en los cuerpos. Prefiere «Antes del lanzamiento / Después del lanzamiento» a «Primero / Segundo», porque las etiquetas significativas sobreviven a la extracción. Evita «ya sea/o» a menos que las opciones sean genuinamente exclusivas, y evita «versus» cuando los elementos sean complementarios.

Nunca pongas estos elementos dentro del componente:

• Un tercer elemento, incluso si el renderizador pudiera envolverlo.
• Un procedimiento de varios pasos, lista larga con viñetas, tabla de datos, cuadrícula de precios, formulario, testimonio o banner promocional.
• Secciones H2 independientes, infoboxes anidados, pestañas, acordeones, video o galerías de imágenes.
• Texto legal obligatorio, advertencias de seguridad, listas de fuentes o condiciones que se apliquen a solo una oración fuera del recuadro.
• Dos enlaces no relacionados diseñados para parecerse a llamadas a la acción en competencia.

Si alguno de los elementos necesita subtítulos o más de dos párrafos, promueve ambos elementos a secciones de página ordinarias. Si los lectores necesitan elegir entre los elementos, añade criterios de decisión en prosa o usa un elemento de comparación o decisión; la simetría visual por sí sola no explica una elección.

Tipos de publicación que lo usan

El campo postTypes del frontmatter es la fuente de este conjunto de usos. Cada formato listado tiene una relación natural de dos partes, pero ninguno debe incluir el elemento por defecto cuando el contenido no forma un par genuino.

Lista de verificación de QA

• Una idea padre: El recuadro tiene un tema compartido claro que explica por qué ambos elementos pertenecen juntos.
• Exactamente dos elementos: La fuente y la salida renderizada contienen dos elementos hijos —nunca uno, tres o un espacio vacío.
• Paralelismo real: Ambos elementos responden al mismo tipo de pregunta y usan títulos con gramática paralela.
• Profundidad equivalente: Ningún elemento es un contrapeso simbólico o un cajón de sastre misceláneo; el detalle y la evidencia son comparables.
• Colocación útil: El recuadro sigue a su contexto introductorio y no separa una afirmación de la evidencia ni un paso de su requisito.
• Vecinos seguros: No está adyacente a otra cuadrícula paralela, componente de comparación o CTA de dos columnas.
• Redacción extraíble: Los títulos padre y de los elementos nombran sus temas, y los cuerpos no dependen de «izquierda», «derecha» ni pronombres cercanos.
• Orden responsivo: Los diseños estrechos apilan el elemento uno antes que el elemento dos sin recortes, desplazamiento horizontal ni reordenamiento visual.
• Estructura accesible: El contenedor tiene una etiqueta programática visible, los títulos hijos son encabezados reales, y el color o los iconos no transmiten significado por sí solos.
• Límites de contenido: Cada cuerpo se mantiene dentro de dos párrafos y no contiene componentes complejos anidados, procedimientos ni controles promocionales.
• Paridad de notación: El Markdown portátil, Hugo y WordPress preservan el mismo título, dos elementos, cuerpos y orden.
• Restricción de esquema: No se añade marcado de lista o comparación a menos que el contenido de la página califique independientemente para ello.

Un revisor debe rechazar el elemento cuando falla cualquiera de las primeras cuatro comprobaciones. Esos fallos indican un problema conceptual, no un defecto de estilo, y cambiar el ancho o la decoración no puede repararlos.

Preguntas frecuentes

Las entradas de preguntas frecuentes en el frontmatter responden las preguntas recurrentes de implementación: el número de elementos está fijado en dos, la profundidad importa más que los recuentos de palabras idénticos, las comparaciones detalladas necesitan una tabla, el móvil preserva el orden de origen y el elemento no genera marcado de esquema. Mantener estas respuestas en el frontmatter estructurado permite que la plantilla de la academia renderice el tratamiento de preguntas frecuentes aprobado sin duplicar el contenido en el cuerpo.