How to Code HTML Lists by Stephen Bucaro

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>

• bread
• milk
• eggs
• potatoes
• broccoli

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
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>

• bread
• butter
Vegetables:
• broccoli
• carrots
• potatoes
• onions
• eggs
• milk

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:
• HTML Bulleted or Unordered List
• Use fieldset to Organize Form Elements
• HTML Definition List
• HTML Frames Basics
• HTML Editors
• Text Features
• HTML center Tag
• Checkbox Basics
• How to Code HTML Lists
• HTML List Basics