HTML list generator — nested ul and ol lists from indented lines

How to use the HTML list generator

1. Type your items in Items (one per line; indent 2 spaces to nest). Empty lines are ignored.
2. Choose the List type: Bulleted <ul> or Numbered <ol>.
3. For a numbered list, pick the Numbering (1, 2, 3 / a, b, c / A, B, C / i, ii, iii / I, II, III) and the Start at number.
4. Add a Class (optional) if your CSS styles lists by class.
5. Copy the HTML and check the Preview.

What it does and when to use it

Lists are easy to write and easy to nest wrongly. A sub-list must sit inside the li of the item it belongs to, and every li and list must be closed in the right order. In a three-level outline it only takes one missing </li> to shift the rest of the page.

Use the generator for tables of contents, feature lists, outlines, recipe steps with sub-steps and documentation menus. Lists of name and description pairs, such as a glossary, fit a definition list better. When the content already exists as HTML and you only need the words, HTML to Text turns lists back into bullets.

How it works

Each line’s indentation is measured: every two spaces (or one tab) is one level. When a line goes one level deeper, a new list opens inside the current li. When it comes back out, the open lists and items are closed. The output is indented two spaces per level so the structure is easy to read. Item text is HTML-escaped, so & becomes &.

On a numbered list, type is added only when it is not 1, and start only when it is not 1. This keeps the code clean.

Worked examples

Recipe steps with sub-steps, numbered with capital letters:

<ol type="A">
  <li>Preheat the oven</li>
  <li>Mix the batter
    <ol>
      <li>Flour</li>
      <li>Eggs</li>
    </ol>
  </li>
  <li>Bake</li>
</ol>

The sub-steps use 1, 2 because type is set on the outer list only.

Continuing a numbered list. Items “Chapter 5” and “Chapter 6” with Start at 5 and class toc give <ol class="toc" start="5">, so the first item is shown as 5.

Nothing to list. A box with only spaces returns “Add at least one item.”

Limits and tips

• type on an ol sets the numbering, but CSS list-style-type overrides it. If your theme sets list styles, the attribute may not show.
• Use start for a list that continues after other content, for example after a paragraph between steps 4 and 5. Use the reversed attribute (added by hand) for countdowns.
• To format a long list you have edited by hand, paste it into the HTML Formatter.