The first major formatting element group that we're going to take a look at
are the headings.
Headings are used to structure pages and determine content hierarchy.
So to take a closer look at that,
we're going to be using the headings.htm, which you can find under 03_02 folder.
Now, at first glance in between the body tags there's a lot of content.
You'll see that I've basically kind of blocked this content up a little bit.
I've used line breaks to separate content by line, which allows it to see where
different sections are going to go or different headings, that sort of thing.
But if we were to preview this in a browser right now,
it looks just like one big giant block of content.
So, we need to start formatting it.
Now, we'll be working on this particular file really for
almost the rest of the chapter.
Just in this exercise, we're going to add the headings.
The very first line, HTML Essential Training, that is a great candidate for
a heading.
So, to add a heading, we're going to use a heading tag.
And we'll start by using the first heading, which is the h1 heading.
And remember, for headings you're going to need both an opening and a closing tag.
So, HTML Essential Training, you want an h1 opening tag at the beginning of that,
and a closing h1 tag at the end.
Now the next line below that is also a heading and I'm going to go ahead and
format this one with a heading two or an h2 tag.
Again, remember we're going to need an opening and a closing h2 tag.
If I save that and then switch back over to the browser.
Now we can see a little bit more structure coming into the page.
We have a main heading at the top and
a subheading below that and then the rest of the content below that.
Now the browser is going to show us the levels of
the heading based upon the size of the text.
That's sort of the default way for
the browser to show you that sort of hierarchy that we were talking about.
The h1 is bit larger than the h2.
That's a little bit smaller.
And that's consistent all the way down.
So headings go from h1 all the way down to h6.
And if I were to go back into my code and change the h2 to an h6, let's save that.
You can see it becomes a lot smaller.
In fact, it's even smaller than the body copy itself.
But that's basically how most user agents are going to
display headings by just using their default settings.
They're going to change the size of the text based upon which heading it is.
And as people begin learn HTML,
that's one of the things they can kind of get them into a little bit of trouble.
Especially in the early days of HTML before we started working with CSS.
It was pretty common for designers to type in a tag and
then say, well that’s not quite big enough so I’m going to make it a heading too, oh,
it’s still not big enough now I’m going to make it a h1.
Well that is the wrong way to think about headings.
What we want to do is develop a strategy around using the headings
that’s based upon the level of the heading itself and not the size of it,
because eventually you're going to be controlling all of that through CSS.
I mean, using CSS if I wanted to,
I could make the h6 actually bigger and bolder than the h1.
So, really, size has nothing to do with it,
or the visually formatting has nothing to do with it.
It's all about the structure of the document.
So if I go back into my code, I'm going to change the second one to an h1,
and then let's add some additional headings.
So we're just going to use h1's to sort of illustrate the concept
of properly structuring a file.
Below that we're going to find a line that says adding headings.
I'm going to make that an h1.
If I scroll down a little bit, I will also see using paragraphs.
I'll make that an h1,
and then finally line breaks and I'll format that using an h1.
So let me go ahead and save that, and then go back into the browser.
So we can see now that we have definitive sections, if you will,
within our page, but because of the fact that we used h1's for
all of them each one of them has exactly the same level of importance.
And that's what headings are doing for us.
They're denoting the level of importance of that content.
Now if we just sort of scan this,
we can that they really probably shouldn't all be important.
HTML Essential Training is the name of the course.
So that's probably the most important heading.
Formatting page content is the heading for this particular page.
So that's secondary, just below that, and then the other headings, adding headings
using paragraphs and line breaks, they're all probably subheadings of that one and
all three of them are, are the same level of importance.
It doesn't look like any one of those three should be more important than
the other.
So if I wanted to note that using headings in my page structure,
this is what I'm going to do.
I'm going to go back into my file and I'll switch the second heading back to a h2.
And then after that, I want to take each of those headings and make that am h3.
So I'm going to scroll down, we're using paragraphs.
Line breaks.
And go ahead and make that h3.
So I'm going to save that, go back up, and preview my page.
Now that's perfect.
That's exactly what I'm looking for.
So prior to HTML5,
the only sectioning elements that we had for our page were headers.
Now, with the addition of HTML5,
we also add some sectioning elements, that have been added that we can use.
And we'll talk about them a little bit later in the course.
But honestly, headings are really still kind of the main elements that
we use when it comes to creating and ranking sections width in our page.
So, you want to think of the page as maybe like an outline.
Like if we were going to make a table of contents or
some type of outline on the page, what should that look like?
If I go back into my code editor
I've installed an extension which will scan the page and
create a document outline based on the actual formatting of the page.
So if I go up to View and choose Show Document Outline.
Don't worry about doing this.
This is just for demonstration purposes.
You can see that the level headings that we used created the following outline.
We have a main heading, a subheading underneath that, and
then subsections beneath that.
So if you think about using your headings that way it actually becomes pretty easy
for your page to develop a heading strategy and how you're going to use them.
And that's a really important part of planning your site.
So you want to make sure that you have a strategy for
how you're going to use headings within your document.
Now, before we move on, I want to give you a couple pieces of advice about using
headings and developing a strategy for how you're going to use them within a site.
Now, for the most part,
you're going to want to limit the number of h1's that you have on a page.
There are a lot of search engine optimization folks out
there that'll tell you that you should only use one h1 on a page.
I've even seen some people say that that's a rule that you kind of have to do it
that way.
Well, to be honest with you there is no hard and fast rule that says that.
As a matter of fact, the specification says that you can use multiple h1's, and
even Google who really should know about search engine optimization,
they tell you that you don't get punish for using more than h1 on the page.
They're just looking as to whether or not they're being used logically.
So, if you have two top level headings that denote two sections of
equal importance, there's really nothing wrong with doing that,
you just need to be logical in your approach to doing it.
The next that you want to do, is you don't want to skip a series of headings.
On this page, for example, we went from h1 to an h2 to the h3 for the sub sections.
Well, we wouldn't want to jump straight down to an h5.
We wouldn't want to go h1, h2, h5.
The only time that you might change that is if you have a site wide strategy and
an element was going to be in h6 based on the way it was formatted.
You didn't have an h5 and h4 above it.
But for the most part, you want to go in order.
You don't want to skip things based on that.
So one of the things that you're going to need to do as you begin planning your
websites is think about the content that shows up on each and every page.
Then, based on that content, you can begin to develop a heading strategy that denotes
the importance of the sections that you are going to be creating.
Just be sure to remember that using headings on your page should be
driven by properly structuring the information and
not by the visual formatting requirements of the page's content.