Indent an item to nest it under the one above; outdent it to bring it back up a level. Item text is escaped, so a "<" in an item stays a "<" on the page and never becomes markup. The numbering style, start number and reversed order apply to ordered lists only.
What is the HTML List Generator?
The HTML List Generator is a free online tool that builds an HTML list for you — ordered or unordered, nested as deep as you like — and gives you clean, semantic HTML in return. It is made for anyone who needs a list on a page and does not want to type out every <ul>, <ol> and <li> tag by hand: a table of contents, a set of instructions, a course outline, a pricing feature list, or a student learning how lists work in HTML.
The HTML it produces is a plain <ul> or <ol> with nested lists where you nested them — the same markup you would write by hand, with nothing extra. Item text is escaped, so a < in an item stays a < on the page and never becomes markup. That means you can paste text with symbols in it and the list still comes out right.
Everything runs in your browser. There is no sign-up, and nothing you type leaves your device.
How to use the HTML List Generator
- Choose the List type. Pick “Unordered list” for bullets (
<ul>) or “Ordered list” for numbers (<ol>). - Set the numbering style (ordered lists). Choose 1, 2, 3; a, b, c; A, B, C; i, ii, iii; or I, II, III. This only applies to ordered lists — unordered lists ignore it.
- Set the Start number (ordered lists). If your list continues from an earlier one, start it at 4 or 7 instead of 1. The default is 1.
- Tick Reversed if you need it (ordered lists). A reversed list counts down instead of up — useful for a countdown or a “top 10” that starts at 10.
- Add items. Click “Add item” and type the item text. Add as many as you need.
- Nest items. Indent an item to nest it under the one above it; outdent it to bring it back up a level. You can nest as deep as you like, and the generated HTML nests the
<ul>or<ol>to match. - Watch the live preview. The preview on the right updates as you work, so you can see the list exactly as a reader will see it.
- Copy or download. Click Copy to take the HTML, or Download to save it as
list.html. Clear wipes the list; Reset restores the sample list.
Worked example
The tool loads with a sample course outline, and it shows nesting well: “HTML Basics” with “Elements” and “Attributes” nested under it, “CSS Basics” with “Selectors” and “Box Model” nested under it, and “JavaScript Basics” on its own. With the list type set to Unordered list, the generated HTML looks like this:
<ul>
<li>HTML Basics
<ul>
<li>Elements</li>
<li>Attributes</li>
</ul>
</li>
<li>CSS Basics
<ul>
<li>Selectors</li>
<li>Box Model</li>
</ul>
</li>
<li>JavaScript Basics</li>
</ul>
Try it yourself: switch the List type to “Ordered list” and the same items become a numbered outline, 1, 2, 3 with nested numbering underneath. Set the Start number to 5 and the numbering starts at 5. The stats line under the output tells you how many items you have and how large the HTML is.
Where a list generator actually helps
Course outlines and tables of contents. A course has modules, and modules have lessons — that is a nested list, and it is tedious to write by hand. Type the modules and lessons as items, indent the lessons under their modules, and the generator produces a clean outline you can paste straight into a page.
Step-by-step instructions. An ordered list is the right markup for steps, because the numbers carry meaning: step 2 comes after step 1. If the steps have sub-steps, nest them. And if you are writing a “top 10” that counts down, tick Reversed and set the Start number to 10.
Feature lists and pricing tables. A pricing page is mostly lists: what each plan includes, what it does not. Build each plan’s feature list here as an unordered list, and every plan gets the same clean structure. Because the output is a plain <ul>, you can style it with your own CSS — ticks, icons, spacing — without fighting the markup.
Tips for better lists
- Use the right list type. Bullets say “these items are a set”; numbers say “this order matters”. Instructions, rankings and steps get an ordered list; features, ingredients and related links get an unordered one. Picking the right type is also an accessibility win — screen readers announce how many items a list has and which one the reader is on.
- Do not nest for the sake of it. Two levels is usually enough. A list nested four levels deep is hard to scan, and on a narrow screen it runs out of room. If your outline needs more levels, consider splitting it into sections with headings instead.
- Keep item text short. A list item is a label, not a paragraph. If an item needs more than a line or two of explanation, put the explanation in the paragraph after the list, or make the item a link to a page that explains it.
- Watch for empty items. An empty item renders as a blank bullet or a blank number — the tool warns you about it. Delete it or fill it in before you copy the HTML.
- Style with CSS, not with the markup. The generator gives you a plain list on purpose. If you want square bullets, roman numerals or no bullets at all, do it in CSS with
list-style-type— the HTML stays clean and semantic.
Frequently asked questions
What is the difference between an ordered and an unordered list?
An unordered list (<ul>) shows bullets and means “a set of related items” — the order does not matter. An ordered list (<ol>) shows numbers and means “this order matters” — steps, rankings, or a sequence. Screen readers treat them differently too, announcing the position in an ordered list (“item 2 of 5”).
How deep can I nest items?
As deep as you like — indent an item to nest it under the one above, as many times as you want. In practice, two levels is the sensible limit for readability. The generated HTML nests a new <ul> or <ol> inside the parent <li> at each level, which is the correct way to nest lists in HTML.
What do the numbering styles mean?
They set the type attribute on an ordered list: 1 gives 1, 2, 3; a gives a, b, c; A gives A, B, C; i gives i, ii, iii; I gives I, II, III. The style applies to the whole list. Use lowercase letters or roman numerals when the list is a sub-list or an appendix, and plain numbers for steps.
Can I paste text with < and > in it?
Yes. Item text is escaped, so < and > in your items appear on the page as the characters themselves and never become markup. That is useful for lists about code or mathematics — you can write “a < b” as an item and it will display correctly.
Does the start number have to be 1?
No. Set “Start number” to any number from 1 up. It is useful when a list continues from an earlier list on the same page — for example, steps 1–4 in one section and steps 5–8 in the next. Combined with Reversed, you can also build a countdown that starts at 10 and counts down to 1.
Conclusion
Lists are everywhere on the web, and they are one of the few places where the right HTML tag does half the work for you — for readers, for search engines and for screen readers. The HTML List Generator above builds that markup correctly in seconds, nested or flat, numbered or bulleted. Try it with your own outline, then use the HTML Table Generator when your content needs rows and columns instead of a list.