Join James Williamson for an in-depth discussion in this video Structuring headers, part of HTML5: Structure, Syntax, and Semantics.
- In most HTML5 documents that I've seen, authors are putting the branding content, and occasionally the site's navigation, inside of a header element. That's great. I mean, that's what we're doing here on our trails.htm page. In fact, it's exactly what the element was designed for. However, you're not limited to using only one header per page. Often, it's semantically desirable to use a header within other distinct page regions. I wanna explore the proper use of headers and the right way to structure their content.
Before we actually begin structuring our own headers, I wanna go out to the W3C HTML5 specification and take a look at the definition of the header element. Below all of the categories and content models and all that stuff, you can see that we have a little line down here that tells us a little bit more about it. "The header element represents introductory content "for its nearest ancestor," so whoever it's inside of, "sectioning content or sectioning root," so articles, asides, block quotes, anything like that can have a header inside of it.
"A header typically contains a group "of introductory or navigational aids." To me, that's really the important part. Is it introductory content? Or is it navigation? That sort of thing. Those are the two things that really fit within a header. Okay. With that definition in mind, I wanna jump back into my trails.htm page, open from the 02_10 folder. We have our initial header. We created that earlier, when we did our initial page structure. You can see right now, it is encompassing h1, Cycle Tracks, it has a tag line below that, "your complete biking trail source" that hasn't been structured yet, and then the page's navigation. Okay.
Let's turn our attention to the tag line, "your complete biking trail source." Now. Back when the HTML5 specification first came out, we had a tag called “hgroup." What hgroup would allow you to do is, group headings together, because most people would put this tag line, or at least, for a while, would put this tag line in an h2. Cycle Tracks would get the h1, tag line would get the h2. The problem with that, of course, is that it creates a new implicit section in your document.
Most people didn't really want the tag line showing up in a document outline. It didn't really make a whole lot of sense. But they also felt like, you know, it needed some additional meaning to it. So the hgroup tag allowed us to put multiple headings in an hgroup and it would ignore all of them except for the first one, in terms of the document outline. Well, that really didn't get adopted very well by anybody, so they pulled it out of the specification and we're left to structure these tag lines and things like that, and slogans and stuff, in a way that makes the most sense to us semantically.
Now, I really don't want "your complete biking trail source" to show up in my document outline. I don't need a new section of content because it really doesn't rise to that level. Because of that, I'm not gonna structure this in a heading. In fact, I'm gonna go ahead and surround that with a paragraph tag. That really makes the most sense. I can certainly use class attributes or something like that on a paragraph to add a little more semantics to it. But for most of what we need, that is all that we need to do there. Okay. I'm gonna scroll down into our main article, or our main section of content, I should say.
Again, you can see that, each time out, we're adding a little bit more content. That's really to make sure that we're focusing on what we need to look at without being distracted by a lot of extraneous content around it. Okay. Inside the main element, we have an h2 for Trail Reviews. Then we have a link for All Trails and Ojai. This is breadcrumb navigation. Then we have a paragraph that says "Ojai Trails," so just sort of indicating that, hey, this is Ojai Trails. Well, all of this is introductory content that should be grouped together because the article follows after it.
This is all the introductory content for the main content area. With that in mind, I'm gonna highlight all of that and then wrap that in another header. Just gonna take a moment to format that up a little nicer. There we go. And then save that. Now, if I look inside the article itself, we have the title of the article, Northridge Loop, and then we have a posted date, "posted on January 17th, 2014." Again, this to me looks like introductory content.
We have more than one piece of it. We have the title, the h3, and we have a paragraph. Below that, the individual sections of the article commence. So it makes sense to go ahead and highlight this and wrap that in a header, as well. Okay. Now, inside my article, I have a header, which is identifying the title, Northridge Loop, and then also a grouping with it as introductory content, the initial posting date. If I scroll down into the comments section, I can see that, inside the comments section, I have a heading three and then I have this paragraph right here that, again, is just giving me some instructions on what you need to do to leave a comment.
Right there is introductory content to the comments section. Again, makes sense to go ahead and wrap this in a header, as well. Now, I know it looks like we're going through and creating a header on every single section. That's not gonna be necessary, however, but we do wanna be consistent with how we're structuring these headers. For example, if I go down to the individual comment here, this article element that contains that. Inside this article, I had the h4, which is heading, and then, just below that, is the paragraph which is the actual body of the comment.
Really, the only introductory content we have is the heading itself. That really doesn't warrant having to group it inside of a header. It's just a single element. All right. If I continue to scroll down, I can see that I have a section here for Rider Reviews. Again, here, the title of this particular section is Rider Reviews. That doesn't really need a header surrounding it. But if I go to the article just below that, Los Robles Trail, unless we have an author by-line, "by Danny Keys," and then a publish date, "submitted on," to really look at this as one of the clearest instances as to why the header is such a great semantic element.
Think about this for a moment. Where does the content of the article actually begin? Is it "by Danny Keys"? Is it "submitted on 06/26/14"? Absolutely not. The first bit of real content, in terms of the article text, is right there. That means that everything above this is just introductory content. The best way to show that semantically is, of course, wrapping that in a header.
Now, below that, we have an aside that has the Ojai Trail Facts. Again, there's just the heading and then below that, the actual body copy. That really doesn't need a header. But if we go below that, we have another article that has pretty much the same structure as the article above it. I'm gonna do the same thing here. I'll wrap all of that introductory content inside of a header element. Then again, I'll just try to make that look a little nicer. Then I'm gonna save that. I know it seems like we have a lot of headers here.
But really, we're simply following the header strategy for our content based off of the definition for when using them is appropriate. Like most semantic HTML tags, their use is optional. You don't have to do this. However, as you can see here, using them consistently allows you to create more meaningful markup.
- What are web semantics?
- Understanding HTML5 content models
- Supporting older browsers
- Structuring and defining HTML5 documents
- Using headings
- Building navigation
- Nesting and grouping content
- Working with HTML5 lists
- Defining link relationships
- Writing comments
- Working with meta tags
- Using microdata