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:
<ul>
<li>First item in list</li>
<li>Second item in list</li>
...
<li>Last item in list</li>
</ul>
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).
<ol>
<li>First item in list</li>
<li>Second item in list</li>
...
<li>Last item in list</li>
</ol>
Resulting in:
- First item in list
- Second item in list
- 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:
<dl>
<dt>Jupiter</dt>
<dd>A large planet</dd>
<dt>Mars</dt>
<dd>Mmmm! Chocolate</dd>
<dt>Pluto</dt>
<dd>A cartoon dog</dd>
</dl>
results in the following:
- Jupiter
- A large planet
- Mars
- Mmmm! Chocolate
- Pluto
- A cartoon dog