Notice: This material is excerpted from Special Edition Using HTML, 2nd Edition, ISBN: 0-7897-0758-6. This material has not yet been through the final proof reading stage that it will pass through before being published in printed form. Some errors may exist here that will be corrected before the book is published. This material is provided "as is" without any warranty of any kind.
You can organize information for presentation in many different ways. One of the most effective formats is the list. Lists are both functional and easy to read; they can define sequential procedures, relative importance, available decision options, collections of related data, and data ordering. We see lists everywhere and every day. From restaurant menus to encyclopedias to phone books, lists are a fundamental way that we organize and disseminate information.
HTML
provides
container
elements for creating lists in
HTML
documents. The basic list types available are numbered, bulleted, menu,
directory, and definition. You can mix these types to create a variety
of display and organization effects.
A basic list in HTML
consists of a list identifier container plus the standard list items tag.
(In HTML, all list items use one tag, <LI>, and the lists are differentiated
by their container tags.) An ordered list, also called a numbered list,
is used to create a sequential list of items or steps. When a
Web
browser sees the tag for an ordered list, it sequentially numbers each
list item using standard numbers, such as 1, 2, 3, and so on.
Ordered (or numbered) lists begin with the <OL> tag, and each
item uses the standard <LI> tag. Close the list with the </OL>
tag to signal the end of the list to the browser. List
containers provide both a beginning and ending line break to isolate the
list from the surrounding text; it's not necessary (except for effect)
to precede or follow the list with the paragraph <P> tag.
Lists support internal
HTML elements. One of the most useful elements is the paragraph tag (<P>), which enables you to separate text in a list item. Other useful tags include both logical and
physical style tags (such as <EM> and <I>) and
HTML entities. Headings are not appropriate for use in lists; although they're interpreted correctly, their forced line breaks make for an ugly display.
SGML purists also object to them because heading tags are meant to define relationships in paragraphs, not lists.
Figure 9.1 shows how you can use the
OL list container. Pay particular attention to including closing tags,
especially in nested lists. You can use leading blanks and extra lines
to make your list code easier to read, but Web browsers ignore them. Figure
9.2 shows how Netscape Navigator interprets this HTML
code.
Lists can include fixed data as well as links to other information sources.
Web
browsers display internal
HTML
elements according to their defined usage.
The line break tag, <BR>, after the list header is not necessary for Netscape Navigator, but it is necessary for
Microsoft Internet Explorer, which will otherwise put the first list item on the same line as the header.
It is also possible to nest ordered lists, creating a document that
looks more like an outline. Figure 9.3 shows
the HTML
code for such a list, which is rendered in figure
9.4
Nested lists can be created by putting lists within other lists in HTML code.
Sublists are automatically indented to create an outline effect.
Use indentations and blank lines to organize your data when creating HTML documents. Web browsers don't care how the text is aligned or run together, but you will appreciate the extra effort when rereading and editing the HTML code.
Users may wonder how they can create a more classical style of outline
in which subheadings use different list numbers (such as Roman numerals
or letters) from the primary headings. Unfortunately, standard HTML
lists do not enable the author to control how a browser numbers the list
items-only that the items are numbered. The draft
HTML
3.0 specification does include a provision for list numbering formats to
be determined by style sheets. In addition, some
Web
browsers, such as Netscape Navigator and Microsoft Internet Explorer, enable
the end user to modify how ordered lists are displayed, as described in
the next section.
See "Templates for Lists of Data"
Netscape provides useful extensions to the <OL> tag supported by their own Netscape Navigator as well as Microsoft Internet Explorer. These give you control over the appearance of the item markers and the beginning marker number. Table 9.1 lists the nonstandard attributes and their functions.
Table 9.1 Netscape Extension to <OL>
Extension | Description |
---|---|
TYPE=A | Sets markers to uppercase letters |
TYPE=a | Sets markers to lowercase letters |
TYPE=I | Sets markers to uppercase Roman numerals |
TYPE=i | Sets markers to lowercase Roman numerals |
TYPE=1 | Sets markers to numbers |
START | Sets beginning value of item markers in the current list |
Varying the marker style enables you to create distinctions between
numbered lists in the same document. Figure
9.5 shows how an HTML
document incorporates these extensions, and figure
9.6 shows how
Netscape's
extensions can enhance a document.
This TYPE
attribute changes the marker to uppercase
Roman
numerals; browsers that don't recognize Netscape's extensions will ignore
them.
Controlling the appearance of lists is useful for both functional and aesthetic purposes.
Troubleshooting
I'm creating a list of items, and I need to interrupt the list for a regular paragraph of text. How can I make the list pick up where it left off and continue numbering the items sequentially?
The draft
HTML 3.0 specification included an attribute to the <OL> tag called SEQNUM. Ideally then, you could pick up, say, at item seven by specifying <OL SEQNUM=7>. Unfortunately, this attribute is not yet supported by any of the popular Web browsers.
What you can do is encourage your audience to switch to
Netscape Navigator or
Microsoft Internet Explorer as their
Web browser, and you use the
START extension to <OL>. This enables you to close the list, insert your text paragraph, and start a new list with whatever list number you choose, such as the following:
<OL START=7>The number 7 is just an example. Put whatever value you want the numbering to start with.
This trick also works if you're being creative in Netscape and using a different list marker with the TYPE extension.
HTML
also supports the unordered or bulleted list: a list of items that does
not define a specific structure or relationship among the data.
Unordered lists use the <UL> container tag. Just like ordered
lists, bulleted lists provide beginning and ending line breaks and support
internal HTML
elements and sublists. Also, like ordered lists, they require closing tags:
include the </UL> tag to signal the end of the list to the browser.
Web
browsers support and automatically indent sublists, and some will also
vary the bullet icon based on the relative level of the list. These icons
vary depending on the client software viewing the
HTML
document.
Figure 9.7 shows how to use the <UL>
list container. Again, to make the HTML document easier to read, you can
include leading blanks and extra lines, but Web browsers will ignore them.
Figure 9.8 shows how Netscape Navigator
will render this HTML
code.
Unordered lists can be used to list items where the sequence is not important.
Web
browsers automatically indent sublists and apply the corresponding item
markers.
When adding blank lines within an HTML document, use the preformatted text element <PRE> to create filler for blank lines, as follows:
<PRE> </PRE>Remember to put two spaces inside the tags; most browsers will ignore <PRE> sections with only one.
Netscape Navigator enables you to manually control the appearance of
item markers as either circles, squares, or discs. This feature is meant
to give you more control over the look of bulleted lists. Unlike with ordered
lists, however, Microsoft
Internet Explorer does not support this extension
The tag extension is TYPE. Figure
9.9 demonstrates its use in an HTML
document, which is rendered by
Netscape
Navigator in figure 9.10. Note that while
the tag values shown in this case are "SQUARE" and "CIRCLE,"
that
Netscape
Navigator renders them as filled-in and empty squares, respectively.
TYPE provides control over the appearance of list bullets; browsers that don't support its use ignore the <TYPE> tag.
It's easy to control the display of bullet markers for your Netscape Navigator audience.
There is a reason why HTML and its client software support multiple item markers: to provide a visual differentiation for sublists. By manually controlling the markers, however, you're working against the user's expectations and potentially weakening the communication of your document's information. After all, the less work the user has to do to recognize subsets of lists, the easier any browser can read the document. Use this manual control with care!
Besides the extensions to the <OL> and <UL> elements, Netscape also provides nonstandard extensions for individual list items. The extensions are based on those available to the list container that the item is in (ordered or unordered). Ordered lists pass on the capability to change the current
TYPE of list items and also the VALUE they begin with-by using the VALUE tag, you can begin a list with a value other than one, or change the numbering within a list. This would another good way to continue a list that has been interrupted by some other type of
HTML object. (All subsequent items adopt the extension changes until the list closes.) You can modify unordered list items with the TYPE extension; all subsequent items in the container use the new item marker.
You can create menu lists with another list type supported by HTML and
Web browsers. The distinction here is primarily for HTML identification;
most browsers' default display for the <MENU> container is very similar
to the font
and style used for the unordered list container. The value of this element
is enhanced if you select a distinct screen format for the menu paragraph
in a Web browser's preferences. The container might also be more functional
in future versions of
HTML
and its client software, enabling browsers and other applications to identify
the menu sections in your documents.
As with the previous lists, menu lists provide beginning and ending
line breaks and can include other HTML
elements in a menu container. The
anchor
element is the most likely
HTML
element to use in this type of list; it is used to link the menu listings
to other document resources or Internet applications. Figure
9.11 shows typical uses of the <MENU> container.
Just because
HTML has specific names for these list types doesn't mean you're limited in how you can use them. Experiment to see how each list delivers your information, and use what works best.
As a container, the <MENU> element requires a closing </MENU> tag.
Again, the current implementation of <MENU> by most Web
browsers doesn't provide a
visual
distinction between menu and unordered lists.
Netscape
Navigator displays menu lists and unordered lists identically, while Microsoft
Internet Explorer displays them identically except it omits the bullets
in the latter.
NCSA
Mosaic, as shown in figure 9.12, displays
menu lists slightly different than unordered lists, using a more compact
format. (Note that all types of lists can include
hypertext
links, as well as many other HTML elements besides simple text.)
Unlike the tag, the <MENU> element doesn't support nonstandard extensions.
Menu items can contain
hypertext links to other documents or
Internet resources. Use the <A> container to create the links, as follows:
<A HREF="home.htm">Jump to My Home Page</A>
Click the text, "Jump to My Home Page," and the browser retrieves the document HOME.HTM.
The <DIR> element functions much like the <MENU> element; it provides HTML identification to the section of text that has more potential usefulness than real functionality right now. Similar to <MENU>, <DIR> containers display with the same default settings as unordered lists. As browsers and other applications begin to support <DIR> as it's intended, it'll become more common.
The intended use for the <DIR> container limits items to 24 characters and displays the items in rows (like file directories in UNIX, or in DOS using the /W parameter). Current browsers don't support this interpretation. The <DIR> element also isn't intended to include other HTML elements, although browsers interpret them correctly. When using <DIR>, remember to close the container with the ending </DIR> tag. Figure 9.13 shows typical uses of the <DIR> container.
The <DIR> element container has few frills and little browser support.
Browsers don't provide, by default, any unique display attributes for
the <DIR> element. As with menu lists, Netscape
Navigator and
Microsoft
Internet Explorer render
directory
lists just like unordered lists (Microsoft Internet Explorer without the
bullets). My version of NCSA Mosaic also renders them as unordered lists,
though in a different font and style (see fig.
9.14).
Currently, <DIR> text displays in a single vertical column like an unordered list.
Definition lists, also called glossary lists, are a special type of list in HTML. They provide a format like a dictionary entry, with an identifiable term and indented definition paragraph. This format is especially useful when listing items with extensive descriptions, such as catalog items or company departments. The <DL> element provides both a beginning and ending line break. In the <DL> container, the <DT> tag marks the term and the <DD> tag defines the paragraph. These are both open tags, meaning they don't require a closing tag to contain the text.
The standard format of a definition list is as follows:
<DL> <DT>Term <DD>Definition of term </DL>
The <DT> tag's text should fit on a single line, but it will wrap to the next line without indenting if it runs beyond the boundary of the browser window. The <DD> tag displays a single paragraph, continuously indented one or two spaces beneath the term element's text (depending on how the browser interprets a definition list).
The draft HTML
3.0 specification provides one important optional attribute for <DL>:
COMPACT. This attribute is supposed to be interpreted as a list
with a different style, presumably with a smaller font size or more compact
font and character spacing. This could be useful for embedded definition
lists (those inside other definition, numbered, or bulleted lists), or
for graphic effect. Most browsers, however, ignore the attribute, displaying
the definition list in the standard format.
Definition lists can include other HTML
elements. The most common are physical and logical styles and other lists
containers. Although
Web
browsers can correctly interpret elements, such as headings, this is bad
HTML; their forced line breaks are not pretty to look at, and heading tags
are usually meant to define relationships in paragraphs-not within lists.
Figure 9.15 shows examples of how you can
create definition lists.
You can indent definition lists for easier reading, although browsers apply their own formatting.
Figure 9.16 shows how this document displays in Netscape Navigator. Other browsers may format this text differently.
Definition lists appear much the same as dictionary
entries and enable easy
reading
of each term.
In Netscape Navigator, use a horizontal rule, <HR>, on a <DD> tagged line in a definition list. The rule indents with the rest of the <DD> lines, providing an easy-to-read separator for your definition text.
There are times when it's necessary to use sublists of more than one
type within a single list. For instance, you may have a numbered list that
includes a list as one of the numbered elements. Instead of just creating
an ordered sublist, which numbers each of its items, you might prefer to
display an unordered list to differentiate the sublist (while avoiding
ordering the information as well). HTML
supports embedded combinations of all of the list types. Figure
9.17 shows a sample of combined lists.
Remember to use closing tags for all internal lists to avoid dropping the original list style.
In the example in figure 9.17, I used
three list types: numbered, bulleted, and definition. The primary list
is a numbered list of planets. Each planet has a bulleted sublist indicating
the Roman
god after whom it was named, followed by its dictionary definition. I'm
relying on the users' browsers to indent embedded lists; if I want to force
more indentation, I can embed the lists inside additional, empty lists.
For instance, instead of the following:
<OL> <LI>Small example list <LI>That I want to indent more </OL>
I can force more indentation by using:
<OL><OL> <LI>Small example list <LI>That I want to indent more </OL></OL>
Because the primary difference between lists types involves either the list item markers or the screen formatting of the elements and not the actual text representation itself, combined lists tend to display very well. Figure 9.18 shows how the samples in figure 9.17 display in a typical Web browser.
Embedded list types inherit certain formatting characteristics from the original list styles.
Beyond the types of lists and formats discussed above, there's not too
much that can be done within those elements of the HTML
2.0 and draft
HTML
3.0 specifications that are supported by the popular
Web
browsers now available. One thing in particular is the capability to specify
alternative types of bullets to be used in an unordered list. This is satisfied
by the HTML 3.0 SRC attribute to the <UL> tag. For instance,
to use a cube image as a bullet in an unordered list, specify the following:
<UL SRC="cube.gif">
Unfortunately, this attribute is not yet supported in any of the popular
Web
browsers. It is, however, possible to achieve a similar effect with a little
manual effort in your HTML code. Consider the HTML code shown in figure
9.19.
See Chapter 10 "Adding Graphics to Your Home Page"
It is possible to get alternative list formats using a little manual effort in HTML.
The <UL> and </UL> tags are used to instruct the Web
browser to set up the formatting and indentation to support an unordered
list. However, no <LI> tags are used: because you don't want the
standard bullets, you can't use the standard list item tag. Instead, each
item in the list is specified similar to the following example:
<IMG SRC="cube.gif" ALIGN=TOP> Red<BR>
The <IMG> tag is used to specify and align the graphic you want
to use as your bullet, followed by the list item. Because you're not using
the standard <LI> tag to set off each item, you need to use the <BR>
tag to insert a line break after each. This HTML
code is rendered as shown in figure 9.20.
With a little added work, nonstandard formatting and bullets can be used in your Web pages!
![]() ![]() |