lists

Indeks

po polsku

contents attributes index

10 Lists

Contents

ll

lUnordered lists (UL),
ordered lists (OL), and list items (LI)l

lDefinition lists: the
DL, DT, and DD
elements

ll

l

lThe DIR and
MENU elementsl

10.1 Introduction to lists

HTML offers authors several mechanisms for specifying lists of information. All
lists must contain one or more list elements. Lists may contain:

Unordered information.l

Ordered information.l

Definitions.l

The previous list, for example, is an unordered list, created with the UL
element:

<UL>
<LI>Unordered information.
<LI>Ordered information.
<LI>Definitions.
</UL>

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

lMix dry ingredients thoroughly.l

lPour in wet ingredients.l

lMix for 10 minutes.l

lBake for one hour at 300 degrees.l

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).

defined in HTML as:

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

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:

100 g. flourl

10 g. sugarl

1 cup waterl

2 eggsl

salt, pepperl

The procedure:

lMix dry ingredients thoroughly.l

lPour in wet ingredients.l

lMix for 10 minutes.l

lBake for one hour at 300 degrees.l

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.

10.2
Unordered lists (UL), ordered lists (OL), and list items (LI)

<!ELEMENT UL - - (LI)+ -- unordered list -->
<!ATTLIST UL
%attrs; -- %coreattrs, %i18n, %events --
>
<!ELEMENT OL - - (LI)+ -- ordered list -->
<!ATTLIST OL
%attrs; -- %coreattrs, %i18n, %events --
>

Start tag: required, End tag:
required

<!ELEMENT LI - O (%flow;)* -- list item -->
<!ATTLIST LI
%attrs; -- %coreattrs, %i18n, %events --
>

Start tag: required, End tag:
optional

Attribute definitions

type =
style-information

This
attribute sets the style of a list item. Currently available values are
intended for visual user agents. are
described below (along with case information).

start = number [CN]

For

only. This attribute specifies the starting number of the first item in an
ordered list. The default starting number is "1". Note that while the value of
this attribute is an integer, the corresponding label may be non-numeric. Thus,
when the list item style is uppercase latin letters (A, B, C, ...),
start=3 means "C". When the style is lowercase roman numerals,
start=3 means "iii", etc.

value = number [CN]

For

only. This attribute sets the number of the current list item. Note that while
the value of this attribute is an integer, the corresponding label may be
non-numeric (see the start attribute).

compact [CI]

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

id, class (document-wide identifiers)l

lang (language
information), dir (text
direction)l

title ()l

style (inline
style information)l

onclick, ondblclick,
onmousedown, onmouseup,
onmouseover, onmousemove,
onmouseout, onkeypress,
onkeydown, onkeyup (intrinsic events)l

Ordered and unordered lists are rendered in an identical manner 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:

DEPRECATED EXAMPLE:

<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>

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



<!ELEMENT DL - - (DT|DD)+ -- definition list -->
<!ATTLIST DL
%attrs; -- %coreattrs, %i18n, %events --
>

Start tag: required, End tag:
required

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

Start tag: required, End tag:
optional

Attributes defined elsewhere

id, class (document-wide identifiers)l

lang (language
information), dir (text
direction)l

title ()l

style (inline
style information)l

onclick, ondblclick,
onmousedown, onmouseup,
onmouseover, onmousemove,
onmouseout, onkeypress,
onkeydown, onkeyup (intrinsic events)l

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

element and is restricted to inline content. The description is given with a DD
element that contains block-level content.

Here is an example:

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

<DT>Hacker
<DD>a clever programmer

<DT>Nerd
<DD>technically bright but socially inept person

</DL>

Here is an example with multiple terms and descriptions:

<DL>
<DT>Center
<DT>Centre
<DD> A point equidistant from all points
on the surface of a sphere.
<DD> In some field sports, the player who
holds the middle position on the field, court,
or forward line.
</DL>

Another application of DL, for example, is for marking up dialogues, with
each
DT naming a speaker, and each DD containing his or her words.

10.3.1 Visual rendering of lists

Note. The following is an informative description of
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 user agents generally indent nested lists with respect to the current
level of nesting.

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. These values are case-insensitive.

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.

A graphical user agent might render this as:

for the
value "disc"

for
the value "circle"

for
the value "square"

For the
OL element, possible values for the 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>
</BODY>

The rendering of a definition list also depends on the user agent. The
example:

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

<DT>Hacker
<DD>a clever programmer

<DT>Nerd
<DD>technically bright but socially inept person
</DL>

might be rendered as follows:

Dweeb
young excitable person who may mature into a Nerd or Geek
Hacker
a clever programmer
Nerd
technically bright but socially inept person

10.4 The
DIR and MENU
elements

DIR and MENU are
deprecated.

See the for the
formal definition.

Attributes defined elsewhere

id, class (document-wide identifiers)l

lang (language
information), dir (text
direction)l

title ()l

style (inline
style information)l

onclick, ondblclick,
onmousedown, onmouseup,
onmouseover, onmousemove,
onmouseout, onkeypress,
onkeydown, onkeyup (intrinsic events)l

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.

elements attributes
index

lists

po polsku

Menu