Tuesday, March 19, 2013

HTML 5 - The header element


Several new tags or elements have been added in HTML5. The header tag (<header>) is one of them. It is used as header of one or more sections or as a header of the document. HTML5 header tag should be used as a container of introductory contents like <h1> – <h6> tags, table of contents, search form, logo etc. with or without navigational links. More than header element can be used in a HTML5 document and it is generally placed at the beginning of the document or <article> tag.

Important points need to be remembered:

1. <header> and <head> tags are completely different.
2. A <header> tag can’t be placed within <footer> or <address> tag. Also header element can’t be placed within another header element.
3. HTML5 header element is supported by latest versions of all web browsers. Internet Explorer 8 or earlier versions of Internet Explorer do not support header element.

There are few HTML5 header tag examples given below:

Below the header tag is used as document header

1 <header>
2 <h1>This is the heading of the page</h1>
3 With some supplementary information
4 </header>
Below the header element is used as article header

1 <article>
2 <header>
3 <h1>Title of this article</h1>
4 By S Ghosh
5 </header>
6 Contents of the article
7 </article>

In summary <header> give us some great added semantic value in order to describe the head of a section.

No comments:

Post a Comment