Orientation · Instruction

Lists

Unordered List | Ordered List | Definition List | Other Lists

In the section on "Block Tags" (elements that commandeer space in the browser window), you were introduced to paragraph and the six headline elements. Here, we will consider a specialized set of block elements, called lists.

There are three main types of lists:

1. ordered lists
2. unordered lists
3. definition lists

Ordered List — <OL>

A series of block elements, moderately indented from the left margin and preceded by a sequencing digit (by default, an arabic numeral). The numbered list above is an ordered list.

Unordered List — <UL>

A series of block elements, moderately indented from the left margin and preceded by a neutral dingbat (by default, a medium bullet). The following definition of a dingbat is set in an unordered list.

• A dingbat is a graphical element found in a typography font. It is used as if it were a letter or piece of punctuation.

Definition List — <DL>

A series of paired block elements. The definition term (<DT>) begins at the left margin, and the definition (<DD>) is moderately indented from the left margin. Neither of these elements display preceding digits. These definitions of list types are set in a definition list.

• A list as a whole commandeers leading (in most, but not all, contexts); however, individual items in the list do not (in most browsers).
• The degree of indentation is consistent among the three types of lists, and preceding digits hang within the indentation, for tidy vertical alignment of text blocks.
• Lists can be nested within each other (for instance, the dingbat definition is a <UL> nested in a <DD>).

Unordered List

<UL> <LI>a list item</LI> <LI>another list item</LI> <LI>a third list item</LI> </UL>

a list item another list item a third list item

An unordered list consists of one or more list item elements, nested between <DL> and </DL>. The content of a list item can be simple text, or it can be just about any other tag, including paragraphs, headlines, and other lists. If you nest an unordered list within a list item of another unordered list, by default the nested list will use a different dingbat, as in:

<UL> <LI>a list item</LI> <LI>another list item</LI> <LI>a third list item <UL> <LI>item in a nested list</LI> </UL></LI> </UL>

a list item another list item a third list item item in a nested list

The default dingbats are ...

• disc,
• circle, and
• square.

Usually, the page designer will gratefully accept the browser's judgment on which dingbat to display. If you really want to control the dingbat, you will specify an attribute for either the <UL> or the <LI>. For information on setting attributes, see "Tag Attributes."

The nested unordered list must be completely enclosed within the list item (place <LI> and usually some other content before the nested <UL>, and place the closing </LI> tag after the </UL> that closes the nested unordered list).

In the example above, you'll notice that list items do not have leading above or below (in most browsers). The simplest way to add leading is to enclose the content in a <P> tag, as in ...

<UL> <LI><P>a list item</P></LI> <LI><P>another list item</P></LI> <LI><P>a third list item</P> <UL> <LI><P>item in a nested list</P></LI> </UL></LI> </UL>

a list item another list item a third list item item in a nested list

Besides one or more <LI> elements, you may also place a list header (<LH> element) as the first element within the unordered list:

<UL> <LH>List Header</LH> <LI>a list item</LI> <LI>another list item</LI> <LI>a third list item</LI> </UL>

List Header a list item another list item a third list item

In well-formed HTML, you may only have one <LH> element, and it must be the first element in the list. Furthermore, in well-formed HTML, the <LH> element may not contain any block elements. You can break these rules, but you risk having the page display erratically in browsers that interpret HTML guidelines strictly.

Ordered List

<OL> <LH>List Header</LH> <LI>a list item</LI> <LI>another list item</LI> <LI>a third list item <OL> <LI>a nested list item</LI> <LI>another item</LI> </OL></LI> </OL>

List Header a list item another list item a third list item a nested list item another item

Everything said above about unordered lists can also be said about ordered lists.

• An ordered list contains one or more list items, plus one optional list header.
• List items do not commandeer leading.
• List items can contain almost any other element, including paragraphs, headlines, and embedded lists.

The only significant difference between ordered lists and unordered lists is that ordered lists are ... ordered. Instead of dingbats, they are preceded by an incrementing digit, usually an Arabic numeral. You can specify the type of preface by using an attribute (see "Tag Attributes"). The preface options are:

1. Arabic numbers,
2. upper-case Roman numerals,
3. lower-case Roman numerals,
4. upper-case letters, and
5. lower-case letters.

Definition List

<DL> <DT>a term</DT> <DD>definition of the term</DD> <DT>another term</DT> <DD>definition of the term</DD> </DL>

a term definition of the term another term definition of the term

One cannot say quite the same things about definition lists as were said above about ordered and unordered lists. Actually, this is a good thing, because definition lists give us control over the left margin that cannot be achieved readily with <OL> and <UL>.

But there are some similarities:

• <DT> and <DD> elements do not commandeer leading.
• <DD> elements (like <LI> elements) may contain almost any other element, including paragraphs, headlines, and embedded lists.
• <DT> elements (like <LH> elements) strictly speaking should not contain block elements, although you may do so at your own risk.

Incidentally, you cannot put a list header (<LH>) in a definition list.

Now, about that control over the left margin. As mentioned in "Block Tags," the <BLOCKQUOTE> tag will indent the enclosed contents from the left and right margins. Nesting two or more <BLOCKQUOTE> tags will increase the indent. But suppose you want a wide left margin, but normal right margin. You cannot nest a <DD> directly within another <DD>; however, you can nest a <DL> within a <DD> and that nested <DL> can contain the tighter <DD>. Confused? It looks like ...

<DL> <DT>a term</DT> <DD>some unnested text</DD> <DT>another term</DT> <DD> <DL> <DD>nested text</DD> </DL> </DD> </DL>

a term some unnested text another term nested text

When used very carefully, nested <DL><DD> pairs can give you layout control without resorting to tables (and thus, without hiding your precious content from search engines).

Other Lists

There are two other lists: directories and menus.

<DIR> <LI>directory item</LI> <LI>another item</LI> </DIR>	directory item another item
<MENU> <LI>menu item</LI> <LI>another item</LI> </MENU>	menu item another item

These lists behave like unordered lists, except that they cannot contain list headers and you cannot specify the type of preceding dingbat. In theory, they are supposed to be more tightly formatted than normal unordered lists; however, I have never seen a difference. I mention them simply because somebody is bound to complain that I've ignored two of the five list types. So, I haven't. However, you may safely ignore them.

Other Topics

1. What is HTML?
2. Well-formed Tags
3. Block Tags
4. Lists
5. In-line Tags
6. Tag Attributes
7. Links
8. Images
9. <FONT>
10. Function Tags
11. Tables
12. Frames
13. Cascading Style Sheets
14. Platform-Independent Design
15. User-Friendly Design
16. Client-Friendly Design
17. Starter Page
18. Glossary
19. Bestiary

Last modified: Wednesday, February 18, 2004 at 08:18 AM