Ordered List HTML
Well, many times, you might have seen an ordered list on some webpage. By order, we mean that the markers are there following some order. There are some different marker types as well, that we can set. We can have some alphabetically ordered markers, or numerical(which are by default), or even some roman numerals.
Don’t worry if you are feeling confused. While we have a look at the example, you will get the point. Now, let’s have a look at an example, to get a clearer idea about the ordered list –
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Basic Web Page</title>
</head>
<body>
<h2>This is some list</h2>
<ol>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ol>
</body>
</html>
Note that this is just an example. You can put the content according to your requirements. You just need to save this code as a .html file so that it will be viewed as a web page.
You can use simply any browser of your choice to see how your web page looks.
If we try to open the file in the browser, the output is something like this –
You can see here that by default, the list comes with numbers. But we can change it. To change the ordering convention, you have to just give something called an attribute to the starting tag of the ordered list(<ol>).
An attribute is nothing but some additional information provided to some tag so that it can behave accordingly. The attributes are always given to the starting tag only. There are different attributes given to the different tags.
The attributes contain some value that is given to the tag to behave accordingly. They are often passed as key = value pairs inside the starting tags. Using the attributes, we can modify/ mold some properties of the tag as per our needs.
So, we will be using a type attribute in <ol> tag to change the type of the numbering it follows by default.
The following program is similar to the previous one, but this time the list will be ordered as A, B, C, D, etc.
Here is an example to understand the ordered list →
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Basic Web Page</title>
</head>
<body>
<h2>This is some list</h2>
<ol type = “A”>
<li>some item</li>
<li>some item</li>
<li>some item</li>
<li>some item</li>
<li>some item</li>
</ol>
</body>
</html>
Have a look at the output now –
As you can see, the numbering/ordering/marker is now according to the alphabet.
You can try putting different values for the type attribute and see how the changes take place. Here are some different values for the type attribute that we can use here.
| Value of the type attribute | Ordering |
| type =”1″ | This is the default type. |
| type =”a” | Numbers are replaced by lowercase alphabet |
| type =”A” | Numbers are replaced by uppercase alphabets |
| type =”I” | Numbers are replaced by roman numerals(uppercase) |
| type =”i” | Numbers are replaced by roman numerals(lowercase) |
You can also specify the start of the ordering as well. Let’s say, somehow, you do not want the numbering to start with A, but from E, then you can do it. We need to specify another attribute, which is started. With the start attribute, we need to specify from where to start the numbering. Have a look at the below example, where we are just trying to start the numbering from E, specified as letter 5.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Basic Web Page</title>
</head>
<body>
<h2>This is some list</h2>
<ol type = “A” start=”5″>
<li>some item</li>
<li>some item</li>
<li>some item</li>
<li>some item</li>
<li>some item</li>
</ol>
</body>
</html>
Have a look at the output, where we can understand, that the numbering now starts from E and not A. you can try for some other values as well.
