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
As seen in the example above, you can easily make nested lists by defining either an
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:
|type='1'||The list items will be numbered with numbers (this is the default styling)|
|type='A'||The list items will be numbered with uppercase letters|
|type='a'||The list items will be numbered with lowercase letters|
|type='I'||The list items will be numbered with uppercase roman numbers|
|type='i'||The list items will be numbered with lowercase roman numbers|
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 👋
- Access exclusive interactive lessons
- Unlimited access to hundreds of tutorials
- Remove ads to learn without distractions