HTML List Basics

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. A list can be used for indenting and formatting your webpage text.

Today many designers are applying CSS (Cascading Style Sheets) rules and dhtml (Dynamic html) to their lists to make them more fancy and turn them into expanding menus, but there's nothing wrong with a good old-fashioned basic html list. And, in any case, if you want to get fancy with your lists, it's best to learn the basics first.

There are three kinds of lists:

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