All TalkersCode Topics

Follow TalkersCode On Social Media

devloprr.com - A Social Media Network for developers Join Now ➔

How Can You Make A Numbered List In HTML

Last Updated : Mar 11, 2024

How Can You Make A Numbered List In HTML

In this tutorial we will show you how can you make a numbered list in HTML, in HTML, there is also a method with the help of which you are able to make a list. As we know list is of two types first one is ordered list and another is unordered list.

Here, today we come in touch with numbered list that means it’s an ordered list because as prefix it have digits.

There are also many types in ordered list like type= A, I, 1, etc. whereas simple ordered list is a list of digits type.

Here, under we will help you to understand that how we are able to make a numbered list in html.

Step By Step Guide On How Can You Make A Numbered List In HTML :-

As, numbered list is an ordered list. So, in HTML here we use ordered list tag and under this tag we give its type as 1, also if you not do this nothing happens because an ordered list usually use digits or numbers to make a list.

Here is an example to show how we able to make a numbered list in HTML.

Here we give an example of using ordered list with or without 1 as value and the result are same.

<!DOCTYPE html>
      <html>
        <head>
          <title> Title of the document<title>
        </head>
          <body>
	<ol>
        <li>
            this is number one
        </li>
        <li>
            this is number two
        </li>
        <li>
            this is number three
        </li>
        <li>
            this is number four
        </li>
    </ol>
    <ol type="1">
        <li>
            type 1 is used here
        </li>
        <li>
            there are also many other types
        </li>
        <li>
            you can also replace 1 with i
        </li>
        <li>
            there are also many other types
        </li>
    </ol>
          </body>
      </html>
  1. First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
  2. Secondly, the <html> tag is used to indicate the beginning of an HTML document.
  3. As above now <head> tag is used to contain information about web page. In this tag a <title> tag is used which helps us to specify a webpage title. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
  4. Thirdly, <body> tag is used to define the webpage body. All the contents to show on website are written here. Here, we create two ordered lists by using ol tags, which are paired tag. So, it must have a closing tag.
  5. In ol we create li which means list, you can create list as much as you want, these are also paired tag and the content which you want to specify on screen must be written inside these tags.
  6. Now, from both lists the difference is that in first, we simply create an ordered list. But in second we specify its type as 1, this is because ordered list have some types like unordered list. But if you not specify any type, no worry, by default the list is automatically select type 1 as style. Where for other style than digits you have to specify the type name.
  7. At last, the <body> and <html> tags are closed with </body> and </html> respectively.

Conclusion :-

At last, we are able to make a numbered list with the help of ordered list tag.

There are also many other types of ordered list style, that we will discuss in next further sessions. I hope this tutorial on how can you make a numbered list in HTML helps you

Author Image About Amruta

Amruta is an Experienced web developer with 4 years for experience she completed her master's with MCA and passionate about programming Languages for creating technical contents like HTML, CSS, JavaScript, Java, Python, PHP, jQuery.

Follow Amruta On Linkedin 🡪