This post is part of series on Universal Design at Salesforce.com. As always, all of the content and images in these posts fall under our safe harbor agreement.

In our second look at semantics and structure, let's focus on lists.

There are three types of lists in HTML: the Ordered List, Unordered List, and Description List.

Ordered Lists

Ordered lists, represented by the <ol> tag, defines a list where the items have been intentionally ordered. For instance:

1. First item
2. Second item
3. Third item

Unordered Lists

Unordered lists, represented by the <ul> tag, are typically more difficult to spot. Below, notice that tabsets, menu items, and even media blocks grouped together form a list.

Description Lists

Description lists, <dl>, consist of name-value groups, with each group containing one or more terms <dt>, followed by one or more values or descriptions, <dd>. Think of these as the opposite of a form. In a form you have a label, such as Name, followed by an input field. When showing a confirmation page on a form you would start with a single description list, with a <dt> for each lable and <dd> for each value.

<dl>
	<dt>Name:</dt>
	<dd>Jesse</dt>

	<dt>Title:</dt>
	<dd>Accessibility Specialist</dd>
</dl>
							

Here are a few more examples from a service solution. A description list is the best available semantic for the following design:

How many times have you seen examples like these represented using tables for layout, or maybe just well positioned <div> tags? When I evaluated Section 508 for a Federal agency we allowed tables if the "description term" was placed inside of a table header. As an after production fix, it was considered undesirable but acceptable since it did create a programmatic relationship between term and definition. Had we caught these errors at the planning phase, we would have strongly recommended using the description list as the best semantic available.