Header

Overview

The header is an UI component which sits at the top of an application. It usually contains a tabs container widget.

Here is a screenshot of such a header UI element:

Ubuntu HTML5 header

Markup declaration

Here is explanatory code snippet:

<header data-role="header">
  <nav class="tabs" data-role="navbar">
    <div class="tabs-inner">
      <ul data-role="tabs">
        <li class="active" data-role="tab">
          <a href="#item1" id="firstTab">First</a>
        </li>
        <li class="inactive" data-role="tab">
          <a href="#item2" id="secondTab">Second</a>
        </li>
      </ul>
    </div>
  </nav>
</header>
Written on July 9, 2010