Markdown Nested Lists to Multi-Level HTML Lists

Nested Lists in Markdown

Markdown supports nesting lists by indenting child items. You can nest unordered lists inside ordered lists and vice versa, creating complex hierarchical structures.

Basic Nesting

Indent child items by 2 or 4 spaces (depending on the parser) to create a nested list:

- Parent item
  - Child item
    - Grandchild item
  - Another child
- Another parent

Converts to:

<ul>
  <li>Parent item
    <ul>
      <li>Child item
        <ul>
          <li>Grandchild item</li>
        </ul>
      </li>
      <li>Another child</li>
    </ul>
  </li>
  <li>Another parent</li>
</ul>

Mixing Ordered and Unordered

You can freely mix list types at different nesting levels:

1. First step
   - Detail A
   - Detail B
2. Second step
   1. Sub-step 1
   2. Sub-step 2
3. Third step

Converts to:

<ol>
  <li>First step
    <ul>
      <li>Detail A</li>
      <li>Detail B</li>
    </ul>
  </li>
  <li>Second step
    <ol>
      <li>Sub-step 1</li>
      <li>Sub-step 2</li>
    </ol>
  </li>
  <li>Third step</li>
</ol>

Indentation Rules

• CommonMark requires indentation to align with the content of the parent list item (typically 2-4 spaces).
• GitHub Flavored Markdown is generally lenient with 2+ spaces of indentation.
• Using tabs can cause inconsistent behavior across parsers — prefer spaces.

Common Pitfalls

1. Insufficient indentation — the item appears as a sibling instead of a child.
2. Inconsistent markers — switching between - and * at the same level can confuse some parsers.
3. Missing blank lines — some parsers require blank lines before a nested list when the parent item has multiple paragraphs.

Deeply nested lists (4+ levels) become hard to read. Consider using headings and separate lists instead.