## HTML <ol> `type` Attribute
The `type` attribute of the `
` (ordered list) tag specifies the kind of marker (numbering style) to use for the list items.
By default, ordered lists use standard decimal numbers, but the `type` attribute allows you to easily switch to alphabetical letters or Roman numerals in both uppercase and lowercase.
---
## Browser Support
The `type` attribute is universally supported across all major modern web browsers:
* Google Chrome
* Mozilla Firefox
* Microsoft Edge / Internet Explorer
* Safari
* Opera
---
## Definition and Usage
The `type` attribute defines the rendering style of the list item markers. It is highly useful when creating outlines, legal documents, academic papers, or multi-level nested lists where different levels require distinct numbering styles.
### HTML 4.01 vs. HTML5 Changes
In HTML 4.01, the `type` attribute of the `` element was deprecated in favor of CSS (`list-style-type`). However, **in HTML5, the `type` attribute has been re-introduced and is no longer deprecated**. It is now considered semantically valid when the list numbering style has a specific meaning (e.g., in a legal document where "Section A" is structurally different from "Section 1").
---
## Syntax
```html
- List Item
```
### Attribute Values
| Value | Description | Example Output |
| :--- | :--- | :--- |
| `1` | **Default**. Decimal numbers. | 1, 2, 3, 4 |
| `a` | Lowercase alphabetical sequence. | a, b, c, d |
| `A` | Uppercase alphabetical sequence. | A, B, C, D |
| `i` | Lowercase Roman numerals. | i, ii, iii, iv |
| `I` | Uppercase Roman numerals. | I, II, III, IV |
---
## Code Examples
### Example 1: Uppercase Roman Numerals
This example demonstrates how to create an ordered list using uppercase Roman numerals (`type="I"`).
```html
Ordered List - Uppercase Roman Numerals
Ingredients Guide
- Coffee
- Tea
- Milk
```
### Example 2: Lowercase Alphabetical List
This example demonstrates how to create an ordered list using lowercase letters (`type="a"`).
```html
Step-by-Step Instructions
- Boil water.
- Add tea leaves.
- Steep for 5 minutes and serve.
```
### Example 3: Nested Lists with Different Types
You can nest multiple `` elements and assign different `type` attributes to create structured outlines.
```html
- Front-end Technologies
- HTML
- CSS
- Flexbox
- Grid
- JavaScript
- Back-end Technologies
- Node.js
- Python
```
---
## Best Practices and Considerations
1. **Semantic Meaning vs. Presentation**: Use the HTML `type` attribute when the numbering style is critical to the document's structure or meaning (such as legal clauses or academic outlines). If you are changing the list style purely for visual design preferences, use the CSS `list-style-type` property instead:
```css
ol {
list-style-type: lower-roman;
}
```
2. **Combining with `start`**: You can combine the `type` attribute with the `start` attribute to begin numbering from a specific value. The `start` attribute always accepts an integer, regardless of the `type` value:
```html
- Third Item
- Fourth Item
```
YouTip