Make a bullet list

01 / 05

A list takes two kinds of tag

A bullet list is made of two tags working together.

<ul> … the container for the whole list
<li> … each single item

You write the <li> inside the <ul>.

<ul>  <li>apples</li>  <li>oranges</li></ul>

02 / 05

A tag inside a tag

Putting one tag inside another is called nesting, and it is a big idea in HTML.

The custom is to indent a nested tag by two spaces. It works either way, but indenting lets you see the parent and child relationship at a glance.

<ul>  <li>notebook</li>  <li>pencil</li>  <li>rubber</li></ul>

03 / 05

Use ol when you want numbers

When the order means something, use <ol> instead of <ul> and the numbers appear on their own.

The contents are still <li>. Only the container tag changes.

<ol>  <li>rinse the rice</li>  <li>add water</li>  <li>cook it</li></ol>

04 / 05

Which one?

order means nothing → <ul> (a shopping note, things you like)
order means something → <ol> (steps, a ranking)

You choose by what the contents are like, not by how it looks.

05 / 05

Links go in lists too

An <li> can hold any of the tags you have learned. Put links in and you have a menu.

That row of links along the top of a site is, almost always, exactly this shape.

<ul>  <li><a href="menu.html">Menu</a></li>  <li><a href="access.html">Finding us</a></li></ul>