List Elements
Technically, XHTML lists are a form of block-level formatting, but because lists are such a useful way of presenting content, the list elements merit their own section in the chapter.
Using the elements in this section, you can create the following types of lists:
Definition lists
Ordered (numbered) lists
Unordered (bulleted) lists
Ordered and unordered lists use the list item element, <li>, so this element is covered first, followed by the elements you use to create each type of list.
<li>
Type:
Container
Function:
Denotes an item in a list.
Syntax:
<li> ... list item goes here ... </li>
Attributes:
None.
NOTE
The attributes previously used with the HTML <LI> tag—COMPACT, TYPE, and START—cannot be used with the XHTML <li> tag under the Strict DTD. To modify an <li> tag, you should use the style attribute. The attributes are permissible under the Transitional and Frameset DTDs.
Example:
<li>Cookie Dough</li> <li>Rocky Road</li> <li>Mint Chocolate Chip</li>
Related Elements:
The <li> element is always used in conjunction with either the <ol> or <ul> elements.
CAUTION
One bad habit from HTML that Web authors will have to shake is using <li> as a standalone tag. XHTML syntax rules state that <li> is a container tag, so if you try to use it as a standalone tag, your documents will be rejected.
<dl>
Type:
Container
Function:
Denotes a definition list (see Figure 3.11).
){kind=link}
Figure 3.11 The World Wide Web Consortium uses a definition list to create the navigation links for its site.
Syntax:
<dl> ... terms and definitions go here ... </dl>
Attributes:
None.
Example:
<dl> <dt>Browser</dt> <dd>A program that allows a user to view World Wide Web pages</dd> <dt>Server</dt> <dd>A program that fields requests for web pages</dd> </dl>
Related Elements:
Terms in a definition list are specified with the <dt> element, and their definitions are specified with the <dd> element.
<dt>
Type:
Container
Function:
Contains a term to be defined in a definition list.
NOTE
Some browsers automatically render a definition list term in boldface.
Syntax:
<dt> ... term being defined goes here ... </dt>
Attributes:
None.
Example:
<dl> <dt>Creatine</dt> <dd>A nutritional supplement that promotes muscle development</dd> ... </dl>
Related Elements:
Use of the <dt> element makes sense only in the context of a definition list (between the <dl> and </dl> tags). The <dd> element is used to give the term's definition.
<dd>
Type:
Container
Function:
Contains a term's definition. The definition is typically indented from the term, making it easier for the reader to see the term-definition structure of the list.
Syntax:
<dd> ... term definition goes here ... </dd>
Attributes:
None.
Example:
<dl> <dt>XHTML</dt> <dd>HTML with the rules of XML applied</dd> ... </dl>
Related Elements:
The <dd> element should be used only when contained within a <dl>. A term, specified by a <dt> element, should precede each definition.
<ol>
Type:
Container
Function:
Creates an ordered or numbered list (see Figure 3.12).
){kind=link}
Figure
3.12
Ordered and unordered lists are commonly used on Web pages to organize
information.
Syntax:
<ol> <li>List item 1</li> <li>List item 2</li> ... </ol>
Attributes:
None.
NOTE
The COMPACT, TYPE, and START attributes of the HTML <OL> tag do not have equivalents under the Strict XHTML DTD. You can use them with the Transitional and Frameset DTDs.
Example:
Book Outline <ol> <li>XHTML</li> <li>XML</li> <li>Dynamic HTML</li> <li>Java</li> <li>JavaScript</li> </ol>
Related Elements:
List items in an ordered list are specified with the <li> element.
<ul>
Type:
Container
Function:
Creates an unordered or bulleted list.
Syntax:
<ul> <li>List item 1</li> <li>List item 2</li> ... </ul>
Attributes:
None.
NOTE
The COMPACT and TYPE attributes of the HTML <UL> tag do not have equivalents under the Strict XHTML DTD, but you can use them with the Transitional and Frameset DTDs.
Example:
Web Browsers <ul> <li>Netscape Navigator</li> <li>Microsoft Internet Explorer</li> <li>NCSA Mosaic</li> </ul>
Related Elements:
List items in an unordered list are specified with the <li> element.