# Definition and usage

* The **```< ol >``` HTML element** represents an ordered list of items. An ordered list can be numerical or alphabetical, which is different from an unordered list ```< ul >``` where the list items are preceded by bullet points.

* The ```< ol >``` element is used when the list is ordered and the ```< ul >``` element is used when the list is unordered.
* An ordered list is created by nesting one or more ```< li >``` elements between the opening and closing ```< ol >``` tags.
* Alternatively, the ```< ol >``` and ```< ul >``` can be nested together.


# Attributes
| ```Attribute```  | ```Value```  |  ```Description``` |
|  :--- | :----: | :--- |
| Start  |  Number |  Specifies the start value of an ordered list |
| Type  | 1 (default; for numbers), A (for uppercase letters), a (for lowercase letters), I (for uppercase Roman numerals), i (for lowercase Roman numerals)| Specifies the kind of marker to use in the list  |
|Reversed| | This Boolean attribute specifies that the list’s items are in reverse order. Items will be numbered from high to low.|


# Code example

**Below is a simple example.**

* This example uses an ordered list to show 3 different types of language.


<ol>
  <li>Hello World!</li>
  <li>Bonjour!</li>
  <li>Buenos Dias</li>
</ol>

## Output:
 
``` 
1.Hello World!  
2.Bonjour!
3.Buenos Dias 


**Here is an example of an unordered list inside an ordered list, which is called a nested list.**

* This example uses an ordered list that is nested to show 3 different types of language.


<ol>
  <li>Hello World!</li>
  <li>Bonjour!</li>
  <li>Buenos Dias
    <ul>
      <li>Buenas Noches</li>
      <li>Buenas Tardes</li>
    </ul>
  </li>
</ol>


## Output:
```
1. Hello World!
2. Bonjour!
3. Buenos Dias
   . Buenas Noches
   . Buenas Tardes

```

**This next example uses the Roman Numeral type.**

* This example uses an ordered list to show 3 different types of language in roman numerals.

<ol type="i">
  <li>Hello World!</li>
  <li>Bonjour!</li>
  <li>Buenos Dias</li>
</ol> 

## Output: 
```
  i. Hello World!
 ii. Bonjour!
iii. Buenos Dias 
```

## Browser support

![](/api/edpresso/shot/5371464703803392/image/6533089523662848)

<ol> tag: How does the HTML ordered list work?

The `<ol>` HTML element creates an ordered list in numerical, alphabetical, or Roman numeral format, starting at a specified number.

`Attribute`	`Value`	`Description`
Start	Number	Specifies the start value of an ordered list
Type	1 (default; for numbers), A (for uppercase letters), a (for lowercase letters), I (for uppercase Roman numerals), i (for lowercase Roman numerals)	Specifies the kind of marker to use in the list
Reversed		This Boolean attribute specifies that the list’s items are in reverse order. Items will be numbered from high to low.