• Post category:CSS

Easy Steps to Create Numbered list in HTML

How can you make a numbered list in HTML

In this article, we will see how can you make a numbered list in HTML. To make a numbered list , we need to use the ordered list tag <ol> and list item tag <li>. That is similar to an unordered list but in this case, it creates a numbered list. Let’s see an example:

<h1>Daily Routines</h1>
   <ol>
      <li>Get Up</li>
      <li>Brush Teeth</li>
      <li>get Dressed</li>
      <li>Go To college</li>
      <li>Learn Something</li>
   </ol>

Output:

how can you make a numbered list in html

  1. In the above code, we have created <ol> tag and inside it 5 <li> tags. You can create more list items by using <li> tag and you should give values inside it.
  2. We have provided list values ‚Äč‚Äčinside separate list item tags. By default, the list items style is set to number.
  3. See, the above output, the numbered list is displayed successfully.
  4. So, this is how you create a numbered list.

If you want to change the numbered list style, you need to set CSS “list-style” property for <ol> tag. You can give a value of ‘upper-roman’, ‘lower-roman’, ‘lower-alpha’, ‘upper-alpha’, etc to the “list-style” property. Let’s see the example:

Ex:

ol{
  list-style: lower-roman;
}

If you set the CSS “list-style” property to “lower-roman” for <ol> tag. Your output will look like the image below:

how can you make a numbered list

I hope you have understood a little about numbered list in this article. If you have any doubts about this then please comment below.

Leave a Reply