HTML ordered lists – cool HTML tips

HTML ordered lists – cool HTML tips cover image
  1. Home
  2. HTML
  3. HTML ordered lists – cool HTML tips

Here is a cool HTML tip for ordered lists created using <ol> HTML tag.

The type attribute of <ol> list determines which kind of bullet will be used for listing elements.

We can use three types of bullets for the <ol> lists – Alphabet, Roman numerals and numbers/digits.
Take a look at the code below:

<ol type="1">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>

The type attribute has been set to 1, Arabic numerals (digits). This is the default and you don’t need to specify it.

Click here to see how the code is rendered

To change the bullets to roman numerals, the TYPE attribute needs to be set to i (lowercase alphabet i) or I (uppercase alphabet I). Let us check these out.

<ol type="i">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
<li>Item 11</li>
</ol>
<ol type="I">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
<li>Item 11</li>
</ol>

Click here to see how the code is rendered

Another attribute, though you may not encounter it often, is START. It takes a number as value and this specifies the number (or alphabet) with which the list would start.

<ol type="1" start="4">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>

Click here to see how the code is rendered

<ol type="A" start="10">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>

Click here to see how the code is rendered

HTML