More often than not, people working in IT like putting things in order. What’s the best way to do it, if not with a list? In HTML Lists Tutorial, we will see how to create lists with HTML code.
To get the most out of this post, you should know the basics of HTML. In case you don’t, just read this HTML Basics Tutorial. Or, if you have some more time, start our Full Stack Development Course from here.
What is an HTML List?
Before we start diving into writing some code, we should understand what a list is. Well, it’s pretty straight-forward: it is a sequence of items. In this sequence, the order may be important (e.g. a sequence of steps), or not (e.g. a shopping checklist).
Either case, the simplest way to explain a list is to show you one. So here it is:
- One item
- Another item
- Yet another item
In this case, we have a bullet-points list, which is also unordered. That’s because we don’t particularly care about the order of items, we could shuffle them around and the list will still make sense.
Now that you have seen an unordered list in a text everything may be clearer to you. However, don’t let that fool you: lists can be much more than that. Whenever you have a sequence of items, even outside the text, you can use a list. You could list of images or even lists of lists of other complex components.
Remember, if it is logically a list, then you can use a list.
Okay, now enough talking, it is time to dive into coding!
HTML List Tags
As you will see, a list, in reality, is not just one thing. It is made of two different types of items: the list itself, and several list items, each voice (or item) in the list. We have a tag for both.
Unordered HTML Lists
The first type we tackle in this HTML Lists Tutorial is the unordered list. As anticipated, lists of this type don’t really care about the order of the content. The tag to create those is <ul> – yes, it is the acronym of “Unordered List”.
Within this tag, you can (and should) list all the list items that are part of your list. Even here, it doesn’t get too fancy, the tag to use is <li> – yes, “List Item”.
So, here’s how to construct an unordered list with HTML:
<ul> <li>An item</li> <li>Another item</li> <li>And yet another item</li> </ul>
By default, most browsers will render this as a bullet list (each item starts with a “bullet”). However, you may change it to square, dashes, or other fancy icons. Yet, even if this is possible in HTML, you should do that with CSS.
Always with CSS, you can make the marker disappear completely. That’s useful when you mean to represent a list, but you don’t want to show any pre-made layout. That is useful in menus, for example.
Just one remark. An unordered list means the order of items in the list is not important for the meaning of the list. It doesn’t mean items will appear in random order: they will always appear from first to last (unless you do some tricks with CSS).
Ordered HTML Lists
In the second part of this HTML Lists Tutorial, we tackle ordered lists. Unlike the unordered one, here you want to represent something where the order is crucial. Typically, you do it with a list of steps, but there are also other cases. For example, if you want to refer to items later it will be much easier to say “As said in item #4” than just re-state the entire item.
Just like unordered lists, we use the <li> tag for items on the list. What changes is the outer tag, which now is <ol>. In case you haven’t figured it out, it stands for “Ordered List”.
So, here’s how to construct an ordered list in HTML.
<ol> <li>Item #1</li> <li>Second item</li> <li>Third step</li> </ol>
This will display labeling each item with a number. However, you may change that with CSS (e.g. using roman numbers, either uppercase or lowercase). Below, the result of our code.
Easy enough? This works just like an unordered list, except they will show with numbers. However, order lists bring some caveats to the picture. Most notably, in some cases you may not want to start from 1, but from a different number. This happens for example if you want to resume a previous list.
So, how to set the start number for an HTML List? This is extremely easy, we simply use the start attribute. Say we want our list to start from 10, we could do the following.
<ol start="10"> <li>Item #1</li> <li>Second item</li> <li>Third step</li> </ol>
And now check the magic, this is what will appear.
And this is it, you mastered ordered lists!
Case Study for this HTML Lists Tutorial
Trying things for yourself is just the best way to learn. This is why we are pairing this Full Stack Development Course with some hands-on exercises. Even if you are not following the course (which is free anyway), you should try several times until you master lists.
Here are some assignments you should do.
- Create a menu on all pages, where each page is a list item with a link in it. Yes, I know, we have just two pages as of now, but that’s okay. Tip: in menus, the order of items is not important for the meaning of the list.
- In the “about” page, create an ordered list that describes the baking process.
Try to do this by yourself, then check the following reference. Of course, your pages may slightly differ, but this is okay. Add some flavor to your example website, that’s the way you learn!
So, in both index.html and about.html we added the following code, right after opening the <body> tag.
<ul> <li><a href="/index.html">Home</a></li> <li><a href="/about.html">About</a></li> </ul>
Also, in about.html we removed the “Go back” button we created in a previous tutorial. We don’t need it anymore now that we have our rudimental menu.
Tip: both <ul> and <ol> can have only <li> as direct children. So, <a> must go inside <li> and not the other way around.
Finally, as the baking process, we came up with the following and place it at the end of the about.html page.
<ol> <li>We pick only the best organic flour, locally sourced from our farmers</li> <li>Our artisans carefully model the perfect dough</li> <li>Each loaf is baked in a traditional oven early in the morning</li> <li>We deliver those awesome loafs right at your doorstep</li> </ol>
You can check the full code for this exercise on GitHub.com.
Wrap Up
It is time to wrap up our HTML Lists Tutorial. So here’s a nice and easy recap (TL;DR). And guess what, it’s a list.
- A list is a collection of list items, which you make with
<li>...</li>. - If the order of items doesn’t matter (e.g. bullet list), enclose all your items in an unordered list with
<ul>...</ul>. - Instead, if it does matter, use an ordered list with
<ol>...</ol> - If you want your ordered list to start from a number different from 1, use the start attribute, as
<ol start="10">...</ol>.
For further reference, check our Full Stack Development Course on GitHub at alessandromaggio/full-stack-course. You will see all the code from our examples!
