Basic Of HTML & XHTML Lesson 5

Lists, Lists, and More Lists

Building basic pages using attributes and tags that are both HTML- and XHMTL-friendly can be a daunting task. The use of lists allows for some flexibility when meeting both standards.

After completing this lesson, you should be able to:

Define and create numbered (ordered) and unordered lists
Build a basic glossary
Describe the method used to build lists nested within other lists



One of the most common HTML elements you'll use is the list. HTML 4.01 defines these three types of lists:

Numbered or ordered lists, which are typically labeled with numbers
Bulleted or unordered lists, which are typically labeled with bullets or some other symbol
Glossary lists, in which each item in the list has a term and a definition for that term, arranged so that the term is somehow highlighted or drawn out from the text



List Tags

All the list tags have the following common elements:

The entire list is surrounded by the appropriate opening and closing tag for the type of list (for example,

and

or

and

).
Each list item within the list has its own tag:

and

for the glossary lists, and

for all the other lists.




Although the tags and the list items can appear in any arrangement in your HTML code, it is useful to arrange the HTML for producing lists so that the list tags are on their own.



Numbered Lists

Numbered lists are surrounded by the

...

tags (ol stands for ordered list), and each item within the list is included in the

...

(list item) tags. Each item is numbered or labeled with a counter when the list is displayed by a Web browser.













Use numbered lists only when you want to indicate that the sequence of items in the list is relevant. Ordered lists are good for steps to follow or instructions to the readers, or when you want to rank the items in a list.

If you just want to indicate that something has a number of elements that can appear in any order, use an unordered list instead.







An ordered list of steps can act as instructions, with each list item a step in the set of procedures.







Customizing Ordered Lists

HTML 3.2 provided several attributes for ordered lists. They were used to customize how the browser renders the list.

These attributes enabled you to control several features of ordered lists including which numbering scheme to use and from which number to start counting (if you don't want to start at 1).




In HTML 4.01 and XHTML 1.0, these attributes have been deprecated in favor of using style sheet properties and values that accomplish the same task.

To support older browsers, however, you might need to use these attributes on occasion. To comply with the XHTML specification, you must include a value for every attribute, and enclose those values in quotation marks.




You can customize ordered lists two ways.

HTML 3.2 provides the type attribute that can take one of five values to define which type of numbering to use on the list. Secondly, you can specify types of numbering in the tag, such as: . By default, type="1" is assumed. The five types of numbering are:

"1" — Specifies that standard Arabic numerals should be used to number the list — 1, 2, 3, 4, and so on.
"a" — Specifies that lowercase letters should be used to number the list — a, b, c, d, and so on.
"A" — Specifies that uppercase letters should be used to number the list — A, B, C, D, and so on.
"i" — Specifies that lowercase Roman numerals should be used to number the list — i, ii, iii, iv, and so on.
"I" — Specifies that uppercase Roman numerals should be used to number the list — I, II, III, IV, and so on.



NOTE

The nice thing about Web browsers is that they generally ignore attributes they don't understand. By default, type="1" is assumed. If a browser doesn't support the type attribute it will simply ignore it when it's encountered.




When the type attribute is used in the

tag, it affects the item in question and all entries following it in the list, effectively changing the numbering type in the middle of the list.

It's important to note that the attribute values are enclosed in quotation marks. Most Web browsers don't require you to use quotation marks this way, but XHTML 1.0 does.







For example, you can list the last six months of the year, and start numbering with the Roman numeral VII.




As with the type attribute, you can change the value of an entry's number at any point in a list. You do so by using the value attribute in the

tag. Assigning a value in an

tag restarts numbering in the list starting with the affected entry.

Suppose that you wanted the last three items in a list of ingredients to be 10, 11, and 12 rather than 6, 7, and 8. You can reset the numbering using the value attribute.





Unordered Lists

In unordered lists, the elements can appear in any order. An unordered list looks just like an ordered list in HTML except that the list is indicated by using ... tags rather than .

The elements of the list are separated by

, just as with ordered lists. Browsers usually format unordered lists by inserting bullets or some other symbolic marker.






Customizing Unordered Lists

As with ordered lists, unordered lists can be customized with HTML 3.2 attributes. These are deprecated in HTML 4.01.

By default, most browsers use bullets to delineate entries on unordered lists. If you use the type attribute in the tag, some browsers can display other types of markers to delineate entries. According to the HTML 3.2 specification, the type attribute can take three possible values:

"disc" — A disc or bullet; this style generally is the default.
"square" — Obviously, a square rather than a disc.
"circle" — As compared with the disc, which most browsers render as a filled circle, this value should generate an unfilled circle on compliant browsers.


For example, three unordered lists can display three different bullet types based on the type attribute in the tag.

Just as you can change the numbering scheme in the middle of an ordered list, you can change the type of bullet midstream in a list by using the type attribute in the

tag. Again, this attribute is deprecated in HTML 4.01.




An alternative approach is to use style declarations to specify the bullet type for a list or list item. The property to set is list-style-type. To change the style from disc (the default) to square, you would use the following tag:



















Glossary Lists

Glossary lists are slightly different from other lists. Each list item in a glossary list has two parts:

A term
The term's definition

Each part of the glossary list has its own tag:

for the term, and

for its definition.

and

are both one-sided tags, and they usually occur in pairs, although most browsers can handle single terms or definitions. The entire glossary list is indicated by the tags

...

.










Nesting Lists

What happens if you put a list inside another list? Nesting lists is fine as far as HTML is concerned; just put the entire list structure inside another list as one of its elements. The nested list is indented from the rest of the list.

Lists like this work especially well for menu-like entities in which you want to show hierarchy (for example, in tables of contents) or as outlines.