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

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

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

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>

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.

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Work</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>
<hr />
<h3>My design process</h3>
<ol>
  <li>Discover — user research and problem framing</li>
  <li>Define — synthesize insights into a design brief</li>
  <li>Develop — ideate, prototype, and test</li>
  <li>Deliver — handoff to engineering</li>
</ol>

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

Common mistakes designers run into

Using paragraphs separated by line breaks instead of a real <ul>/<ol>, so a screen reader has no way of knowing it’s a list
Forgetting that a nested list needs correctly nested markup

The developer’s perspective

👨‍💻 What developers actually see

Designers see “a bulleted list,” but developers see that a semantic list lets a screen reader announce the item count (e.g. “list, 5 items”).

💡 Real-world example

A screen reader announces a properly marked-up <ul> as “list, 5 items” — plain paragraphs separated by line breaks announce nothing, no matter how similar they look visually.