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>Overview
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.
Step by step
- 1Choose ordered or unordered.
- 2Add items one per line.
- 3Set a start number if the list continues from earlier.
- 4Copy the HTML.
FAQ
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.
Try next
HTML Table GeneratorGenerate accessible table markup with caption, thead, tbody and scoped header cells from simple comma-separated input.Accordion GeneratorGenerate native collapsible sections with details and summary. Open by default optional. No JavaScript required.Text Input GeneratorGenerate accessible HTML input markup for text, email, password, number, date, file and range, with labels and validation attributes.