HTML Unordered Lists: Bullet Points with ul and li

Use an unordered list when the order of items does not matter. Browsers show bullet points by default.

1
2
3
4
5

<ul>
  <li>Fiction</li>
  <li>Poetry</li>
  <li>Cookbooks</li>
</ul>

• ul is the list. It means unordered list.
• li is a list item. Every item must be inside a ul or ol.

What goes inside an item

A list item can hold more than text: links, images, even other lists.

1
2
3
4

<ul>
  <li><a href="fiction.html">Fiction</a></li>
  <li><a href="poetry.html">Poetry</a></li>
</ul>

Changing the bullets

Use CSS to change the bullet style or remove it.

1
2
3
4

<ul style="list-style-type: square;">
  <li>Square bullet</li>
  <li>Another one</li>
</ul>

The most useful values are disc, circle, square and none.

Lists for navigation

Menus are lists of links. Marking them up as lists helps screen readers announce “list of 5 items”. You can remove bullets with CSS and lay the items out in a row.