Your.Code.Web

HTML Course 7.2 Ordered lists (ol) and numbering types

7.2 Ordered Lists (ol) and Numbering Types

An ordered list (<ol>) displays a sequence of items marked by numbers, letters or Roman numerals. It’s ideal when the order of steps or ranking matters.

1. Basic Syntax

Use <ol> to start the list and <li> for each item.



    
  
  1. First item
    2. 
  
  2. Second item
    3. 
  
  3. Third item
    4.

2. Key Attributes of <ol>

Attribute Description Values
type Specifies the marker style (numbering type). '1', 'A', 'a', 'I', 'i'
start Defines the starting value for the first list item. Any positive integer
reversed Reverses the numbering sequence. Boolean attribute (just present)
value (<li>) Overrides the number for that specific item. Any integer

3. Numbering Types (type)

The type attribute changes the marker of all items in the list.



    
  
  1. Item one
    2. 
  
  2. Item two
    3. 
  
  3. Item three
    4. 





    
  
  1. Option A
    2. 
  
  2. Option B
    3. 
  
  3. Option C
    4. 





    
  
  1. step a
    2. 
  
  2. step b
    3. 
  
  3. step c
    4. 





    
  
  1. Phase I
    2. 
  
  2. Phase II
    3. 
  
  3. Phase III
    4. 





    
  
  1. part i
    2. 
  
  2. part ii
    3. 
  
  3. part iii
    4.

4. Starting at a Custom Value (start)

Use start when you want the first item to begin at a number other than 1.



    
  
  1. Jump to five
    2. 
  
  2. Then six
    3. 
  
  3. Seven
    4.

5. Reversed Ordering (reversed)

The reversed boolean attribute flips the numbering sequence, so the last item shows “1”. Combine with start to set the top number.



    
  
  1. Last step
    2. 
  
  2. Middle step
    3. 
  
  3. First step
    4. 





    
  
  1. Ten
    2. 
  
  2. Nine
    3. 
  
  3. Eight
    4.

6. Overriding Individual Values (<li value=’…’>)

Within an ordered list, individual <li> elements can override their own numbering using the value attribute.

    
  
  1. Item one
    2. 
  
  2. Jump to ten
    3. 
  
  3. Eleven follows
    4. 
  
  4. Huge number
    5. 
  
  5. One hundred one
    6.

7. Nesting Ordered Lists

You can nest ordered lists inside <li> elements. Nested lists inherit numbering unless you specify a new type.

    
  
  1. First level
    
      
      
    1. Sublevel a
      2. 
      
    2. Sublevel b
      3. 
    
    
  
    2. 
  
  2. Second level
    
      
      
    1. Sublevel V
      2. 
      
    2. Sublevel VI
      3. 
    
    
  
    3.

8. Accessibility and Semantic Tips

  • Use ordered lists for sequences where order matters (recipes, instructions, rankings).
  • Ensure nested lists remain clear to screen readers by providing context via headings or aria-label.
  • Avoid using type for styling—consider CSS (list-style-type) in production, since type is obsolete in strict HTML5.

Posted

in

by

5my9z

Tags:

Comments

Leave a Reply