HTML and CSS Reference
In-Depth Information
Lists are a general-purpose container for collections of things. They come in three vari-
eties. Ordered lists are numbered and are useful for presenting things like your top 10
favorite songs from 2010 or the steps to bake a cake. Unordered lists are not numbered
and by default are presented with bullets for each list item. However, these days
unordered lists are often used as a general-purpose container for any list-like collection
of items. Yes, they're frequently used for bulleted lists of the kind you might see on a
PowerPoint slide, but they're also used for things like collections of navigation links and
even pull-down menus. Finally, definition lists are used for glossaries and other items
that pair a label with some kind of description.
NOTE
Older HTML standards also supported two additional list types:
menu lists (
<menu>
) and directory lists (
<dir>
). Menu lists were
deprecated until HTML5, but they have been reinstated for use as
lists of commands.
All the list tags have the following common elements:
Each list has an outer element specific to that type of list. For example,
<ul>
and
</ul>
for unordered lists or
<ol>
and
</ol>
for ordered lists.
n
Each list item has its own tag:
<dt>
and
<dd>
for the glossary lists and
<li>
for the
other lists.
n
NOTE
The closing tags for
<dd>
,
<dt>
, and
<li>
were optional in HTML.
To comply with HTML5, use closing tags
</dd>
,
</dt>
, and
</li>
.
Although the tags and the list items can be formatted any way you like in your HTML
code, I prefer to arrange the tags so that the list tags are on their own lines and each new
item starts on a new line. This way, you can easily select the whole list and the individual
elements. In other words, I find the following HTML
<p>
Dante's Divine Comedy consists of three topics:
</p>
<ul>
<li>
The Inferno
</li>
<li>
The Purgatorio
</li>
<li>
The Paradiso
</li>
</ul>
