Original subtitles

Now, in the previous lesson, we took a look at what is and in this lesson I want to 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 going to 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 want to do is we want to 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 H three 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 H seven that does not exist once you've gone to heading six.

That's pretty much the end as defined by the people and anything that's lower in importance, you would

start using a different type of tag, which will 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 H one or H six, and you've got a closing tag that has the corresponding

number.

Now if you create a tag like this with an H one and then you end with a different one like an H six,

then that's not going to 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 miss 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 going to open it up in VS code.

Inside vs code, go to file and we're going to 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 zip 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 going to be writing your code and I've got some starting code for you which we're

going to 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 want to 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.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 going to 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 H one through to H four 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 going to have a single h one element up here, which is going to be for this word book.

So we're going to put an H one 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 H two.

So let's do that for all three of them.

And then we can move on to our H three, which is going to be the sections within the chapters.

And now I'm just going to 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 H four.

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 the 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 tests 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 do's and don'ts when it comes to heading elements that

I want to 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 H1 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 web page.

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 going to be professionals, we're going to 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 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 going to 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 going to move on to another super important element which is the paragraph element.

So for all of that and more, I'll see you there.