Lists are tools for organizing multiple items within Web pages. Lists are used to present several items organized in a linear fashion along a single dimensions.
This page was written to provide students in my CS403 class with a simple sample document that demonstrates the use of lists as discussed in class. As with the other sample documents I have provided, the primary motivation has been to generate a relatively simple, but realistic, document that not only reviews the concepts presented in lecture, but also demonstrates their use in a "real world" situation.
To get the most out of this document, you should first read it and then study the source that the browser rendered in order to produce it. Use your browser's ability to display the source of a document for this purpose.
XHTML provides three types of lists, each intended for a different purpose.
Unordered lists are used to present simple list items that have no inherent order to them. A <ul> element is used to contain the list as a whole, and within that <ul> element must appear at least one <li> element. Each <li> element defines a single list item.
The following example lists some items to pack for a hike. Since the order in which you pack the items is irrelevant, an unordered list in appropriate.
For another example of an unordered list, see the Table of Contents at the beginning of this page.
Ordered lists are used to present simple list items with an inherent order. Therefore, if the order of the items in the list is important, an ordered list is preferable over an unordered list. With an ordered list, the <ol> element is used to define the list, and the <li> element is used as it is within the <ul> element to define the list items. Each <li> element defines a single list item.
The following example describes a series of steps to take when publishing a Web page. Since the order in which the steps are taken is vital to the success of the process, an ordered list is more appropriate than an unordered one.
Definition lists are typically used to present terms or phrases paired with their definitions. The <dl> element is used to define the list, and each item within the list generally consists of two separate parts. The first part is typically the term or phrase being defined, and it is specified within a <dt> element. The second part is typically the definition of the term or phrase presented in the first part, and it is specified within a <dd> element.
Although they are most commonly used to present terms and their definitions, definition lists are useful for any situation in which pairs of items need to be presented in a list form.
This example presents three types of XHTML elements and their definitions.
When an entire list appears within a list item of another list, it is considered a nested list. There is no magic involved in creating a nested list. Simply place the nested list inside one of the <li> elements of another list.
When nesting lists, they may be lists of the same or different types. For example, in the list that follows, ordered lists have been nested within the list items of an unordered list, to show the sales ranking of different varieties of fruits. If ranking did not need to be indicated unordered lists could have been nested within the unordered list instead.