To make an HTML list that will automatically place a number in front of the items, we simply need to use an ordered list, ol.
- Blue
- Green
- Orange
- Yellow
This is the easiest way to have a number automatically be placed in from of every item in the list.
If you use an unordered list, as seen below, there are a couple of methods to use to change it so that a number is placed in front of each item instead of a bullet point.
- Blue
- Green
- Orange
- Yellow
For the unordered list above to have numbers in from of the items, we need to change the style of the list, which we can do through CSS, or we can do it in HTML with the style attribute. Let’s look at the style attribute inside an HTML unordered list.
- Blue
- Green
- Orange
- Yellow
As you can see in the code above, we can set the list-style-type property of the unordered list to number to make this HTML list place a number in front of the items.
The code above will display this:
- Blue
- Green
- Orange
- Yellow
We can also do this by setting the list-style-type property to number in a style tag. See how this is done below.
- Blue
- Green
- Orange
- Yellow
We prefer to have all our styles grouped together in a style tag, or in a separate CSS sheet, so we usually will go with the method above. But both examples will yield the same result.
Changing an HTML list to have numbers in front of each item using JavaScript
In this example, we will have an HTML list with bullet points to start. We will then provide a button for the user to change the bullet points to numbers using JavaScript.
The data we use for the list will be the top 10 states in terms of land size in the US. The data will come from here.
Here is the HTML code:
Here is a list of the top US states by size in square miles.
- Alaska - 570,641
- Texas - 261,914
- California - 155,973
- Montana - 145,556
- New Mexico - 121,365
- Arizona - 113,642
- Nevada - 109,806
- Colorado - 103,730
- Wyoming - 97,105
- Oregon - 96,003
Replace bullet points
We will add an onclick event to our button so that we can run a function. In the function, we will simply target the unordered list using the getElementById() method, and replace its bullet points for all the list items using the style attribute by changing the list-style-type property to number. Here is the code below:
function convertToNumbers(){
document.getElementById("state-list").style.listStyleType = "number";
};
The final code and output for this example is below:
Code Output:
Here is a list of the top US states by size in square miles.
- Alaska – 570,641
- Texas – 261,914
- California – 155,973
- Montana – 145,556
- New Mexico – 121,365
- Arizona – 113,642
- Nevada – 109,806
- Colorado – 103,730
- Wyoming – 97,105
- Oregon – 96,003
Full Code:
Here is a list of the top US states by size in square miles.
- Alaska - 570,641
- Texas - 261,914
- California - 155,973
- Montana - 145,556
- New Mexico - 121,365
- Arizona - 113,642
- Nevada - 109,806
- Colorado - 103,730
- Wyoming - 97,105
- Oregon - 96,003
Replace bullet points
Hopefully this article has been useful for you to understand how to make an HTML list that will automatically place a number in front of the list items.
