Ordered Lists

Section 1 - Introduction
Section 2 - Basics
Section 3 - Next Level
      Lists
         Ordered
         Unordered
         Definition
         You Try It
      Basic Tables
      Advanced Text
      Marquee
      Meta
      Sounds
      Comments
Section 4 - Advanced
Section 5 - Publishing
Section 6 - Extras
Appendices
Ordered List
TAGS USED: <ol> </ol> <li> </li>
These tags are used to make a numbered (ordered) list somewhere on your page. When you make this kind of list, it will indent the list from the main body of the document. It will also separate the list by a space from the lines above and below it.

When you want to make an ordered list, you must first tell the computer what you're trying to do. You do this by using the tag <ol>. This tag tells the computer to start an ordered list. Everything between the <ol> and the </ol> tag will be indented. The "ol" also tells the computer to number the items within the tag.

Within the tags, you are going to place the items that you want numbered. These are called list items, and conveniently, they are listed by the tags <li> and </li>. Let's say the you want to make a list of the seven dwarves from the Snow White saga. Here's how that would look:
Code
The most charming characters I've ever seen from Disney movies are:
<ol>
<li>Sneezy</li>
<li>Grumpy</li>
<li>Sleepy</li>
<li>Dopey</li>
<li>Happy</li>
<li>Bashful</li>
<li>Doc</li>
</ol>
because they're kinda crazy little guys.
What you see
The most charming characters I've ever seen from Disney movies are:
  1. Sneezy
  2. Grumpy
  3. Sleepy
  4. Dopey
  5. Happy
  6. Bashful
  7. Doc
because they're kinda crazy little guys.
You can have as many or as few list items as you'd like. It is recommended to keep the lists fairly short though.

There is also a way to use this list to off-set the list topic. It will indent the list topic without putting a number by it. This occurs when you put the list title between the <ol> and the <li> tag. Here's an example:
Code
Core values are important to society, and each society has different values. Some may include:
<ol>Declaration of Independence
<li>Life</li>
<li>Liberty</li>
<li>Pursuit of Happiness</li>
</ol>
<ol>Communism
<li>Common Good</li>
<li>Equality</li>
<li>Social Stability</li>
</ol>
What you see
Core values are important to society, and each society has different values. Some may include:
    Declaration of Independence
  1. Life
  2. Liberty
  3. Pursuit of happiness
    Communism
  1. Common Good
  2. Equality
  3. Social Stability
Lists may also be made into links by placing the <a href=""> tags within the <li> tags. I'll show you in the next lesson.
Back Home Forward