Generate HTML list

Generate semantic unordered, ordered, or definition lists from structured items.

freeworks offlinenothing uploaded
ToolHTML List Generator
Input
Output
—
Put this on your own site

The frame below runs the same code as this page, in the reader's own browser. Nothing is sent to us, and nothing is sent to you.

Pick a dark background and the text and panels follow it, so the frame stays readable on a dark page.

Preview

How it works

Items become ul, ol, or dl structures; ordered-list start and reversed attributes and dt/dd pairs are emitted from the selected model. Nested items become nested list elements.

  • Semantic lists preserve structure for assistive technology.
  • Ordered numbering remains browser-generated.

Worked example

Navigation link list
Create an unordered HTML list from navigation items
Input
											Items: Home
About
Products
Contact
Type: ul
List style: 
Class name: nav-links
Output
												<ul class="nav-links">
  <li>Home</li>
  <li>About</li>
  <li>Products</li>
  <li>Contact</li>
</ul>

When to use this

Documentation steps, navigation menus, and glossaries generate HTML lists.

Edge cases

  • An ordered list can start at a custom value.
  • A definition term can have multiple definitions.
  • Nested lists belong inside an li for valid structure.

References