11 Lists

Contents

  1. Unordered (UL) and ordered (OL) lists
    1. Lists formatted by visual user agents
  2. Definition lists: the DL, DT, and DD elements
  3. The DIR and MENU elements
HTML offers authors several mechanisms for specifying lists of information. All lists must contain one or more list elements. Lists may contain:

The previous list, for example, is an unordered list, created using the UL element.

An ordered list, created using the OL element, should contain information where order should be emphasized, as in a recipe:

  1. Mix dry ingredients thoroughly.
  2. Pour in wet ingredients.
  3. Mix for 10 minutes.
  4. Bake for one hour at 300 degrees.

Definition lists, created using the DL element, generally consist of a series of term/definition pairs (although definition lists may have other applications). Thus, when advertising a product, one might use a definition list:

Lower cost
The new version of this product costs significantly less than the previous one!
Easier to use
We've changed the product so that it's much easier to use!
Safe for kids
You can leave your kids alone in a room with this product and they won't get hurt (not a guarantee).

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) and an ordered list (the procedure):

The ingredients:
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.

The exact presentation of the three list types depends on the user agent. We discourage authors from using lists purely as a means of indenting text. This is a stylistic issue and is properly handled by style sheets.

11.1 Unordered (UL) and ordered (OL) lists

<!ENTITY % ULStyle "(disc|square|circle)">

<!ELEMENT UL - -  (LI)+ -- unordered list -->
<!ATTLIST UL
  %attrs;                          -- %coreattrs, %i18n, %events --
  type        %ULStyle;  #IMPLIED  -- bullet style --
  compact     (compact)  #IMPLIED  -- reduced interitem spacing --
  >
<!ENTITY % OLStyle "CDATA"      -- constrained to: [1|a|A|i|I] -->

<!ELEMENT OL - -  (LI)+ -- ordered list -->
<!ATTLIST OL
  %attrs;                          -- %coreattrs, %i18n, %events --
  type        %OLStyle;  #IMPLIED  -- numbering style --
  compact     (compact)  #IMPLIED  -- reduced interitem spacing --
  start       NUMBER     #IMPLIED  -- starting sequence number --
  >

Start tag: required, End tag: required

<!-- The type attribute can be used to change the bullet style
     in unordered lists and the numbering style in ordered lists -->

<!ENTITY % LIStyle "CDATA" -- constrained to: "(%ULStyle;|%OLStyle;)" -->

<!ELEMENT LI - O (%block;)+ -- list item -->
<!ATTLIST LI
  %attrs;                          -- %coreattrs, %i18n, %events --
  type        %LIStyle;  #IMPLIED  -- list item style --
  value       NUMBER     #IMPLIED  -- reset sequence number --
  >

Start tag: required, End tag: optional

Attribute definitions

type = style-information
Deprecated.This attribute sets the style of a list item. Currently available values are intended for visual user agents. Possible values are described below.
start = integer
For OL only. This attribute specifies the starting number of the first item in an ordered list. The default starting number is one.
value = integer
For LI only. This attribute sets the current number of a list element in an ordered list to a new integer value.
compact
Deprecated. When set, this boolean attribute gives a hint to visual user agents to render the list in a more compact way. The interpretation of this attribute depends on the user agent.

Attributes defined elsewhere

Ordered and unordered lists are identical except that visual user agents number ordered list items. User agents may present those numbers in a variety of ways. Unordered list items are not numbered.

Both types of lists are made up of sequences of list items defined by the LI element (whose end tag may be omitted).

This example illustrates the basic structure of a list.

<UL>
   <LI> ... first list item...
   <LI> ... second list item...
   ...
</UL>

Lists may also be nested:

<UL>
     <LI> ... Level one, number one...
     <OL> 
        <LI> ... Level two, number one...
        <LI> ... Level two, number two...
        <OL start="10"> 
           <LI> ... Level three, number one...
        </OL> 
        <LI> ... Level two, number three...
     </OL> 
     <LI> ... Level one, number two...
