Skip to main content.

Web Based Programming Tutorials

Homepage | Forum - Join the forum to discuss anything related to programming! | Programming Resources

Teach Yourself HTML 3.2 in 24 Hours

Teach Yourself HTML 3.2 in 24 Hours


Hour 7

Arranging Text in Lists

When you present information on paper (or with a good old-fashioned overhead projector) you probably often include lists of numbered steps or "bullet points." You've also undoubtedly written many indented lists to organize information such as terms and their definitions or the outline of a business plan. Because lists are so common, HTML provides tags which automatically indent text and add numbers or bullets in front of each listed item.

In this chapter, you'll find out how to format numbered lists, bulleted lists, and a variety of other indented lists. You will also see how the HTML tags for creating lists can be used for almost any other type of indentation you want on your Web pages. To Do: You can make the most of this chapter if you have some text that needs to be indented correctly to be presentable.

The Three Types of HTML Lists

There are three basic types of HTML lists. All three are shown in Figure 7.2, and Figure 7.1 reveals the HTML to construct them:


New Term: Ordered lists are indented lists that have numbers or letters in front of each item.


New Term: Unordered lists are indented lists with a special bullet symbol in front of each item.


New Term: Definition lists are indented lists without any number or symbol in front of each item.


Just A Minute: Remember that different Web browsers can display Web pages quite differently. The HTML standard doesn't specify exactly how Web browsers should format lists, so people using older Web browsers may not see the same indentation that you see. Software of the future may also format HTML lists differently, though all current Web browsers now display lists in almost exactly the same way.

Figure 7.1. Use <OL> and <LI> for ordered lists, <UL> and <LI> for unordered lists, and <DL>, <DT>, and <DD> for definition lists.

Figure 7.2. The three types of HTML lists, as they appear in Netscape Navigator.

Lists Within Lists

Although definition lists are officially supposed to be used for defining terms, many Web page authors use them anywhere they'd like to see some indentation. In practice, you can indent any text simply by putting <DL><DD> at the beginning of it and </DL> at the end.

You can indent items further by nesting one list inside another, like this:

<DL><DD>This item will be indented

<DL><DD>This will be indented further

<DL><DL><DD>And this will be indented very far indeed

</DL></DL></DL></DL>

Just make sure you always have the same number of closing </DL> tags as opening <DL> tags.

Ordered and unordered lists can also be nested inside one another, down to as many levels as you wish. In Figure 7.3, a complex indented outline is constructed from several unordered lists. You'll notice in Figure 7.4 that Netscape Navigator automatically uses a different type of bullet for each of the first three levels of indentation, making the list very easy to read.

Figure 7.3. You can build elaborate outlines by placing lists within lists.

As shown in Figure 7.4, Netscape Navigator will normally use a solid disc for the first-level bullet, a hollow circle for the second-level bullet, and a solid square for all deeper levels. However, you can explicitly choose which type of bullet to use for any level by using <UL TYPE="disc">, <UL TYPE="circle">, or <UL TYPE="square"> instead of <UL>.

You can even change the bullet for any single point in an unordered list by using the TYPE attribute in the <LI> tag. For example, the following would display a hollow circle in front of the words "Extra" and "Super," but a solid square in front of the word "Special."

<UL TYPE="circle">

<LI>Extra

<LI>Super

<LI TYPE="square">Special

</UL>

Figure 7.4. Multi-level unordered lists are neatly indented and bulleted for readability.


Just A Minute: Netscape Navigator is the only Web browser that currently lets you control the appearance of list bullets. All bullets will appear as solid discs in Microsoft Internet Explorer 3.0.

The TYPE attribute also works with ordered lists, but instead of choosing a type of bullet you choose the type of numbers or letters to place in front of each item. Figure 7.5 shows how to use roman numerals (TYPE="I"), capital letters (TYPE="A"), and lowercase letters (TYPE="a"), along with ordinary numbers in a multi-level list. In Figure 7.6, you can see the resulting nicely formatted outline.

