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>
blog comments powered by Disqus
Advertisement

Inside Dummies.com

Dummies.com Sweepstakes

Win $500. Easy.