The header element
                                                                                                                             


Just as a home has rooms devoted to particular activities (ie. one cooks in the kitchen and parks in the garage), there are sections of webpages that have distinct functions.


Since the beginning of the internet virtually all sites have had a "header". On this site, as with the vast majority of sites, the header is at the top of every page. There you should see what the page is about – what it does. This practice has become so widespread HTML5 has a new <header> element to replace the div tag that has largely filled the role so far.


Note that this is an entirely new element with a different purpose than either the "header tags" (<h1> to <h6>) or the <head> tag. Yes, it is confusing.


This is one of a number of HTML5's new structural elements. They are "structural" in the same way that the marketing or human resource departments are structural elements of a business. Such tags define what the different parts of a page's content are and how those various parts are related. As time goes on virtually all pages will have <header>, <nav>, <article> and <footer>sections at a minimum.


No doubt you have heard a great deal about how HTML5 is going to revolutionize the internet – of the exciting and powerful new elements that are going to change everything. It's all true, however (and here's the kicker) the header tag isn't one of them. Sorry, we will get to be fun ones eventually ...but not yet.


We are going to start with something that may lack the hoopla, but is much more important: traffic.


It's a sad fact that there are literally tens of millions of web sites (many some poor sucker paid a fortune for) with all kinds of bells and whistles that virtually no one ever goes to. Their problem is that they don't show up high enough in search results. They rank poorly with the search engines due to bad SEO. The simple truth is that a web site with no traffic is worthless.


As you create sites always keep in mind the fact that websites have two audiences. One is human, the otherweb crawlers or bots, such as Googlebot. Humans are good at assessing web pages quickly – especially when properly designed.* However it's not so easy for the bots. The header element tells the crawlers what's in the header. Until now they have had to guess.


In other words, these new elements help the bots see sites more like people. The bots can now evaluate the relevance of blocks of text based on the element in which they are found. At the risk of oversimplifying something quite complex, anything in the header carries more weight in terms of SEO than it would were it in say, the footer.**


The search engines want to deliver the most relevant search results first. You want that to be your site. The header tag and the structural elements you'll study on the next few pages are tools you can use to help Google and other search engines do just that