HTML and CSS Reference
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.
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.
Each list item has its own tag: <dt> and <dd> for the glossary lists and <li> for the
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>
<li> The Inferno </li>
<li> The Purgatorio </li>
<li> The Paradiso </li>