Ubuntu toque em HTML 5 como criar cabeçalhos complexos?

Question

Estou tentando criar um pequeno aplicativo html5 para o Ubuntu touch. Em geral, é bastante difícil lidar com o código html5. O guia de design oferece várias sugestões sobre como criar um aplicativo, mas nem a documentação nem os tutoriais descrevem como implementar esses elementos.

Atualmente, só quero adicionar um componente de pesquisa ao cabeçalho, conforme sugerido nas diretrizes de design:

Meucabeçalhousaumanavegaçãoporguias:

<headerdata-role="header" id="xxx">
  <ul data-role="tabs">
    <li data-role="tabitem" data-page="maintab">Main     </li>
    <li data-role="tabitem" data-page="anotherpage">Favorites</li>
  </ul>
</header>

A minha pergunta é como adicionar um campo de pesquisa ao cabeçalho, quando o cabeçalho é definido apenas como uma lista?