Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
Gain a deeper understanding of HTML5 and learn how to create richer, more meaningful web pages with structural tags and descriptive attributes. In this course, author James Williamson presents an overview of HTML5 and its development, defines the new tags and attributes, and discusses how browsers parse and display HTML5 content. The course also includes step-by-step instructions for constructing an HTML5 document with a header and footer, navigation, content groups, and formatting.
While we only have four sectioning elements--article, aside, nave, and section-- headings can also create sections, sometimes unexpectedly. The rules governing the strategies concerning heading use have changed from HTML 4 to HTML5 as well, so it's worth taking the time to explore heading use in HTML5. Understanding how they are used to section content, and how policies governing their use of changed will really help you to create your own strategy for using them. So once again, here I am at the HTML5 Outliner, and we are going to start by exploring how headings can create implicit sections in your documents.
So I am just going to scroll down again to this area where we can kind of enter our own code. So once again, I am just going to go ahead and get rid of everything except for the doctype and the title. I am just going to start by adding three headings here. So I am going to do an h1 and I am just going to say, "Explore California." Close the h1 tag. Now I may add another h1, and this is going to say, "Our Tours." Then finally, our last section, which is going to be Tour Reviews, and that again, is in an h1 tag. So now I am going to go ahead and outline this, and notice that we have three items--Explore California, Our Tours and Tour Reviews--and they are on the same level.
And they are on the same level because they have the same ranking. So again, if I go back here, these are all three h1s. All three are going to create in this section, and Explore California is actually the title of the body section, but then Our Tours and Tour Reviews creates new implicit sections that are on the same level as that, because they have the same ranking. However, what happens if, for example, these are found inside other sectional content? Well, that changes things. So if I were to encase both of these in a section--and feel free to go ahead do that--what does that do for us in terms of our outline? Because now they are encased in these sections, if I outline them, now they are considered nested.
They are inside other sections. So remember, the first heading of a section is its title, regardless of its ranking--h1, h2, h3, it doesn't really matter. So in this case, instead of now being a flat document where everything is the same level because of the same rakings, because they are nested inside of interior sections, they are now nested in the outline as well. Okay, well, let's do that in a slightly different way. Let's say we get rid of this sections again and we change the ranking of headings. So now instead of h1, what if these were h2s? If I outline that, notice I get exactly the same structure.
So, two ways of achieving the exact same effect, and really what comes down to is, do you need those sectioning content or are you okay with the sort of more sparse document structure here of using these implicit sections? Let's take this a little bit further. Now, in HTML 4, the only way to section page content was to use different heading rankings, just like this, to create these sort of implicit nested sections. So, in that case, how you used your headings was really, really important, because it created your document structure. Now often, you would only use one h1 on the page, for example, because that would title the page and assist the screen readers and search engine rankings and things like that.
Now HTML5 gives us a whole new set of rules, as these individual sections now have their own distinct hierarchy apart from the page. This means that it's possible, or maybe even desirable, to use more than one h1 per page. So let's go ahead and illustrate that. All right, so right after our Explore California, what I am going to do is I am going to take this Tours and I am going to change that back to an h1 tag, and then I am going to nest it. And I am going to nest this in a section. There we go. I am going to go and open that up. And I am going to create a little bit of space and close my section, because what I am going to do is I am going to nest some additional headings inside of this.
As a matter of fact, if you really want to sort of see the structure, you could just go ahead and put everything on one line. So, the next thing I am going to do is do another h2, and this is going to be Cycle California, so that's the first tour that we are going to describe is Cycle California, and we are going to do it with an h2 tag. And then we have got another tour that's going to follow directly after that, so yet another h2 tag, and that is Backpack California. So now, let's turn our attention to Tour Reviews. We're going to do the same thing here. So, Tour Reviews is going to be nested inside of a section. Again, I am just going to give myself a little bit of space and close the section. And then Tour Reviews is also going to be changed back to an h1 tag.
Remember, it's the beginning of a new hierarchy of tags because it's inside this sort of nested section. Now inside that we are going to do just like a couple of Tour Reviews. The first one h2, it's going to be the tour of the Los Robles Canyon, and feel free to make up your own page structure if you like. After that, we are going to do an h2, Firebreak Trail. As a matter of fact, I really encourage that. I think you will learn a lot more if you come in and say, well, what if I did this, and what if I did this? And sometimes the results are going to surprise you. Okay now, what if I wanted to nest something within Firebreak Trail? Well, because I have started with h1s in the section and went h2s, that's going to nest them.
So, a further nesting of this would be, of course, an h3. So it's just the same sort of rule hierarchy we used before. So, Upper Loop, that will be the first one, and then the second one is going to be Lower Loop. At the very end of all this, past the bottom of the section, I am going to add one more tag. Now, I am going to do an h2 here, and I am going to say, "Monthly Specials." Now think about what I have done here. All these are nested sections, so we have a nested section here, we have a nested section here, and then we have our h1 tag.
So we have h1, nested section, nested section, and then we have an h2. So if I went ahead and outlined this, notice that Explore California, our root, is the first item. And then we have Our Tours, Tour Reviews, which are nested inside of that. And then Monthly Specials enjoys the exact same level within document outline as the two nested sections, and that's because it has an h2. So in terms of the Explore California hierarchy, it's nested inside of it. If it was an h1, it would actually be outside of those guys on the same par as Explore California. Notice also, we are creating implicit sections within our sections by using the h3s instead of the h2s. So we have an h1, the h2 comes next, and because of the first one is simply used to title it, those are on the same level.
So you can see how each section essentially has its own ranking hierarchy, which is going to start over again with every new section. Now, this concept does seem pretty simple. It can be really challenging to come up with a consistent strategy that not only meets your goals in terms of using these headings, but that also results in the desired outline. Now, let me demonstrate that real quick. We've got one last little thing here I want to do. Let's say I go down at the very, very bottom of the code and I create a footer, and inside that footer, I just go ahead and throw a paragraph inside of that and I just call it Legal stuff, because that's where you put in the footer usually is a legal stuff. And then I will close the footer.
Okay, so that's my page footer, right? Now I just have a paragraph inside that. I don't have any headings. So if I outline this, I can see that the footer doesn't show up in my document outline. Remember, headers and footers are not sectioning content, so they don't actually add to the document outline. So if I wanted that inside the document outline, I would need to go ahead and give it a heading. Because it's the start of a new section, a lot of times somebody would say okay, it's the start of a new section. Let's just go there and throw an h1 in there, and they would outline it. And now Legal stuff is on the same level as Explore California, but what if you wanted everything nested inside the title of the document? Well, here the heading that you choose really matters, because this is still considered to be part of the root, because even though it's in footer, the footer is not sectioning content, so it's considered to be inside the root. So if I want it to be on the same levels as Monthly Specials, I would need to use, in fact, an h2, and now it goes ahead and gives me the outline that I am looking for.
So this leads me to really what's a much larger point. Up until now, we just had it drilled into our heads over and over again to only use one h1 per page, and to use the heading rankings to denote levels of importance after that. Now, HTML5 forces us to kind of revisit that, by introducing sectioning content as a way of sort of breaking those sections up. So I think it would be helpful here to examine the specification. So I am going to click over and this is the author view, and I found the Sections area, and I am looking at heading and sections, so 4.4.11. And if I scroll down a little bit, there is one paragraph in particular that I wanted to talk about.
Now, sections may contain headings of any rank, but authors are strongly encouraged to either use only h1 elements or to use elements of the appropriate rank for the section's nesting level. So, really what that means is that you are going to have to come up with your own strategy for our headings are used within sections. Are you only going to use one h1 per page? Now, again, you are encouraged to use h1 elements within nested sections, but you don't have to. As a matter of fact, most authors are sort of going against what the specification is encouraging them to do, because search engines still strongly value how many h1s you have and where those h1s are and what's in them.
So until that changes--and I full expect search engines to adopt this particular document structure, so I don't think that's going to matter so much down the road--but for right now, a lot of people are hesitant to go away from the strategy. So, are you going to start each section at h1 or nested sections are going to start with an h2, and then go from there? You know, in the end, what really matters is being consistent. So be sure to create a policy that's going to work for the size, structure, and complexity of the site that you're authoring.
There are currently no FAQs about HTML5: Structure, Syntax, and Semantics.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.