Did You Know – HTML start, reversed and type attributes for OL element

Also available in: Français

When it comes the time to write rich copyrighting, you would love to know more about HTML5 attributes and rules to write accessible and efficient contents. Did you know that Ordered List (ol element) allows you to tweak some default values thanks to HTML attributes? Let’s find out how.

All those attributes has been deprecated in HTML4 but reintroduced in HTML5.

The start attribute

The start attribute allows you to start a list at a different value than 1. The syntax is quite simple since you only need to write an integer value in this attribute.

<ol start="3">
    <li>Your item</li>
    <!-- … -->
</ol>

The result is the following:

3. Item 3
4. Item 4
5. Item 5

The reversed attribute

The reversed attribute allows you to reverse the counter. It doesn’t reverse the “physical” order of the items, just the counting.

<ol reversed="true">
    <li>Your item</li>
    <!-- … -->
</ol>

The result is the following:

1. Julie
2. Steven
3. Aurélien

The type attribute

The type attribute is close to the list-style-type property in CSS. The goal of this attribute is to change the numbering type.

• 'a' indicates lowercase letters,
• 'A' indicates uppercase letters,
• 'i' indicates lowercase Roman numerals,
• 'I' indicates uppercase Roman numerals,
• '1' indicates numbers (default)

<ol type="I">
    <li>Your item</li>
    <!-- … -->
</ol>

The result is the following:

1. First Item
2. Second Item
3. Third One

I still recommend using the CSS property instead of the HTML attribute for maintainability reasons.

More information on ol element and attributes on the MDN.