HTML Lists

HTML supports ordered, unordered, and definition lists:

HTML List

Order list

1. The first list item
2. The second list item
3. The third list item

Unordered list

• List items
• List items
• List items

Online Instance

Unordered List
This example demonstrates an unordered list.

Order list
This example demonstrates an ordered list.

HTML unordered list

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

Unordered lists use the <ul> tag

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

The browser displays the following:

• Coffee
• Milk

HTML ordered lists

Similarly, an ordered list is a list of items, with the items labeled with numbers. An ordered list begins with the <ol> tag. Each list item begins with a <li> tag.

List items are marked with numbers.

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

The browser displays the following:

1. Coffee
2. Milk

HTML custom lists

A custom list is not just a list of items, but a combination of items and their comments.

A custom list starts with the <dl> tag. Each custom list item starts with <dt>. The definition of each custom list item starts with <dd>.

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

The browser displays the following:

Coffee

– black hot drink

Milk

– white cold drink

Notes – Useful Tips

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

更多实例

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 List
This example demonstrates how to nest lists.

Nested List 2
This example demonstrates a more complex nested list.

Custom list
This example demonstrates a custom list.

HTML 列表标签