Unordered lists - HTML

Demo

Summary

To create an unordered list in HTML, use the ul and li elements.

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

To see what this element looks like in the browser, view the Demo section below.

Details

An unordered list in HTML gets rendered as a list with bullet points in the browser.

Nested lists

It’s possible to nest an unordered list inside another unordered list, like this:

<ul>
  <li>Item 1
    <ul>
      <li>Subitem 1</li>
      <li>Subitem 2</li>
    </ul>
  </li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Notice that the nested list is placed inside a list item element. Also notice that the nested list is placed before the closing tag of the list item.

It’s also possible to nest an ordered list inside an unordered list, like this:

<ul>
  <li>Item 1
    <ol>
      <li>Subitem 1</li>
      <li>Subitem 2</li>
    </ol>
  </li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Exercises

Recreate the embedded CodePen demo by typing out the HTML code. Then, try customizing the text in the list elements.

Using your text editor or CodePen, try creating your own unordered list. You can try creating a grocery list or some other example where order doesn’t matter.

References

The Unordered List element on MDN

Lesson tags: Open Lesson

Unordered lists – HTML