HTML Lists

HTML supports ordered, unordered, and definition lists

Examples

Unordered list
This example demonstrates an unordered list.
Ordered list
This example demonstrates an ordered list.

(More examples can be found at the bottom of this page)

Unordered list

An unordered list is a list of items, marked by bold dots (typically small black circles).

An unordered list begins with the <ul> tag. Each list item starts with an <li>.

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

The browser displays as follows:

  • Coffee
  • Milk

You can use paragraphs, line breaks, images, links, and other lists within list items, etc.

Ordered list

Similarly, ordered lists are also a list of items, and list items are marked with numbers.

Ordered lists start with the <ol> tag. Each list item starts with the <li> tag.

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

The browser displays as follows:

  1. Coffee
  2. Milk

You can use paragraphs, line breaks, images, links, and other lists within list items, etc.

Definition List

Custom lists are not just a list of items, but a combination of items and their annotations.

Custom lists start with the <dl> tag. Each custom list item starts with the <dt> tag. Each definition of a custom list item starts with the <dd> tag.

<dl>
<dt>Coffee</dt>
<dd>Black Hot Drink</dd>
<dt>Milk</dt>
<dd>White Cold Drink</dd>
</dl>

The browser displays as follows:

Coffee
Black Hot Drink
Milk
White Cold Drink

You can use paragraphs, line breaks, images, links, and other lists within the list items of the definition list.

More Examples

Different Types of Unordered Lists
This example demonstrates an unordered list.
Different Types of Ordered Lists
This example demonstrates different types of ordered lists.
Nested List
This example demonstrates how to nest lists.
Nested List 2
This example demonstrates more complex nested lists.
Definition List
This example demonstrates a definition list.

List Tag

Tag Description
<ol> Define the ordered list.
<ul> Define the unordered list.
<li> Define the list item of definition list.
<dl> Define the definition list.
<dt> Define the definition item.
<dd> Define the description of definition.
<dir> Deprecated. Use <ul> instead.
<menu> Deprecated. Use <ul> instead.