Html5 Tutorial - Future Technology

Tuesday, 16 July 2013

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.

No comments:

Post a Comment