How to use HTML 3.2
Creating Lists in HTML
- How to Create Unordered Lists
- How to Create Ordered Lists
- How to Create Definition Lists
- How to Create Lists within Lists
Everyone makes lists. Whether you use them for groceries, to-do items, or holiday gifts and cards, lists are an important part of your life.
Lists are also important on the World Wide Web. The environment of the Web calls for information to be presented in a concise and timely manner. Lists are ideal vehicles for delivering all kinds of information on line.
As an HTML author, you have many choices for how to create and present lists. In this chapter, we'll look at ways to create unordered lists, ordered (numbered) lists, and a special type of list known as a definition list. You'll also learn how to combine multiple levels of lists.
The simplest list in HTML is the unordered, or bulleted, list.
This is ideal for listing items that have no particular hierarchy
or order of importance. Unordered lists are very common on the
Web and are used to convey items of note in a quick and concise
manner. Web browsers usually place bullets or other markers in
front of each item in an unordered list.
- It's usually a good idea to preface your list with a short paragraph describing what the list contains.
- Unordered lists are ideal for creating lists of hyperlinks
to other documents on the Web. For more information on how to
create hyperlinks, turn back to Chapter 6
- Locate the part of your HTML document where you want to insert a list.
- Begin the unordered list by typing <UL>, and
then press Enter. The <UL> tag tells the Web browser
to treat this section of text as an unordered list. Unordered
lists will usually be indented from the main document and list
items will be formatted with bullets. The size and type of bullets
used are determined by the Web browser.
- Create a heading for your list. This is an optional brief
description of what your list contains. To create a list header,
type <LH>, followed by a brief summary of the list
contents. Then type </LH> to close the list heading
tag. For example, to create a list heading for a grocery list,
you would type <LH>My Grocery List</LH>.
- To create the first item in your list, type <LI>.
Then type the text of the item itself. <LI> is an
open tag, which means that you do not need to type </LI>
at the end of each item.
- Continue typing <LI> followed by text for each item in your list. Press Enter after each item.
- Finish the unordered list by typing </UL>.
Sometimes you need to list items in a specific order. Examples of this type of list include step-by-step instructions and "Top 10" lists. HTML provides a way to do this through ordered lists. Web browsers will place a number in front of each item, increasing the number by one for each entry down the list.
- Netscape provides many extensions to ordered lists. To learn more about these extensions, refer to Chapter 13, "Using the Netscape Extensions."
- You can apply basic character formatting to list elements
and headers. For example, to make your list heading stand out
more from the list elements, you can format it in boldface by
typing <LH><B>My List</B></LH>.
- To create an ordered list, locate the place in your document
where you'd like to begin the list and type <OL>.
- To create an optional heading for the ordered list, type <LH>
followed by the heading. Then close the heading tag by typing
- To enter the first item of your list, type <LI>
followed by the item. There is no need to include a closing </LI>
- Type </OL> to close the ordered list.
Definition lists are different from other lists in HTML, because each item in a definition list contains two parts: a term and a definition. Definition lists are typically used for glossaries and dictionaries. With a little creativity, however, they can be put to use in many different ways, such as product catalogs and even poetry.
- Definition lists are extremely flexible. The information contained in a <DD> tag is not limited to simple text. You can include images, tables, and full character formatting in your definitions.
- You do not have to create a definition for every term, or
- To create a definition list in your HTML document, type <DL>
at the point where you'd like the list to begin.
- As mentioned earlier, definition lists are slightly different
from ordered and unordered lists. Each item in a definition list
is made up of two separate parts: the term and the definition.
Typically, browsers will display the term on one line and the
definition indented on the next line.
- To create a definition term, type <DT> followed
by text describing the element being defined. For example, to
begin a definition of the word apple, you would type <DT>Apple.
- To create the definition, type <DD>, followed
by the text of the definition. For example, to create a definition
for the term in the previous step, you would type <DD>a
firm, edible, rounded fruit.
- As with ordered and unordered lists, there are no closing tags for list items. Therefore, it is not necessary to type </DT> or </DD> at the end of your terms and definitions.
- Type </DL> to close your definition list.
In the beginning of this chapter, we learned that lists are extremely flexible and powerful tools in HTML. Sometimes you'll want to create lists within lists, especially when you need to create a hierarchy of items, such as in outlines or detailed instructions. Creating lists within lists is easy in HTML.
- It helps to keep your lists and list items indented in Notepad. Even though Web browsers will ignore the extra spaces, keeping everything organized this way will help you keep a handle on your HTML code.
- You can nest lists as many levels deep as you like. However,
it's good practice to limit your nesting to three levels or less
in order to make sure that the lists stay within the visible area
of the reader's Web browser.
- Begin the first list by typing <OL>. In this
example, we're assuming that the first list is an ordered list,
but in reality, it can be any type of list you want.
- Enter your list items one by one, beginning each item with
- When you reach a step that requires a nested list, begin another
list. The Web browser will automatically format this new list
to fall underneath the current item in the first list. For example,
to create a nested list under Step 2 in your original list, just
- Start entering items in your new list. When you're finished,
close the new list by typing </UL>. You must close
the new list before continuing to enter items in the original
- Enter the remaining items in the original list. Then press
Enter and type </OL> when you're finished.