Working with lists,Unordered lists,Ordered lists,Definition lists & Nesting lists

This post concludes with the last of the major type elements: the list. We’ll first look at the different types of lists—unordered, ordered, and definition—and also see how to nest them. Then we’ll move on to cover how to style lists in CSS, list margins and padding, and inline lists.

Unordered lists

The unordered list, commonly referred to as a bullet point list, is the most frequently seen type of list online. The list is composed of an unordered list element (<ul></ul>) and any number of list items within, each of which looks like this (prior to content being added): <li></li>. An example of an unordered list follows, and the resulting browser display is
shown to the right. As you can see, browsers typically render a single-level unordered list with solid black bullet points.

<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item ‘n’</li>
</ul>

Unlike HTML, XHTML lists require end tags on all list elements. In HTML, the </li> end tag was optional.

Ordered lists

On occasion, list items must be stated in order, whereupon an ordered list is used. It works in the same way as an unordered list, the only difference being the containing element, which is <ol></ol>.
<ol>
<li>List item one</li>
<li>List item two</li>
<li>List item ‘n’</li>
</ol>

Web browsers automatically insert the item numbers when you use ordered lists. The only way of controlling numbering directly is via the start attribute, whose value dictates the first number of the ordered list. Note, though, that this attribute is deprecated— use it and your web page will not validate as XHTML Strict.

Definition lists

A definition list isn’t a straightforward list of items. Instead, it’s a list of terms and explanations. This type of list isn’t common online, but it has its uses. The list itself is enclosed in the definition list element (<dl></dl>), and within the element are placed terms and definitions, marked up with <dt></dt> and <dd></dd>, respectively. Generally speaking, browsers display the definition with an indented left-hand margin, as in the following example.

<dl>
<dt>Cat</dt>
<dd>Four-legged, hairy animal, with an inflated sense of self-importance</dd>
<dt>Dog</dt>
<dd>Four-legged, hairy animal, often with å an inferiority complex</dd>
</dl>

Nesting lists

Lists can be nested, but designers often do so incorrectly, screwing up their layouts and rendering web pages invalid. The most common mistake is placing the nested list outside any list items, as shown in the following incorrect example:
<ul>
<li>List item one</li>
<ul>
<li>Nested list item one</li>
<li>Nested list item two</li>
</ul>
<li>List item two</li>
<li>List item ‘n’</li>
</ul>

Nested lists must be placed inside a list item, after the relevant item that leads into the nested list. Here’s an example:
<ul>
<li>List item one
<ul>
<li>Nested list item one</li>
<li>Nested list item two</li>
</ul>
</li>
<li>List item two</li>
<li>List item ‘n’</li>
</ul>

Always ensure that the list element that contains the nested list is closed with an end tag. Not doing so is another common mistake, and although it’s not likely to cause as many problems as the incorrect positioning of the list, it can still affect your layout.

Related posts:

1. List margins and padding Browsers don’t seem to be able to agree on how...

Related posts brought to you by Yet Another Related Posts Plugin.