HTML Lists

A form of container that loads text or graphics is called a list; the most distinctive feature of the list is its neatness, orderliness, and organization.

HTML supports ordered, unordered, and custom lists:

HTML Lists

Online Examples

Unordered List
This example demonstrates an unordered list.

Ordered List
This example demonstrates an ordered list.

HTML Unordered List

An unordered list is a list of items, and these items are marked with bold dots (typically small black circles).

Unordered lists use the <ul> tag

<ul>
<li>List Item1</li>
<li>List Item2</li>
</ul>

The browser displays as follows:

• List Item1

• List Item2

HTML Ordered List

Similarly, ordered lists are also a list of items, with list items marked with numbers. Ordered lists start with the <ol> tag. Each list item starts with the <li> tag.

List items are marked with numbers.

<ol>
<li>List Item1</li>
<li>List Item2</li>
</ol>

It is displayed as follows in the browser:

1. List Item1

2. List Item2

HTML Custom 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 <dt>. Each definition of a custom list item starts with <dd>.

<dl>
<dt>Spring</dt>
<dd>-　The leaves turn yellow in autumn, and autumn is the season of harvest</dd>
<dt>Autumn</dt>
<dd>-　The leaves turn yellow in autumn, and autumn is the season of harvest</dd>
</dl>

The browser displays as follows:

• Spring

• - Spring is here, and spring is full of spring everywhere.

• Autumn

• - The leaves turn yellow in autumn, and autumn is the season of harvest.

Precautions - Useful Tips

Tip: List items can contain paragraphs, line breaks, images, links, and other lists, etc.

More Examples

Different Types of Ordered Lists
This example demonstrates different types of ordered lists.

Different Types of Unordered Lists
This example demonstrates different types of unordered lists.

Nested Lists
This example demonstrates how to nest lists.

Nested Lists 2
This example demonstrates more complex nested lists.

Custom List
This example demonstrates a definition list.

HTML List Tags