HTML Lists

 

HTML List Tags

Tag	Description
<ul>	Defines an unordered list
<ol>	Defines an ordered list
<li>	Defines a list item
<dl>	Defines a description list
<dt>	Defines a term in a description list
<dd>	Describes the term in a description list

Unordered List (ul)

In the above example, I've created an HTML list and added our fruit to it.

The list is specified using the <ul> tag and each list item is nested inside using the <li> tag.

<ul>
    <li>Bananas</li>
    <li>Oranges</li>
</ul>
    

The <ul> element represents an unordered list. This is because the items are listed in no particular order. This results in identical bullet points being prefixed to each item in the list.

• Bananas
• Oranges

Ordered List (ol)

If we wanted to list the items in a particular order, we would use an ordered list. To do this we would simply swap the <ul> tag for a <ol> tag.

<ol>
    <li>Bananas</li>
    <li>Oranges</li>
</ol>
    

An HTML list also helps the browser understand that it is a list too. That way it can present the list in a particular way (e.g., with bullet points or numbers, etc).

1. Bananas
2. Oranges

Definition List (dl)

HTML also includes other methods for lists, such as providing a list of items in a drop-down menu on a form, but we'll get to that later.

The <dl> element represents a definition list. In a definition list, each list item contains two or more entries: a term and at least one description.

<dl>
    <dt>Bananas</dt>
    <dd>A sweet yellow fruit...</dd>
    <dt>Oranges</dt>
    <dd>A sweet orange fruit...</dd>
</dl>
    

Bananas

A sweet yellow fruit...

Oranges

A sweet orange fruit...