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.

In a CMS page body a list item cannot hold a code block or a table. On import each one is lifted out to directly after the outermost list, in order, with nothing lost, and the editor will not insert one inside an item. Markdown rendered straight from a template keeps them in place.

Task lists

- [ ] Unchecked task
- [x] Completed task

How it renders

• Unchecked task
• Completed task

The first item decides what the list is. When it opens with [ ] or [x], the whole list is a task list, and an item written with no box becomes an unchecked task. When the first item is plain, the list is plain and a later [ ] stays as literal text. Only bulleted lists are task lists: 1. [ ] step is a numbered item whose text starts with [ ]. The box needs whitespace after it, so [x]done is text. The site and the editor apply the same rule, so a list never changes type between them. Task lists nest at any depth with normal indentation, and each nested list is decided by its own first item.

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>
</ul>

Two details matter if you are writing CSS against it. The ids are cbx_0, cbx_1 and so on, counted per page in document order rather than per list, so the numbering continues across every task list on the page, nested ones included. And every item in a task list carries task-list-item, since a task list has no plain items.

List attributes

Attributes for a whole list are written at the end of an item’s line, after a space, or on a line of their own directly after the list. Either way 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-*, class and start. Anything else, title or role for example, is discarded along with the braces, and an id is dropped.
• A group glued to a link, an image or a code span is that element’s. Only a group written after whitespace at the end of the item’s line, or on the line after the list, is the list’s.

The same rule governs tables and blockquotes, and Attributes explains which reader takes what — worth reading once, because the shorthand that works on a heading being ignored on a list is the 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

Number the first item with the number you want, and the list counts on from there. This is also how the editor writes a list that does not start at one:

5. Continue the earlier sequence
6. This one is six

How it renders

5. Continue the earlier sequence
6. This one is six

Useful when a code block or a paragraph interrupts a procedure and you want the numbering to carry on. A {start=5} or {start="5"} group on an item is still read, as older page bodies wrote it, but a first number other than 1 wins over it. Reading one loses nothing, so a write’s validation does not report it as dropped content, in a quote or out of one. A start of 0 is kept, and a start is clamped to the range 0–999999999. The number survives a save in the editor unchanged.

Links and images inside list items

A group glued to a link, an image or a code span belongs to that element, even when it is the last thing in the item, so this link keeps its target:

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

Only a group written after whitespace at the end of the line is the list’s. To give both the link and the list attributes, glue the link’s group to it and put the list’s after a space:

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