Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:7Length:40 minutes
Semantic 1
  • Overview
  • Transcript

2.4 Headers and Footers

In this lesson, you will learn the proper use for <header> and <footer> elements. You may be surprised to learn that they’re not just for the top and bottom of your document!

2.4 Headers and Footers

Hello, and welcome back to our Semantic HTML course on how to structure webpages. In this lesson I wanna talk about the header and footer elements. Now, these elements are not going to have a huge impact on the outline of our document, but it will make our document more semantic which is always a good thing. Now a header and footer element are exactly what they sound like. They mark up the header of a particular section, or the footer of a particular section and you'll notice that I said section, not document. So you can have a header and a footer for your entire document as a whole. But you can also have headers and footers within sections inside your document. There are some elements you cannot but headers and footers inside of, for example, you cannot but a header inside a footer. You cannot but a header or a footer in an address element for example. So there are a couple of limitations, but you can put headers and footers in a lot of places in your documents. We are going to discuss that in this lesson. I'm gonna create a new file. I've still got index01.html and as you've noticed I've cleaned up the CSS a little bit so that our sidebar's over here to the side. All I really had to do there was add another rule. I didn't wanna break the rule that was already there for our sidebar class. So we did have a div with the class of sidebar but now we have a side element which has the same rules applied to it. But if we go back to index 01 I'm going to save this as a new version. I'll save it as index02.html so all the changes that we make in this lesson will be saved there. And let's scroll up to the very top of the body of our document starting here. You'll notice that we have a div with a class of header. Now this is something you're probably used to seeing if you've been doing web design and development for any length of time. Maybe a div with a class of header or an ID of header. However, we wanna change this up instead of using a div, we're gonna use the header element. So we need to close that off as well down here. We'll close our header element and other than that, nothing really is gonna change so we can save that, jump back into our browser and navigate to index02.html. And so as you can see nothing really changed on our page. All we've done is we've changed this div up here at the top to a header element. And, if we go back to our document, you'll notice that our navigation is inside that header and that is not required but it is allowed. You can put navigation inside the header. But, there's our header, and we can scroll down to our document and here's our footer. Again, right now it's a div with a class of footer. We're just gonna change that to a footer element, and I'm going to change this from just a class of footer to main footer. That way if we need to do something to the main header of our document, or the main footer of our document, we can target them that way. So again as I pointed out before we can also put a header and footer inside a section, for example, or an article. In this lesson, I wanna go ahead and put one inside our article here. I'm not gonna worry about a footer. You can add a footer if you want to, but I just wanna place a header inside our article. So just inside our article, we'll go to the next line and create a header and then we'll move our h2 tag here inside that header. And then we might even have a subheader for it and might even have maybe a span that has the author name, so by Craig Campbell. You can even make this instead of a span, you can make it a lower level h element, such as an h6, nice and small and then we can save that. Jump back into our browser and refresh and there you go. Now our header has two elements. Now, normally I would jump into my CSS and bring these two closer together, but I'm not gonna worry about that for now. One thing you will notice now is that our header is broken. So I am gonna jump into our CSS and fix that, at least for the main header of our page. I am assuming our footer is broken too. Yes it is, because it is here on the right. We will just jump back into our sections.css and here is our footer class. I want to change this to main footer. And I don't wanna break this because we have earlier lessons that are pointing to the same section as that CSS class. So I'm gonna do something that I normally wouldn't do here. I'm gonna make another copy of these three rules and paste them. And instead of just footer, I'm gonna point to main-footer for all three of these. And there we go, and we'll scroll back up to find the header, and we're gonna do the same thing for these three elements. So I'm gonna copy those and paste them and here we're gonna point to main-header. In a few different places, that way everything will get back to how it used to be. We'll save that and refresh our page. And there we go, our header's back to how it was before. And if we scroll down, we can see our footer is as well. Again, you can use the header and the footer for the document itself to add something to the top and bottom of the document. You can also use them in things like sections and articles. So thank you for watching, I will see you in the next lesson.

Back to the top