Latest web development tutorials

HTML List

HTML supports ordered, unordered and definition list:

HTML List

有序列表

  1. 第一个列表项
  2. 第二个列表项
  3. 第三个列表项

无序列表

  • 列表项
  • 列表项
  • 列表项

Examples

Online examples

Unordered list
This example demonstrates an unordered list.

Ordered List
This example demonstrates an ordered list.

(You can find more examples at the bottom of this page.)


HTML unordered list

Unordered list is a list of items, the list of items in bold dots (typically small black circles) are marked.

Unordered list using the <ul> tag

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

The browser displays the following:

  • Coffee
  • Milk

HTML Ordered List

Similarly, an ordered list is a project, a list of projects using digital labeled. An ordered list starts with <ol> tag. Each list item starts with <li> tag.

List items using item numbers to mark.

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

The browser displays the following:

  1. Coffee
  2. Milk

HTML Custom List

Custom list is not just a project, but a combination of project and its comments.

Custom list starts with <dl> tag. Each custom list item to <dt> begins. Each custom-defined list items to <dd> begins.

<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: You can use the list items inside paragraphs, line breaks, images, links, and other lists, etc.


Examples

More examples

An ordered list of different types of
This example demonstrates an ordered list of different types.

Different types of unordered list
Unordered list This example demonstrates different types.

Nested list
This example demonstrates how nested list.

Nested list 2
This example demonstrates a more complicated nested list.

Custom list
This example demonstrates a definition list.


HTML tags list

标签 描述
<ol> 定义有序列表
<ul> 定义无序列表
<li> 定义列表项
<dl> 定义定义列表
<dt> 自定义列表项目
<dd> 定义自定列表项的描述