Skip to content
Web for Designers

Lists

Lists appear everywhere in UI design — navigation menus, feature bullet points, step-by-step instructions, ingredient lists, search results. HTML gives you two list types for content and one for descriptive pairs. All of them are built from a simple, nestable structure.

Unordered list

Section titled “Unordered list”

An unordered list (<ul>) is a collection of items where the order does not matter. The browser renders bullet points by default. Use it for feature lists, ingredients, nav links — anything where swapping item order would not change the meaning.

<ul>
  <li>Sketch</li>
  <li>Figma</li>
  <li>Framer</li>
</ul>

Ordered list

Section titled “Ordered list”

An ordered list (<ol>) is a sequence where order does matter. The browser numbers items automatically. Use it for steps in a process, rankings, recipes, instructions.

<ol>
  <li>Open a new Figma file</li>
  <li>Set up your frame</li>
  <li>Add a grid</li>
</ol>

Both types use <li> — list item — for each entry. The <li> must always be a direct child of <ul> or <ol>.

Nesting lists

Section titled “Nesting lists”

You can place a list inside an <li> to create sub-items — like sub-layers in Figma:

<ul>
  <li>Design tools
    <ul>
      <li>Figma</li>
      <li>Sketch</li>
    </ul>
  </li>
  <li>Prototyping tools</li>
</ul>
Section titled “Navigation as a list”

One of the most common HTML patterns you will encounter is a navigation menu built from an unordered list. The list communicates “these are related items of equal importance”. CSS then removes the bullets and arranges them horizontally.

Try adding a fifth item to the ordered list. Notice the browser renumbers automatically — you never touch the numbers themselves.

Which list element should you use for a set of steps that must be followed in order?
What is the correct element for each item inside a list?
Why is it good practice to build navigation menus using a <ul> with <li> items?