All language subtitles for 016 Structuring our Page.en_US

So we already learned a couple of

very important HTML elements and are already able

to create a nice page with some nice functionality as well.

But now it's time to actually add some structure

to our document and to our elements.

And so lets now learn a couple of new HTML five elements

for that.

Now, when I said that the page is lacking some structure,

what I meant is that all of these elements

that we placed in our document,

they're all simply like appearing one after another here.

Right?

They're not really like distinguished from one another.

And especially,

they're not like grouped together in any logical way.

And so let's change that by creating

some container elements, which will then group

these elements together.

So one of the things that first come to mind,

is these links here.

So we have all of these links,

and this kind of looks like a page navigation here, right?

So a page navigation is usually what we want,

when we have a couple of links at the top of a page.

And so what we can do is to specify a special element,

and then place all the links into that element.

And the element that I mean is called nav.

So nav, which stands for navigation.

So just like this,

and now these need to be indentated,

or they should be at least.

And so when I give it a safe,

then prettier formats this automatically.

And now these four links are nicely grouped

into this container here.

So into this parent element, which is a navigation.

Now, the thing is that when we now update our page,

it does look exactly the same.

So all that happens here

is that this basically created like an invisible box,

which now contains these elements.

Okay. So the element on itself doesn't do anything,

All it does is to group these elements together.

And I understand that right now,

it doesn't really seem intuitive or logical

to be doing this, but trust me,

once we reach the section where we build some layouts

and actually also in the next section, just on CSS,

it will be very important to have all these different parts

inside of their own containers.

All right.

So looking at our page,

basically, this is now the navigation,

and this here is the heading.

Then after that we have all of this here,

which is basically our post. So our blog post.

Right?

So this is kind of different than this top part.

So all of this is the blog post again,

and this is like the top part of our webpage.

So what we can do is to group this navigation

and the heading into a header element.

All right. So let's do that.

So this is another HTML five element,

which is called header.

And the header basically means

the top part of a web document,

or it can also mean the top part of some smaller unit,

as we will actually see in a minute.

And anyway, this is just an introduction

to these HTML five elements.

We will use them even more,

and I will explain them even more

when we build our big website project

a little bit later in this course.

Okay?

So again, nothing will have changed visually,

but now we told the browser like,

"Hey, all of this here is our webpage header".

So it's the top part of our page.

Then all of this, as I mentioned before,

starting here, is the main part of the page.

Which is in this case, a blog post.

And a very common element that we can use for a blog post,

is the article element.

So this is yet another container element,

but this time it's one for an article.

And article in this context actually does not simply mean

a written article like this,

but it can also be like things from the real world.

Like a computer is an article or a pen or a phone.

So all of these are articles,

and if somehow we needed to represent a computer in HTML,

then an article would also be a good element for that.

Okay?

And so now basically,

our body has only two direct child elements.

We only have a header and we have article.

Which is when we look at our page, really all we have.

So we have to header and we have all of the rest,

which is our article.

So that is now nicely placed inside of its own box.

Now, one thing that you might ask,

"Well, if these boxes,

all of them don't do anything,

then why don't we call all of them just nav,

or all of them header or all of them article?"

So this one could also be article

and nothing would change on the page.

Right?

However, we don't do that for something called

semantic HTML.

And I will explain briefly what that means

in the next video.

But now continuing even further,

we can actually do some more grouping here

inside of our article.

So notice how we have kind of this top part here

of the article.

So basically the heading,

the author here,

and also the image.

So this is kind of the top part of our article.

And then here we have the content itself, right?

And so once again notice how I said,

that this is like the top part of the article.

So just like this here

is the top part of the entire webpage.

So what that means is that here again,

we should use a header element to basically mark that up.

And by marking up, I mean,

to basically describe the content in a better way.

So as I just said, inside of the article,

we want to also have a header.

So inside of that header,

there should be this heading,

this author image,

the author name, and then here this image.

Okay? And then closing it.

Now all of this is of course,

a little bit subjective as well.

So what seems very logical here to me,

might not be as logical for other developers.

But, I think that what we just did here,

up until this point,

is quite logical for everyone and makes sense.

So again, this one here is the header part of the article,

and with this we gave our article

a little bit more structure.

So we have the header and only after that,

then comes the rest of the content.

Okay? So this is looking quite nice already,

but finally, if we look at our demo here,

there's actually one thing missing.

And in fact, there's multiple things.

So we don't have these related posts yet,

but we will take care of that later.

But we also have this part here at the bottom.

So it's this copyright notice here.

And this kind of content that comes at the very end

of a page is what we usually call the footer.

And so there's actually, as you might've guessed

a special element for that as well in HTML five.

So, footer,

and then let's close it also,

like this.

And now let's grab actually the text from here.

Actually, it's not here.

So we have to just write it manually.

And now here we have two options.

So to write this text, we could create a paragraph

and then put that text in there.

Or we can actually also write the text right here

into this footer.

Okay? And this is in fact what I will do now.

So in this case, there is just no need here to create

yet another paragraph,

because it's going to be the only child

of this footer element here anyway.

And so there's no need to then.

So copyright,

and now here you see this copyright symbol,

which I'm sure you know.

So how do we create that?

Well, this is something called an HTML entity.

So actually this is something new.

So let me show you quickly how we do that.

So we write an ampersand like this,

and then in this case,

I already know what the name of the character that I want.

So I can just start writing "copy".

And so then I can select this one here,

or I can just write the semi-colon and then we're done.

So this HTML entity here is what represents this, "C" here.

Okay? And there entire tables for HTML entities.

And I have one on my resources page.

I think I haven't mentioned that resources page yet.

But there is a link to it in the very first text lecture

in the first section,

and also in the GitHub repository that I showed you

in one of the first lectures.

And there, you will find a link to a page,

which contains all of these HTML entities.

But anyway, we will talk a little bit more about this

later in the course, anyway.

The code Magazine.

Okay.

So written in the future,

give it a safe,

And once again, let's reload,

and as we were expecting,

the visual aspect of the page

is still the same as they mentioned at the beginning.

So these again are just important to group the content into

logical parts,

which is important for semantic HTML,

and also for styling with CSS,

as you will see in the next section.

And speaking of semantic HTML,

that is going to be the topic of our next video.

So I hope to see you there very soon.