Lists

Item Lists

Item lists are simply a series of items. There are two types of item lists: ordered lists and unordered lists. Both these have the same child element: the list item element.

The List Item Element

Element Name: li

The li element must be the child element of either an ordered or unordered list element. It is a block element, and can contain any other body element, including paragraphs, divisions—even other lists. It can also contain text directly.

The Unordered List Element

Element Name: ul

The unordered list gives no hint (aside from order of appearance) of any sequence in its contents. In essense, it's used when the order of its items isn't all that important. The ul element can have only li elements as child elements, but it can have as many of these child elements as you please.

Example Unordered List

An Unordered List

<ul>

<li>Grocery Store</li>

<li>Gas Station</li>

</ul>

The Ordered List Element

Element Name: ol

What is the difference between the following lists?

List #1
List #2

If you guessed that List #2 implies that there is a specific order, you're absolutely right. The ordered list (which has the element name ol) is a sequence of items that have a specific order.

Example Ordered List

An Ordered List

<ol>

<li>Grocery Store</li>

<li>Gas Station</li>

</ol>

Definition Lists

A definition list is essentially a list of definitions, like a dictionary or glossary. It works a bit differently from item lists: a definition list's items come in two parts: the definition term and the definition description.

Definition List Element

Element Name: dl

The dl element can only contain definition term and definition description elements. Its job is simply to contain a definition list.

Definition Term Element

Element Name: dt

The dt element holds the term to be defined. Only inline elements may be nested within it.

Definition Description Element

Element Name: dd

The dd element contains the description of the term. Any body element can be nested within, and it can contain text directly.

Example Definition List

The example below has dl tags in bold, dt elements underlined, and dd elements in italics

A Definition List

<dl>

<dd>A place to store and withdraw money.</dd>

<dt>Grocery Store</dt>

<dd>A place to purchase food.</dd>

<dt>Gas Station</dt>

<dd>A place to purchase fuel for the car.</dd>

</dl>

Lists and Links

Hyperlinks are often arranged in lists, especially when creating a links page or website navigation—after all, what are website navigation and links pages but lists of hyperlinks?

Question: Which of the above lists is suitable for hyperlinks?

Answer: All of them, depending on what you want to do.

Of course, by no means must you place links in lists alone—if a phrase within a paragraph serves well for the text of a hyperlink, by all means use it so—but if you have do a series of links that is not embedded within other text, it is probably best to use one of the above lists.

In the following examples, the a elements (in other words, the hyperlinks) are underlined. The tags of other inline elements have been removed for clarity.

Unordered Lists

Most of the time, the order in which pages of a website is visited has little importance, so the ul element is used.

A Sample Navigation List

Navigation Using An Unordered List

<ul>

<li><a href="./about_me.html">About Me</a></li>

<li><a href="./links.html">Links</a></li>

</ul>

Ordered Lists

Ordered lists are used when a series of pages are to be viewed in sequence. For example, an ordered list would be used for the chapters of an online book, or perhaps a multi-page glossary. The main page of this book contains several ordered lists for navigation, since it is a listing of the chapters.

A Sample Navigation List Using an Ordered List

Links to a multi-page glossary of the HTML elements, which are listed in alphabetical order.

* I have yet to mention these elements.

Navigation Using An Ordered List

<ol>

<li><a href="./gloss1.html">Elements a through form*</a></li>

<li><a href="./gloss2.html">Elements h1 through p</a></li>

<li><a href="./gloss3.html">Elements param* through var</a></li>

</ol>

Definition Lists

Definition lists are not commonly used for lists of links, but they would be completely appropriate when you want to give information about each link.

A Sample Link List Using an Definition List

Navigation with description of the links

Navigation Using A Definition List

dd elements are in italics

<dl>

<dd>This is the homepage of the World Wide Web Consortium, which sets standards for HTML and other languages.</dd>

<dt><a href="http://validator.w3.org">W3C HTML Validator</a></dt>

<dd>This allows you to make sure your webpages are valid—in other words, follow the rules of HTML 4.01 Strict.</dd>

<dt><a href="http://www.w3.org/TR/html401/">HTML 4.01 Specification</a></dt>

<dd>This page explains the elements, attributes, and rules of HTML 4.01 Strict.</dd>

</dl>

Lists within lists

Below is an example of lists nested within lists. The li and dd elements can both contain ul, ol, and/or dl elements.

Code of the above nested lists

ul Tags Underlined, ol Tags In Italics, dl Tags In Bold

<dl>

<dd>A series of things. Lists can be broken down into the following categories:

<ul>

<li>Item lists

<ul>

<li>Ordered Lists</li>

<li>Unordered Lists</li>

</ul>

</li>

<li>Definition Lists</li>

</ul>

</dd>

<dt>Item Lists</dt>

<dd>Item lists are lists of individual items.

<dl>

<dt>Ordered Lists</dt>

<dd>

Element name: <code class="el_name">ol</code>

These lists are used when order is important.

</dd>

<dt>Unordered Lists</dt>

<dd>

Element name: <code class="el_name">ul</code>

These lists are used when order is not important.

</dd>

</dl>

Both use the list item element: <code class="el_name">li</code>

</dd>

<dt>Definition Lists</dt>

<dd>Definition lists are used for things like glossaries. They are lists of terms and explanations. They use the following elements:

<dl>

<dd>The Definition List itself</dd>

<dd>The Definition Term</dd>

<dd>The Definition Description</dd>

</dl>

</dd>

<dt>Hyperlink List</dt>

<dd>Any list used for a series of hyperlinks. The order of list types used for this purpose from most to least common is:

<ol>

<li>Unordered</li>

<li>Ordered</li>

<li>Definition</li>

</ol>

</dd>

</dl>

The above was a basic example of different kinds of lists nested within each other. Below is an excellent example of nested lists of the same kind (in this case, ordered lists):

Code of the above nested ordered lists

OL Tags In Bold

<ol>

<li>Item Lists

<ol>

<li>The List Item Element</li>

<li>The Unordered List Element

<ol>

<li>Example Unordered List</li>

</ol>

</li>

<li>The Ordered List Element

<ol>

<li>Example Ordered List</li>

</ol>

</li>

</ol>

</li>

<li>Definition Lists

<ol>

<li>Definition List Element</li>

<li>Definition Term Element</li>

<li>Definition Description Element</li>

<li>Example Definition List</li>

</ol>

</li>

<li>Lists and Links

<ol>

<li>Unordered Lists

<ol>

<li>A Sample Navigation List</li>

</ol>

</li>

<li>Ordered Lists

<ol>

<li>A Sample Navigation List Using an Ordered List</li>

</ol>

</li>

<li>Definition Lists

<ol>

<li>A Sample Link List Using an Definition List</li>

</ol>

</li>

</ol>

</li>

<li>Lists within Lists</li>

</ol>

If the above list looks familiar, it should: it's the outline of this very chapter.