HTML and CSS Reference
In-Depth Information
Unordered and ordered lists: ul, ol, and li
Unordered and ordered lists consist of an opening
ul
or
ol
tag, respectively, followed
by any number of list item—
li
—elements, and then finally a closing
</ul>
or
</ol>
tag. The opening and closing tags can contain only list items, but list items can con-
tain any flow elements, including paragraphs,
div
s, headers, and yet more lists. So long
as they're all contained within a single list item, it's perfectly valid and well-formed
markup. As far as differences between HTML/XHTML go, in HTML you don't have to
close list items with
</li>
, but in XHTML you do.
Unordered lists do not have any attributes other than the global attributes. Ordered
lists, on the other hand, have three additional attributes:
reversed
,
start
, and
type
. The first,
reversed
, determines what direction a list should be ordered. It is a
Boolean attribute, meaning its presence or absence determines its behavior. If this attrib-
ute is present, the list will be descending (9, 8, 7, 6, 5…); otherwise, it will be ascending
(1, 2, 3, 4, 5…). Unfortunately, at the time of writing, this attribute had poor browser
support.
Note
As mentioned in the attributes section in the previous chapter, Boolean attrib-
utes either can be included without any value when using HTML syntax or, if XHTML
syntax is used, can be given a value equal to their name. In this situation, you may find
HTML syntax is clearer. For example, both of the following would work:
<ol reversed>
<li>item 1</li>
<li>item 2</li>
</ol>
<ol reversed="reversed">
<li>item 1</li>
<li>item 2</li>
</ol>
Next, the
start
attribute allows authors to start the numbering of an ordered list at
a number other than 1, which is useful if you need to interrupt an ordered list, such as
in the case of a list of search results split over several pages. Interestingly, this attribute
was deprecated in HTML 4.01 but is back to good standing in HTML5.
Finally, the
type
attribute can be used to change the marker at the beginning of the
list from a decimal number (the default) to an alphabetical listing or roman numerals.
However, it is strongly recommended to use the CSS
list-style-type
property
Search WWH ::
Custom Search