Post
Ask Question

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.
  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


Similar Articles