Your First Web Page

Lists in HTML & CSS

Topic 4 of 58 · 8 minFree lesson

You already know how to write headings, paragraphs and important words. Lists are the next piece, and you'll use them on almost every page you make. Shopping lists, recipe steps and the menus at the top of websites are all lists.

HTML has two main kinds. One shows bullets, for things in any order. The other shows numbers, for steps that go in order.

Bulleted lists

The <ul> element makes an unordered list: a list where the order of the items doesn't matter. Each item goes inside its own <li> element, short for list item.

Example 1

<ul> <li>Bread</li> <li>Milk</li> <li>Apples</li></ul>

Result

The browser puts a bullet in front of each item and moves the list in a little from the left.

Numbered lists

The <ol> element makes an ordered list: a list where the order matters. The items are still <li> elements. The browser numbers them for you.

Example 2

<ol> <li>Boil the water.</li> <li>Add the pasta.</li> <li>Cook for ten minutes.</li></ol>

Result

Which list to use

Ask yourself one question: would swapping two items change the meaning? If it would, use <ol>. If not, use <ul>. A recipe often has one of each.

Example 3

<h1>Pancakes</h1><h2>You need</h2><ul>  <li>Flour</li>  <li>Eggs</li>  <li>Milk</li></ul><h2>Steps</h2><ol>  <li>Mix everything in a bowl.</li>  <li>Pour a little into a hot pan.</li>  <li>Flip it when it bubbles.</li></ol>

Result

Lists inside lists

A list can sit inside a list item. This is called a nested list. Put the inner list inside the <li> it belongs to, after that item's text and before its </li>.

Example 4

<ul> <li> Fruit <ul> <li>Apples</li> <li>Pears</li> </ul> </li> <li>Vegetables</li></ul>

Result

The browser moves the inner list further in and gives it hollow bullets. That shows at a glance that Apples and Pears are kinds of fruit.

Common mistakePutting the inner list between two items, straight inside the outer <ul>. A <ul> or <ol> may only hold <li> elements. Move the inner list inside the <li> it belongs to.

Example 5Don't do this

<ul> <li>Fruit</li> <ul> <li>Apples</li> </ul> <li>Vegetables</li></ul>

Result

TipDon't type the numbers yourself. With <ol>, the browser counts for you. If you add a step in the middle later, every number after it updates on its own.

Try it yourself

Run the code in the editor and answer 8 practice questions on lists. It's free, you only need an account.

Practice this topic free I have an account