HTML Tutorials - Herong's Tutorial Examples - v2.30, by Herong Yang
"header" and "footer" Elements
This section provides an tutorial example of using 'header' and 'footer' elements in HTML documents to provide header and footer content.
"header" and "footer" elements are added in HTML5 standard to allow us to group paragraphs together to be presented as headers and footers in HTML documents. Here are some general rules about "header" and "footer" elements:
1. "header" and "footer" elements are used to present headers and footers for current sections.
2. "header" and "footer" elements should be located on the top level of "body", "article", or "section" elements.
3. Multiple "header" and "footer" elements are allowed at the same section.
4. "header" and "footer" elements are not allowed to be directly nested.
Here is a good example of using "header" and "footer" elements in HTML documents:
<!DOCTYPE html> <!-- HTML5_header_and_footer_Example.html - Copyright (c) 2014 HerongYang.com. All Rights Reserved. --> <html> <head> <title>HTML5 header and footer Example</title> </head> <body> <header>Header of "body"</header> <p>Main content of "body" - A header element is intended to usually contain the section's heading (an h1 to h6 element or an hgroup element), but this is not required. The header element can also be used to wrap a section's table of contents, a search form, or any relevant logos. </p> <footer>Footer of "body"</footer> </body> </html>
Table of Contents
►Introduction of HTML5 Features
Differences between HTML5 and HTML 4
Adding Inline SVG Image in HTML5 Documents
Adding MathML Formula in HTML5 Documents
"article" and "section" Elements
►"header" and "footer" Elements
"details" and "summary" Elements
"figure" and "figcaption" Elements
HTML Document Structure and Content
HTML Document and Elements Syntax
Displayed and Printed HTML Documents
Responsive Design of Web Pages