Join Jen Kramer for an in-depth discussion in this video Using HTML5 header, nav, and footer tags, part of Learning Web Semantics.
One of the common elements encountered in many webpages is a header, navigation, and a footer for the document. The header usually contains identity information. That often includes a logo, and it may include other elements as well. Like contact information, or a search box, or just some decorative images. Likewise, down at the bottom of the page, we typically have some information in the footer. That frequently includes some basic navigation like terms of service, copyright privacy policies, that kind of thing. Copyright statement, disclaimers, and so forth.
And, of course, if you're going to build a web page and have it go anywhere on the web at all, you have to have some navigation. So the 4HTML file we typically mark up our webpage, the way that its shown here in the HTML file in your exercise files. Its just a div and we'd give it either an ID or class of header, footer and nav or navigation. Those were typically the names of those ID's and classes that we would associate with those particular divs. With HTML5, we now have tags that replace that kind of markup, and the tags are exactly as you'd expect them to be called.
They're called header, nav, and footer, and they're really super easy to use. So I'm going to start by taking a look at the header, and the header starts down here on line 18. So we have a div that starts here on line 18 and we have some content inside of that which looks like we have a logo and we have some sort of decorative image here. Then we close the div on line 20. So what I'm going to do now is, I'm just going to get ride of that. We don't really need that div because we can use the HTML finder tab called header.
So you just put in header and /header. That's all there is to it. Notice that in this case it is called header. Remember that head is actually a separate tag. Head is up here at the top of the document. And that contains other kinds of information. Like the link to our style sheet. The HTML title of the webpage. That kind of thing. So head and header are in fact two separate tags. Header is appropriate to use inside of the body tag. So don't mix those up and put header up on the top of your document or put head in the side of your body because that would not validate.
As I swap these tags out again, this particular course I've concentrated here on the mark up, it's worth knowing that, if you do change your mark up here, this could impact your CSS. So, if you had styles that were associated with the ID of footer, those styles are now not going to be effective here on this web page. So you need to be sure to go back and edit your CSS, just the selector part of it, to make sure that it's going to correspond with this new HTML markup. Alright, so the last thing I'm going to take a look at is the navigation. Up here at the top of the page there's a main navigation bar.
Right here, where it says Home, Services, Photo Gallery, and About. And that goes from lines 10 to all the way down to line 17. Now according to the W3 specification, we're supposed to use this nav tag with major navigation for the webpage. So this first one, that's a no-brainer. This is obviously the main navigation for the webpage. So I'm going to take out this div with the ID of nav. And I'm going to put in just the tag which is nav. Not navigation just nav, n a v. And that's all I need to do to identify the navigation here at the top of my page.
But as you noticed down here in the footer again between lines 37 and 42 there is this unordered list that has something that kind of looks like navigation in it. Do we need to have a nav tag around that? Well, this navigation in the footer is not as clear cut as the navigation at the top of the web page. The W3C specifies that navigation in the footer doesn't necessarily need a nav tag because it's not considered" Major navigation". As you can see from these links, these are fairly supplementary pieces of information.
They're important but they're not the heart of the site's message the way the tap bar is. So should you put a navigation tag here? There's arguments to be made both ways. Sometimes people put the navigation tag in here even though it's really not considered major navigation. Sometimes people leave it out. So you can think about those particular arguments, and decide what works for you. If you are going to put a nav tag down here, it obviously needs to go around the unordered list. So you'd put it here before the ul on line 37, and you'd close it after the slash ul here on line 42, if you are going to include it.
But I'm going to take what the W3 has said and consider this not major navigation. And so therefore am not going to use the nav tag with this particular piece of navigation. Header and footer tags can also be used in other contexts on the webpage as well. I'm going to show you those contexts in a couple of other videos where we get more into taking a look at the articles and the main content on this particular webpage.
- Using HTML5 header, nav, and footer tags
- Addressing related content with aside and mark tags
- Defining internal and external link relationships
- Defining next and previous relationships
- Introducing schema.org
- Using itemscope and itemtype to add meaning
- Understanding the difference between RDF, RDFa, and RDFa Lite