Lists — Unordered, Ordered, Nested, Tasks

~12 min · markdown, lists, tasks

Level 0Plaintext

0 XP0/64 lessons0/12 achievements

0/100 XP to next level100 XP to go0% complete

Three list shapes, plus tasks

Unordered lists use -, *, or +. Ordered lists use numbers followed by . or ). Nest by indenting 2 to 4 spaces. GFM adds task lists with - [ ] and - [x].

Auto-numbering for ordered lists

The actual numbers in your source don't matter. 1. 1. 1. renders as 1. 2. 3.. This means you can reorder list items without renumbering — handy when you write iteratively.

Loose vs tight lists

A list with blank lines between items is 'loose' — each item gets wrapped in <p> tags, producing more vertical space. A list without blank lines is 'tight'. The visual difference matters for design; pick deliberately.

Indent rule: nested list items must be indented enough to align with the content of the parent item, not just past the marker. - Parent needs children indented 2 spaces; 1. Parent needs 3 spaces (past 1. ).

Code

Unordered (three valid markers)·markdown

- First item
- Second item
- Third item

* Also valid
* With asterisks

+ And plus signs work too

Ordered + auto-number trick·markdown

1. First item
2. Second item
3. Third item

1. Numbers don't matter
1. Markdown auto-numbers
1. In the rendered output

Nested (mixed types)·markdown

- Level 1
  - Level 2
    - Level 3
- Back to level 1
  1. Nested ordered
  2. Inside unordered

Task lists (GFM)·markdown

- [x] Completed task
- [ ] Incomplete task
- [ ] Another todo

External links

Exercise

Write a 3-level nested list — top level unordered, second level ordered, third level a task list. Render it. Then deliberately under-indent one nested item by one space and see how the parser misinterprets it. Indentation precision is the lesson.

Lists — Unordered, Ordered, Nested, Tasks

Three list shapes, plus tasks

Auto-numbering for ordered lists

Loose vs tight lists

Code

External links

Exercise

Progress

Comments 0