The three <ol> tag attributes

, by

Reversed

The new HTML5 attribute for the <ol> tag is the reversed attribute. With it, the list order, means only the increment, usually ascending gets descending (10,9,8,…).

Example

<ol>
<li>Ziggy Stardust</li>
<li>Moonage Daydream</li>
<li>velvet goldmine</li>
</ol>

<ol reversed>
<li>Ziggy Stardust</li>
<li>Moonage Daydream</li>
<li>velvet goldmine</li>
</ol>
  1. Ziggy Stardust
  2. Moonage Daydream
  3. velvet goldmine
  1. Ziggy Stardust
  2. Moonage Daydream
  3. velvet goldmine

You can also write <ol reversed="reversed"> or <ol reversed="">

Browser support for the reversed attribute

  • Chrome 18
  • Safari 6.0
  • iOS 6.0
  • RIM Tablet OS 2.1
  • BlackBerry 10

Type

This one allows you to choose the type of increment you want. You have a choice between : “1”, “a”, “A”, “i” or “I”.

Example

<ol type="a">
<li>Ziggy Stardust</li>
<li>Moonage Daydream</li>
<li>velvet goldmine</li>
</ol>

<ol type="I">
<li>Ziggy Stardust</li>
<li>Moonage Daydream</li>
<li>velvet goldmine</li>
</ol>
  1. Ziggy Stardust
  2. Moonage Daydream
  3. velvet goldmine
  1. Ziggy Stardust
  2. Moonage Daydream
  3. velvet goldmine

Start

This one tells the counter increment where to start counting.

Example

<ol start="5">
<li>Ziggy Stardust</li>
<li>Moonage Daydream</li>
<li>velvet goldmine</li>
</ol>

<ol type="A" start="5">
<li>Ziggy Stardust</li>
<li>Moonage Daydream</li>
<li>velvet goldmine</li>
</ol>

<ol type="i" start="5" reversed>
<li>Ziggy Stardust</li>
<li>Moonage Daydream</li>
<li>velvet goldmine</li>
</ol>
  1. Ziggy Stardust
  2. Moonage Daydream
  3. velvet goldmine
  1. Ziggy Stardust
  2. Moonage Daydream
  3. velvet goldmine
  1. Ziggy Stardust
  2. Moonage Daydream
  3. velvet goldmine