List Generator
Generate ul and ol markup from plain lines, with a start number for ordered lists.
Content/List
Ordered, unordered or description list from plain lines.
Live preview
- First item
- Second item
- Third item
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>About the list generator
Lists carry meaning. A screen reader announces how many items there are before reading them, which is context you lose entirely if you fake a list with divs and bullet characters.
Use ol when the order matters, such as steps, and ul when it does not.
How to use it
- 1Choose ordered or unordered.
- 2Add items one per line.
- 3Set a start number if the list continues from earlier.
- 4Copy the HTML.
Questions
When should I use ol instead of ul?
When the sequence carries meaning, such as instructions or rankings. If reordering the items would not change the meaning, use ul.
How do I continue numbering across a break?
Set the start attribute on the second list to the next number.
Can I nest lists?
Yes. Put the nested list inside the parent li, not between two li elements, which is invalid.