How to Define HTML Headers and Create Footers
The HTML5 header element is typically the first element after the beginning of the body element in an HTML5 web page. A footer element is placed at the end of an HTML5 page. It holds end of page stuff, like navigation bars (which should be enclosed in HTML5 <nav> tags, within the header).
Don’t confuse the <header> element, which we are introducing here, with the <head> element. The <head> element is used to define parts of your HTML document that will not show up in a browser (like the page title). On the other hand, the <header> element defines content that does appear in your page, within the body of the page.
A header element encloses all the content that goes at the top of a web page. You use HTML elements like <p>, <h1>, and so on to define content within the header element.
Here’s how the HTML5 code would look for a simple, basic HTML5 header:
<body> <header> <h1>Header Content Goes Here</h1> </header> </body>
This snippet includes an <h1> tag (and some placeholder text) within the header.
Don’t expect the footer element to look like much of anything until a CSS style is defined. Even without a defined style, HTML5 footers demarcate content to facilitate SEO.
The following code provides an example of a footer element after the closing of an article, and before the closing <body> tag:
</article> <footer> <h5>Page footer content goes here</h5></footer> </body>