-: 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 let's now learn
a couple of new HTML5 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 intendated
or they should be at least.
And so when I give it a safe
then prettier formats just 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 HTML5 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 HTML5 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 a 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.
An 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, 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 the 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 have guessed
a special element for that as well in HTML5.
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 could 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 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 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 semicolon, and then we're done.
So this HTML entity here is what represents this C here.
Okay, and there are 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 save.
And once again, let's reload.
And as we were expecting,
the visual aspect of the page is still the same
as I mentioned in 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.