1. Technology

Lists

Ordered Lists, Unordered Lists, and Definition Lists

By

Grocery List

Grocery List

Image courtesy James Braund / Digital Vision / Getty Images

There are three types of lists in HTML:

  • Ordered Lists
    These are sometimes called numbered lists, and list items that have a specific numerical order or ranking.
  • Unordered Lists
    These are sometimes called bulleted lists, because they have small bullet icons in front of the list items. They are for lists that don't have a required order.
  • Definition Lists
    These are lists of items that have two parts, a term to be defined and the definition.

Ordered Lists

Use the <ol> tag (the ending </ol> tag is required), to create a numbered list with numbers starting at 1. The elements are created with the <li> tag (the ending </li> tag is not required in HTML, but required in XHTML). For example:

<ol>
  <li>Entry 1</li>
  <li>Entry 2</li>
  <li>Entry 3</li>
</ol>

Use ordered lists anywhere you want to show a specific order for the list items to be followed, or to rank items sequentially. These lists are most often found in instructions and recipes.

Unordered Lists

Use the <ul> tag (the ending </ul> tag is required) to create a list with bullets instead of numbers. Just like with the ordered list, the elements are created with the <li> tag. For example:

<ul>
  <li>Entry 1</li>
  <li>Entry 2</li>
  <li>Entry 3</li>
</ul>

Use unordered lists for any list that doesn't have to be in a specific order. This is the most common type of list found on a web page.

Definition Lists

Definition lists create a list with two parts to each entry: the name or term to be defined and the definition. This creates lists similar to a dictionary or glossary. There are three tags associated with the definition list:

  • <dl> to define the list
  • <dt> to define the definition term
  • <dd> to define the definition of the term

HTML does not require the closing tag for the <dt> or the <dd>, but it's a good idea to use them so other parts of your design aren't confused. And the ending tags are required in XHTML.

Here is how a definition list looks:

<dl>
  <dt>This is a definition term</dt>
  <dd>And this is the definition</dd>
  <dt>term 2</dt>
  <dd>definition 2</dd>
  <dt>term 3</dt>
  <dd>definition 3</dd>
</dl>

Use definition lists anywhere you have a list that has two parts to each item. The most common use is with a glossary of terms, but you can also use it for an address book (name is the term and the address is the definition), or an HTML form (field name is the term, input box is the definition), or for any list of name/value pairs.

Most Recent Articles

Related Video
Create Bullet, Number, and Definition Lists in HTML

©2014 About.com. All rights reserved.