WebDevelopersNotes logo

home-icon Home / HTML / HTML ordered lists – cool HTML tips

HTML ordered lists – cool HTML tips

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

Sponsored Links

Your comments
Star icon IMPORTANT Have a question / problem? Click here to ask an expert.

Sponsored Links

Tips

How do I view a deleted web page?
Is there a way to view a deleted web page - one that is no longer available? Yes there is and the solution is quite simple. [more...]

Fact

If you're using the default genie effect, hold down the shift key and then minimise a window. The window will now drop to the Dock in slow-mo. [more...]