AlfieWebDevTips Homefor new and experienced developers
[Home Home] [Web Development Web Development ] [Code Generators Code Generators ] [Resources Resources ] [Contact Us Contact ] |WebDevTips Privacy Privacy |
WebDevTips Pick Of The Day : Beat The Spam Bots |

Print This Page

You are here : Home - Web Development - HTML - Lists - The Ordered List

The Ordered List

Ordered lists, as with the un-ordered list are similar to bullet points. The main difference is that the lists auto number - incrementing by 1 for each item in the list. Take a look a the following table.

type dir start
  1. item 1
  2. item 2
  3. item 3
  1. item 1
  2. item 2
  3. item 3
  1. item 1
  2. item 2
  3. item 3
html code
<ol type="1">
    <li>item 1</li> 
    <li>item 2</li> 
    <li>item 3</li> 
<ol type="1" dir="rtl">
    <li>item 1</li> 
    <li>item 2</li> 
    <li>item 3</li> 
<ol type="1" start="20">
    <li>item 1</li> 
    <li>item 2</li> 
    <li>item 3</li> 

3 main attributes can be set for ordered lists they are type dir and start.

The type attribute

There are 5 list syles you can use. Heres an example.

  • <ol> example 1. 2. 3. 4. 5. *Default
  • <ol type="1"> example 1. 2. 3. 4. 5.
  • <ol type="A"> example A. B. C. D. E.
  • <ol type="a"> example a. b. c. d. e.
  • <ol type="I"> example I. II. III. IV. V.
  • <ol type="i"> example i. ii. iii. iv. v.
The start attribute
<ol start="NUM">

The start option allows you to set the number at which the list will start counting.

Here's an example of why you would want to set the start number.

Event Schedule

Todays schedule will be as follows

  1. event
  2. another event
  3. yet another event

After a break for lunch the schedule will continue with..

  1. not another event
  2. nearly the end
  3. woo hoo last one

You can all go home now :)

OK, it's not a great example but it does prove the point. The page has 2 lists with a paragraph of text in between them. Using the start attribute allows us to break out of a list for whatever reason and continue with the list again later on by setting the start attribute.

The dir attribute

The default value if none specified is the same as dir="ltr" - left to right. So, dir="rtl" is right to left :)

a look at lists | un-ordered list | ordered list
definition list

Why not discuss this article in our forum?
Other related guides : webpage basics | forms


[back to top of page]   

[labelled with icra -  - this link will open in a new window] [RSS Content]

[Copyright © WebDevTips]