We already worked on the full-week HTML file.
And now it's time to explore the content of this page
in a bit more detail.
Specifically I would like to focus onto
these three paragraphs down here.
These.
These paragraphs contain information about the challenges
I want to accomplish in the end.
Now we can use paragraphs to display this information,
but from a semantic point of view, it's not totally correct.
Because if you think about other tools, for example,
Word if you write an essay, for example,
if you have such information, such related information,
all three paragraphs contain challenges.
Well then another way to display such information
would be preferred, right?
Wouldn't you use a list in Word? I think you would do so.
And the great thing is that HTML also comes with
a list element to achieve exactly that.
We actually have two lists elements, two list types
to be more precise.
We'll dive into this in a few seconds,
but before we do so it's very important to keep in mind
that the list is again, all about the semantics.
We will see that the two list types we have
are styled a bit differently by default,
but it's important to keep in mind that it's all about
the semantics for other developers and for the browser
to exactly state what should be displayed here.
You have content that is related in a way?
Well then use a list.
That's the reason why we change our logic here
from the paragraph to this list.
Now, how can we create such lists now in HTML?
Well, for this, I'll add two dummy lists first,
down here, maybe a bit.
And the first list type I want to use
is the so-called ordered list.
Ordered list, written like this with the OL tag,
with tab you can auto complete this.
The ordered list, as the name indicates,
is a list which contains list items in a certain order.
An example for this would be if you want to display
the different weekdays in a list,
so Monday, Tuesday, and so on.
Typically such weekdays follow a certain order,
well then an ordered list would be your choice.
The other list type we have is the so-called unordered list.
Here we use the UL tag, this one here.
And in opposite to the ordered list,
the unordered list contains related information
where the order is not that important.
An example here could be a list of things you want to buy
in the grocery store, let's say tomatoes,
apples, and bananas.
Well, if you buy tomatoes, apples, or bananas,
or apples, bananas, and tomatoes,
I don't think this makes a big difference.
It's just important to keep these items in a list,
then an unordered list would be your way to go.
This is just the semantic logic for the list,
so to differentiate the list type,
but it wouldn't be a list without any list items
and list items are added with the LI tag.
So we can add a list item like this,
LI, first list item, ordered list.
Let's say this is Monday.
Second list item, this could be Tuesday,
and third list item here in our ordered list,
this could be Wednesday.
For the unordered list, the logic of the list items
is exactly the same,
just that we have, well unordered list items in here.
So this could be something like, as I said, apples,
then maybe bananas.
And finally, we could have tomatoes in here.
And with that, our two list types are completed.
Let's save this now, and let's go back to our website
and you see from a general styling point of view,
both lists kind of look the same.
But if we focus on the left part here,
you see that the ordered list by default
comes with an ordering, so to say.
So one, two, three, four.
The unordered list just comes with bullet points.
As I mentioned already,
this visual differentiation is not very important.
As you learned already throughout this course,
we can change the style of elements with CSS.
So the core focus here are the semantics, again.
However, we don't need these two lists here at the moment,
so we can get rid of these.
And now it's your turn.
Make sure to turn these three paragraphs into a list now.
So you have to decide which list type you want to use,
ordered list or unordered list.
And then you have to create three list items,
well, to turn these three paragraphs into these lists items.
Good luck with this little challenge.
We'll solve this in a few seconds together.