As shown earlier in this chapter, the table and form elements are used as tools for orga-nizing Web pages. List elements provide another way to impose formatting on related content. Table 3.2 gives a brief summary of three kinds of lists.
Table 3.2 HTML list elements
Description HTML tags Use
Definition (or glossary) <dl> … </dl> For a list that includes names and extensive descriptions Ordered <ol> … </ol> When a list of things needs to be
numbered
Unordered <ul> … </ul> For a list of “bulleted” items List item <li> … </li> Create list entry for <ul> or <ol>
Glossary head <dt> … </dt> Create glossary heading for <dl>
Glossary term <dd> … </dd> Create glossary term description for <dl>
58 3 HTML Tables, Forms, Lists, and Frames
3
Document 3.8 shows how to use these list tags.Document 3.8 (lists.htm)
<html>
<head>
<title>Using HTML Lists</title>
</head>
<body>
This page demonstrates the use of unordered, ordered, and definition lists.
<ul>
<li> Use unordered lists for "bulleted" items.</li>
<li> Use ordered lists for numbered items. </li>
<li> Use definition lists for lists of items to be defined.
</li>
</ul>
Here are three ways to organize content in an HTML document:
<ol>
<li>Use a table. </li>
<li>Use a list. </li>
<li>Use <font face="courier"><pre> . . .
</pre></font> tags. </li>
</ol>
This is a way to produce a neatly formatted glossary list.
<dl>
<dt><strong>definition list</strong>
(<font face="courier"><dl></font>)</dt>
<dd>Use this to display a list of glossary items and their definitions. </dd>
<dt><strong>ordered list</strong>
(<font face="courier"><ol></font>) </dt>
<dd>Use this to display a numbered list. </dd>
<dt><strong>unordered list</strong>
(<font face="courier"><ul></font>)</dt>
<dd>Use this to display a list of bulleted items. </dd>
</dl>
</body>
</html>
59 3.6 The List Elements
The use of these tags imposes a preset format for displaying list items. Blank lines are inserted before and after the list, with no <br /> or <p> … <p> tags required to separate the lists from other text in the document. For ordered and unordered lists, the list items themselves are indented. For the definition list, the items are not indented, but the
“ definitions” are. The contents of a list item can include text formatting elements. For example, in Document 3.8, the items in the definition list use the strong element to dis-play the item name in a bold font. A list item can be an image, <img src="…" />, or a URL reference, <a href="…">.
Note the use of < and > to display the < and > characters in the document.
(Recall that if you simply enter these characters, they will not be displayed on the screen because HTML will try to associate them with tags.)
There are some attributes associated with list elements that provide a little more control over the appearance of lists.
60 3 HTML Tables, Forms, Lists, and Frames
3
Finally, it is possible to combine list types to create more complicated list structures.
Document 3.9 shows how list tags can be used to create the table of contents for a book.
Document 3.9 (bookContents.htm)
<html>
<title>Table of Contents for My Book</title>
<body>
<h2>Table of Contents for My Book</h2>
<ol>
<strong><li>Chapter One</strong></li>
<ol type="I">
<li>Section 1.1</li>
<ol type="i">
<li>First Topic</li>
<li>Second Topic</li>
<ul type="circle">
<li><em> subtopic 1</em></li>
<li><em> subtopic 2</em></li>
</ul>
</ol>
<li>Section 1.2</li>
<li>Section 1.3</li>
</ol>
start="n"
Value: The integer n specifies the starting value of an ordered list. The default value is start="1".
type = "…"
Values: For unordered lists: "disc" (the default value), "square", "circle"
For ordered lists: "A" (uppercase letters), "a" (lowercase letters), "I" (uppercase Roman letters), "i" (lowercase Roman letters), "1" (numbers, the default value) value = "n"
Value: The integer n specifies a numerical value for an item in an ordered list which overrides the default value. Subsequent list items will be renumbered starting at this value.
61 3.6 The List Elements
<strong><li>Chapter Two</strong></li>
<ol type="I">
<li>Section 2.1</li>
<ol type="i">
<li>First Topic</li>
<li>Second Topic</li>
<ul type="circle">
<li><em> subtopic 1</em></li>
<li><em> subtopic 2</em></li>
</ul>
</ol>
<li>Section 2.2</li>
<li>Section 2.3</li>
</ol>
<strong><li>Chapter Three</strong></li>
<ol type="I">
<li>Section 3.1</li>
<ol type="i">
<li>First Topic</li>
<li>Second Topic</li>
<ul type="circle">
<li><em> subtopic 1</em></li>
<li><em> subtopic 2</em></li>
<li><em> subtopic 3</em></li>
</ul>
</ol>
<li>Section 3.2</li>
<li>Section 3.3</li>
<ol type="i">
<li>First Topic</li>
<li>Second Topic</li>
</ol>
<li>Section 3.4</li>
</ol>
</ol>
</body>
</html>
Note that if this list were used for an online book, for example, each list item could include a link to a URL or a hypertext link to another location within the same document.
62 3 HTML Tables, Forms, Lists, and Frames