codeswan blog

HTML: Footer

Photo courtesy of Allison Day

For the last few weeks, we’ve been talking about the header of your website. So what’s next? Well, there’s the content section of you website, which changes on every page, and the sidebar, which can get complicated as well. So I thought this week, we’d take a little break and talk about the footer – the easiest section of your website.

Elements of Your Footer

The footer is the very, very, very last section of your website. It goes at the bottom, or foot of every page… hence the name. And it’s pretty much the same on every page, so just as we did for the header, we can use just one footer.php file and include it on every page in your website. Within that file, you’re probably going to want to put all the footer elements in a <div>, like this:

So what goes in the footer? Well, some people put a smaller version of their navigation in the footer, displayed horizontally just like in the nav bar. This is super easy to do – you can do it exactly the same way as we did it in the header (but use a different id… remember, you should never use the same id twice on a page!).

Another thing that a lot of people put in the header is their blog’s copyright. Another easy thing to do. Just put something like this in your footer:

Copyright &copy; · Allison Day · All rights reserved

&copy; displays the © symbol, and if you remember our lessons on PHP, then this should look familiar to you <?php echo date(‘Y’); ?> Easy, yes?

Remember to Close The Door On Your Way Out…

Those are pretty much all the important elements of a footer. But there’s one more thing that’s very important…

I can almost guarantee that you will open tags in the header.php file… but you won’t close them. Take, for example, the <body> tag. You don’t see a </body> tag anywhere, do you? Nope. So you need to remember to close that, and any other tags you may have opened but not closed in the header, in your footer.php file. The closing body tag should be the very, very last thing in your footer file. Any other tags that need to be closed will depend on what you want to include in them (sometimes you want to have one big #content div that includes the footer, so you’d close it after the closing div tag for the footer. Other times you don’t want the footer to be a part of it, so you’ll close the #content div before you open the #footer div.)

Many of you will also have analytics code, for tracking the number of unique visits, pageviews, etc. that your site gets. That usually goes at the very end… just before the closing </body> tag.

Meet Me At The (Side)Bar…

And that’s all there is to the footer. No, seriously. It’s that easy.

But I’ll bet by now, you’re ready for a nice, cool drink… of fresh water, of course.

So next week, we’re going bar hopping! Wait. That doesn’t sound right… hold on…

We’re going sidebar hopping! Even more exciting!

Leave a Reply

Your email address will not be published. Required fields are marked *