An ordered list is a collection of objects in which the order of the contents is significant. A numbered list is another name for an ordered list. The numbering method, which uses Arabic numbers, letters, and roman numerals, determines the order.
This article is a quick guide on how to code an unordered List in HTML with examples.
What does an unordered HTML list look like
An unordered list will display in the browser as follows
- Ordered list with example 1
- Ordered list with example 2
- Ordered list with example 3
What tags do you use in an ordered HTML list
To create an unordered list in HTML, you use the <ol> tags. The <ol> tags are responsible for creating the list itself and not the list items. A <li> tag is wrapped around the list item to create each list item.
How can you format an ordered HTML list
You can format your list in one of two ways, inline styling (which we don’t recommend, you can see why here) or adding a class attribute to the list and styling your list with CSS.
Ordered List coding example
In the below example, we started with the Basic HTML document structure, with basic metadata in the head tag. If you are unsure what is being added to the <head> tag you can go read our full article on Metadata to include in head tag
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Unordered List with Example</title>
</head>
<body>
<ol>
<li>Ordered List with example 1</li>
<li>Ordered List with example 2</li>
<li>Ordered List with example 2</li>
</ol>
</body>
</html>
The above code should render the following unordered list in the browser:
Attributes to use with ordered lists n HTML
With ordered lists, there are three main aspects of the list that you can control:
The starting number of the list
The order of the list ascending or descending
The type of ordered list character, for example, numerical or letters.
How to change the starting number of an ordered list in HTML
To change the starting number of an ordered list in HTML you use the attribute start and set the value to the number you want the list to start at for example the following code set the start of the list to 10.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Unordered List with Example</title>
</head>
<body>
<ol start = "10">
<li>Ordered List with example 1</li>
<li>Ordered List with example 2</li>
<li>Ordered List with example 2</li>
</ol>
</body>
</html>
Which results in the following being rendered in the browser
How to reverse the order of a list in HTML
To change the order of an ordered list in HTML you use the attribute “reversed” this will reverse the list to be displayed in descending order. The following code is used to reverse the order of a list in HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Unordered List with Example</title>
</head>
<body>
<ol reversed>
<li>Ordered List with example 1</li>
<li>Ordered List with example 2</li>
<li>Ordered List with example 2</li>
</ol>
</body>
</html>
Which will result in the following being displayed in the browser
How to change the character type of an ordered list in HTML
The type attribute determines the list character, which is by default set to a numbered list in decimal values. The character in an ordered list can be changed to lower or uppercase roman letters or lower and upper case regular letters.
The options available for the Type attribute are 1 (numeric) | i (lower case roman) | I (upper case roman) | a (lowercase letters) | A (upper case letters).
This can be seen in the following code example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Unordered List with Example</title>
</head>
<body>
<ol type="i">
<li>Ordered List with example 1</li>
<li>Ordered List with example 2</li>
<li>Ordered List with example 2</li>
</ol>
</body>
</html>
The above code would render as follows in the browser:
Conclusion
Creating an ordered list in HTML requires defining the list element with the <ol> tag and wrapping each list item in a <li> tag. Unordered and Ordered lists are very similar. The only different thing is the list is created with the <ol> tag, and rather than bullets, the ordered list renders with sequential numbing in the browser. You can find our unordered list with code examples here.
Did you know that there are more than two lists in HTML? The third list is called a description list. Click here for our description list with code examples.
I hope this article inspired you to take that leap and start learning to code. Click Here to meet other new coders like you and join our community.
