Section 5.3. HTML Tags for Lists

5.3. HTML Tags for Lists

Once you've mastered paragraphs and headings, it's time to move to HTML's other set of tags for organizing textthe list tags. HTML gives you three types of lists you can create:

  • Ordered lists give each item in a list a number or a letter (as in 1, 2, 3 or A, B, C). They're handy when sequence is important, like when you're listing off a series of steps that tell your relatives how to drive to your house.

  • Unordered lists are also known as bulleted lists, because next to each item is a bullet. You can control what the bullet looks like, to some degree. You're reading a bulleted list right now.

  • Definition lists are handy for displaying terms followed by definitions or descriptions. For example, the dictionary is one huge definition list. In a Web page, the terms are left-aligned, and the definition is indented underneath.

In the following sections you'll learn how to create all three types.

5.3.1. Ordered Lists

In an ordered list, each item is numbered consecutively, starting at some value (usually 1). The neat part about ordered lists in HTML is that you don't need to supply the numbers. Instead, the browser automatically adds one to the left of each list item ( sort of like the autonumber feature in Microsoft Word). This is handy for two reasons. First, it allows you to wildly insert and remove list items without screwing up your numbering. Second, the numbers and list items are carefully lined up, which isn't as easy if you're doing it on your own.

To create an ordered list, you use the <ol> tag, which is a block element. (<ol> stands for ordered list.) Then, inside the <ol> tag, you place an <li> tag for each list item you want, in order.

For example, here's an ordered lists with three items:

 <p>To wake up in the morning:</p> <ol> <li>Rub eyes.</li> <li>Assume erect position.</li> <li>Turn on light.</li> </ol> 

In a browser, you'd see this:

To wake up in the morning:

  1. Rub eyes.

  2. Assume erect position.

  3. Turn on light.

In other words, a space is inserted between the preceding paragraph and the list, as with all block elements. Next, each list item is given a number.

Ordered lists get more interesting when you mix in the start and type attributes. The start attribute allows you to start the list at a value other than 1. Here's an example that starts the counting at 5:

 <p>To wake up in the morning:</p> <ol start="5"> </ol> 

The next numbers will be 5, 6, and 7. Unfortunately, there's no way to count backward (or to automatically continue counting from a previous list elsewhere on the page).

You aren't limited to numbers in your ordered list. The type attribute lets you choose the style of numbering. You can use letters and roman numerals, as described in Table 5-1. Figure 5-11 shows a few examples.

Table 5-1. Types of ordered lists

type Attribute

Description

Example

1

Numbers

1, 2, 3, 4

a

Lowercase letters

a, b, c, d

A

Uppercase letters

A, B, C, D

i

Lowercase roman numerals

i, ii, iii, iv

I

Uppercase roman numerals

I, II, III, IV


Figure 5-11. The type attribute in action. For example, the code to start off the first list would be: <ol type="I">


5.3.2. Unordered Lists

Unordered lists are quite similar to ordered lists. The outer tag is <ul>, and each item inside is wrapped in a <li> tag. The browser indents each item in the list, and automatically draws the bullets.

The most interesting frill that comes with unordered lists is the type attribute, which lets you change the style of bullet. You can use disc (a black dot, which is the default), circle (an empty circle), or square (an empty square). Figure 5-12 shows the difference.


Tip: Most HTML editors have handy links for quickly creating the different types of lists. In Dreamweaver, look for the "ul" and "ol" icons in the Text toolbar, or select Text List. In FrontPage, choose Format Bullets and Numbering to get started.

Figure 5-12. Three flavors of the same list.


5.3.3. Definition Lists

Definition lists are perfect for creating your own online glossary. Each list item actually has two partsa term (which isn't indented) and a definition (which is indented underneath the term .

Definition lists use a slightly different tagging system than ordered and unordered lists. First, the whole list is wrapped in a <dl> tag. Inside the <dl> tag (which stands for dictionary list), you place pairs of terms and definitions. The term is wrapped in the <dt> tag (dictionary term), and the definition is placed in a <dd> tag (dictionary definition).

Here's an example:

 <dl> <dt>eat</dt> <dd>To perform successively (and successfully) the functions of mastication, humectation, and deglutition.</dd> <dt>eavesdrop</dt> <dd>Secretly to overhear a catalogue of the crimes and vices of another or yourself.</dd> <dt>economy</dt> <dd>Purchasing the barrel of whiskey that you do not need for the price of the cow that you cannot afford.</dd> </dl> 

In a browser you'd see this:

eat
To perform successively (and successfully) the functions of mastication, humectation, and deglutition.
eavesdrop
Secretly to overhear a catalogue of the crimes and vices of another or yourself.
economy
Purchasing the barrel of whiskey that you do not need for the price of the cow that you cannot afford.

5.3.4. Nesting Lists

Lists work well on their own, but you can also get fancier by placing one complete list inside another. This technique is called nesting lists, and it allows you to build multilayered outlines and detailed sequences of instructions.

To nest a list, just declare the new list inside an <li> tag in the previous list. For example, the following daily to-do list has three levels:

 <ul> <li>Monday <ol> <li>Plan schedule for week</li> <li>Complete Project X <ul style="square"> <li>Preliminary Interview</li> <li>Wild Hypothesis</li> <li>Final Report</li> </ul> </li> <li>Abuse underlings</li> </ol> </li> <li>Tuesday <ol>  <li>Revise schedule</li>  <li>Procrastinate (time permitting). If necessary, put off procrastination until another day.</li> </ol> </li> <li>Wednesday  </ul> 


Tip: When using nested lists, it's a good idea to use indents in your HTML document so you can see the different levels at a glance. Otherwise, you'll find it difficult to determine where each list item belongs.

In a nested list, the different list styles really start to become useful for distinguishing each level. Figure 5-13 shows the result of this example.

Figure 5-13. In a nested list, each subsequent list level is indented. Although you aren't limited in the number of levels you can use, you will eventually run out of room and force your text up against the right margin.




Creating Web Sites. The Missing Manual
Creating Web Sites: The Missing Manual
ISBN: B0057DA53M
EAN: N/A
Year: 2003
Pages: 135

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net