ptg16476052
72 LESSON 5: Organizing Information with Lists
Lists: An Overview
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 2015 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 unor-
dered 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.
NOTE
All the list tags have the following common elements:
n Each list has an outer element specific to that type of list. For example, <ul> and
</ul> for unordered lists, <ol> and </ol> for ordered lists, or <dl> and </dl> for
definition lists.
n Each list item has its own tag: <dt> and <dd> for the glossary lists, and <li> for the
other lists.
The closing tags for <dd>, <dt>, and <li> were optional in HTML.
To comply with HTML5, use closing tags of </dd>, </dt>, </li>.
NOTE
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 as well as the
individual elements. In other words, I find the following HTML
<p>Dante's Divine Comedy consists of three books:</p>
<ul>
<li>The Inferno</li>
<li>The Purgatorio</li>
<li>The Paradiso</li>
</ul>