The header element in HTML 5
Currently HTML5 is exciting and anyone who want to builds web pages is looking forward to implementing HTML5 new tags into their sites. Definitely HTML5 tags are very rich in functions that make life much easier for both webmasters and end users
Within the HTML5 specfication we can see that there have been a significant number of new tags added, one of these the <header> element is what we’ll be covering here. We will talk about when to use it, when not to use it.
As we are used to seeing
<div id=”header“>
on a majority of sites that we visit, but now with HTML5 that isn’t required anymore we can add some more semantic value with the <header> element.
What does the <header> element represent?
According to the spec on (http://dev.w3.org/html5/spec/single-page.html#the-header-element) the header element represents
“A header element is intended to usually contain the section’s heading (an h1–h6 element or an hgroup element), but this is not required. The header element can also be used to wrap a section’s table of contents, a search form, or any relevant logos.”
Here it is important to note that the <header> element doesn’t introduce a new section but is the head of a section. You should also note that the <header> element should not be confused with the <head> element.
Where would I use the <header> element?
Well the obvious place to start would be at the beginning of your page. We we can start with something like this that includes your primary page heading.
<header>
<h1>Heading on page</h1>
<p>Some information</p>
</header>
Also an important point to note is that you are not restricted to use one <header> element per page. You can use multiple headers, each of which will then become the <header> for that section of the document. You could therefore have…
<header>
<h1>heading on this page</h1>
<p>Some information</p>
</header>
<article>
<header>
<h1>Title of article</h1>
<p>By PHPZAG</p>
</header>
</article>
What is required in the <header> element?
We now know that we can have multiples headers in a page but what’s important within the element in order for it to validate?
In short, a <header> typically contains at least (but not restricted to) one heading tag (<h1> – <h6>). You can also include the <hgroup> element. The element can also contain other content within the document flow such as a table of contents, logos or a search form. Following a recent change to the specification you can now include the <nav> element within the <header>.
How to Style the <header> element?
One short but very important point I’d also like to cover is that in order for the majority of browsers to render the <header> element as a block level element you will need to explicitly declare it as a block in your CSS like so:
header { display:block;}
Definitly you need to do this for most of block level elements in HTML5. As soon as browsers make it default then you will be able to save those precious bytes from your CSS.
In brief <header> give us some great added semantic value in order to explicitly describe the head of a section.
Follow @phpzag
hm… sorry for being a bit boring but i believe your blog could look slightly better and a little more easy to the eyes if it had more of a blue vibe to it, however that’s just me. wonderful post anyhow!
Best regards.