Understand the idea

A list communicates that items belong together. Its HTML structure is useful beyond the visual bullet or number.

Use ul when changing the item order would not change the meaning. Use ol for a procedure or ranking. Each item is an li. A description list pairs dt terms with dd descriptions. Put a nested list inside the relevant li, not as a sibling of it.

Read the example

This is an HTML fragment. Place it inside the body of a complete HTML document, unless the example explicitly identifies head content.

HTML · EXAMPLE
<h2>Before publishing</h2>
<ol>
  <li>Check the content.</li>
  <li>Test the links.</li>
  <li>Open the page on a small screen.</li>
</ol>

A small mistake, explained

What goes wrong

Typing numbers into separate paragraphs makes a sequence look like a list without giving it list semantics.

How to fix it. Use ol and li. Let the browser keep the numbering correct as items change.

Try it yourself

Insert a new step between the first two items. Then make a separate unordered list of tools you use.

Further reading

HTML Living Standard — grouping content

Original explanation and example prepared for HTML code FYI with AI assistance. Test the code in your own context. How these guides are made.