Narrator: Let's keep working with text.
And in this lecture we will learn how to create lists
with bullet points and also with numbers.
And what I mean by list is basically
like a list of bullet points
like we have here and also like an ordered list
with numbers like here with 1, 2, 3 ordered elements.
Alright?
So that is very easy to do in HTML.
So let's see how.
So starting with the numbered list.
So this one here, it is here at the end
of this section of our text.
So, in the "What is HTML?" part.
So we have this paragraph, then we have this paragraph
and then we actually have another paragraph there
that we missed.
And then after that we have the list.
So let's get all of this content.
So these are the three list items
and that is the missing paragraph.
Okay, just paste all of that here.
And now I will simply wrap this element inside of a P.
And so there we have the paragraph.
So we have everything nicely structured here.
And now let's start the list.
So the element to start a ordered list
which is what a list with numbers is called,
We use the OL element. So, like this.
And so OL stands for ordered list.
And we opened it, so of course
we also need to close the element.
Okay, now let's give us some space here
because actually for each of the elements of the list
we need to create an element inside of the ordered list.
And so, for that we use the LI element
which stands for list item.
So list item,
open it and close it.
And then let's grab this content.
So the opening tag, let's cut it actually.
Okay, then I'm going to cut these two as well
and paste them down here.
And then simply wrap it inside some more LI elements.
So again, LI stands for list item,
while OL stands for ordered list.
Here, I'm giving it some indentation using the tab key
just so that they are visually all aligned
as child elements of the ordered list.
So, maybe you noticed how I'm using the terms
child elements and parent elements.
So, whenever we have an element inside of another,
basically the container of another element is the parent.
So in this case, that's the ordered list.
And then the elements that are inside the parent
are the child elements.
Alright.
But let's go back here and reload it.
And indeed there is our ordered list.
Nice. So the Google Chrome browser understands our code
and knows that it should render it
as a list of ordered numbers.
So 1, 2, 3.
And of course it then automatically applies these numbers
without us having to do anything.
And if we edit another element
let's say we would even add it here at the beginning
that would then become the first element.
Oh, sorry.
So that would then, as I was saying,
become the first element.
And indeed now we have four of them
and this one is the first.
This one we don't want.
Let's get rid of it.
Nice. So that is one of the lists.
And then the other one is this one here in the
"Why should you learn HTML?" part.
And again, there is, uh, some other content here.
So let's go ahead and grab all of this.
So from this content file here.
So this is the heading and now we need all of this.
Copy and paste.
And so once again
I will start by wrapping these into paragraphs.
And so maybe you are starting to see
that we are really creating a nice
and tidy structure where each piece
of content is inside of some element.
So we don't have like any text floating around just inside
of the body, uh, without being in an element, right?
We always are creating a nice structure where
each element has a certain meaning.
So for example, all of these are of course paragraphs
and that's why we use the P element.
And this piece of content here is a list.
And that's why we use the ordered list element.
And so that is essentially to assign some meaning
to the content and to structure it in a logical way.
And so this then allows web browsers to display it
in a way that makes sense.
But anyway, now we have this content here.
What you want in this kind of list, like bullet points here.
And so the element that we use for that is UL.
And UL, maybe you can guess, stands for unordered list.
Alright, let's close it down here.
UL.
And so an ordered list with the numbers is OL, and the one
without numbers, which we say is unordered
because the order of the elements does not matter.
So that is then called UL, which stands for unordered list.
But then inside of the list itself, we still have to
use the LI element for the individual items.
So just like before, we need to wrap all
of these different pieces of content into an LI element.
So we already did that before, so I'm sure you know how
to do it, and maybe you saw it coming that this is
another very small coding challenge for you.
So pause the video now and do exactly the same thing
that we did up here.
So wrap each of these items in an actual LI element.
And so like this, you can keep practicing
writing some HTML on your own.
Okay, So I hope that was a simple challenge.
And so let's quickly do it here.
Alright.
So this one here actually has multiple lines,
so it ends here.
And you see that the formatting here is completely wrong
but I'm not worrying about that because
for that we have the helper tool of prettier, right?
Prettier takes care of all our formatting
but hopefully you see that without that formatting,
this looks like a complete mess, right?
It's very hard to understand.
So for example, this element here is not a child element
of P, so it should be aligned here
and we could do that manually, of course
simply by deleting this space.
But we can also just leave it to prettier
once we save the file.
Sorry.
And here I'm missing the closing slash.
And now as I was saying, as I save the file
then prettier does its magic
and nicely formatted here our elements.
Now, we also have this empty paragraph here for some reason.
So maybe I did some mistake here earlier.
So let's just delete it and save it again.
And now as we come here to our page
then indeed we have our nice unordered list down here.
Great.
So creating lists is another important part of writing HTML.
We use this all the time.
And so I hope that you had fun
with this lecture because it was quite an important one.
So before you move on
please make sure to review what we just did here.
And also think a little bit
about some of the things I said earlier,
such as the fact that each element has a different meaning,
and also that we need to use these elements
to structure our content.
So we cannot simply just dump all of our text
here into the body text and call it a day.
If we did that there would be no structure
and no logic at all.
So I just deleted some empty paragraph here
but I just wanted to show you what happens
if I select all of this.
So copy paste here basically.
So if I take it and just paste it down here.
So give it a save.
And while you see that, it's now all one big blob of text.
And HTML doesn't really care about any white space
so any of these line breaks here
they're all irrelevant to HTML.
And so if we try to load this,
you see that there is no structure at all.
So everything is just one huge line of text.
And yeah, that's it. There's no structure.
There is no meaning, there's nothing, basically.
And so, I hope that this small example showed you
the importance of basically wrapping all pieces
of content inside of an element that actually
gives that content some meaning.
Okay?
But with that, I'm leaving you and
I see you soon in the next video.