Lists

Shopping lists, recipes, and dictionaries. You already know the three kinds of HTML list; you just haven't met their tags yet.

Before you write a single line of code, think about the lists in your own life.

A shopping list: milk, eggs, bread. Does the order matter? Not really. You'll grab them in whatever order the aisles go.

A recipe: crack the eggs, whisk them, pour into the pan. Order matters a lot here. Pour before you crack and you've got a mess.

A dictionary: a word, followed by what it means. Each item is a pair.

HTML has a list for each of these.

Unordered lists: the shopping list

<ul>
	<li>Milk</li>
	<li>Eggs</li>
	<li>Bread</li>
</ul>

<ul> means unordered list. Each item goes in an <li> (list item). The browser shows bullet points.

Ordered lists: the recipe

<ol>
	<li>Crack the eggs into a bowl.</li>
	<li>Whisk until smooth.</li>
	<li>Pour into a hot pan.</li>
</ol>

<ol> means ordered list, and the browser numbers each step for you. Here's the part people love: add a step in the middle and all the numbers update by themselves. No renumbering by hand.

Ordered lists also have a few handy attributes:

<ol start="5">
	<li>Fifth place</li>
	<li>Sixth place</li>
</ol>

• start="5" starts counting at 5.
• reversed counts down, like a top-10 countdown.
• type="A" uses A, B, C instead of 1, 2, 3.

How do you choose between ul and ol? Just ask: "If I shuffled these items, would it be wrong?" If yes, it's ordered. That's the whole decision.

Description lists: the dictionary

<dl>
	<dt>HTML</dt>
	<dd>The language that describes the structure of a web page.</dd>

	<dt>CSS</dt>
	<dd>The language that describes how a web page looks.</dd>
</dl>

• <dl> is the description list, the whole dictionary.
• <dt> is the term, the word being defined.
• <dd> is the description, what the word means.

These are great for glossaries, FAQs, or product specs ("Weight: 1.2 kg"). They're a little less common, so they often get overlooked. Don't overlook them.

Lists inside lists

Sometimes a list item has its own sub-list. Remember the family tree from Nesting and the DOM? The rule is the same: the inner list goes inside an <li>, as its child.

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

A common mistake is putting the inner <ul> directly inside the outer <ul>, between two <li> elements. It might even look right! But a <ul> is only allowed to have <li> children. Everything else goes inside an item.

The secret life of lists

Here's something that surprises most beginners. Look at the menu at the top of almost any website: Home, About, Blog, Contact. Under the hood, that's very often a <ul> with links inside it, styled so the bullets disappear and the items sit side by side.

Why a list? Because it is a list. A list of places you can go. And when a screen reader reaches it, it announces "list, 4 items," which tells the listener how big the menu is before they dive in. We'll build exactly this kind of menu in Links and Navigation.

Try it

HTML

Preview

Try it yourself

1. Insert a new step between "Crack" and "Whisk" in the recipe. Watch the numbers fix themselves.
2. Turn "Eggs" in the shopping list into a nested list with two kinds: "Free-range" and "Regular."
3. Add a second term to the Kitchen Words dictionary.

Check your understanding

Which list would you use for step-by-step directions to your house?

<ul>

<ol>

<dl>

<li>

Where does a nested list go?

Directly inside the outer ul, between li items

Inside one of the li items

After the closing ul tag

Inside a dt

In a description list, which tag holds the term being defined?

<dd>

<dl>

<dt>

<li>

Up next

Lists are about to get even more useful, because next we'll fill them with links. On to Links and Navigation. If you're curious how lists get their bullets removed and turned sideways into a menu, that's CSS territory; you can peek ahead at Intro to CSS.