Now, in the previous lesson, we took a look at what HTML is, and in this lesson, I want to get us started 1
using HTML as quickly as possible so we can learn how to write our own code and start creating websites 2
with it. 3
Now, in this lesson, we're going to be learning about one of the most important elements, the heading 4
element. 5
And this is what a heading element looks like. 6
It starts off with what's called an opening tag here (<h1>), and it ends with what's called a closing tag (</h1>). 7
Now, if you look closely, the opening and the closing tag actually have one thing that's different, 8
and it's this forward slash (/) right here. 9
And that is what makes this a closing tag. 10
And what goes in between these two tags is the content of that particular HTML element. 11
So in this case, what we're saying we want to do is we want to create a h1 heading and what the heading 12
is going to contain is these words, "Hello World." 13
Now, very often when you hear me talking about HTML, you'll hear me refer to tags and elements and 14
you'll see this on the Internet and everywhere else as well. 15
So what exactly is the difference? 16
Well, the tag refers to these bits. 17
These are tags. 18
Anything that's inside an angle bracket, we call these, "angle brackets," is a tag. 19
And they have different names. 20
So as I mentioned, this one is the opening tag, 21
and this one at the end, is of course called the closing tag. 22
Now, these are the tags. 23
So what's an element? 24
Well, the entire thing here, this is an element. That includes the content as well as any opening or 25
closing tags. 26
This is the HTML element, 27
and these parts are the tags. 28
So hopefully that'll make things a little bit clearer the next time you hear about tags and elements. 29
What is the purpose of these heading elements? 30
Well, the idea comes from book binding. 31
If you create a book and you create a table of contents like this one, you'll see that there's a sort 32
of hierarchy, right? 33
You've got the top-level headings here. 34
This would probably be a Level 1 heading, and these would be a Level 2 heading because they refer 35
to something that's more or less related to this Approvals Section. 36
And you can see inside Section 8 here, there's even another subsection 8.1, which goes into more 37
detail about some aspect of 8. 38
This in our case might be an h3 heading. 39
These levels are what we get to define using our HTML headings. 40
This is what the code would look like for all six levels of headings and remember that there is no heading 41
seven. 42
There is no such thing as an h7, that does not exist. Once you've gone to heading six, 43
that's pretty much the end as defined by the HTML people. And anything that's lower in importance, you would 44
start using a different type of tag, which will go into a little bit later on. 45
But for everything from one through to six, the structure is pretty much the same. 46
You've got an open tag, which is h1 or h6, and you've got a closing tag that has the corresponding 47
number. 48
Now, if you create a tag like this with an h1 and then you end with a different one like an h6, 49
then that's not going to work either. 50
Just remember that when you're writing your own code. 51
Now, what does this look like? 52
If we were to run this code, this is what we would get. 53
We would get different heading levels and by default, they would be styled to have different sizes. 54
So heading one being the biggest and heading six being the smallest. 55
We can of course further style this later on, but as soon as we type these headings, it just gives 56
us an indication of our levels to make sure that we've written all our code as intended. 57
And this essentially follows that structure we saw earlier on with the table of contents. 58
The Level 1 headings are the biggest and the Level 6 headings are the smallest. 59
So now that we've seen a little bit about how all of this works, let's try an exercise where we create 60
our own heading elements. 61
To download the starting files, you have to go over to the course resources for this lesson and click 62
on the 2.1 Heading Element file in order to download it. 63
Now, if you don't know where that is, then you might have missed where at the very beginning of the 64
course, there's a lesson called, "How to Download the Course Resources," and in there I show you exactly 65
how to download each of the course resources for every single lesson. 66
So if you missed that, be sure to head over there to take a look and see how you can do this. 67
Now, once you've downloaded this file, it's really important that you extract it or what we call unzipping. 68
Now, the first thing I want you to do is to create a folder for all of your Web Development Projects, 69
and you can create that folder anywhere you like on your desktop in your C: drive, in your username 70
section, wherever you want, but just call it Web Development Projects, like this. 71
Now, once you've created that folder, then I want you to go ahead and open up the zipped file that you 72
just downloaded by double clicking on it. 73
And once you've opened up that zipped file, I want you to drag it into your Web Development Projects folder, 74
like this. 75
And then you'll be able to access them right here. 76
Now, the next step is we're going to open it up in VS Code. 77
Inside VS Code, go to File and we're going to create a New Window. 78
Now open up the Explorer here, 79
and then when we're here, we're going to open up our Web Development Projects folder that we just created, 80
and you should be able to see that folder, Heading Element. 81
Now, if for some reason this is not working for you, especially if you're on Windows, this might 82
be because you haven't actually extracted this folder properly. 83
So again, make sure that you double-click on the zipped file, or on Windows, 84
you can also right-click on it and click E xtract. 85
And then once you've done that, drag that folder that's been extracted into your Web Development 86
Projects folder and open up that folder inside your VS Code. 87
When you're here, you can see that there are three files in this folder called 2.1 Heading Element. 88
One is the index.html. 89
This is where you're going to be writing your code and I've got some starting code for you which we're 90
going to need to modify in order to complete this challenge. 91
Now you've also got the solution, which I don't recommend looking at until you've completed the challenge, 92
just to check your code or see if there's any differences. 93
Now notice how I've added a little bit here so that you don't accidentally see it unless you wanted 94
to. 95
But if you want to see the solution, just scroll down and you'll see it down there. 96
The goal of this exercise is to make the code here, create a website that looks like this. 97
Remember previously when we did our setup and download for VS Code, I showed you how to install the 98
extension, Live Preview. 99
If you don't see Live Preview when you click on extensions, that might mean that you've missed out 100
on some parts of that video. 101
So please go back to the setup and download videos for VS Code because there's some other things that 102
I need you to set up as well. 103
Make sure you don't skip any of these lessons unless you know exactly what you're doing and you're really 104
familiar with everything. 105
What that Live Preview allows us to do is to go into our code file index.html, right-click on it and 106
click Show Preview. 107
So it should now open up another pane and you can see it shows us our book chapters. Section 1, 108
Chapter 1, Chapter 2, Chapter 3, Sections and Diagrams and Subsections. 109
Unfortunately, everything seems to be just on one long line, and if you drag it out, you can see 110
it's just one long line. 111
There's no formatting at all and there's no indication about hierarchy. 112
So that's where the challenge comes in. 113
You're going to use what you learned about heading elements in order to format this code here in the 114
index.html so that we end up with something that looks like this. 115
So we want the preview to show us Heading 1 elements, Heading 2 elements, Heading 3 elements. 116
And this one, this Diagram 1, is actually a Heading 4 element. 117
So you should have h1 through to h4 in your code here. 118
So now is the time to pause me in the video, and try to complete this challenge. 119
And after you're done, then you can resume the video and we'll walk through the solution together. Pause 120
the video now and give it a go. 121
All right. 122
So we're going to have a single h1 element up here, which is going to be for this word, Book. 123
So we're going to put an h1 element right here, and we're going to drag our, "Book," which is the 124
content 125
remember, in between these two tags, that's how our heading tags are formatted. 126
Now, the next one are these Chapter 1, Chapter 2, Chapter 3 sections, and they're all going 127
to be the next level of hierarchy, which is an h2. 128
So let's do that for all three of them. 129
And then we can move on to our h3's, which is going to be the sections within the chapters. 130
And now I'm just going to fast forward through the rest of the code so that you don't get bored. 131
And then finally, this Diagram, which belongs inside Section 1, in Chapter 2, is going to be the 132
final and the lowest level of hierarchy, which is an h4. 133
And once we've completed all of this code, you can check yourself against the solution code and you 134
should see it's pretty much the same. 135
Now, one of the things that you'll find is when you hit Save using command+ S or using File, Save, you'll 136
see that it auto-formats our code so that we lose any of the indentation. 137
Don't worry if this happens to you, it's perfectly normal. 138
And if we check ourselves against the solution, you can see they match 139
exactly, 140
and we end up with the same result as the goal image, which is what we were aiming for. 141
How did you manage that? 142
Don't worry 143
if you got things wrong, this is where it's safe to go wrong and try things because we're just learning. 144
There's no tests and there's nobody watching you. 145
All that matters is you're actually learning stuff. 146
That's what's important. 147
Have a play around with the code. 148
Don't worry, if you do anything wrong, there's always a solution, 149
and me here to help you. 150
There's a couple of things to note in terms of do's and don'ts when it comes to heading elements that 151
I want to talk to you about. 152
One important rule is notice how in our exercise there was only one h1. 153
It's not good practice to have more than one h1, because the h1 is the very top-level heading. 154
Imagine the h1 as the book title and the table of contents as including the other parts. 155
So maybe the h2 would be the first chapter. 156
Don't have more than one h1, 157
instead, if you need another subtitle or another level of heading, then go to the h2 or h3 or all 158
of the other ones up until h6. 159
Now the other thing to watch out for is don't skip a level. 160
When you're creating heading elements, don't go straight from h1 to h3. 161
If you have an h3, there should also be an h2 somewhere on that web page. 162
Instead, I recommend to just go in order when you have an h1 that you've created and then you realize 163
you need another heading, then go to an h2. 164
And then if you need another level of heading that's even lower in priority, go to an h3. 165
Don't jump between the different level headings. 166
These are not things that will break your code. 167
Your website will still look fine even if you break all of these rules, 168
but they're just rules for convention. 169
And because we're going to be professionals, we're going to start off on the right foot and learn all 170
the rules that we need to know. 171
Now, if you wanted to read up even more on the heading elements, then I recommend going to the professional 172
tool, which is our Mozilla Developer Network Web Docs, and they have documentation for all of the 173
HTML elements that exist. 174
And when you read up on each of these pages, they tell you more details about things that you need 175
to know, and they show you some interactive examples of how it all works. 176
Now, I don't recommend reading through all of these, for all of the HTML elements, but I do recommend 177
that if you're going to use a new element that you haven't seen before and you don't know how it works, 178
you haven't had a lecture on it, then I recommend just taking a quick look at the docs and seeing some 179
examples about how they're used in a similar way that I've shown you in the lectures. 180
Now that we've learned about one of the most important HTML elements, the heading elements, in the 181
next lesson, we're going to move on to another super important element which is the paragraph element. 182
So for all of that and more, I'll see you there.