The Footer Tag introduced in HTML5
The footer tag has been introduced in HTML5 for producing better page structure:
The Code:
<footer></footer>
Is like a closing statement for a web page or a section which can contain information about the author, copyright information, etc.
Common Uses
- Copyright information
- Author details and or contact info
- Navigation links (ex. “Back to top”)
- Site map of related documents
- Secondary navigation
Where to Use the Footer
- At the bottom of an entire webpage
- Inside articles, sections, or other containers to close out that part of the web page.
Rules:
You can nest divisions and paragraphs inside footers
Do not nest footers inside footers!
Examples:
Different ways to use the footer element:
<body> <h1>Page title</h1> <article> <h1>article title</h1> <video> <p><a href="*.ogv">Download video</A>.</p> </video> <footer> <!-- footer for article --> <p>Published : date and time</p> </footer> </article> <section> <h1>section title</h1> <p>section information</p> <p>section information</p> <footer> <!-- footer for section --> <p>Last Modified: date</p> </footer> </section> <footer> <!-- site wide footer --> <nav> <p><a href="/credits.html">Credits</A> <a href="/tos.html">Terms of Service</A> <a href="/index.html">Blog Index</A></p> </nav> <p>© 2009 Gordon Freeman Contact at: br@549.if</p> </footer> </body>
New Elements and Beginners
Some of the new tags used as shown below might make the body code of a basic HTML5 document easier to read.
This structure can be used instead of using class customized divisions .
<body> <header></header> NEW <nav></nav> NEW <main></main> Not NEW, but rarley used. <footer></footer> NEW </body>
*Use of the new tags article, section, header, footer, hgroup, nav and aside is a matter of the taste or the need of the author.
Free Tools and Resources
Need more advanced information? Visit our Web Developer Resources page for a collection of other great tutorials and reference guides on the subjects of HTML5, CSS3, Responsive Design and SEO.
Free Bullet Images, WingDings and WebDings
🔵 🔶 😀 🎈 🐝 🏀 👉 👲 💡 🍅
Have you tried our NEWEST template kit with scrolling columns? Download Template Kit #601 - 4 Page Kit or Test Drive It!