How to create a number list

You use <ul> to make a bullet point list, so what kind of list do you make with the <ol> tag? A Number List. So like a bullet list, we use the tags <li> after it to make points, but instead of points, they will show up as numbers in order from 1 to which ever you like and stop at.

This is the code for a simple Number List

<ol>
<li>Number 1</li>
<li>Number 2</li>
<li>Number 3</li>
<li>Number 4</li>
</ol>

This is the output of the code

  1. Number 1
  2. Number 2
  3. Number 3
  4. Number 4

It is very simple to create number lists and they work very well with lists, orders, etc. But what if you want to make a list that starts with another number like 5 instead of 1? Well, we just add start="5" in the <ol> tag and the tag will look like this <ol start="5">. Please remember that like the <ul> tag, you don't need to change anything else like the <li> tags.

Here's a list that starts at 5 just by adding the start="5" in the <ol> tag

<ol start="5">

  1. Number 5
  2. Number 6
  3. Number 7
  4. Number 8

You can notice how the first number is 5 now and not 1. There are also many other things that you can do to make changes to the number list. One of them include the type like how you changed the bullets from circles to squares, etc. With numbers you can change to the types below:

To use Roman Numeros instead, use this tag <ol type="I">. Please note that the "I" in the tag is in capitals and it should always be in capitals so please do not use lowercase letters as we will explain later on what the lowercase letters do.

<ol type="I">

  1. Number 1
  2. Number 2
  3. Number 3
  4. Number 4

As we mentioned not to use lowercase letters to get capital Roman Numeros. If you use lowercase "i", you will get lowercase Roman Numeros.
<ol type="i">

<ol type="i">

  1. Number 1
  2. Number 2
  3. Number 3
  4. Number 4

You can also get alphabet lists with this code <ol type="A">. Just like Roman Numeros, we use the type tag but we changed the "I" to "A". Like the Roman Numeros, for capital alphabets, use capital letter in type.

<ol type="A">

  1. Number 1
  2. Number 2
  3. Number 3
  4. Number 4

So if we used lowercase letter in type, it would look like this:
<ol type="a">

<ol type="a">

  1. Number 1
  2. Number 2
  3. Number 3
  4. NUmber 4

If you ever wondered if you can use both type and start tag in the number lists, the answer is yes. HTML is all about creating and experimenting with the codes. So to get a look that you want, you could always put codes together and get that effect. Here we use the type and start.

We will use type="I" and start="5".
The code will look like

<ol type="I" start="5"
<li>Number 5</li>
<li>Number 6</li>
<li>Number 7</li>
<li>Number 8</li>
</ol>

The outcome is:

  1. Number 5
  2. Number 6
  3. Number 7
  4. Number 8

So play around with your codes and have fun and experiment with it.

Copyright Brains That Work .
Theme by Pool theme design by Borja Fernandez. ^Top^