Header

The div#header node should only contain elements or options you want to make available to the user before the actual content. Typically the content is the reason why the user navigated to this page, so only elements which might be needed to improve access to content should reside in the header.

<div id="header"> <ul class="servicenavigation"> <li class="keynav navigation"><a href="#navigation" rel="nofollow">To navigation</a></li> <li class="keynav search"><a href="/search" rel="search">Search</a></li> <li class="keynav language en"><a href="?language=en">English</a></li> <li class="keynav language da"><a href="?language=da">Dansk</a></li> </ul> </div>

The ul.servicenavigation is a generic element which can reside in both the div#header and the div#footer. In this example we decided to put an anchor to the div#navigation, a search link and the language selector in the div#header. The div#navigation anchor provides easy access to the Navigation on old mobile phones and can be used as a Navigation toggle button on newer devices. The exact layout may vary slightly from site to site but less important items should be put in the div#footer. You can always move them to the div#header using JavaScript if this is required from a visual point of view. Remember visual presentation and content relevance is not always aligned. Content relevance should be prioritized when writing the HTML.

The keynav class on the ul.servicenavigation elements is an optional indicator, that this element should be extended with keyboard accessibility for visually impaired users. It does not have any functionality built in.