Web Page Design Boot Camp

  Home |  Basics |  Intermediate |  Advanced |  Tools |  Site Map    Subtopics:

Lists

HTML supports three kinds of lists: ordered, unordered, and definition lists. Differents delimiting tags are used depending on the kind of list. Individual items in the list are denoted by using the <li> tag. Here is a an example of an numbered or ordered list.

This HTML... Produces this... 
<ol>
  <li>George Washington
  <li>John Adams
  <li>Thomas Jefferson
  <li>James Madison
</ol>
  1. George Washington
  2. John Adams
  3. Thomas Jefferson
  4. James Madison

The only difference between ordered and unordered lists are the tags used to mark the beginning and end of the list.

This HTML... Produces this... 
<ul>
  <li>George Washington
  <li>John Adams
  <li>Thomas Jefferson
  <li>James Madison
</ul>
  • George Washington
  • John Adams
  • Thomas Jefferson
  • James Madison

A definition list displays a list of terms and their definitions. Terms are enclosed by <dt> and <dt> tags. Definitions are enclosed by <dd><dd> tags.

This HTML... Produces this... 
<dl>
  <dt>Congress</dt>
  <dd>That grand benevolent asylum 
  for the helpless. (Mark Twain)</dd>
  <dt>Politics</dt>
  <dd>From the Latin words for "many"
  and "bloodsuckers" (Jay Leno)</dd>
</dl>
Congress
That grand benevolent asylum for the helpless. (Mark Twain)
Politics
From the Latin words for "many" and "bloodsuckers" (Jay Leno)

You can also nest a list within a list. The list items are indented to make the HTML more readable.

This HTML... Produces this... 
<ul>
   <li>Fruits
   <ol>
      <li>Apples
      <li>Bananas
   </ol>
   <li>Vegetables
   <ol>
      <li>Carrots
      <li>Green beans
   </ol>
</ul>
  • Fruits
    1. Apples
    2. Bananas
  • Vegetables
    1. Carrots
    2. Green beans