Representing lists

Within a document you may want to structure information for specific purposes. For example you may need a list of items (numbered or otherwise) or a table of figures, with table, row and column headers and/or footers.

The important point to note is that when you use a list element it is because the data on your web page really is a list. Likewise, if you use a table make sure it is to represent tabular data, not to layout a collection of text on the web page.

The rule is: Only use XHTML to code the structure of your data. We leave the presentation until later when we style the page using CSS.

There are several list types in XHTML, but the most common are numbered lists and bulleted lists.

Bulleted List

The syntax for a bulleted list (ul = unnumbered list) is:

  <li>First item in list</li>
  <li>Second item in list</li>
  <li>Last item in list</li>

Resulting in:

  • First item in list
  • Second item in list
  • Last item in list

Typical uses of a <ul> element will be: displaying a list of  action points or a list of links to other pages, as in a navigation menu.

Note: A <li> element can contain most other structuring xhtml tags, including lists, tables and forms.

Numbered list

The syntax for a numbered list is identical except that the element name is <ol> (ordered list).

  <li>First item in list</li>
  <li>Second item in list</li>
  <li>Last item in list</li>

Resulting in:

  1. First item in list
  2. Second item in list
  3. Last item in list

Definition list

A definition list is used to rep[resent a list of matching terms and definitions. The syntax is more complicated that the previous two list types. The enclosing elements is <dl>, and each list entry is made up of a pair of elements (term and definition) <dt> and <dd>.

For example:

  <dd>A large planet</dd>
  <dd>Mmmm! Chocolate</dd>
  <dd>A cartoon dog</dd>

results in the following:

A large planet
Mmmm! Chocolate
A cartoon dog
Valid XHTML 1.0! | Valid CSS! | WCAG Approved AA
Page design by: John P Scott - Hosting with: Netcetera