HTML List

A HTML List is a way to display items in a list. Below is an example of a HTML List.

• First List Item
• Second List Item
• Third List Item
• Fourth List Item

In HTML there are three types of list:

1. An ordered list that is created using the <ol> HTML element.
2. An unordered list created using the <ul> HTML element.
3. A definitions list created using the <dl> element.

These HTML lists are described below.

Ordered List

1. Moonlight
2. Sunlight
3. Light bulb

Notice that the ordered list is a list denoted by numbers. To build a ordered list in HTML you will need to use the <ol> and </ol> tags. Inside these tags you place the <li></li> tags to denote an item in the list.

To build the ordered list above I used the HTML code below.

<ol>
 <li>Moonlight</li>
 <li>Sunlight</li>
 <li>Light bulb</li>
</ol>

Unordered List

• Moonlight
• Sunlight
• Light bulb

Notice that the unordered list is a list denoted with bullet points, these bullet points can be circles or squares, or just have no bullet points attached to them at all. The styling of the bullet points is carried out within the CSS, but I’ll leave this for the CSS Section. Lets check out how to create an unordered list!

To build an unordered list in HTML you need to use the <ul> and </ul> start and end tags. Inside these tags, like before, you place the <li></li> tags to denote an item in the list. Each item will appear with a circle beside it, unless it has been styled already using CSS.

To build the unordered list above I used the following HTML code.

<ul>
 <li>Moonlight</li>
 <li>Sunlight</li>
 <li>Light bulb</li>
</ul>

Definitions List

Galaxies

Milky Way

Andromeda

Sunflower

Planets

Earth

Mars

Venus

Saturn

Ok, we’ve covered ordered lists and unordered lists, but what is a definitions list?

A Definitions list is created using the <dl> HTML element, it is a list of items, each item is part of a specific set, and the set is given a name, as the above example shows.

The above definitions list is created using the following HTML code.

HTML Code for Definitions List.

<dl>
<dt>Galaxies</dt>
<dd>Milky Way</dd>
<dd>Andromeda</dd>
<dd>Sunflower</dd>
<dt>Planets</dt>
<dd>Earth</dd>
<dd>Mars</dd>
<dd>Venus</dd>
<dd>Saturn</dd>
</dl>

Placing other HTML Elements into a list

Within the ordered list, the unordered list, and the definitions list you can place other HTML Elements.

Try It: Place anything from a HTML Div to a HTML Image within the <li></li> start and end tags, of a HTML list.