Though Figure 7.5 uses only the TYPE attribute with the <OL> tag, you can also use it for specific <LI> tags within a list (though it's hard to imagine a situation where you would want to). You can also explicitly specify ordinary numbering with TYPE="1", and you can make lowercase roman numerals with TYPE="i".

Here's one more seldom-used but handy-when-you-need-it trick: You can start an ordered list with any number (or letter) with the START attribute. <OL START="3">, for example, starts a numbered list at 3 instead of 1. Individual points can be renumbered with the VALUE attribute (<LI VALUE="12">, for example).


Just A Minute: Note that you must always use numbers with the START and VALUE attributes. To make a list that starts with the letter C, for example, you need to type <OL TYPE="A" START="3">.

Figure 7.5. The TYPE attribute lets you make multi-tiered lists with both numbered and lettered points.


Coffee Break: By combining ordered, unordered, and definition lists within one another, you can organize the most complex information in a readable and attrac-tive way. To get your creative juices flowing, I've created a "list of lists" for you to browse through before you begin organizing your own HTML lists.

To check it out, go to the 24-Hour HTML Café List-O-Mania page at

http://www.mcp.com/sams/books/235-8/listlist.htm

Have some fun while you're there by trying to figure out what the real titles of the sample lists might be, based on the information they contain. Answers are given--as a nested HTML list, of course--at the end of the page.

You can also see how a list was used to enhance the 24-Hour HTML Café welcome page during the early stages of its development, at

http://www.mcp.com/sams/books/235-8/cafe7.htm

Figure 7.6. A well-formatted outline can make almost any plan look plausible.

To Do: Take a list or two of your own, and try to find the best way to present the information so that it can be easily understood.

Summary

In this chapter, you learned to create and combine three basic types of HTML lists: ordered lists, unordered lists, and definition lists. Lists can be placed within other lists to create outlines and other complex arrangements of text.

Table 7.1 lists all the tags and attributes covered in this chapter.

Table 7.1. HTML tags and attributes covered in Chapter 7.

Tag Attribute Function
<OL>...</OL> An ordered (numbered) list.
TYPE="..." The type of numerals used to label the list. Possible values are A, a, I, i, 1.
START="..." The value with which to start this list.
<UL>...</UL> An unordered (bulleted) list.
TYPE="..." The bullet dingbat used to mark list items. Possible values are DISC, CIRCLE, and SQUARE.
<LI> A list item for use with <OL> or <UL>.
TYPE="..." The type of bullet or number used to label this item. Possible values are DISC, CIRCLE, SQUARE, A, a, I, i, 1.
VALUE="..." The numeric value this list item should have (affects this item and all below it in <OL> lists).
<DL>...</DL> A definition list.
<DT> A definition term, as part of a definition list.
<DD> The corresponding definition to a definition term, as part of a definition list.

Q&A

Q I used <UL TYPE="square">, but the bullets still came out round, not square.

A
Are you using Netscape Navigator version 2.0 or higher? Alternate bullet types don't show up in any other Web browser yet, but they probably will in future versions.

Q I've seen pages on the Internet that use three-dimensional looking little balls or other special graphics for bullets. How do they do that?

A
That trick is a little bit beyond what this chapter covers. You'll find out how to do it yourself in Chapter 9, "Putting Images on a Web Page."

Quiz Questions

1. Write the HTML to create the following ordered list:
X. Xylophone

Y. Yak

Z. Zebra

2.
How would you indent a single word and put a square bullet in front of it?

3.
Use a definition list to show that the word "glunch" means "a look of disdain, anger, or displeasure" and the word "glumpy" means "sullen, morose, or sulky."

4.
Write the HTML to create the following indentation effect:
Apple pie,

pudding,

and pancake,

All begin with an A.

Answers

1. <OL TYPE="A" START="24"><LI>Xylophone<LI>Yak<LI>Zebra</OL>

The following alternative will also do the same thing:
<OL TYPE="A"><LI VALUE="24">Xylophone<LI>Yak<LI>Zebra</OL>

2.
<UL TYPE="square"><LI>Supercalifragilisticexpealidocious</UL>

(Putting the TYPE="square" in the <LI> tag would give the same result, because there's only one item in this list.)

3.
<DL>
<DT>glunch<DD>a look of disdain, anger, or displeasure
<DT>glumpy<DD>sullen, morose, or sulky
</DL>

4.
<DL><DT>Apple pie,<DD>pudding,<DL><DD>and pancake,</DL> All begin with an A.</DL>

Note that blank lines will appear above and below and pancake, in Microsoft Internet Explorer, but not in Netscape Navigator.

Activities