Unordered lists

Create unordered lists with <ul> and <li>.

What is an unordered list?

An unordered list is a list of items whose order does not matter. The browser shows them by default with bullet markers (•). The ingredients of a recipe or the topics of a library are good examples.

An unordered list opens with the <ul> tag. Each item inside is written with an <li> (list item) tag. In short, <ul> is the container and <li> is each row inside it.

ul and li together

A correct list looks like this: <ul><li>Flour</li><li>Sugar</li><li>Egg</li></ul>. Each <li> tag must end with a closing </li>, and the whole list must close with </ul>.

Indentation improves readability: writing each <li> row one level in makes the code easier to follow. The browser ignores indentation, but it helps you and other readers.

Exercise Write an ingredient list

Add a <ul> list to body. It should have at least three <li> items; for example a recipe's ingredients Flour, Sugar and Egg.

Show example solution

<body>
  <ul>
    <li>Flour</li>
    <li>Sugar</li>
    <li>Egg</li>
  </ul>
</body>

Test yourself

In an unordered list, which tag wraps each item?
- <ul>
- <ol>
- <li>
- <list>
Show answer

<li> — Correct. Each item is wrapped in <li> (list item).

Close the list

<ul>
  <li>Coffee</li>
  <li>Tea</li>
____

Show answer

<ul>
  <li>Coffee</li>
  <li>Tea</li>
</ul>

Match each tag to its role

<ul>

Unordered list container
<li>

List item
<p>

Paragraph
<br>

Line break

Next lesson: Ordered lists

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies