Cabeçalho e rodapé
Os cabeçalhos e rodapés podem ser definidos através dos elementos header e footer. Para definir o cabeçalho, o elemento head é utilizado. Aliás, vale ressaltar que não necessariamente precisa ser o cabeçalho da página inteira. Com o head também é possível identificar o cabeçalho de outros elementos, como seções e artigos, por exemplo.
Cuidado: Não confunda header com o conhecido elemento head, que define o cabeçalho dos documentos HTML, onde estão contidos o título do documento, as chamadas de CSS e JavaScript.
Para um documento completo, a utilização de header seria da seguinte forma:
<body>
<header>...</header>
<nav>...</nav>
<article>
<section>
...
</section>
</article>
<aside>...</aside>
<footer>...</footer>
</body>
Aplicado a um elemento section, teríamos a seguinte estrutura:
<section>
<header>
<h1> Criando aplicativos da Web (Parte 09): jQuery mobile (1) </h1>
<p> jQuery é sem dúvida um dos frameworks JavaScript mais conhecidos. </p>
</header>
<p>
Em páginas da web "clássicas", o jQuery já foi utilizado milhares de vezes. Especificamente para uso em aplicativos da web, foi projetado o framework irmão jQuery mobile (jQM). Este framework ajuda a fazer com que o seu aplicativo da web pareça uma verdadeira aplicação em questão de segundos. Motivo suficiente para dar uma olhada detalhada no jQM.
</p>
<footer>
<p>Direitos autorais por PSD-Tutorials.de</p>
</footer>
</section>Ao utilizar footer e header, certifique-se de que não devem conter elementos adicionais de header e footer.
Agrupar cabeçalhos
No contexto das seções, entram em cena os cabeçalhos. Esses cabeçalhos podem ser elementos clássicos como h1 até h6, por exemplo. No entanto, em HTML5, o elemento hgroup também é permitido. Dentro desses elementos hgroup, é possível incluir vários cabeçalhos.
Primeiro, vamos dar uma olhada em um documento HTML clássico, onde a estrutura "normal" é definida através de elementos hx.
<h1>
Livro
</h1>
<h2>
Capítulo 1
</h2>
<h2>
Capítulo 2
</h2>
<h3>
Subcapítulo 2.1
</h3>
<h3>
Subcapítulo 2.2
</h3>
<h2>
Capítulo 3
</h2>
Essa definição resulta na seguinte estrutura:
Livro
Capítulo 1
Capítulo 2
Subcapítulo 2.1
Subcapítulo 2.2
Capítulo 3
No navegador, no entanto, os cabeçalhos não são recuados.
O hgroup é especialmente interessante no contexto de textos jornalísticos. Muitas vezes, eles consistem em um título principal e um subtítulo. Um exemplo pode esclarecer esse aspecto.
<hgroup> <h1>Sistema Operacional na Nuvem</h1> <h2>A Web como Sistema Operacional</h2> </hgroup> <p>Aqui começa o conteúdo do artigo ...</p>
Neste exemplo, é evidente que o subtítulo não inicia uma seção própria dentro do artigo. Em vez disso, ele é parte do título do artigo. Isso pode ser resumido usando o elemento hgroup.
Dentro do hgroup, os elementos h1 até h6 são permitidos.
O conceito de Contornos
No HTML5, o conceito de Contornos entra em jogo, envolvendo a combinação de elementos section com os diversos elementos hx. Nesse conceito, como de costume, os cabeçalhos são divididos em diferentes níveis pelos elementos h1 até h6. Assim, o h1 representa o nível superior, enquanto o h6 representa o nível mais baixo. Não há mudanças em relação ao passado, pois agora os elementos hx podem ser definidos dentro dos elementos section. E cada vez que isso acontece, a contagem começa novamente, porém sempre um nível abaixo.
O conceito de Contornos pode parecer complicado na especificação do HTML5, mas a ideia por trás dele é bastante simples. Na verdade, ele permite definir um sumário que torna a estrutura do documento legível por máquinas.
Aqui vai um exemplo:
<h1>
Capítulo 1
</h1>
<section>
<h1>
Capítulo 2
</h1>
<section>
<h1>
Capítulo 3
</h1>
</section>
</section>
O conceito de esboço do HTML5 resulta na seguinte estrutura:
1. Capítulo 1
- Capítulo 2
- Capítulo 3
- Capítulo 3
Um outro exemplo para ilustrar o efeito. Novamente, o documento inicial.
<section>
<h1>Instalação e Configuração</h1>
<section>
<h2>Instalação</h2>
<p>Tudo sobre instalação
</section> <section>
<h2>Configuração</h2>
<p>Aqui você encontrará tudo sobre configuração
</section>
<aside>
<p>Livros interessantes sobre o assunto...
</aside>
</section>
<footer>
<p>(c) por PSD-Tutorials.de
</footer>
</section>
A estrutura resultante seria a seguinte:
1. Seção (Instalação e Configuração)
1.1 Seção (Instalação)
1.2 Seção (Configuração)
1.3 Seção (aside)
- Seção (footer)
E mais um exemplo:
<body>
<h1>Instalação e Configuração</h1>
<h2>Instalação</h2>
<p>Tudo sobre instalação
...mais conteúdo...
<section>
<h3>Requisitos</h3>
<p>Tudo sobre requisitos de instalação
...mais conteúdo...
<h3>Preparativos</h3>
<p>Tudo sobre preparativos
...mais conteúdo...
<h2>Configuração</h2>
<p>Tudo sobre configuração
...mais conteúdo...
</section>
</body>
A estrutura de resultado seria a seguinte:
1. Instalação e Configuração
1.1 Instalação
1.1.1 Requisitos
1.1.2 Preparativos
1.2 Configuração
A contagem interna começa novamente a cada 1. Os elementos afetados pelo conceito de esboço são apenas estes:
• article
• aside
• nav
• section
Por outro lado, os elementos header e footer permanecem fora dessa contagem.
Por favor, note que o conceito de esboço ainda não é suportado pelos navegadores.
No entanto, é apenas uma questão de tempo até os fabricantes de navegadores agirem aqui. Os benefícios do conceito de esboço são enormes. Pense, por exemplo, em barras de navegação geradas automaticamente. Mas mesmo assim, mesmo que a estrutura como mencionada seja atualmente ignorada pelos navegadores, você deve tentar estruturar logicamente seus documentos desde já. Assim, você já terá uma certa segurança futura para seus sites.
