# Content Format Patterns **Last Updated:** 2026-04-04 Quick reference for formatting formulas, notes, legal info, lists, and headings in lexikon and ratgeber posts. Use with [CONTENT_DEPTH_GUIDELINES.md](CONTENT_DEPTH_GUIDELINES.md). ## Visual format decision guide (new posts & improvements) Use this **after** headings and section structure are stable. Goal: enough visual structure to scan and cite, without a “boxed” look on every paragraph. ### One-minute matrix | Pattern | Use when | Skip when | Overuse risk | | ---------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------ | ----------------------------------------------------------------------------- | | `**formula-block`** | Core **symbolic** formulas readers will reuse (e.g. Zuschlag = Stundenlohn × …); 2+ related equations in one place; legal/calc posts where the formula *is* the takeaway | Single trivial line already clear in prose; every numeric worked example | Whole article becomes monospace strips; duplicate same formula under every H2 | | `**table-breakout-wrapper` + plain ``** | **Compare** 2+ entities on same criteria; specs, thresholds, “vs.” summaries | Formulas, step narratives, long prose cells | Tables for decoration; Tailwind on `th`/`td` (breaks blog CSS) | | `**blog-note blog-note--important`** | **One** consequence that changes behavior (“Wichtig:”, “Achtung:”, deadline, Grenze) | General tips, whole paragraphs of background | More than **1–2 notes per major H2**; notes that repeat the previous sentence | | `**
` / `` / `
` / ``, no Tailwind on table cells. **Do** add a table when the outline or `validate-content-completeness` / competitor gap calls for **structured comparison** (e.g. Zuschlag vs. Zulage, Anspruchskriterien A/B). **Don’t** split a single formula into a one-row table for styling. ### Notes / callouts Reserve `blog-note--important` for **risk, legal edge, or irreversible misunderstanding**. If the point is educational but not “read this or get payroll wrong,” use a normal paragraph or a list item with **strong** label. ### Process hooks **New posts** 1. In `CONTENT_OUTLINE.md` / section briefs, tag sections with intended **formats** (table | formula-block | note | list)—not every section needs a special format. 2. During drafting, add `formula-block` / tables / notes when the brief says so **or** when a competitor snippet shows a clear gap. 3. Before apply: **consolidation pass**—merge duplicate formula blocks; demote decorative notes to prose. **Existing posts (improvement / skyscraper)** 1. After outline gap analysis, ask: “Does a top competitor expose **scannable** math or comparison we only have in prose?” → add **one** appropriate pattern, not all. 2. Re-run `validate-content-flow.php` after adding callouts (FAQ-in-body regex: avoid pairing **häufig** with substring **…fragen** e.g. in **Rückfragen** in the same match window—see [PAGE_IMPROVEMENT_DATA_PLAYBOOK.md](../PAGE_IMPROVEMENT_DATA_PLAYBOOK.md) §8). **Quality gate:** [CONTENT_QUALITY_PRE_PUBLISH_CHECKLIST.md](CONTENT_QUALITY_PRE_PUBLISH_CHECKLIST.md) includes a visual-format line item. --- ## Formula Block **When:** Any formula or calculation that benefits from visual separation. **Never use tables for formulas or calculations** – use `formula-block` instead. **Best practice:** Include the full equation with the variable on the left (e.g. `Cost per Hire = ...`, `Bruttopersonalbedarf = ...`). Makes the formula self-documenting. **HTML:** ```html

Cost per Hire = (Interne Recruiting-Kosten + Externe Recruiting-Kosten) ÷ Anzahl Einstellungen

Bruttopersonalbedarf = Einsatzbedarf + Reservebedarf

Nettopersonalbedarf = Bruttobedarf − Personalbestand − Neueinstellungen + Abgänge

``` (Use one formula per `

`; optional second line for meaning, e.g. `

Bedeutung: …

`.) **CSS:** `.formula-block` in `v2/css/blog-post.css` – light blue background, monospace font, left border. **Example:** Personalplanung (Personalbedarfsplanung vs. Personaleinsatzplanung; Beispiel Berechnung). --- ## Note/Callout (Wichtig, Hinweis) **When:** Critical information that should stand out – "Wichtig:", "Hinweis:", "Achtung:". **HTML:** ```html

Wichtig: Die 28 Einstellungen sind über 2 Jahre verteilt – nicht alle auf einmal.

``` **CSS:** `.blog-note--important` extends blockquote with stronger border and background. --- ## Legal/Paragraph References **When:** Multiple laws or paragraphs (e.g. BetrVG § 92, § 93) in one section. **Options:** - **H3 per paragraph** if each has 2+ sentences (e.g. "§ 92 BetrVG – Unterrichtung", "§ 93 BetrVG – Personalfragebogen") - **Merged paragraph** if brief; add bullet list of paragraph references for scannability --- ## List vs H3 Decision | Use | When | | ---------- | ------------------------------------------------------------------------------------------------------------------------------- | | **H3** | Item has 2+ paragraphs OR 3+ sentences; section has 3 or fewer H3s; TOC jump links add value | | `**
    `** | 4+ consecutive items; each item 1–2 sentences; Semji rule: "replace titles by bullet lists if more than 4 consecutive elements" | | `**
      **` | Sequential steps, numbered elements, or "die X Bausteine/Kernelemente" – **never** inline (1)(2)(3) in a paragraph | **Prohibited:** Do **not** write numbered items inline in a paragraph (e.g. "Die acht Kernelemente sind: (1) X – …; (2) Y – …; (3) Z – …"). Use `
        ` with `
      1. ` items instead. Same for comma- or semicolon-separated enumerations (e.g. "Typische Aufgaben: A, B, C, D" or "Faktoren: X – …; Y – …; Z – …") – use `
          ` when 4+ items. **Never** use a single paragraph with semicolons for 4+ factors, criteria, or list items. **PAA question + list:** When a PAA-style question ("Was gehört zum X?", "Was macht man bei X?") introduces a list, use an **H3 for the question** (not bold inline). See [HEADING_HIERARCHY_GUIDE.md](HEADING_HIERARCHY_GUIDE.md) – improves TOC, featured snippets, voice search. --- ## Table vs List | Use | When | | --------- | -------------------------------------------------------------- | | **Table** | Comparing multiple items; structured data; specifications | | **List** | Step-by-step; top N; checklists; definitions with bold lead-in | **Prohibited:** Do **not** use tables for formulas or calculations. Use `
          ` instead (see Formula Block above). **Markup:** For data tables in post bodies, follow [BLOG_TABLE_FORMAT.md](BLOG_TABLE_FORMAT.md): semantic `` inside `
          `, **no** Tailwind classes on `table` / `tr` / `th` / `td` (blog CSS supplies Ordio blue headers and borders). --- ## References - [BLOG_TABLE_FORMAT.md](BLOG_TABLE_FORMAT.md) – Tables in `content.html` - [CONTENT_DEPTH_GUIDELINES.md](CONTENT_DEPTH_GUIDELINES.md) – H3/list rules, section depth - [BLOG_CONTENT_RESTRUCTURING_GUIDE.md](BLOG_CONTENT_RESTRUCTURING_GUIDE.md) – When to add H3s - [HEADING_HIERARCHY_GUIDE.md](HEADING_HIERARCHY_GUIDE.md) – H2/H3/AEO - [CONTENT_CREATION_WORKFLOW_2026.md](CONTENT_CREATION_WORKFLOW_2026.md) – Where the visual-format pass runs - `v2/css/blog-post.css` – formula-block, blog-note--important