HTML Ordered List Example

Ordered list contains order of decimal numbers, roman numbers or alphabet characters. To create ordered list <ol> tag used. Inside <ol> tag <li> - list item tag is used to create list item.

HTML - OL - Ordered List Example

1. <ol> tag without type attribute

<ol>
   <li>Ordered list - 1</li>
   <li>Ordered list - 2</li>
   <li>Ordered list - 3</li>
</ol>

OUTPUT:

1. Ordered list - 1
2. Ordered list - 2
3. Ordered list - 3

2. <ol> tag with type='A'

<ol type='A'>
   <li>Ordered list - 1</li>
   <li>Ordered list - 2</li>
   <li>Ordered list - 3</li>
</ol>

OUTPUT:

1. Ordered list - 1
2. Ordered list - 2
3. Ordered list - 3

3. <ol> tag with type='a'

<ol type='a'>
   <li>Ordered list - 1</li>
   <li>Ordered list - 2</li>
   <li>Ordered list - 3</li>
</ol>

OUTPUT:

1. Ordered list - 1
2. Ordered list - 2
3. Ordered list - 3

4. <ol> tag with type='I'

<ol type='I'>
   <li>Ordered list - 1</li>
   <li>Ordered list - 2</li>
   <li>Ordered list - 3</li>
</ol>

OUTPUT:

1. Ordered list - 1
2. Ordered list - 2
3. Ordered list - 3

5. <ol> tag with type='i'

<ol type='i'>
   <li>Ordered list - 1</li>
   <li>Ordered list - 2</li>
   <li>Ordered list - 3</li>
</ol>

OUTPUT:

1. Ordered list - 1
2. Ordered list - 2
3. Ordered list - 3

6. Nesting of ordered list

<ol>
  <li>Ordered list - 1</li>
  <li>Ordered list - 2</li>
  <ol type='A'>
    <li>Ordered list - 2.1</li>
    <li>Ordered list - 2.2</li>
    <li>Ordered list - 2.3</li>
  </ol>
  <li>Ordered list - 3</li>
</ol>

OUTPUT:

1. Ordered list - 1
2. Ordered list - 2
1. Ordered list - 2.1
2. Ordered list - 2.2
3. Ordered list - 2.3
3. Ordered list - 3

Note: In nesting of list, you can mix unordered list with ordered list.

7. <ol> tag with start attribute

<ol start='2'>
   <li>Ordered list - 2</li>
   <li>Ordered list - 3</li>
   <li>Ordered list - 4</li>
</ol>

OUTPUT:

2. Ordered list - 2
3. Ordered list - 3
4. Ordered list - 4