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!
For technical support for our books and software contact support@mcp.com
Copyright ©1996, Que Corporation