Nesting HTML Lists by Stephen Bucaro

One of the most common structures found on a webpage is a list. A list can be used to organize and clarify information. There are three kinds of lists; the ordered list, which in which every item is preceded by a number or letter, the unordered list which is commonly known as the bulleted list, and the definition list which has two parts for each item, the term and the definition.

The ordered list is defined by the <ol> </ol> tag pair. In an ordered list the list items are defined by <li> </li> tag pairs and the list items are automatically numbered by the browser.

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

1. List item 1
2. List item 2
3. List item 3

The unordered list is defined by the <ul> </ul> tag pair. In an unordered list the list items are also defined by <li> </li> tag pairs the list items are automatically bulleted by the browser.

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

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

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.

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

Term 1

Definition for term 1

Term 2

Definition for term 2

Term 3

Definition for term 3

Nesting Lists

Nesting a list means that a list item can be another list, as shown below.

<ul>
<li>List item 1
  <ul>
  <li>Nested list item 1</li>
  <li>Nested list item 2</li>
  <li>Nested list item 3</li>
  </ul>
</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>

• List item 1
  • Nested list item 1
  • Nested list item 2
  • Nested list item 3
• List item 2
• List item 3

Note that if you don't specifically define the type of bullet to use for the items in an unordered list, the browser will automatically pick a different kind of bullet for the nested list.

Of course you can use a nested list for every item in the list, and the nested lists don't have to be the same type as the list they are nested within. Shown below is an unordered list with four items, nested within an ordered list with two items, nested within an unordered list with three items.

• List item 1
• List item 2
  1. Nested list item 1
  • List item 1
  • List item 2
  • List item 3
  • List item 4
  2. Nested list item 2
• List item 3

<ul>
<li>List item 1</li>
<li>List item 2
  <ol>
  <li>Nested list item 1</li>
    <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
    <li>List item 4</li>
    </ul>
  <li>Nested list item 2</li>
  </ol>
</li>
<li>List item 3</li>
</ul>

Note hwo formatting was used to keep the nesting straight. If you were to use a WYSIWYG Web page design application it is unlikely that you could get or preserve this formatting.

As long as you keep your tags straight you can nest list within list, within list, and just keep on nesting.

Learn more at amazon.com

More HTML Code:
• Providing Alternate and Title Text for an Image
• When to Use the nofollow Attribute value
• HTML5 Input Type - Email
• Webpage DOCTYPE Declarations Explained
• Easy Code to Add Yahoo Site Search to Your Website
• HTML Special Characters - Character Entities
• Make an HTML Element Editable
• HTML Blockquote Basics
• Web Page Template
• HTML List Basics