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