Lists in HTML: Ordered and Unordered

In the previous story I left off by extending the code example with some attributes, and this time, I would like to take some time to talk about lists in html. But what is so interesting about them? — You may ask. And the answer is nothing. Well… that’s not completely true, they do have a purpose and they are in fact often makes up a pretty important part of a web page, which is nothing more than the navigation itself. Yes, you heard it right, navigation elements are actually made up from lists.

So what are they?
– Lists are just that. Lists.

And how do you create one?
– You’re just about to find out

We have to differentiate between two types of lists, we have ordered and unordered. Let’s extend the code example in the previous part with the following:

<ol>
    <li>Learn about html</li>
    <li>Learn about tags</li>
    <li>Learn about attributes</li>
    <li>Learn about lists
        <ul>
	    <li>ordered</li>
	    <li>unordered</li>
	</ul>
    </li>
</ol>

So what do we have here? We have both types of lists, can you guess which one is which? <ol> is for ordered, while <ul> is for unordered. As you can see, we can populate these tags with <li>s or list items. It’s important to know that in order to maintain the validity of your document, you can only have one type of tag as a child for both ordered and unordered lists and that is an <li> tag.

You can validate your html online here and you can also read about the whys at this link.

As seen in the example above, you can easily make nested lists by defining either an ol or ul in one of your list item. You can keep this going as many times as you wish until the point it’s so nested that it collapses under it’s own weight and becomes a black ⚫️.

So what’s the difference between the two?

Heading over to Chrome you can clearly see the difference between the two. Ordered lists are numbered by default and unordered ones are shown with bullet points. You can of course override these styles in css (which should be kept for another article) or here inline with a style attribute, but since they are considered a bad practice I wouldn’t advice that.

Apart from the style attribute there are two list specific attributes that many don’t know of, most probably because these changes the styles of the lists and they should rather be done in css. One of them is the type attribute which can be used in conjunction with an ordered list and it is used to define the marker before the list item, here is a list of the available types:

The other attribute is used to control the number which an ordered list will start from. By default, it starts counting from 1, but you can change this with the start attribute, like so:

<ol start="100">
    <li>I'm gonna be 100</li>
    <li>I'm gonna be 101</li>
    <li>I'm gonna be 102</li>
</ol>

This will start the counting from the specified number. And last but not least, I mentioned in the beginning that they are often used for navigations, but these examples looks pretty non-interactive to me, so let’s imagine you would like to create a navigation bar at the top of your page. Well, this can simply be done by inserting anchors inside the list items and this is how it is usually done:

Pretty straightforward, huh?

I think this concludes this little tutorial, hope that you’ve learned something new today, don’t forget to check out the previous parts if you missed out on them 👋

Get access to 300+ webtips 💌

Level up your skills and master the art of frontend development with bite-sized tutorials.

We don't spam. Unsubscribe anytime.

Get Access to Webtips

---

TOC

• Part 1
• Part 2
• Part 3