Menu
How to Code HTML Lists

A list is an arrangement of text about usually related items, and usually arranged vertically. The items may, or may not be arranged in a specific order. Each item in a list may be marked, or prefaced by a number, letter, or a graphic bullet or icon. Readers like lists because a list is more readable than a block of text and provides order in a more easily understandable way.

  1. bread
  2. milk
  3. eggs
  4. potatoes
  5. broccoli

In html, an entire list would be contained within the <ul> and </ul> tags. Each list item would be contained within <li> and </li> tags. Shown below is example code for a list.

<ul>
<li>bread</li>
<li>milk</li>
<li>eggs</li>
<li>potatoes</li>
<li>broccoli</li>
</ul>

If the order of the items in the list IS NOT important, use the <ul> and </ul> tags to create an unordered list. When you define an unordered list, the list items are automatically bulleted. Example code for an unordered list is shown above.

Ordered List

  1. bread
  2. milk
  3. eggs
  4. potatoes
  5. broccoli

If the order of the items in the list IS important, use the <ol> and </ol> tags to create an ordered list. When you define an ordered list, the list items are automatically numbered. Example code for an ordered list is shown below.

<ol>
<li>bread</li>
<li>milk</li>
<li>eggs</li>
<li>potatoes</li>
<li>broccoli</li>
</ol>

Nested Lists

  1. bread
  2. butter
    3. Vegetables:
    1. broccoli
    2. carrots
    3. potatoes
    4. onions
  3. eggs
  4. milk

You can nest a list within a list. Example code for an ordered list nested within an ordered list is shown below.

<ol>
<li>bread</li>
<li>butter</li>
Vegetables:
   <ol>
   <li>broccoli</li>
   <li>carrots</li>
   <li>potatoes</li>
   <li>onions</li>
   </ol>
<li>eggs</li>
<li>milk</li>
</ol>

Example code for an unordered list nested within an unordered list is shown below.

<ul>
<li>bread</li>
<li>butter</li>
Vegetables:
   <ul>
   <li>broccoli</li>
   <li>carrots</li>
   <li>potatoes</li>
   <li>onions</li>
   </ul>
<li>eggs</li>
<li>milk</li>
</ul>

Note that when you nest an unordered list within an unordered list, the type of bullet is used for each list is alternated.

And, of course, you can nest an ordered list within an unordered list or, an unordered list within an ordered list. Example code for an unordered list nested within an ordered list is shown below.

<ol>
<li>bread</li>
<li>butter</li>
Vegetables:
   <ul>
   <li>broccoli</li>
   <li>carrots</li>
   <li>potatoes</li>
   <li>onions</li>
   </ul>
<li>eggs</li>
<li>milk</li>
</ol>

Definition List

The definition list is defined by the <dl> </dl> tag pair. The definition list is used to display a list of terms and descriptions or definitions of each term. In a definition list, the terms are defined by <dt> </dt> tag pairs and the related definitions are defined by <dd> </dd> tag pairs. The definitions are automatically indented by the browser.

Term 1
Definition for term 1
Term 2
Definition for term 2
Term 3
Definition for term 3

Shown below is code for a definition list.

<dl>
<dt>Term 1</dt>
<dd>Definition for term 1</dd>
<dt>Term 2</dt>
<dd>Definition for term 2</dd>
<dt>Term 3</dt>
<dd>Definition for term 3</dd>
</dl>

A definition list can have multiple terms for a single definition. Shown below is a defintion list with multiple terms for a single definition.

Division
Part
Section
One of the portions into which something is divided
Amaze
Astonish
Astound
To surprise or affect with great wonder

Shown below is code for a definition list with multiple terms for a single definition.

<dl>
<dt>Division</dt>
<dt>Part</dt>
<dt>Section</dt>
<dd>One of the portions into which something
  is divided</dd>
<dt>amaze</dt>
<dt>astonish</dt>
<dt>astound</dt>
<dd>To surprise or affect with great wonder</dd>
</dl>

A definition list can have multiple definitions for a single term. Shown below is a definition list with multiple definitions for each term.

Center
To position in the middle
Political view between right and left
Equal distance from circumference
Even
Flat
Smooth
Uniform
<dl>
<dt>Center</dt>
<dd>To position in the middle</dd>
<dd>Political view between right and left</dd>
<dd>Equal distance from circumference</dd>
<dt>Even</dt>
<dd>Flat</dd>
<dd>Smooth</dd>
<dd>Uniform</dd>
</dl>

Shown above is code for a definition list with multiple definitions for each term.

There are many more ways you can define a list, for example you can define your own graphic to use for the bullet in an unordered list, or you can define your ordered list to use letters rather than numbers for the items in your list. Unfortunately, the attributes to do these things are not supported in HTML5, you'll need to use CSS.


Learn more at amazon.com

More HTML Code:
• When to Use the nofollow Attribute value
• How to Make a Table Scroll
• Changing the Size of an Image on Your Webpage
• The Font Tag
• Aligning an Image on Your Web Page
• HTML Definition List
• Using col and colgroup to Apply Attributes to a Table Column
• Providing Alternate and Title Text for an Image
• Radio Button Basics
• HTML dfn Tag