|
Creating Lists
Lists Attributes
Lists are among the most common HTML tags, frequently used in creating lists
of links to other Web pages. Three types of lists are available to assist
designers in organizing content: ordered (numerical) lists, unordered (bulleted)
lists, and definition lists. In addition to their use in creating lists,
these tags can be used to create format, as will be seen.
| Tags and Attributes: |
Description: |
| <body> . . . </body>
|
All of the following tags can be used between <body> and </body>.
|
| Ordered List |
<ol>
<li>...
<li>...
</ol> |
-
...
- ...
|
<OL>,
for Ordered Lists, is used to create lists of items
that require numerical ordering, <li>. <OL>, automatically
indents the ordered list from preceding text left margin, </ol>
ends the numbered list and returns text to the previous left margin.
Any subsequent ordered list in the same document will begin a new
number sequence.
The <li>
tag indicates an item in a list; the browser understands that following
an <ol> tag, each item receives a numeric value in sequence.
The designer does not have to be concerned with assigning a number
to each item, which allows the designer to reorder the sequence
without worrying about number sequence. There is no limit to the
length of text following each <li>, and text may include <p>
paragraph breaks. In instructional environments, ordered lists can
be especially useful to indicate a sequence, such as steps to follow
or a chronology.
Ordered lists
can be listed within ordered lists, but only with Netscape extensions
can ordered lists be sequenced with anything other than Arabic number.
Netscape allows <ol type=1> for Arabic numeral sequences,
<ol type=I> or <ol type=i> for Roman numeral sequences,
and <ol type=A> or <ol type=a> for Alphabetical sequences.
These extensions are particularly useful for detailed outline-style
directories of textual or instructional content.
|
<ol>
<li>...
<ol type=a>
<li>...
<li>...
</ol>
<li>...
</ol> |
-
...
-
...
- ...
- ...
|
| Unordered List |
<ul>
<li>...
<li>...
</ul> |
|
<UL>,
for Unordered Lists, is used to create bulleted lists
where order either is not important or is readily apparent. Again,
the <ul> tag automatically indents from the preceding margin,
and the <li> tag designates each item in the list. The length
of text following a bullet remains unlimited.
Several HTML
designers use <ul> tags to create wider left margins; each
<ul> indents about one-half inch. Text does not need to be
tagged with <li> unless bullets are desired.
Bullets in
nested unordered lists automatically change from disc (solid round
bullet), to circle (hollow round bullet), to square (hollow square
bullet). Netscape extensions allow designers to designate the type
of bullet used (for example, type=circle), but this is rarely seen.
|
<ul>
<li>...
<ul>
<li>...
<li>...
</ul>
<li>...
</ul> |
|
| Definition List |
<dl>
<dt>...
<dd>...
<dt>...
<dd>...
</dl> |
-
term
-
annotation
-
term
- annotation
|
<DL>,
for Definition Lists are extremely useful beyond their
intended use in dictionary lists of terms. Definition lists provide
a format structure that lends itself well to creating annotated directories
of resources.
The <li>
tag is not used in definition lists. In its place are <dt>
for the defined term and <dd> for the definition annotation.
<dt> will align with the left margin; <dd> will create
a hanging indent. There is no limit to the length of an annotation;
paragraph breaks can be included within the annotation. It is often
advisable to include a <p> paragraph break between the end
of an annotation and the following definition term.
|
Example
<head>
<title>This is the Title</title>
</head>
<body bgcolor="#ffffff">
<h2>This is a heading</h2>
<font size=+2>This is the first paragraph of the document. </font>
<ol>
<li> This is the first item in an ordered list.
<li> This is the second item in an ordered list.
<li> This is the third item in an ordered list.
</ol>
<p>This is the second paragraph. Every once in a while, using <b>bold</b>
will emphasize a word in a sentence or paragraph.</p>
<p> <dl>
<dt> This is the first word, phrase, concept, or citation in a definition
list.
<dd> This is the annotation.
<dt> This is the second item in the definition list.
<dd> And this is the second annotation.
</dl>
</p>
<p><font size=-1>This is the tagline that identifies the document's
author and date of generation.</font> </body>
</html>
Practice
Now you can practice what you've learned.
Please type or Copy and Paste the example into the box below and click
the "View HTML" button.
|
