How to use HTML lists

HTML lists have many uses, from listing items on your site in an appropriate and appealing way to laying the structure of your navigation bar. You can see an example of a simple navigation bar at the top of this box.

There are 3 types of lists available to use. They are Unordered lists, Ordered lists and Definition lists. Lists should be used to separate and organise your content. Below you will find a description of each list, what they often used for and an example of how to code each one.

Unordered list

The unordered list is designed to separate content without adding any particular order to the content. Each list item within the list will, by default be marked with a bullet point. If you intend to make a navigation bar it is probably best to use an unordered list.

How to make an unordered list:

<ul>
<li> Home </li>
<li> About </li>
<li> Contact </li>
</ul>

How it looks in browser:

• Home
• About
• Contact

Ordered list

An ordered list should be used when the content within needs to be separated in a specific order. Each of the list items is marked with a number. This type of list is useful for such things as listing instructions which need to be followed in specific order.

How to make an ordered list:

<ol>
<li> Get out of bed </li>
<li> Get washed </li>
<li> Go to work all day long </li>
</ol>

How it looks in browser:

1. Get out of bed
2. Get washed
3. Go to work all day long

Definition list:

The definition list is different from the previous examples. This list should be used when you need to list items, and provide a definition for each item. The list items are not marked with any number or bullet point, but the description of each item is indented by default. These lists can be useful for such things as an FAQ section or listing products.

How to make an definition list:

<dl>
<dt>How much does it cost?</dt>
<dd>The site is free for all.</dd>
<dt>How can I contact you?</dt>
<dd>You can contact us at email@mail.com</dd>
</dl>

How it looks in browser:

How much does it cost?

The site is free for all.

How can I contact you?

You can contact us at email@mail.com

Once you get the hang of using lists they are very powerful. When combined with CSS the results are amazing. If you want to start learning how to apply CSS to your HTML list click here.