HTML 4.0 Sourcebook
(Publisher: John Wiley & Sons, Inc.)
Author(s): Ian S. Graham
ISBN: 0471257249
Publication Date: 04/01/98

Lists

Having beaten paragraphs into the ground, we now move on to the next component, namely the list of items seen in Figures 1.2 and 1.3. HTML supports several types of lists, the example here being an unordered (bulleted) list. An unordered list element begins with the tag <UL> and ends with a </UL>:

<UL>

   <LI>One item of the list,
   <LI>A second list item  <LI>A third list item that goes on and on and
   on to indicate that the lists can wrap right around the page and still
   be nicely formatted by the browsers.
   <LI>The final item.
</UL>

<p> Lists are exciting. You can also have ordered lists (the items are numbered)

Both the start and stop tags are mandatory—unlike the closing tag for paragraphs the </UL> that ends an unordered list cannot be omitted. Other list elements include the ordered list element OL and the description or glossary list element DL. These elements are discussed in Chapter 6: The DL element is illustrated in Figures 6.25 and 6.26, while OL is illustrated in Figures 6.27 and 6.28.

Like paragraphs, lists cannot be empty. However, unlike paragraphs, UL or OL lists can contain only one thing—LI list elements. In turn, LI elements cannot be empty, as every list item must consist of some text; however, if you want a blank item, just put in a space character or a BR element. The ending </LI> tag is not required, as the end of a list item is implied by the next <LI> or by the </UL> tag that finally terminates the list, as illustrated in this example.

An unordered lists is simply that—an unordered lists of items, each item marked by an indentation of some type and a star or bullet. It is up to the browser to format list items nicely and, as you can see in Figures 1.2 and 1.3, lynx and Netscape Navigator do very similar things. However, you will also note that these browsers do different things to the spacing that surrounds the lists; such browser-to-browser variations are common.

As mentioned, the only thing that can go directly inside a UL element is an LI element. Thus, the following markup

<UL>

    here is some non-list text inside a list
    <LI>Here is list item 1.

</UL>

is invalid. An LI element, however, can contain lots of things. For example, an LI element can contain text, the IMG element (for inline images), text emphasis (such as the STRONG element), another list, paragraphs, and even a fill-in HTML form. It cannot contain a heading element. Heading elements can only be directly inside the BODY, or inside a FORM (for fill-in forms) or a BLOCKQUOTE (for quoted text) element. FORMs and BLOCKQUOTEs are discussed in Examples 6 and 7 in Chapter 2.)

---

TIP: Avoid Extra Spaces Inside Elements

Do not leave spaces between the <LI> tag and the content of the list item. This is because the space will be treated as a whitespace, which will affect the indentation for the particular list item. Thus, the two items

<LI>  Item 1
<LI>Item 2

will be indented differently due to the extra whitespace in front of “Item 1.” This is a subtle point, but will come up often when you are trying to format list items (LI) or table cells (TD, TH, discussed in Examples 8 and 9 in Chapter 2). In general, it is safest to omit spaces between the tags and the enclosed text.

---

Lists Within Lists

You can include lists within lists. For example, the markup

<OL>

    <LI>ordered list Item 1
    <LI>ordered list Item 2
       <UL>
          <LI>unordered item under ordered list item 2
          <LI>unordered item under ordered list item 2
       </UL>
    <LI>ordered list Item 3

</OL>

indicates an ordered list that in turn contains an unordered list under the second ordered list item.

Horizontal Rules

The final element in Figure 1.1 is the HR or horizontal rule element. This element simply draws a horizontal dividing line across the page, and it is useful for dividing sections. This is also an empty element, since it does not act on a body of text.

Lessons from Example 1

1.  Titles should be short and descriptive of the document content.

2.  HTML is a hierarchical set of markup instructions. The outer layer of this organization, showing the basic document structure, is:

|-- <HTML>
| ...  <HEAD>
| |--  .. document head ..
| |   </HEAD>
| |--  <BODY>
|     .. document body ..
|    </BODY>
|--- </HTML>

The TITLE goes inside the HEAD, while the text to be displayed goes inside the BODY.

3.  Extra white spaces, tabs, and blank lines are irrelevant in the formatting of a document; the only thing that affects the display of the document by the browser is the placement of the HTML markup tags. You should, however, avoid spaces between start tags and the text being marked up by the tags—this can lead to extra space, for example, between a list bullet and the content of a list item.

4.  Heading elements (H1 through H6) can only go inside the BODY, FORM, or BLOCKQUOTE elements.

5.  UL and OL lists can contain only LI (list item) elements. The LI elements can contain text, images, and other lists, but cannot contain headings.

Example 1 Exercises

It is time to start creating HTML documents! Using your favorite text or HTML editor (it doesn’t matter which one), start creating Web pages—you can use the examples in this book as a starting point, if you wish. All the example documents in this book can be found at either of the URLs:

www.utoronto.ca/ian/books/html4ed/

www.wiley.com/compbooks/graham/

Once you’ve created a page, save it on your computer as a disk file. Make sure that you save it with the filename extension .html or .htm. Remember that a Web browser uses the filename extension to determine the type of the file, and these two extensions imply an HTML document. Once the file is saved to disk, you should start up a Web browser and view the document. All browsers provide an “Open File...” mechanism for loading in and viewing files from the local disk. If you have more than one browser, try viewing the document with these different programs—this helps you appreciate (and adjust for!) the different capabilities of the different browsers.

Once the file is created and can be displayed by the browser, it is time to start editing the document, adding headings, lists, and other elements. In this process, concentrate on following the rules of HTML. Chapter 6 gives these rules in detail, so you can check there if you are not sure about the placement of a given element.

Example 2: Simple Images and Hypertext Links

Example 1 illustrated how HTML can be used to mark up the logical organization of a single document. This second example illustrates the hypertext capabilities of HTML. The example consists of two documents, ex2a.html, and ex2b.html, with a hypertext link from one to the other. The documents are shown in Figures 1.4 and 1.9, respectively. Ex2a.html also includes inline images, here used to illustrate some of the issues involved when using images in your documents. Notice how space characters are used to indent and align the tags, in order to make the raw HTML easier to read.

The Example Document

We will first examine Figure 1.4, namely the contents of the file ex2a.html. The first paragraph contains only text. The second paragraph is similar, except that it contains three images, included via the IMG element <IMG SRC=“home.gif”>. Home.gif is a GIF format image file; I know this by the .gif filename extension (and, of course, because I created it). GIF files are one of the common image formats that can be included within HTML documents.