HTML5 tutorial - Header element

The header element tag

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 "heading tags" (<h1> to <h6>) or the <head> tag. Yes, it is confusing.

This is one of a number of HTML5's new section elements, an important part of HTML5 web semantics.* They are "sections" in the same way that the marketing or human resource departments are "sections" 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 the header element is too workaday to foment much passion. Sorry, we will get to 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 other web 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 section elements you'll study on the next few pages are tools you can use to help Google and other search engines do just that.

Spider, bot or web crawler

A Web crawler is a computer program that browses the World Wide Web in a methodical, automated manner.


The search bot software used by Google, which collects documents from the web to build a searchable index for the Google search engine.
wikipedia · google


Search Engine Optimization – designing pages to rank high in search engine results.
wikipedia · google

* For an introduction to semantics go to the strong & b element page.

** Indeed no small part of your job as a web designer is to make sites that can be assimilated at a glance.

*** SEO gurus will cringe if they read this – and with some reason. It's easy for beginners to draw incorrect conclusions from such a statement. For example do not think that including everything in the header will help SEO. It won't, in fact that may well do more harm than good.