Ví dụ về các tag list

<dl> - <dt> - <dd>

Tag <dl> xác định danh sách (có đề mục và mô tả đề mục).

<dl>
<dt>Trái nho:</dt>
<dd>Thường màu đỏ hoặc xanh, có vị chua, ngọt.</dd>
<dt>Trái chuối:</dt>
<dd>Thường màu vàng, có vị ngọt.</dd>
</dl>

Trái nho:
Thường màu đỏ hoặc xanh, có vị chua, ngọt.
Trái chuối:
Thường màu vàng, có vị ngọt.

<dl>
<dt>Ngày 01/04/2011</dt>
<dd>Ngày quốc tế nối dối.</dd>
<dt>Ngày 01/05/2011</dt>
<dd>Ngày quốc tế lao động.</dd>
<dt>Ngày 01/06/2011</dt>
<dd>Ngày quốc tế thiếu nhi.</dd>
</dl>

Ngày 01/04/2011
Ngày quốc tế nối dối.
Ngày 01/05/2011
Ngày quốc tế lao động.
Ngày 01/06/2011
Ngày quốc tế thiếu nhi.

<ol> - <li>

Tag <ol> sử dụng để tạo danh sách có thứ tự.

Danh sách dạng số

<ol>
<li>Danh sách 1</li>
<li>Danh sách 2</li>
</ol>

  1. Danh sách 1
  2. Danh sách 2

Danh sách dạng số bắt đầu bằng số bất kỳ, star="số" - HTML5

<ol start="4">
<li>Danh sách 1</li>
<li>Danh sách 2</li>
</ol>

  1. Danh sách 1
  2. Danh sách 2

Danh sách dạng chữ thường, type="a"

<ol type="a">
<li>Danh sách 1</li>
<li>Danh sách 2</li>
</ol>

  1. Danh sách 1
  2. Danh sách 2

Danh sách dạng chữ in hoa, type="A"

<ol type="A">
<li>Danh sách 1</li>
<li>Danh sách 2</li>
</ol>

  1. Danh sách 1
  2. Danh sách 2

Danh sách dạng chữ số La Mã thường, type="i"

<ol type="i">
<li>Danh sách 1</li>
<li>Danh sách 2</li>
</ol>

  1. Danh sách 1
  2. Danh sách 2

Danh sách dạng chữ số La Mã in hoa, type="I"

<ol type="I">
<li>Danh sách 1</li>
<li>Danh sách 2</li>
</ol>

  1. Danh sách 1
  2. Danh sách 2

Dạng kết hợp 2 danh sách lồng nhau

<ol>
   <li>Danh sách 1</li>
   <li>Danh sách 2
      <ol>
         <li>Danh sách con 1</li>
         <li>Danh sách con 2</li>
      </ol>
   </li>
   <li>Danh sách 3</li>
</ol>
  1. Danh sách 1
  2. Danh sách 2
    1. Danh sách con 1
    2. Danh sách con 2
  3. Danh sách 3

Dạng kết hợp 3 danh sách lồng nhau

<ol type="I">
   <li>Danh sách 1</li>
   <li>Danh sách 2
      <ol>
         <li>Danh sách con 1</li>
         <li>Danh sách con 2
            <ol type="a">
               <li>Danh sách con nhỏ 1</li>
               <li>Danh sách con nhỏ 2</li>
            </ol>
         </li>
         <li>Danh sách con 3</li>
      </ol>
   </li>
   <li>Danh sách 3</li>
</ol>
  1. Danh sách 1
  2. Danh sách 2
    1. Danh sách con 1
    2. Danh sách con 2
      1. Danh sách con nhỏ 1
      2. Danh sách con nhỏ 2
    3. Danh sách con 3
  3. Danh sách 3

<ul> - <li>

Tag <ul> sử dụng để tạo danh sách không có thứ tự.

Hình dạng mặt định - chấm tròn

<ul>
<li>Danh sách 1</li>
<li>Danh sách 2</li>
</ul>

  • Danh sách 1
  • Danh sách 2

Hình dạng chấm tròn, type="disc"

<ul type="disc">
<li>Danh sách 1</li>
<li>Danh sách 2</li>
</ul>

  • Danh sách 1
  • Danh sách 2

Hình dạng vòng tròn, type="circle"

<ul type="circle">
<li>Danh sách 1</li>
<li>Danh sách 2</li>
</ul>

  • Danh sách 1
  • Danh sách 2

Hình dạng hình vuông, type="square"

<ul type="square">
<li>Danh sách 1</li>
<li>Danh sách 2</li>
</ul>

  • Danh sách 1
  • Danh sách 2

Dạng kết hợp 2 danh sách lồng nhau

<ul>
   <li>Danh sách 1</li>
   <li>Danh sách 2
      <ul>
         <li>Danh sách con 1</li>
         <li>Danh sách con 2</li>
      </ul>
   </li>
   <li>Danh sách 3</li>
</ul>
  • Danh sách 1
  • Danh sách 2
    • Danh sách con 1
    • Danh sách con 2
  • Danh sách 3

Dạng kết hợp 3 danh sách lồng nhau

<ul>
   <li>Danh sách 1</li>
   <li>Danh sách 2
      <ul>
         <li>Danh sách con 1</li>
         <li>Danh sách con 2
            <ul>
               <li>Danh sách con nhỏ 1</li>
               <li>Danh sách con nhỏ 2</li>
            </ul>
         </li>
         <li>Danh sách con 3</li>
      </ul>
   </li>
   <li>Danh sách 3</li>
</ul>
  • Danh sách 1
  • Danh sách 2
    • Danh sách con 1
    • Danh sách con 2
      • Danh sách con nhỏ 1
      • Danh sách con nhỏ 2
    • Danh sách con 3
  • Danh sách 3