SEARCH: webmonkey  the web

 
The How-to Library:

Authoring
Design
Multimedia
E-Business
Programming
Backend
Jobs
---------
About Webmonkey



<advertisement>

Lycos Domains
Lycos Domain Names
Get email forwarding, domain management tools, and more for just 9.95 a year!

</advertisement>



Sign up for Elbow Grease,
our newsletter.

Authoring   HTML Basics
Ordered Lists

<ol> creates a numbered list
<li> precedes each list item
</ol> closes the numbered list

Ordered lists are, uh, numbered lists. Lists in which the items are numbered.... No big surprises here. Every numbered list should begin with <ol> and end with </ol> ("ol" stands for "ordered list"), and each list item should be set off by an <li> tag. There's no need to number and renumber list items if you switch the order around; the browser will do it for you.

A simple numbered list will go something like this:

<p>Three things I know to be true:
<ol>
<li> A cucumber and marmalade sandwich tastes 
better than it sounds.
<li> A mountain bike never belongs in the 
back seat of my mom's sedan.
<li> A head of lettuce isn't a good commuting 
snack.
</ol>

In a browser it will look like this:

Three things I know to be true:
  1. A cucumber and marmalade sandwich tastes better than it sounds.
  2. A mountain bike never belongs in the back seat of my mom's sedan.
  3. A head of lettuce isn't a good commuting snack.

All that's fine, you say, but you don't want numbers - as a matter of fact, you can't stand numbers. Well, there are options for people like you. Netscape has created list tags that use letters or Roman numerals instead. These extensions aren't support ed by all browsers, though, so some of your readers may see plain ol' numbers.

Here's how the lists break down:

<li type=1> makes numbers (1, 2, 3)
<li type=A> makes uppercase letters (A, B, C)
<li type=a> makes lowercase letters (a, b, c)
<li type=I> makes uppercase Roman numerals (I, II, III)
<li type=i> makes lowercase Roman numerals (i, ii, iii)

If you really wanted to, you could combine these tags to create something that looks like an outline:

<ol>
<li type=I>Never give bell peppers on the first date
<ol>
<li type=A>Intention could be misinterpreted
<ol>
<li type=1>Widely known as lusty vegetable
<li type=1>Viewed by some as symbol of warfare
</ol></ol></ol>

And it should look like this:

  1. Never give bell peppers on the first date
    1. Intention could be misinterpreted
      1. Widely known as lusty vegetable
      2. Viewed by some as symbol of warfare


Got a handle on it? Now try it yourself.




Learn More
View Source
Paragraphs
Headlines
Links
Mailtos
Comment tags
Bold/Italics
Font color
Font size
Teletype
Blink
Preformatted text
Background image
Background color
Blockquotes
Line breaks
Aligning text
Adding/Aligning Images
Ordered lists
Unordered lists
Definition lists
Image borders
Wrapping text