HTML list


HTML supports ordered, unordered and defined lists:

HTML list

Yes Sequence list

  1. First list item

  2. Second list item

  3. Third list items

Unordered list

  • List items

  • List items

  • List items


1.Unordered list
This example demonstrates an unordered list.

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head> 
<body>

<h4>无序列表:</h4>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

</body>
</html>

Run Instance»

Click the "Run Instance" button to view the online instance

2. Ordered list
This example demonstrates an ordered list.

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

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

<ol start="50">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
 
</body>
</html>

Run Instance»

Click the "Run Instance" button to view the online instance

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


HTML Unordered List

An unordered list is a list of items. The items in this column are bold Dots (typically small black circles) are marked.

Unordered list using <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 also a list of items, and the list items are marked with numbers. The ordered list starts 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 List

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

Custom lists start with a <dl> tag. Each custom list item begins with <dt>. The definition of each custom list item begins with <dd>.

<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


Notes- Helpful Tips

Tips: Paragraphs, line breaks, pictures, links, other lists, etc. can be used inside list items.

More examples

1. Different types of ordered lists
This example demonstrates different types of ordered lists.

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<h4>编号列表:</h4>
<ol>
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>  

<h4>大写字母列表:</h4>
<ol type="A">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>  

<h4>小写字母列表:</h4>
<ol type="a">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>  

<h4>罗马数字列表:</h4>
<ol type="I">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>  

<h4>小写罗马数字列表:</h4>
<ol type="i">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>  

</body>
</html>

Run Instance»

Click the "Run Instance" button to view the online instance

2. Different types of unordered lists
This example demonstrates different types of unordered lists.

Example

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<p><b>注意:</b> 在 HTML 4中 ul 属性已废弃,HTML5 已不支持该属性,因此我们使用 CSS 代替来定义不同类型的无序列表如下:</p>

<h4>圆点列表:</h4>
<ul style="list-style-type:disc">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ul>  

<h4>圆圈列表:</h4>
<ul style="list-style-type:circle">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ul>  

<h4>正方形列表:</h4>
<ul style="list-style-type:square">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ul>

</body>
</html>

Run instance »

Click the "Run instance" button to view the online instance

3. Nested list
This example demonstrates how to nest a list.

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<h4>嵌套列表:</h4>
<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

</body>
</html>

Run Instance»

Click the "Run Instance" button to view the online instance

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

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<h4>嵌套列表:</h4>
<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea
        <ul>
          <li>China</li>
          <li>Africa</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

</body>
</html>

Run Instance»

Click the "Run Instance" button to view the online instance

5. Customized list
This example demonstrates a definition list.

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<h4>一个自定义列表:</h4>
<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>

</body>
</html>

Run Instance»

Click the "Run Instance" button to view the online instance


HTML List Tag

tryitimg.gif##Online example

##TagDescription##<ol> ;##<ul><li><dl>##<dt><dd>
Define ordered list
Define unordered list
Define list items
Definition definition list
Custom list item
Define the description of the custom list item