HTML lists playground

Combine the three HTML list types, create nested levels, and generate semantic markup with ul, ol, li, dl, dt, and dd.

Presets

Choose a configuration as a starting point, then adjust any control.

List type

Use ul when order is irrelevant, ol when sequence is meaningful, dl for terms and descriptions, or Mixed to combine them.

<ul><ol><dl>Mixed

Content

List items

Write one item per line and use two spaces per nested level. In dl, use term | description.

Unordered list

HTML

<ul>
  <li>Milk</li>
  <li>Eggs</li>
  <li>Bread</li>
  <li>Hummus</li>
</ul>