Lists are a useful way to separate out items while showing that each item does belong together in some way. There are two types of lists: ordered lists and unordered lists.
Ordered lists number each item and so each item is shown in order starting with number 1. Below is an example of an ordered list which Aria and I wrote. Notice how each item in the list is numbered in order. This is useful for instructions which must be followed in order or when ranking the items of your list.
So if I wanted to give you instructions on how to feed me, I could use these?
Yes, if you really want.
But I feed you just fine every day, I mean just look at you.
What’s that supposed to mean?
Let's try an example together.
<body>
<h1>How To Feed Aria</h1>
<p>Instructions on how to feed Aria the cat.</p>
<ol>
<li>Find sachet of food.</li>
<li>Open sachet of food.</li>
<li>Squeeze ALL contents of the sachet onto my plate.</li>
<li>Leave the sachet for me Aria to lick later.</li>
</ol>
</body>
And here is what it looks like.
Instructions on how to feed Aria the cat.
You're fine on steps 1 and 2 but steps 3 and 4 need work.
In the above example, we have added some additional text to give more of an introduction into the list. Just like before, this text was added with the paragraph element.
Unordered lists are not numbered and so are presented as bullet points with no associated numbers.
Here is an example of an unordered list which Aria made. Notice how none of the items in the list have numbers. This is useful for when your presenting a list where each item could be anywhere in the list. In this example there is some text after the list which, just like the other examples, uses the p tag.
<body>
<h1>Good Things To Do</h1>
<ul>
<li>Sleep</li>
<li>Doze</li>
<li>Nap</li>
<li>Snooze</li>
<li>Fall Asleep</li>
</ul>
<p>These are some of my favourite things to do.</p>
<p>What are yours?</p>
</body>
This is what an unordered list looks like. See the difference between this and the ordered list?
These are some of my favourite things to do.
What are yours?
Notice how both lists use the same list item element (li tag) for each of the items in the list.
An Example Of A Snooze
Try writing code for each of these types of lists below; then you can see the difference between the two types of lists. There are other types of lists which will be covered later on, but they are all based on these two types of lists.