Home > Articles

  • Print
  • + Share This
  • 💬 Discuss

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).

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).

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.

  • + Share This
  • 🔖 Save To Your Account

Discussions

comments powered by Disqus

Related Resources

There are currently no related titles. Please check back later.