Lists and Task Lists

In the CMS these are the Bullet List, Ordered List and Task List toolbar controls — Mod-Shift-8, Mod-Shift-9 and Mod-Shift-7, with Tab and Shift-Tab to nest and un-nest an item. This page is the markdown behind them, which is what you write when content arrives over MCP or through an import rather than through the editor.

Bulleted and numbered lists

- First item
- Second item
- Third item

1. First step
2. Second step
3. Third step

How it renders

• First item
• Second item
• Third item

1. First step
2. Second step
3. Third step

Mod is Cmd on a Mac and Ctrl everywhere else; the full keymap is on Keyboard Shortcuts.

Nesting

Indent by two spaces to nest a list inside the item above it. Bulleted and numbered lists mix freely at any depth.

- Parent item
  - Child item
  - Another child
- Second parent
  1. Numbered sub-step
  2. Another sub-step

How it renders

• Parent item
  • Child item
  • Another child
• Second parent
  1. Numbered sub-step
  2. Another sub-step

The nested list is emitted inside the parent <li>, not as a sibling of it, which is what lets a stylesheet indent and re-mark it as a level.

Task lists

- [ ] Unchecked task
- [x] Completed task
- Regular item

How it renders

Task items and ordinary items live in the same list, so a checklist can carry an unticked note between two boxes.

The checkboxes are display-only. They render with the disabled attribute set, so a reader cannot tick one and nothing is stored if they try. A task list is a picture of a state, not a form; if you need readers to record something, use a form instead.

The markup, for anyone styling it:

<ul class="task-list">
  <li class="task-list-item">
    <input type="checkbox" id="cbx_0" disabled="true"><label for="cbx_0"> Unchecked task</label>
  </li>
  <li class="task-list-item">
    <input type="checkbox" id="cbx_1" checked="true" disabled="true"><label for="cbx_1"> Completed task</label>
  </li>
  <li>Regular item</li>
</ul>

Three details matter if you are writing CSS against it. The ids are cbx_0, cbx_1 and so on, counted per page rather than per list, so the numbering continues across every task list on the page. An ordinary item in a task list gets a plain <li> with no task-list-item class. And the <label> text begins with a leading space — <label for="cbx_0"> Unchecked task</label> — which will show up if you are matching text or setting ::first-letter.

List attributes

Attributes for a whole list are written at the end of a list item, and they land on the <ul> or <ol>, never on the <li>:

- First item {class="checklist"}
- Second item

<ul class="checklist">
  <li>First item</li>
  <li>Second item</li>
</ul>

Two further rules follow from how the attribute block is claimed:

• Only container-level keys are kept — data-*, id, class and start. Anything else, title or role for example, is discarded along with the braces.
• The first item that carries an attribute block wins it for the list. Once the list has attributes, a block at the end of a later item is treated as an attribute on that <li> instead. Put the list’s attributes on the first item and you never have to think about this.

The same strict rule governs tables and blockquotes, and Attributes explains which parser reads what — worth reading once, because the shorthand that works on a heading failing silently on a list is the single most common surprise in this format.

A class only does anything if a stylesheet defines it; Cascade Layers and Overriding Leed covers where your own rules go and how they win.

Starting at a number other than one

Put {start="5"} on the first item and the list numbers from there:

1. Continue the earlier sequence {start="5"}
2. This one is six

How it renders

1. Continue the earlier sequence
2. This one is six

Useful when a code block or a paragraph interrupts a procedure and you want the numbering to carry on.

Links and images inside list items

An attribute block that is the last thing in a list item is claimed by the list, as described above — including one you meant for a link or an image inside that item. So this does not do what it looks like:

- [Leed](https://leed.ai){target="_blank"}

The braces are stripped, target is not a container-level key, and the link is emitted plain. The fix is to make sure the link is not the final element of the item — even a full stop after it is enough:

- [Leed](https://leed.ai){target="_blank"}.
- Read the [release notes](https://leed.ai){target="_blank"} before upgrading.

Both of those get their target. An image is worse rather than merely inert: - ![Alt](photo.jpg){class="wide"} promotes class="wide" onto the <ul>, because class is a container-level key. If you need attributes on an image, do not make the image the last thing in a list item.