Narrator: Now in the previous lesson
we took a look at what HTML is,
and in this lesson I wanna get us started using HTML
as quickly as possible so we can learn how
to write our own code and start creating websites with it.
Now in this lesson, we're gonna be learning about one
of the most important elements, the heading element,
and this is what a heading element looks like.
It starts off with what's called an opening tag here
and it ends with what's called a closing tag.
Now if you look closely, the opening and the closing tag
actually have one thing that's different
and it's this forward slash right here.
And that is what makes this a closing tag.
And what goes in between these two tags is the content
of that particular HTML element.
So in this case, what we're saying we wanna do
is we wanna create a h1 heading.
And what the heading is going to contain
is these words, hello world.
Now very often when you hear me talking about HTML,
you'll hear me refer to tags and elements
and you'll see this on the internet
and everywhere else as well.
So what exactly is the difference?
Well, the tag refers to these bits.
These are tags.
Anything that's inside an angle bracket,
we call these angle brackets, is a tag
and they have different names.
So as I mentioned, this one is the opening tag
and this one at the end is,
of course, called the closing tag.
Now these are the tags.
So what's an element?
Well, the entire thing here, this is an element.
That includes the content as well
as any opening or closing tags.
This is the HTML element and these parts are the tags.
So hopefully that'll make things a little bit
clearer the next time you hear about tags and elements.
What is the purpose of these heading elements?
Well, the idea comes from book binding.
If you create a book
and you create a table of contents like this one,
you'll see that there's a sort of hierarchy, right?
You've got the top level headings here.
This would probably be a level one heading
and these would be a level two heading
because they refer to something that's more
or less related to this approval section.
And you can see inside section eight here,
there's even another subsection, 8.1,
which goes into more detail about some aspect of eight.
This, in our case, might be an h3 heading.
These levels are what we get to define
using our HTML headings.
This is what the code would look
like for all six level of headings.
And remember that there is no heading seven.
There is no such thing as an h7.
That does not exist.
Once you've gone to heading six,
that's pretty much the end as defined by the HTML people
and anything that's lower in importance,
you would start using a different type of tag
which we'll go into a little bit later on.
But for everything from one through to six,
the structure is pretty much the same.
You've got an open tag, which is h1 or h6,
and you've got a closing tag
that has the corresponding number.
Now if you create a tag like this with an h1
and then you end with a different one like an h6,
then that's not gonna work either.
Just remember that when you're writing your own code.
Now what does this look like?
If we were to run this code, this is what we would get.
We would get different heading levels
and by default they would be styled to have different sizes,
so heading one being the biggest
and heading six being the smallest.
We can of course further style this later on
but as soon as we type these headings,
it just gives us an indication of our levels to make sure
that we've written all our code as intended.
And this essentially follows that structure
we saw earlier on with the table of contents.
The level one headings are the biggest
and the level six headings are the smallest.
So now that we've seen a little bit about how
all of this works, let's try an exercise
where we create our own heading elements.
To download the starting files, you have to go
over to the course resources for this lesson and click
on the 2.1 Heading Element file in order to download it.
Now if you don't know where that is,
then you might have missed where at the very beginning
of the course, there's a lesson called,
How to Download the Course Resources.
And in there I show you exactly how to download
each of the course resources for every single lesson.
So if you missed that, be sure to head over there
to take a look and see how you can do this.
Now once you've downloaded this file, it's really important
that you extract it or what we call unzipping.
Now the first thing I want you to do is to create a folder
for all of your web development projects
and you can create that folder anywhere you like
on your desktop, in your C drive,
in your username section, wherever you want,
but just call it web development projects like this.
Now once you've created that folder,
then I want you to go ahead and open up the ZIP file
that you just downloaded by double-clicking on it.
And once you've opened up that ZIP file,
I want you to drag it
into your web development projects folder like this
and then you'll be able to access them right here.
Now the next step is we're gonna open it up in VS Code.
Inside VS Code, go to file
and we're gonna create a new window.
Now open up the explorer here and then when we're here,
we're going to open up our web development
projects folder that we just created
and you should be able to see that folder, Heading Element.
Now if for some reason this is not working for you
especially if you're on Windows, this might be
because you haven't actually extracted this folder properly.
So again, make sure that you double-click
on the zipped file or on Windows,
you can also right-click on it and click extract.
And then once you've done that,
drag that folder that's been extracted
into your web development projects folder
and open up that folder inside your VS Code.
When you're here, you can see that there are three files
in this folder called 2.1 Heading Element.
One is the index.html.
This is where you're gonna be writing your code
and I've got some starting code
for you which we're gonna need to modify
in order to complete this challenge.
Now you've also got the solution
which I don't recommend looking at
until you've completed the challenge,
just to check your code or see if there's any differences.
Now notice how I've added a little bit here
so that you don't accidentally see it unless you wanted to.
But if you wanna see the solution,
just scroll down and you'll see it down there.
The goal of this exercise is to make the code here
create a website that looks like this.
Remember previously when we did our setup
and download for VS Code,
I showed you how to install the extension live preview?
If you don't see live preview when you click on extensions,
that might mean that you've missed
out on some parts of that video.
So please go back to the setup and download videos
for VS Code because there's some other things
that I need you to set up as well.
Make sure you don't skip any of these lessons
unless you know exactly what you're doing
and you're really familiar with everything.
What that live preview allows us to do is to go
into our code file index or HTML,
right-click on it and click show preview.
So it should now open up another pane
and you can see it shows us our book chapters,
section one, chapter one, chapter two,
chapter three, sections and diagrams and subsections.
Unfortunately, everything seems to be
just on one long line and if you drag it out,
you can see it's just one long line.
There's no formatting at all
and there's no indication about hierarchy.
So that's where the challenge comes in.
You're gonna use what you learned about heading elements
in order to format this code here in the index.html
so that we end up with something that looks like this.
So we want the preview to show us heading one elements,
heading two elements, heading three elements.
And this one, this diagram one
is actually a heading four element.
So you should have h1 through to h4 in your code here.
So now is the time to pause me
in the video and try to complete this challenge.
And after you're done, then you can resume the video
and we'll walk through the solution together.
Pause the video now and give it a go.
All right, so we're gonna have a single h1 element up here,
which is going to be for this word book.
So we're going to put an h1 element right here
and we're going to drag our book, which is the content,
remember, in between these two tags.
That's how our heading tags are formatted.
Now the next one are these chapter one, chapter two,
chapter three sections, and they're all going
to be the next level of hierarchy, which is an h2.
So let's do that for all three of them.
And then we can move on to our h3s,
which is going to be the sections within the chapters.
And now I'm just gonna fast forward
through the rest of the code so that you don't get bored.
And then finally, this diagram, which belongs
inside section one in chapter two is going to be the final
and the lowest level of hierarchy, which is an h4.
And once we've completed all of this code,
you can check yourself against the solution code
and you should see it's pretty much the same.
Now one of the things that you'll find is when
you hit save using Command + S or using file, save,
you'll see that it auto-formats our code
so that we lose any of the indentation.
Don't worry if this happens to you.
It's perfectly normal.
And if we check ourselves against our solution
you can see they match exactly,
and we end up with the same result as the goal image
which is what we were aiming for.
How did you manage that?
Don't worry if you got things wrong.
This is where it's safe to go wrong
and try things because we're just learning.
There's no test and there's nobody watching you.
All that matters is you're actually learning stuff.
That's what's important.
Have a play around with the code.
Don't worry if you do anything wrong.
There's always a solution and me here to help you.
There's a couple of things to note
in terms of dos and don'ts when it comes
to heading elements that I wanna talk to you about.
One important rule is notice how
in our exercise there was only one h1.
It's not good practice to have more than one h1s,
because the h1 is the very top level heading.
Imagine the h1 as the book title
and the table of contents as including the other parts.
So maybe the h2 would be the first chapter.
Don't have more than one h1.
Instead, if you need another subtitle
or another level of heading,
then go to the h2 or h3
or all of the other ones up until h6.
Now the other thing to watch out for is don't
skip a level when you're creating heading elements.
Don't go straight from h1 to h3.
If you have an h3, there should also be
an h2 somewhere on that webpage.
Instead, I recommend to just go in order.
When you have an h1 that you've created
and then you realize you need another heading,
then go to an h2.
And then if you need another level
of heading that's even lower in priority, go to an h3.
Don't jump between the different level headings.
These are not things that will break your code.
Your website will still look fine
even if you break all of these rules,
but they're just rules for convention.
And because we're gonna be professionals,
we're gonna start off on the right foot
and learn all the rules that we need to know.
Now if you wanted to read up
even more on the HTML heading elements,
then I recommend going to the professional tool
which is our Mozilla Developer Network Web Docs
and they have documentation for all
of the HTML elements that exist.
And when you read up on each of these pages,
they tell you more details
about things that you need to know
and they show you some interactive examples
of how it all works.
Now I don't recommend reading through all
of these for all of the HTML elements,
but I do recommend that if you're gonna use
a new element that you haven't seen before
and you don't know how it works,
you haven't had a lecture on it,
then I recommend just taking a quick look
at the docs and seeing some examples
about how they're used, in a similar way
that I've shown you in the lectures.
Now that we've learned about one
of the most important HTML elements,
the heading elements, in the next lesson
we're gonna move on to another super important element
which is the paragraph element.
So for all of that and more, I'll see you there.