FREELessons: 32Length: 5 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.5 Heading Tags

[SOUND] Up until now, we've only briefly touched on the idea of headings. So let's dig a bit deeper and learn all of the various headings that are available to us. I will return to sublime, and we have a fresh HTML page. So right now, you know about heading one tags. When it comes to headings, we have six what we call levels. So we have an h1, h2, h3, h4, h5 and h6. So the biggest thing that you need to understand is when to use each of these. And the best way I can explain it, is by thinking of importance. So, if we think only in terms of SEO, search engine optimization. If you could only tell Google one thing, you would probably wanna put it within an h1 tag. So this could be the title of a blog posting, because that's the most important thing. So, I will rename this My Awesome Blog Posting, and then here of course we would have the body of our posting. But surely you'll want to have some subheadings as well, but those won't be quite as important as the title, of course. So you might have an h2 or even an h3 for subheadings. And then you could have maybe, some additional information, and this is a nice way to separate a blog posting, so that you don't just have 30 paragraphs, you can divide it so people can easily scan. It's even possible within your subheading, you have a specific point you wanna make, that's related to this topic, but it's not a new topic on its own, so that's when you can use h3s and h4s. And this is how it works, it comes in order of importance. So now, let's think of it from the point of an actual website. Let's go visit Nettuts. Notice here, we have headings. So we have the title, which it Nettuts, but then you have each, individual blog posting. So let's see how we can figure out what that is. In Chrome, I can right-click and choose Inspect Element, and this allows me to view the HTML. Notice this little magnifying glass right here? I'm gonna click that, and now hover over whatever it is that I wish to review. In this case, it's the title. So what we can see here, is it's an heading level one tag. And you can see he's doing that for each one. So if we wanna go down and look at the next one, you can see that the same is being done here, a heading level one tag. Okay. Well, let's open up this blog posting now, and see how this one is. Once again, we have a heading one because that's the most important part of the page. And let's come down. Here, we have a subheading. So, let's see what that is. We have a heading two because it's still quite important. But it's not the most important thing on the page. Let's scroll down a little more, and it looks like there are no heading three tags, but we can add one just as easily. So why don't we go to the Conclusion, and this time I will edit the paragraph tag. Just after it, I will add heading three, hit Enter, and we are finished with that, so I will escape out. And now you can see that it's going to automatically receive any formatting that Nettuts has set up, for heading three tags. So we have a heading two, and then a nested headed three, because this isn't quite as important. We need to specify this whole chunk is our conclusion. But then we have a little bit of extra notes. So you have heading 1, 2, 3, and 4. Those are predominately what you'll use the most, h1, h2, h3 and h4. But if you can, try to use h5 and h6 as well, because these are very helpful for Google's bots, so they can figure out exactly what your postings, what your website is all about.

Back to the top