Skip to content

HTML List Generator

Turn lines of text into bulleted or numbered HTML lists, with nesting.

List type
HTML code
Preview

Continue your work

Rate this tool

0.0

0 ratings

  • 5 stars 0
  • 4 stars 0
  • 3 stars 0
  • 2 stars 0
  • 1 star 0

Click a star to rate this tool

Share this tool

Found it useful? Send it to a friend or teammate.

Report an issue

Something broken or not quite right? Tell us and we will look into it.

Clear instructions

Find steps, examples and limitations below.

Use online

Open the tool in a supported web browser.

Free to use

No sign-up required. Tool-specific limits may apply.

How to use the HTML List Generator

The HTML list generator converts plain lines of text into properly nested HTML lists. Put each item on its own line and indent sub-items with spaces or tabs; the generator builds the matching <ul> or <ol> structure with nested lists inside the right <li> elements. Choose numbering styles like 1, a or i, a start number and a CSS class.

  1. 1 Type or paste your items, one per line, indenting sub-items with two spaces or a tab.
  2. 2 Choose a bulleted or numbered list and, for numbered lists, the numbering style and start number.
  3. 3 Copy the HTML and check the live preview.

Example and practical tips

Lines "Fruits", " Apples", " Bananas" and "Grains" become a list with Apples and Bananas nested inside the Fruits item.

Frequently asked questions

What is the difference between ul and ol?

<ul> is an unordered, bulleted list; <ol> is an ordered, numbered list for steps or rankings.

How do I nest a list?

Indent the sub-items by two spaces or one tab more than their parent. The generator puts the nested list inside the parent <li>, which is the valid HTML structure.

Should special characters be escaped?

Keep escaping on unless your items already contain HTML such as links, so characters like & and < display correctly.