CMS and Markdown

Renderer-neutral prose defaults for task lists, footnotes, definitions, figures, embeds, and resilient long-form composition.

CSS Tags styles semantic renderer output through .prose or [data-prose]. It does not require a Markdown runtime or replace native content elements.

Semantic article defaults

No renderer-specific classes are needed: the prose scope styles ordinary headings, paragraphs, and lists as a coherent article.

Building resilient content systems

Well-structured HTML gives a CMS useful typography before any custom blocks or application code are involved.

What the content model provides

Authors can express hierarchy and relationships with familiar native elements:

Headings create a navigable document outline.
Paragraphs inherit a readable measure and rhythm.
Lists support nested ideas without custom wrappers.
- Ordered and unordered lists share the prose rhythm.
- Long items wrap inside the article measure.

Start with the source

The same fragment remains useful in Markdown previews, CMS pages, feeds, and print styles.

<section data-prose="true" aria-labelledby="cms-semantic-title">
  <h1 id="cms-semantic-title">Building resilient content systems</h1>
  <p>Well-structured HTML gives a CMS useful typography before any custom blocks or application code are involved.</p>
  <h2>What the content model provides</h2>
  <p>Authors can express hierarchy and relationships with familiar native elements:</p>
  <ul>
    <li>
      <strong>Headings</strong> create a navigable document outline.</li>
        <li>
          <strong>Paragraphs</strong> inherit a readable measure and rhythm.</li>
            <li>
              <p>
                <strong>Lists</strong> support nested ideas without custom wrappers.</p>
                  <ul>
                    <li>Ordered and unordered lists share the prose rhythm.</li>
                    <li>Long items wrap inside the article measure.</li>
                  </ul>
                </li>
              </ul>
              <h3>Start with the source</h3>
              <p>The same fragment remains useful in Markdown previews, CMS pages, feeds, and print styles.</p>
            </section>

Rendered CMS fragment

Markdown-style article output

This is ordinary semantic HTML using hooks emitted by common Markdown and CMS renderers.

Release checklist #

A renderer can compose tasks, definitions, quotations, tables, disclosure, and footnotes without component wrappers.

API reviewed
Migration guide published

Progressive enhancement: A complete baseline with optional platform upgrades.
Composition: Native content that remains useful in layouts and components.

Content should remain useful before the decoration arrives.
CSS Tags philosophy

Renderer support
Output	Hook
Tasks	`.task-list-item`
Footnotes	`data-footnotes`

Implementation note

Disclosure remains a native details element without JavaScript.

The renderer can emit a footnote.¹

The original source. ↩

<article data-prose="compact">
  <h1 id="cms-demo-release">Release checklist <a data-heading-anchor="true" href="#cms-demo-release" aria-label="Link to Release checklist">#</a>
  </h1>
  <p>A renderer can compose tasks, definitions, quotations, tables, disclosure, and footnotes without component wrappers.</p>
  <ul class="contains-task-list">
    <li class="task-list-item">
      <input type="checkbox" checked disabled/> API reviewed</li>
      <li class="task-list-item">
        <input type="checkbox" disabled/> Migration guide published</li>
      </ul>
      <dl>
        <dt>Progressive enhancement</dt>
        <dd>A complete baseline with optional platform upgrades.</dd>
        <dt>Composition</dt>
        <dd>Native content that remains useful in layouts and components.</dd>
      </dl>
      <blockquote>
        <p>Content should remain useful before the decoration arrives.</p>
        <footer>
          <cite>CSS Tags philosophy</cite>
        </footer>
      </blockquote>
      <table>
        <caption>Renderer support</caption>
        <thead>
          <tr>
            <th>Output</th>
            <th>Hook</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Tasks</td>
            <td>
              <code>.task-list-item</code>
            </td>
          </tr>
          <tr>
            <td>Footnotes</td>
            <td>
              <code>data-footnotes</code>
            </td>
          </tr>
        </tbody>
      </table>
      <details>
        <summary>Implementation note</summary>
        <p>Disclosure remains a native details element without JavaScript.</p>
      </details>
      <p id="cms-demo-reference">The renderer can emit a footnote.<sup>
        <a data-footnote-ref="true" href="#cms-demo-fn-1">1</a>
      </sup>
    </p>
    <section data-footnotes="true" aria-label="Footnotes">
      <ol>
        <li id="cms-demo-fn-1">The original source. <a data-footnote-backref="true" href="#cms-demo-reference" aria-label="Back to reference">↩</a>
        </li>
      </ol>
    </section>
  </article>

Prose scopes

<article data-prose>...</article>
<article data-prose="compact">...</article>
<article data-prose="wide">...</article>
<article class="prose prose-unbounded">...</article>

Default prose uses the body measure. Compact tightens rhythm, wide uses the wide measure, and unbounded delegates width entirely to the surrounding layout. Apply prose to the authored article body, not the application shell.

Renderer-neutral hooks

Content	Preferred output and accepted hooks
Tasks	`.contains-task-list` / `[data-task-list]` and `.task-list-item` / `[data-task-list-item]`
Footnotes	`[data-footnotes]` or `.footnotes`, with ref/backref data hooks
Heading links	Direct `.heading-anchor__link` or `[data-heading-anchor]` child
Definitions	Native `dl`, `dt`, and `dd`
Quotes	Native `blockquote` with optional direct `footer` or `cite`
Figures	Native `figure` and `figcaption`
Tables	Native `table` and optional `caption`
Disclosure	Native `details` and `summary`
Media	Native images, pictures, video, audio, SVG, and iframe embeds

The hooks are visual contracts only. Task state belongs in a checkbox, footnotes require IDs and links, and heading permalinks need accessible labels.

Overflow and composition

Long links and inline code wrap without widening the article. Fenced code and direct native tables retain independent horizontal scrolling. Media is bounded to the prose width, and fragment targets account for sticky headers.

Keep data-prose on the article column rather than a grid containing navigation. A wrapped table needs overflow on its wrapper or the richer data-table API.

Important tokens

--prose-task-gap, --prose-task-marker-offset
--prose-footnotes-gap, --prose-footnotes-border, --prose-footnotes-font-size
--prose-heading-scroll-margin, --prose-heading-anchor-gap
--prose-quote-cite-gap, --prose-definition-gap
--prose-table-scrollbar-gutter, --prose-embed-min-height
--prose-link-wrap, --prose-inline-code-wrap

Integration checklist

Preserve semantic heading, list, table, quote, figure, and disclosure HTML.
Sanitize user-authored HTML.
Generate unique heading and footnote IDs across repeated fragments.
Provide media alternatives, captions, or transcripts.
Test long URLs, missing media, nested lists, 200% text, RTL, dark mode, and narrow containers.