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.

RSS Feed

 General Web Design
 HTML Design
 Graphics Design
 CSS Quick Reference
 Easy Cascading Style Sheets
 Java Script Quick Reference
 Easy Java Script Code
 Web Design Tools
 Coding Issues
 FREE Graphics Warehouse