</UL>

Details about number order. In ordered lists, it is not possible to continue list numbering automatically from a previous list or to hide numbering of some list items. However, authors can reset the number of a list item by setting its value attribute. Numbering continues from the new value for subsequent list items. For example:

<ol>
<li value="30"> makes this list item number 30.
<li value="40"> makes this list item number 40.
<li> makes this list item number 41.
</ol>

11.1.1 Lists formatted by visual user agents

The following description refers to the behavior of some current visual user agents when formatting lists. Style sheets allow better control of list formatting (e.g., for numbering, language-dependent conventions, indenting, etc.).

Visual browsers usually present nested lists indented with respect to the current level of indentation.

For both OL and UL, the type attribute specifies rendering options for visual user agents.

For the UL element, possible values for the type attribute are disc, square, and circle. The default value depends on the level of nesting of the current list.

How each value is presented depends on the user agent. User agents should attempt to present a "disc" as a small filled-in circle, a "circle" as a small circle outline, and a "square" as a small square outline.

Your user agent displays them as follows (the bullet glyph in the line may or may not vary):

For the OL element, possible values for the type attribute are summarized in the table below:

TypeNumbering style
1arabic numbers1, 2, 3, ...
alower alphaa, b, c, ...
Aupper alphaA, B, C, ...
ilower romani, ii, iii, ...
Iupper romanI, 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 lower case 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>
OL.withroman { list-stle-type: lower-roman }
</STYLE>
<BODY>
<OL class="withroman">
<LI> Step one ...  
<LI> Step two ...
</OL>
</BODY>

11.2 Definition lists: the DL, DT, and DD elements

<!-- definition lists - DT for term, DD for its definition -->

<!ELEMENT DL - -  (DT|DD)+ -- definition list -->
<!ATTLIST DL
  %attrs;                          -- %coreattrs, %i18n, %events --
  compact     (compact)  #IMPLIED  -- reduced interitem spacing --
  >

Start tag: required, End tag: required

<!ELEMENT DT - O  (%inline;)* -- definition term -->
<!ELEMENT DD - O  (%block;)+ -- definition description -->
<!ATTLIST (DT|DD)
  %attrs;                         -- %coreattrs, %i18n, %events --
  >

Start tag: required, End tag: optional

Attributes defined elsewhere

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 marked up text (i.e., no block-level elements). The description is given with a DD element and may contain block-level content. Another use for DL is for dialogues, with each DT naming a speaker, and each DD containing his or her words.

Here is an example with multiple descriptions per term.

<DL>
  <DT>cool
  <DD class="formal">a fairly low temperature, fairly cold.
  <DD class="slang">marvelous
  ...
</DL>

Here is another example:

  
<DL>
  <DT>Dweeb
  <DD>young excitable person who may mature
    into a <EM>Nerd</EM> or <EM>Geek</EM>

  <DT>Cracker
  <DD>hacker on the Internet

  <DT>Nerd
  <DD>male so into the Net that he forgets
    his wife's birthday
</DL>
The rendering of a definition list depends on the user agent. Your user agent renders this example as follows:
Dweeb
young excitable person who may mature into a Nerd or Geek
Cracker
hacker on the Internet
Nerd
male so into the Net that he forgets his wife's birthday

11.3 The DIR and MENU elements

DIR and MENU are deprecated

<!ELEMENT (DIR|MENU) - -  (LI)+ -(%blocklevel;) -- directory list, menu list -->
<!ATTLIST DIR
  %attrs;                          -- %coreattrs, %i18n, %events --
  compact     (compact)  #IMPLIED
  >
<!ATTLIST MENU
  %attrs;                          -- %coreattrs, %i18n, %events --
  compact     (compact)  #IMPLIED
  >

Start tag: required, End tag: required

Attributes defined elsewhere

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.

We strongly recommend using UL instead of these elements.