• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

The Programming Expert

Solving All of Your Programming Headaches

  • HTML
  • JavaScript
  • jQuery
  • PHP
  • Python
  • SAS
  • Ruby
  • About
You are here: Home / HTML / What Type of HTML List will Automatically Place a Number in Front of the Items?

What Type of HTML List will Automatically Place a Number in Front of the Items?

March 14, 2022 Leave a Comment

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.

<ol id="list1">
  <li>Blue</li>
  <li>Green</li>
  <li>Orange</li>
  <li>Yellow</li>
</ol> 

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.

<ul id="list1">
  <li>Blue</li>
  <li>Green</li>
  <li>Orange</li>
  <li>Yellow</li>
</ul> 

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.

<ul id="list1" style="list-style-type:number;">
  <li>Blue</li>
  <li>Green</li>
  <li>Orange</li>
  <li>Yellow</li>
</ul> 

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.

<style>#list1 { list-style-type:number; }</style>
<ul id="list1">
  <li>Blue</li>
  <li>Green</li>
  <li>Orange</li>
  <li>Yellow</li>
</ul> 

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:

<p>Here is a list of the top US states by size in square miles.</p>
<ul id="state-list">
  <li>Alaska - 570,641</li>
  <li>Texas - 261,914</li>
  <li>California - 155,973</li>
  <li>Montana - 145,556</li>
  <li>New Mexico - 121,365</li>
  <li>Arizona - 113,642</li>
  <li>Nevada - 109,806</li>
  <li>Colorado - 103,730</li>
  <li>Wyoming - 97,105</li>
  <li>Oregon - 96,003</li>
</ul> 
<div id="click-me" onclick="convertToNumbers()">Replace bullet points</div>

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
Replace bullet points

Full Code:

<p>Here is a list of the top US states by size in square miles.</p>
<ul id="state-list">
  <li>Alaska - 570,641</li>
  <li>Texas - 261,914</li>
  <li>California - 155,973</li>
  <li>Montana - 145,556</li>
  <li>New Mexico - 121,365</li>
  <li>Arizona - 113,642</li>
  <li>Nevada - 109,806</li>
  <li>Colorado - 103,730</li>
  <li>Wyoming - 97,105</li>
  <li>Oregon - 96,003</li>
</ul> 
<div id="click-me" onclick="convertToNumbers()">Replace bullet points</div>

<script>

function convertToNumbers(){
  document.getElementById("state-list").style.listStyleType = "number";
};

</script>

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.

Other Articles You'll Also Like:

  • 1.  What is the Correct HTML for Making a Text Input Field?
  • 2.  Can a div Have Two ids?
  • 3.  How to Filter a List of Divs with a Text Input Bar Using Javascript
  • 4.  What is the Correct HTML for Making a Text Area?
  • 5.  What is the Correct HTML for Making a Drop-Down List?
  • 6.  innerHTML vs outerHTML
  • 7.  outerHTML – How to Get and Change the outerHTML Property of an Element
  • 8.  Sort List of Divs with Data Attribute with Radio Buttons Using Javascript
  • 9.  What is the Correct HTML for Inserting a Background Image?
  • 10.  HTML span width – Set the Width of a Span in HTML

About The Programming Expert

The Programming Expert is a compilation of a programmer’s findings in the world of software development, website creation, and automation of processes.

Programming allows us to create amazing applications which make our work more efficient, repeatable and accurate.

At the end of the day, we want to be able to just push a button and let the code do it’s magic.

You can read more about us on our about page.

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

About The Programming Expert

the programming expert main image

Welcome to The Programming Expert. We are a group of US-based programming professionals who have helped companies build, maintain, and improve everything from simple websites to large-scale projects.

We built The Programming Expert to help you solve your programming problems with useful coding methods and functions in various programming languages.

Search

Learn Coding from Experts on Udemy

Looking to boost your skills and learn how to become a programming expert?

Check out the links below to view Udemy courses for learning to program in the following languages:

Copyright © 2023 · The Programming Expert · About · Privacy Policy