HTML5 Tutorial - Header Element

Header Element

As we have seen Recent growth of HTML5 and its adobtion by web professionals.With in HTML5 specification we have seen there is more number of tags and elements added , in this we are going to discuss one of the element HEADER which i am going to explain in my post.

on a large majority of sites that you visit, well now with HTML 5 that isn’t required anymore we can add some more semantic value with the header element. What does the element represent? According to the spec the header element represents “ a group of introductory or navigational aids. A header element typically contains the section’s heading (an h1–h6 element or an hgroup element), but can also contain other content, such as a table of contents, a search form, or any relevant logos. It is important to note that the

element doesn’t introduce a new section but is the head of a section. You should also note that the

element should not be confused with the element. Where would I use the

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.

The most important heading on this page
With some supplementary information

An important point to note is that you are not restricted to using one header element per site. You can use multiple headers, each of which will then become the

for that section of the document. You could therefore have…

    
The most important heading on this page
    
With some supplementary information




    
Title of this article
    
By Richard Clark

    
...Lorem Ipsum dolor set amet...

Also note the use of two h1‘s within that piece of html, this is perfectly valid in HTML 5 (and HTML 4) but will cause issues with accessibility, so we advise caution if you have a large number of articles on a page. We will cover this in more detail in another post. What is required in the header element We now know that we can have multiples headers in a page but what are the must have’s 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 but we’ll discuss that more in another post (read more about the hgroup in the spec). 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 spec you can now include the nav element within the header. Styling the header One short 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;} In fact you will need to do this for the majority of block level elements in HTML 5. Just as soon as browsers make it default we’ll let you know so you can save those precious bytes from your CSS. In the meantime be sure to keep up with what has or hasn’t been implemented in layout engines on this wiki. Conclusion In summary header give us some great added semantic value in order to describe the head of a section.