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.
Although people tend to lump the footer element into the discussions surrounding the header element, there are quite a few differences between the two elements, so let's go into the spec and learn a little bit more about the new footer element. Now, a couple of things I want point out here. Notice that it is not part of Sectioning content, so just like the header, it's not Sectioning content, like the nav, section, article, and aside elements are. Also, we have some restrictions. Notice in the Content model it can contain any Flow content, but it cannot contain a header or a footer, so you can't put a header or a footer inside of a footer.
Now that's very similar to the header, because the header elements can also not contain a header or footer element. So let's read a little bit more about what type of content a footer represents. Notice that a footer typically contains information about its section, such as who wrote it, links to related documents, or copyright data, and things like that. Also notice that it says the footer element represents a footer, for its nearest ancestor sectioning content or sectioning root element. Now it's real easy in a specification to read something like that and go, hey! just look at it this way.
If you find the footer in the body tag and not inside of another element, it's the footer for the entire page. On the other hand, if you found the footer, for example, inside of an article element, then it would the footer for that article, so that's really kind of what that is saying here. If we scroll down a little bit, we notice that it says here something very interesting: "Footers don't necessarily have to appear in the end of the section, although they usually do." So, really footers can be used wherever they're appropriate. Footers can also contain sectioning content themselves, so you can place really complex structures inside of them.
Obviously, they can't have headers and footers of their own, but they could include entire sections inside of them. If you're going to do that, however, notice that it says, make sure that they will represent things like appendices, indexes, license agreements, things like that that really require that structure. We have a note here that says, hey, the footer element is not sectioning content, just like I was talking about a moment ago, and when we talk more about sectioning content, we'll define this further. And this last statement here, it's really kind of saying what I've said earlier, which is that if the footer doesn't have a parent element outside of the body tag, then it applies to the entire page.
Okay, so another thing that you can kind of tell from the examples here that is pretty interesting, look at the first example. Right off of the opening body tag, boom, there is a footer. All right, so it is showing you right off the bat that the footer does not have to show up at the bottom of the content. Another really curious thing here is that if we go down the page a little bit further, we can see there is another footer. So we have one here that says, "Back to index" and Back to index, those would be links, you know, back up to the table of contents on both the top and bottom portion here. So pages and sections can have multiple footers. You're not limited to just one footer. You can have footers for as many sections as you would like, and you can certainly have more than one footer within a section.
And if I scroll down a little bit, I can see a much more complex example of a page where this particular article has its own footer, and then we notice the page has its own footer. If we can scroll down a little bit, you can see that the page has its own footer, because it's not nested inside of an article, such as this one is. Okay, so that should give you a little bit greater understanding of what the footer element allows us to do. And now that we know that, let's go back in our HTML page and finish it up by adding a footer of its own. So here we are, back in html5.htm.
This is open from 02_08 directory. You've probably already guessed what we're going to do here. I'm going to scroll down, and down at the very bottom of the content I can see a div tag that has our copyright information in it. If you remember, as the spec said, this is a perfect usage of the footer element. So I'm just going to replace the div tag with the footer and remember to get the closing div tag as well. So, and then I'm just going to go ahead and save that. So now our new page here has a footer and is filled with all this rich HTML semantic goodness.
Now, note how by using these new structural tags available to us, we've not only identified content more clearly--so here's the headers, and articles and nav element, the footer-- but we've begun to establish relationships between content sections as well. Now, before you move on to a more detailed look in defining more complex page structures, it's important to explain the content models that I've been referencing, such as Flow content and Sectioning content, and we're going to do just that in our next movie.
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.