General
9 Step Tutor
Header Element in HTML5
The Header Element or Tag has been introduced for producing better content structure in HTML5 documents:
The code:
<header></header>
Presents a group of introductory and or navigational aids.
A header element can contain the section's heading as (an hgroup element), but is not required.
The header element can also be used to wrap a section's table of contents, a search form, or any site logos.
Note: You can have more than one <header> element in an HTML document. However, <header> should not be placed within a footer, address or nested in another <header> element.
Code examples: The code below shows one instance of using a header element on a web page. The navigation device is nested within the header element.
<body> <header> <p>Website Name</p> <nav> <ul> <li><a href="index.html">Index of all articles</a></li> <li><a href="foo1.html">Article Link 1</a></li> <li><a href="foo2.html">Article link 2</a></li> </ul> </nav> </header> <main> <h1>Web Page Title</h1> Web Page Content here.... </main>
Another acceptable option, where the nav element is placed before the header which is nested in main.
<body>
<nav>
<ul>
<li><a href="index.html">Index of all articles</a></li>
<li><a href="foo1.html">Article Link 1</a></li>
<li><a href="foo2.html">Article link 2</a></li>
</ul>
</nav>
<main>
<header>
<h1>Web Page Title</h1>
</header>
Web Page content here
</main>
</body>
Notice that the Nav element can be nested inside the header or placed above or below it (Shown below). Both are accepted practices.
There are other ways to use the header element which you can pursue if interested.
Another example of <header> nested in <main>:
<body>
<main>
<header>
<h1>A heading here</h1>
<p>Posted by Author</p>
<p>More information about document...</p>
</header>
<p>Actual page content....</p>
</main>
</body>
New Elements and Beginners
Some of the new tags used as shown below might make the body code of a basic HTML5 document easier to read.
This structure can be used instead of using class customized divisions .
<body> <header></header> <nav></nav> <main> Text and pics here </main> <footer></footer> </body>
The old way:
<body> <div class="header"></div> <div class="navigation"></div> <div class="main"> Text and pics here </div> <div class="footer"></div> </body>
*Use of the new tags article, section, header, footer, hgroup, nav and aside is a matter of the taste or the need of the author.
Note: some of these elements overlap in purpose.
The Header Element accepts Global Attributes.
For a complete list of All elements, tags and attributes in HTML5 visit W3schools.com
See: The Division Tag and the Section Element or use the Next button for the next logical page, the Nav element.