How to add lists

Go back to HTML and CSS Index

When items are related to each other, it often makes sense to group them in some way and you can do this by making lists.

In HTML there are 3 types of lists: unordered lists (groups items that are related in no particular order), ordered lists (groups items that a related in a specific order) and description lists (groups name/value pairs - like in a dictionnary with terms and their description).

Unordered lists

You may also know them as bullet lists - a list that groups items that are related, but without making one more important than the others.

Can you think of any such lists?

<ul>
<li> Unordered list element 1 </li>
<li> Unordered list element 2 </li>
</ul>
Example 2.30 | An unordered list

As you can see, the ul element wraps around a number of li elements and groups them.

Ordered lists

An ordered list is a list that group items that are related in a specific order.

Can you think of any such lists?

<ol>
<li> Ordered list element 1 </li>
<li> Ordered list element 2 </li>
</ol>
Example 2.31 | An ordered list

As you can see, the syntax is the same with the ol element wrapping a number of li elements.

Description lists

Description lists are lists that resemple the ones you find a a dictionnary with terms and their description.

<dl>
<dt> HTML </dt>
<dd> Hypertext Markup Language </dd>
<dt> CSS </dt>
<dd> Cascading Style Sheet </dd>
</dl>
Example 2.32 | Description list

The syntax of the description list is a bit different than the other two.

The dl element wraps around a number of dt and dd pairs where dt defines the term, and dl describes it.

Try it out

  • On your about page, add at least 1 list eg. of things that you are good at; things you like doing; places you want to go; or something like that - with at least 5 list items.
  • What type of list do you use and why?