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