Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:15Length:1.2 hours
Getstartedhtmlcss
  • Overview
  • Transcript

2.2 Heading and Paragraph Tags

In this lesson, I will show you the standard heading tags used in HTML. Heading tags are a great way to show your reader (and search engines) what your page is all about.

2.2 Heading and Paragraph Tags

Welcome back. In this lesson we're going to discuss HTML heading tags. HTML heading tags are an important part of every website. They show the user as well as sites like Google and other search engines what's most important on the site. So let's take a look at some of them now. The first thing I wanna do is get rid of this gray background color, cuz I'm actually going to be replacing the main content on our site with real live content. And I haven't decided how I wanna style it yet, so a white background is perfectly fine. If I save that, toggle over to the site and refresh, we still have our sidebar and our top bar from the last lesson, but now we have a nice blank white canvas to work with. So, inside our main content area, let's go ahead and enter this down a couple times to make room for some html heading tags. Let's start with the h1 tag and just put, this is an h1 tag. We'll save it. We'll go back and refresh and that's the typical size and weight of an h1 tag. Now, below that, let's add an h2 tag. I'll save that and refresh. And through the miracle of copy and paste, I'm going to go ahead and do the rest of these h1 all the way through h6. Okay. Save that and refresh. And those are our different levels of headline, h1 through h6. There are a couple of things to note about heading tags. While it's not strictly required that you keep your h1s above your h2s or your h2s above your h3s, it is a very good practice. You should never have an h1 at the bottom of your website. You should never have an h6 at the top. Most of the time, if something's important enough to be an h1 tag, it should be at the top of your website. Also, you should not go from an h1 directly to an h3. Your h1 should be your top level header, then anything else that requires a header should then get an h2. Anything inside that that requires a header should get a h3, and so on and so forth. One thing to note is that you're not required to use all h1 through h6 tags when building a website. In fact, it's pretty rare for me to use an h5 or an h6 as most of the time the content doesn't really get nested down that far. So, let's assume this website sells widgets, and the most important thing for our user to know, is the different types of widgets that we sell. Let's take a look at how we could convey that using h tags. I'm gonna toggle back here, and we'll clear out all of these h tags. And I'm gonna create an h1 tag that says, We sell widgets. And let's assume we sell three different types of widgets. So I'll create an h2 tag for our first widget. Then, below that, we most likely would have a paragraph describing the widget. I'll leave that blank for now. We would then have another h2 tag, describing our second widget. And another paragraph tag to describe that, and below that, a third h2 tag for our third widget. And below that, a paragraph to describe the third widget. We'll go ahead and save that, toggle back, and refresh. Now we see, we sell widgets, as our h1. Our h2 is for our first, second, and third widget, and we can use the paragraph to describe anything about each one of those widgets. Now let's go back and actually give some details about each widget. Now I'm really not that great about making up things about fake widgets, so I'm gonna use a really cool feature of Sublime text, and that's the ability to insert Lorem Ipsum. Lorem Ipsum is fake text web designers have been using for years to put in in place of actual content. So I'm just going to type Lorem and hit Tab, and it'll automatically fill in some make-believe text that looks like actual content. And I'm gonna do the same thing for each one of these paragraphs. I'm going to save, toggle back and refresh. And now we have descriptions for each one of our widgets. More importantly, we were able to use header text to set off the most important parts of our site and our site has nice, clean, continuous flow. In future lessons, we'll continue to build out this site, adding additional HTML tags along the way. Thanks for watching.

Back to the top