How to Define HTML Headers and Create Footers

By David Karlins, Doug Sahlin

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:

<h1>Header Content Goes Here</h1>

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:

<footer> <h5>Page footer content goes here</h5></footer>