HTML Lists

This web page contains examples of HTML lists.

Types of Lists

• <DL> - Definition List
  • DL - Definition List
  • DT - Definition Term
  • DD - Definition Description
• <UL> - UnOrdered List
  • UL - Grouping of Unordered Lists.
  • LI - List item.
• <OL> - Ordered List
  • OL - Ordered List
  • LI - List item.
• <LI> - List item.

Definition List

dt-Term #1

dd-Description #1

dt-Term #2

dd-Description #1

dd-Description #2

dd-Description #3

<dl>
  <dt>dt-Term #1
    <dd>dd-Description #1</dd>
  <dt>dt-Term #2
    <dd>dd-Description #1</dd>
    <dd>dd-Description #2</dd>
    <dd>dd-Description #3</dd>
</dl>

Unordered List

• li-List #1
• li-List #2
• li-List #3
  • Sub List #1
    • Sub List #A
    • Sub List #B

HTML Code:

<ul>
  <li>li-List #1</li>
  <li>li-List #2</li>
  <li>li-List #3
    <ul>
      <li>Sub List #1
        <ul>
          <li>Sub List #A</li>
          <li>Sub List #B</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Ordered List

1. List
2. List
3. List
   1. Sub List
      1. Sub List #1
      2. Sub List #2

HTML Code:

<ol>
   <li>List</li>
   <li>List</li>
   <li>List
      <ol>
         <li>Sub List
         <ol>
            <li>Sub List #1</li>
            <li>Sub List #2</li>
         </ol>
         </li>
      </ol>
   </li>
</ol>

Mixture (Ordered & Unordered)

1. List #1
2. List #2
3. List #3
   • Sub List #1
     1. Sub List #A
     2. Sub List #B

HTML Code:

<ol>
  <li>List #1</li>
  <li>List #2</li>
  <li>List #3
    <ul>
      <li>Sub List #1
        <ol>
          <li>Sub List #A</li>
          <li>Sub List #B</li>
        </ol>
      </li>
    </ul>
  </li>
</ol>

List Item (outside of other elements - non-indented bullet.)

• List item #1
• List item #2
• List item #3

HTML Code:

<li>List item #1</li>
<li>List item #2</li>
<li>List item #3</li>