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.
  1. <header>
  2. <a href="/" class="logo">
  3. <img src="logo/Site-logo.gif" alt="MCN logo">
  4. </a>
  5. </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
  1. <html>
  2. <head></head>
  3. <body>
  4. <header>
  5. <span style="color:brown;font-style:italic;">Header: The area defines the header Tag</span>
  6. <hr>
  7. <hgroup>
  8. <h1>Articles</h1>
  9. <h2>The header tag is new in HTML5.</h2>
  10. </hgroup>
  11. </header>
  12. <article>
  13. <p>The
  14. <header> tag specifies an introduction, or a group of navigation elements for the document.
  15. </p>
  16. <p>The tag is supported in all major browsers.</p>
  17. </article>
  18. </body>
  19. </html>
Internet explorer
header1.gif
FireFox
header2.gif

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
  1. <html>
  2. <head></head>
  3. <body>
  4. <header>
  5. <span style="color:brown;font-style:italic;">Header: The area defines the header Tag</span>
  6. <hr>
  7. <hgroup>
  8. <h1>Articles</h1>
  9. <h2>The header tag is new in HTML5.</h2>
  10. </hgroup>
  11. </header>
  12. <article>
  13. <p>The
  14. <header> tag specifies an introduction, or a group of navigation elements for the document.
  15. </p>
  16. <p>The tag is supported in all major browsers.</p>
  17. </article>
  18. <footer>
  19. <hr />
  20. <ul>
  21. <li >
  22. <a href="">About MCN </a>||
  23. <a href="">Privacy</a> ||
  24. <a href="">Contact</a> ||
  25. <a href="">Author</a> ||
  26. <a href="">Copyright</a>
  27. </li>
  28. </ul>
  29. <hr />
  30. </footer>
  31. </body>
  32. </html>
Internet Explorer
header3.gif
FireFox
header4.gif