HTML Lists

Saturday, February 18, 2012

Creating lists in HTML documents can be very useful for situations where you need to display a number of items that are related to a topic. The types that are generally used are ordered (<ol>), unordered (<ul>), and definition lists (<dl>). Menu (<menu>) and Directory (<dir>) lists were previously used, but have been since deprecated so you should not include these types in your HTML documents.

Ordered Lists

An ordered list can be numerical or alphabetical. Within the ordered list element, you use list item (<li>) elements to list each item in the ordered list. You use CSS to apply the appropriate styles to the ordered list. Here is an example.

<ol>
 <li>Item #1</li>
 <li>Item #2</li>
 <li>Item #3</li>
</ol>
  1. Item #1
  2. Item #2
  3. Item #3

Unordered Lists

An unordered list does not use numbers or letters to define the list items. Within the unordered list element, you use list item (<li>) elements to list each item in the unordered list. You use CSS to apply the appropriate styles to the unordered list. Here is an example.

<ul>
 <li>Item A</li>
 <li>Item B</li>
 <li>Item C</li>
</ul>
  • Item A
  • Item B
  • Item C

Definition Lists

A definition list is a list of items, with a description of each item. You use the <dl> element to define a definition list. You use the <dt> element to add items and you use the <dd> element to add a description to each item. Here is an example.

<dl>
 <dt>Item A</dt>
 <dd>- Red Item</dd>
 <dt>Item B</dt>
 <dd>- Blue Item</dd>
 <dt>Item C</dt>
 <dd>- Green Item</dd>
</dl>
Item A
- Red Item
Item B
- Blue Item
Item C
- Green Item

Did you find the page informational and useful? Share it using one of your favorite social sites.

Recommended Books & Training Resources

Creating Web Pages Simplified HTML CSS and JavaScript Editor HTML CSS: The Complete Reference