HTML5 tutorial - Footer element

The footer element tag

The <footer> element is the last of what I consider the essential section elements.

Most pages should have <header>, <nav>, <article> and <footer> tags. While not required anymore than a house is required to have a bedroom or kitchen, but it wouldn't be much of a house without them. Likewise these four elements serve distinct functions the vast majority of web pages need filled.

The header, nav and footer tend to stay the same on every page. Once they are set you can copy and paste them into new pages then add the article. Keeping a consistent look throughout a site means visitors can focus on what brought them there in the first place.

The footer can be used to do any number of things that include (but are not limited to) the following:

Use it to complete what was left undone in the header and nav.
A well made header and nav section should be simple and straightforward, but simplicity can come at the cost of details – often important details. "Hana's Hotel" might be enough for a header as long as the footer has "Hana's Holiday Hotel. Your home away from home in the heart of Honolulu".
Often larger sites have links in the footer that don't fit in the nav or if they did fit would distract visitors from more important pages.
Unlike books, websites are seldom read from beginning to end.
Visitors often land on pages other than the home page and proceed through a site in no particular order. This means that in addition to text (that on a web page would go in the article tag) each page has to have the equivalent of a book's title page (the header), a table of contents (the nav section), and a footer that does pretty much everything else.
Visitors like to know not just what a site is about but who is behind it. It's a question of trust.
The web, like any media, is a mode of communication. A website is nothing more than you (or whoever hired you) saying something to anyone who wants to listen. The footer should include information on who "you" are – especially when money might change hands. People want to know all they can about who they are giving their money to.
Include enough information in the footer so visitors have at least a general idea of what's going on.
Many visitors to a site know absolutely nothing about the subject at hand. I once saw a beautiful Bed & Breakfast online that didn't have their location in the footer. It could as easily been in the mountains of New Zealand or Scotland as it could the Rocky Mountains of North America. No one is going to waste their time searching for information that should have been clear from the beginning.
What is in the footer effects SEO.
Information that isn't readily available to people, isn't readily available to the bots. Googlebot can't properly index the Bed & Breakfast site mentioned above without a location.
Writing a good title is the most important thing you can do for SEO but a good title alone is not enough. The contents of the page, including content in the footer, should have information related to what's in the title and description meta tag.

People choose to go to a particular site for a reason and if that site doesn't resolve their issue – doesn't, if you will, "scratch their itch" – they can easily go somewhere else. A good footer can do a lot towards keeping visitors from looking for greener pastures.

Before we go on to the next page let's update the template. Open your copy of new-template-article.htm and try to add the footer. The footer I have in mind is just like the header except that it goes on the bottom of the page. Try to add the CSS as well.

You can see what I did in new-template-footer.htm. There is nothing saying you have to do the same. In fact if you asked ten experienced web designers to write new-template-footer.htm from scratch, odds are that you would see ten different source codes. In particular the CSS would be different. There is no "right" way – which I personally think that is one of the great strengths of HTML and CSS.