By ToolzHive
About this tool
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.
How to use HTML List Generator
- Type or paste your items, one per line, indenting sub-items with two spaces or a tab.
- Choose a bulleted or numbered list and, for numbered lists, the numbering style and start number.
- Copy the HTML and check the live preview.
Worked example
Lines "Fruits", " Apples", " Bananas" and "Grains" become a list with Apples and Bananas nested inside the Fruits item.
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.
Put this guide into practice
- HTML List Generator — Turn lines of text into bulleted or numbered HTML lists, with nesting.