HTML5 - Elementos header e hgroup

O elemento header é um bloco de conteúdo que pode conter um ou mais elementos h1 até ,h6, campo de busca, elementos de navegação, um logo ou banner, uma introdução, um pequeno prefácio ou um índice em formato de lista. Normalmente trabalha como um agregador do conteúdo do cabeçalho de um documento ou de uma seção. Dentro dele é possível inserir um elemento hgroup que tem como função agrupar dois ou mais elementos h1 até ,h6 organizando-os em uma hierarquia de títulos e subtítulos.


Como cabeçalho principal do documento


Os metais

<header>
<h1>Os metais</h1>
</header>

Como cabeçalho de um artigo ou seção


Trompete

O trompete é um instrumento de sopro de metal cuja...

<article>
<header>
<h1>Trompete</h1>
</header>
<p>O <b>trompete</b> é um instrumento de sopro de metal cuja...</p>
</article>

Como cabeçalho principal do documento incluindo um bloco hgroup com um título e subtítulo (descrição) de um blog


Os metais

O blog de que não tem medo de tocar forte !

<header>
<hgroup>
<h1>Os metais</h1>
<h2>O blog de que não tem medo de tocar forte !</h2>
</hgroup>
</header>