Collected by
Elizabeth Janson
Home Page

Lists UL, OL and DL

 

Unordered lists (UL), ordered lists (OL), and definitions (DL)

HTML offers authors several mechanisms for specifying lists of information. All lists must contain one or more list elements. Lists may contain:
  • Unordered information. UL and LI
  • Ordered information. OL and LI
  • Definitions. DL with DT and DD 
<UL>
<LI>Unordered information. UL and LI
<LI>Ordered information. OL and LI
<LI>Definitions. DL with DT and DD
</UL>

This list, for example, is an unordered list, created with the UL element.
See Page 2 for a discussion on changing the bullets and colours, and Page 3 deals with spacing around the list

Both UL and OL types of lists are made up of sequences of list items defined by the LI element (whose end tag may be omitted). The DIR element was designed to be used for creating multicolumn directory lists. The MENU element was designed to be used for single column menu lists. Both elements have the same structure as UL, just different rendering. In practice, a user agent will render a DIR or MENU list exactly as a UL list.

All list properties are inherited, and thus if applied to OL will inherit to list items inside that OL.
The initial value for list-style-type is disc. Other values are circle, square and various numbering styles (decimal, upper or lower roman, alpha, an url(name.gif) and none. For example OL {list-style-type: lower-alpha}
'list-style-position' can be inside or outside (initial value). For example, OL {list-style-position: inside}.
List-style is shorthand for one or more of the above. For example, LI {list-style: outside lower-alpha}

Ordered Lists

An ordered list, created using the OL element, should contain information where order should be emphasized, as in a recipe. Possible values for the LI type attribute are summarized in the table below (they are case-sensitive):

Type Numbering style
1 arabic numbers 1, 2, 3, ...
a lower alpha a, b, c, ...
A upper alpha A, B, C, ...
i lower roman i, ii, iii, ...
I upper roman I, II, III, ...

Note that the type attribute is deprecated and list styles should be handled through style sheets.

For example, using CSS, one may specify that the style of numbers for list elements in a numbered list should be lowercase roman numerals. In the excerpt below, every OL element belonging to the class "withroman" will have roman numerals in front of its list items.

<STYLE type="text/css">
OL.withroman { list-style-type: lower-roman }
</STYLE>
<BODY>
<OL class="withroman">
<LI> Step one ...  
<LI> Step two ...
</OL>
  1. Step one ...
  2. Step two ...

Definition lists: the DL, DT, and DD elements

Definition lists vary only slightly from other types of lists in that list items consist of two parts: a term and a description. The term is given by the DT element and is restricted to inline content. The description is given with a DD element that contains block-level content.

Lists may also be nested and different list types may be used together, as in the following example, which is a definition list that contains an unordered list (the ingredients), an ordered list (the procedure) and ends with a definition:

The ingredients:
  • 100 g. flour
  • 10 g. sugar
  • 1 cup water
  • 2 eggs
  • salt, pepper
The procedure:
  1. Mix dry ingredients thoroughly.
  2. Pour in wet ingredients.
  3. Mix for 10 minutes.
  4. Bake for one hour at 300 degrees.
Notes:
The recipe may be improved by adding raisins.

This is the code used.

<dl>
<dt><strong>The ingredients:</strong></dt>
<dd>
<ul>
<li>100 g. flour</li>
<li>10 g. sugar</li>
<li>1 cup water</li>
<li>2 eggs</li>
<li>salt, pepper</li>
</ul>
</dd>
<dt><strong>The procedure:</strong></dt>
<dd>
<ol>
<li>Mix dry ingredients thoroughly.
<li>Pour in wet ingredients.
<li>Mix for 10 minutes.
<li>Bake for one hour at 300 degrees.
</ol>
</dd>
<dt><strong>Notes:</strong></dt>
<dd>The recipe may be improved by adding raisins.</dd>
</dl>

See Page 2 for changing the bullets and colours, and Page 3 for spacing around the list
Lists is continued with a discussion on counter, and definition list styles.

Email
CSS begins here
Back to column positioning or on to counters.

This page is part of Elizabeth Janson's web site

http://www.oocities.org/elizatk/index.html

My other sites are the Anglican Parish of Northern Mallee,
Tetbury residents in the Eighteenth Century
my Australian Family History and Barrie, our Family Poet.