Original subtitles

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.

All right. 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 open 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.

All right, 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 added 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,

but 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 some other content here,

so let's go ahead and grab all of this

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 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,

which 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.

All right, 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.

All right.

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?

So 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.

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,

well, 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.

So if we try to load this,

you see (laughs) that there is no structure at all.

So everything is just one huge line of text and yeah,

that's it, there is no structure, there is no meaning.

There is 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.