Hello guys!! Welcome to flower brackets blog. In this post we are going to learn ordered lists in html.
Ordered lists are lists that have some sequence. A sequence that can be observed.
Let’s say you have a list of countries ranked in order of population or ranking order of life expectancy.
You want to display that the list of countries on your website. In that case it would make sense if you would use an ordered list.
Because you will be able to display the ranking as in, one some country and at number two you have another country … and the list goes……
Example : learn ordered lists in html
So the example that I have here is of top 5 richest person in the world (Source: Forbes website) as on year 2017.
<!DOCTYPE html> <html> <head> <title>Learn Ordered Lists In Html</title> </head> <body> <center><h2>Ex : Ordered Lists</h2></center> <ol> <li>Bill Gates</li> <li>Warren Buffett</li> <li>Jeff Bezos</li> <li>Amancio Ortega</li> <li>Mark Zuckerberg</li> </ol> </body> </html>
So anyway let’s not concern ourselves with that. Let’s just see how we can create an ordered list in html.
The element that you have to use is the <ol> element. But before I get to that let’s see what we have in the body section first.
I have the center tag after that I have the <h2> heading tag and between the opening and closing <h2> tag I have the text “Ex : Ordered Lists”.
Then I have closed center tag. So this will appear at the center of the webpage and it’s going to be large in size.
Because, I have used the <h2> heading tag. Then on the next line I have the element “ol” which is a short form for ordered list.
Also Read – Learn Email Links In Html
And I have the corresponding closing <ol> tag and between these two tags I have several list items.
You know, to have each of list items I have used the <li> tag which is a part of the <ol> element.
You have an opening <li> tag and the closing <li> tag. In between that you have list item that you wish to display.
Bill Gates is the first item that has to go in the list because Gates is currently ranked number one. So that’s why Bill Gates is the first item.
Then you have Warren Buffet at number two, Jeff Bezos at three, Amancio Ortega at four and Mark Zuckerberg at five.
If you would open this page in google chrome this is how it would look
You would have the top five richest persons this way. One, two, three, four and five and then you would have the names.
Now let’s say you do not want to use numbers and instead you want to use alphabets.
That’s also pretty simple. All you have to do is go to the <ol> element in your page and after <ol> give a space and type in “type”.
This is an attribute for the <ol> element and as a value to it, let’s say, you want to use a small case alphabet. So you just type in “a” as shown below
<!DOCTYPE html> <html> <head> <title>Learn Ordered Lists In Html</title> </head> <body> <center><h2>Ex : Ordered Lists</h2></center> <ol type = "a"> <li>Bill Gates</li> <li>Warren Buffett</li> <li>Jeff Bezos</li> <li>Amancio Ortega</li> <li>Mark Zuckerberg</li> </ol> </body> </html>
Save the file. Go to google chrome and refresh the page
There we go we see that the numbers have been replaced by a small lowercase alphabets.
Right, if you want to use uppercase alphabets you can change like this
<ol type = "A">
To capital “A” and go back to web page. Refresh the browser
There you go. We can see that we get capital case letters now and if you want to use roman letters.
That’s also possible. Let’s say you want to use lowercase from letters. Then you just type in small “i” like this,
<ol type = "i">
Refresh the page and we see this,
We can see roman numerals this time. And let’s say you want to use uppercase roman numerals.
You type in capital “I” like this,
<ol type = "I">
Now refresh the page
This is what we see. So ordered lists are very useful and I’m sure that the websites that you have seen have used ordered lists at some place or the other.
You would find them really useful and you would want to use them at lot places.
Anyway that’s it for now. I hope you have understood how to use ordered list in html. Please subscribe to flower brackets blog.
If you find this post useful share it across social networks. (See bottom right corner of this page)