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
![header1.gif]()
Fire Fox
![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> is always exist at
bottom of document. A document can support more than one footer. You can not
insert image in 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
![header3.gif]()
Fire Fox
![header4.gif]()