Listing items on a web page is a common task you'll have to do as a web developer. You may have to list shopping cart items, the order of students based on their grades, dogs with the loudest bark and so on.
So you need to know the different ways you can list items using HTML. While you might think it's a trivial thing to learn, it's important. And it's one of the most commonly used features of HTML in web development.
In this article, you'll learn all about HTML listing elements, their properties, styling, and how to actually use them to create neat lists. I hope you find it helpful.
How to Make Lists in HTML
In HTML, we can list items either in an ordered or unordered fashion.
An ordered list uses numbers or some sort of notation that indicates a series of items.
For example, an ordered list can start with number 1, and continue through 2, 3, 4, and so on. Your ordered list can also start with the letter A and go through B, C, D, and so on.
Here is an example of an ordered list with students' names and marks.
Ordered list of studentsOn the other hand, we have unordered lists, like a TODO list for example. Here I am so passionate about coding that I skipped my breakfast .
Unordered TODO listThere is one more type of list called a description list that we will learn as well below.
Now let's get into a bit more detail and see how to create each type of list in HTML.
How to Make an Ordered List with HTML
In HTML, we can create an ordered list using the
- tag. The ol in the tag stands for an ordered list. Inside each of the ordered list elements
- tag.
Here is the complete HTML structure for an ordered list:
- Eat
- Code
- Sleep
The output of the above ordered list is:
So, we have the list of elements ordered with a number starting with 1 and incremented to 2 and 3. Try this CodePen and see if you can change and play around with using ol-li.
Types of Ordered Lists in HTML
What if you do not want to order your list by number? Instead, you want to order using the alphabet like A, B, C or a,b,c. You can do these by specifying the value of the type attribute of the
- tag.
- Eat
- Code
- Sleep
- Eat
- Code
- Sleep
- Eat
- Code
- Sleep
- Thirty
- Thirty One
- Thirty Two
- tags within
- and
- freeCodeCamp
- CSS-Tricks
- Traversy Media
- to create the list items.
The list items [li] inside the unordered list [ul] come with the default style of bullet points so each of the list items is preceded by a black dot.
Let's create a list of my favorite online resources to learn about web programming:
My Favorite Web Development Learning SitesThe output looks like this:
You can see the bullet points for each of the list items above, but you can customize them. We'll learn that too.
But before that, feel free to use this CodePen to change and run the code.
bullet pointsHow to Use Bullet Points with Links in HTML Lists
We can use the links [anchor tag freeCodeCamp
- CSS-Tricks
- Traversy Media
You can order the list using A, B, C letters by passing A as the type value.
The output looks like this:
Similarly, you can use lower case letters like a as the type value to list the elements with a, b, c, and so on.
Here's the output:
If you want to use Roman numerals, use the value I for an ordered list with Roman numerals:
The output looks like this:
Check out the CodePen below to try other types:
Ordered List TypesHow to Use the Start Attribute in HTML Lists
The
- element has an interesting attribute called start. You can specify a value to the start attribute to start the ordered list from a specific number.
Let's say you want to start the list with the number 30 instead of 1. You can specify the number 30 as the value of the start attribute like this:
The output looks like this:
Feel free to play around with the start attribute using this CodePen:
start attributeIncidentally, I have shared the same tips on Twitter recently. You may find some interesting discussion there as well:
Did you know, you can use the 'start' attribute with the HTML ordered list[ol] to start from a specific number?
By default, the ordered list starts from 1.
The output of the example below goes like this,
30. Eat
31. Code
32. Sleep#100DaysOfCode #DEVCommunity #html #CSS pic.twitter.com/sqB49wuK5LHow to Make an Unordered List in HTML
Let's move over to unordered lists now. We use the
- tag to create an unordered list. As usual, we need to use the
- and
- , we have to define the list items. We can define the list items using the