1.17 HTML Lists

The most common HTML lists are ordered and unordered lists:

HTML Lists

An ordered list: The first list item The second list item The third list item

An unordered list: List item List item List item

HTML Unordered Lists

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
The list items are marked with bullets (typically small black circles).
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

How the HTML code above looks in a browser:
Coffee
Milk

HTML Ordered Lists

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

The list items are marked with numbers.

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

How the HTML code above looks in a browser:

1. Coffee
2. Milk

HTML Description Lists

A description list is a list of terms/names, with a description of each term/name.
The <dl> tag defines a description list.
The <dl> tag is used in conjunction with <dt> (defines terms/names) and <dd> (describes each term/name):<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

How the HTML code above looks in a browser:

Coffee

- black hot drink

Milk

- white cold drink

Tip: Inside a list item you can put text, line breaks, images, links, other lists, etc.

HTML List Tags

TagDescription:

<ol>                         Defines an ordered list
<ul>                         Defines an unordered list
<li>                          Defines a list item
<dl>                         Defines a description list
<dt>                         Defines a term/name in a description list
<dd>                        Defines a description of a term/name in a description list