Notes 3 — print(last updated:
Jun 28, 2009)— print
Ordered and Unordered Lists
Lists (see HTML4.01 specs)
are ways of organizing information in a hierarchical way
according to a sequence of elements (numbered or not)
along with their subsequences.
HTML lists are usually thought of
as combinations of the elements:
ul (unordered list),
ol (ordered list),
and
li (list item)
(see the HTML4.01
ol & ul specs).
Unordered lists
These are the simplest to work with because they have the
fewest controls.
An unordered list:
<ul>
<li>Cars</li>
<li>Trucks</li>
</ul>
looks like this:
An unordered list:
Cars
Trucks
A sublist is a list contained entirely within
a list item. If we want to list types of cars, we think
of placing the entire sublist within the first li element
like this:
When a sublist is introduced, it is worthwhile to maintain
the entire list indented at the appropriate level.
Going one step further, we can specify the type of Honda getting:
Observe how the levels are distinguished by list-item
characters:
(disc),
(circle),
(square)
Any sublists at greater depths
all use the square for itemization.
List construction
With complicated lists like the last one above,
it may be best to construct
this top-down as we constructed it from the examples
1, 2, and 3.
Starting from list 1,
separate Cars from the closing </li>
and insert the indented list of Honda, Subaru.
Then, from 2,
separate Honda from the closing </li>
and insert the indented list of Civic, Accord.
Ordered lists
Ordered lists use the ol element instead of ul. The difference
is that the successive li elements are enumerated. Here is
a simple example:
An ordered list will use the decimal enumeration 1, 2, ...
unless modified with the attributes:
type: used in an ol or li element;
its values are these:
"1" (integer), "A" (upper case alphabetic), "a" (lower case alphabetic), "I" (roman numeral), "i" (lower case roman numeral).
start: the starting position in the enumeration
used in an ol element
(a positive decimal number)
value: the current value of an li element
(a positive decimal number);
it has the effect of starting the enumeration from that point on.
Here is an example:
Starting here:
<ol type="A">
<li>Cars
<ol type="i">
<li>Honda</li>
<li>Subaru</li>
</ol>
</li>
<li>Trucks</li>
</ol>
And taking up from where we left off.
<ol start="3" type="A">
<li>Motorcycles</li>
<li>Bicycles
<ol type="i">
<li value="3">racing</li>
<li>touring</li>
</ol>
</li>
</ol>
which looks like this:
Starting here:
Cars
Honda
Subaru
Trucks
And taking up from where we left off.
Motorcycles
Bicycles
racing
touring
These attributes are, unfortunately,
deprecated,
and technically
should be replaced by style settings; nevertheless,
they are useful in practice.
List item elements used outside of lists
The list item element (li) can be used outside lists,
but its behavior is possibly not what you want if the
enclosed text spans more than one line. For example
if we have this:
<li>
The list item element (<tt>li</tt>) can be used outside lists,
but its behavior is possibly not what you want if the
enclosed text spans more than one line.
</li>
which looks like this:
The list item element (li) can be used outside lists,
but its behavior is possibly not what you want if the
enclosed text spans more than one line.
For single line items, this is often OK, because it appears
to be nearly impossible to make a list not indent.
List syntax issues
The official HTML specification requires
closing tags for
ol, ul
but it permits the omission of these closing tag for li.
Nevertheless, you should strive to use these closing tags (correctly)
to be in conformance with the XHTML standards which do
require them.
One of the by-products of allowing the omission of closing
tags is the fact that this list with incorrect XHTML syntax
still produces the desired results:
In effect, HTML is disregarding the closing li tags.
Definition lists
Definition lists use the elements:
dl (definition list), dt (definition term)
and dd (definition description)
(see the HTML4.01
dl, dt & dd specs).
The overall structure is contained by the dl element
tags, and
within this are dt elements (terms); within dt
elements are dd elements (term descriptions).
Here is an example:
Here are my terms
<dl>
<dt>HTML
<dd>Hypertext Markup Language</dd>
</dt>
<dt>XML
<dd>Extensible Markup Language</dd>
</dt>
</dl>