HTML5 Header and Footer Tag

Header Tag

HTML5 <header> element is for the page header which might contain a logo, navigation and any other consistent elements that might be considered the page header. The <header> tag is new in HTML5. The <header> tag specifies an introduction or a group of navigation elements for the document. The <header> tag is supported in all major browsers.

Syntax

<header>...</header>

HTML5 <header> element is for the page header which might contain a logo.

<header>
<a href="/" class="logo">
<img src="logo/Site-logo.gif" alt="MCN logo">
</a>
</header>

Attributes

HTML tags can contain one or more attributes. Attributes are added to a tag to provide the browser with more information about how the tag should appear or behave. Attributes consist of a name and a value separated by an equals (=) sign, with the value surrounded by double-quotes.

There are 3 kinds of attributes that you can add to your HTML tags: Element-specific, global, and event handler content attributes. The attributes that you can add to this tag are listed below.

Element-Specific Attributes

The following table shows the attributes that are specific to this tag/element.

Attributes Introduced by HTML5

Attributes	Description
None

Global Attributes

The following attributes are standard across all HTML 5 tags.

HTML5 Global Attributes
accesskey	draggable	style
class	hidden	tabindex
dir	spellcheck
contenteditable	id	title
contextmenu	lang

Event Handler Content Attributes

Here are the standard HTML 5 event handler content attributes.

onabort	onerror*	onmousewheel
onblur*	onfocus*	onpause
oncanplay	onformchange	onplay
oncanplaythrough	onforminput	onplaying
onchange	oninput	onprogress
onclick	oninvalid	onratechange
oncontextmenu	onkeydown	onreadystatechange
ondblclick	onkeypress	onscroll
ondrag	onkeyup	onseeked
ondragend	onload*	onseeking
ondragenter	onloadeddata	onselect
ondragleave	onloadedmetadata	onshow
ondragover	onloadstart	onstalled
ondragstart	onmousedown	onsubmit
ondrop	onmousemove	onsuspend
ondurationchange	onmouseout	ontimeupdate
onemptied	onmouseover	onvolumechange
onended	onmouseup	onwaiting

For example

<html>
<head></head>
<body>
<header>
<span style="color:brown;font-style:italic;">Header: The area defines the header Tag</span>
<hr>
<hgroup>
<h1>Articles</h1>
<h2>The header tag is new in HTML5.</h2>
</hgroup>
</header>
<article>
<p>The
<header> tag specifies an introduction, or a group of navigation elements for the document.
</p>
<p>The tag is supported in all major browsers.</p>
</article>
</body>
</html>

Internet explorer

FireFox

Footer Tag

The <Footer> tag is supported in all major browsers. The <footer> is present only in HTMl5. It gives additional information copyright, author of document, privacy, contact. The <footer> always exists at the bottom of the document. A document can support more than one footer. You can not insert an image in the footer.

Syntax

<footer>...</footer>

For example

<html>
<head></head>
<body>
<header>
<span style="color:brown;font-style:italic;">Header: The area defines the header Tag</span>
<hr>
<hgroup>
<h1>Articles</h1>
<h2>The header tag is new in HTML5.</h2>
</hgroup>
</header>
<article>
<p>The
<header> tag specifies an introduction, or a group of navigation elements for the document.
</p>
<p>The tag is supported in all major browsers.</p>
</article>
<footer>
<hr />
<ul>
<li >
<a href="">About MCN </a>||
<a href="">Privacy</a> ||
<a href="">Contact</a> ||
<a href="">Author</a> ||
<a href="">Copyright</a>
</li>
</ul>
<hr />
</footer>
</body>
</html>

Internet Explorer

FireFox