En-tête et pied de page
À l'aide des deux éléments header et footer, vous pouvez définir l'en-tête et le pied de page. Pour définir l'en-tête, l'élément head est utilisé. Il ne s'agit pas nécessairement de l'en-tête de toute la page. De même, avec head, vous pouvez également indiquer l'en-tête d'autres éléments tels que sections et articles.
Attention : ne confondez pas header avec l'élément head bien connu, qui définit l'en-tête des documents HTML contenant le titre du document, les appels aux feuilles de style et aux scripts.
Pour un document entier, l'utilisation de header ressemblerait à ceci :
<body>
<header>...</header>
<nav>...</nav>
<article>
<section>
...
</section>
</article>
<aside>...</aside>
<footer>...</footer>
</body>
Appliqué à un élément section, cela donnerait l'image suivante :
<section>
<header>
<h1>Créer des applications Web (Partie 09) : jQuery mobile (1)</h1>
<p> jQuery est sans aucun doute l'un des frameworks JavaScript les plus connus.</p>
</header>
<p>
Sur les sites Web "classiques", jQuery est donc déjà largement utilisé. Conçu spécifiquement pour être utilisé dans les applications Web, le framework sœur jQuery mobile (jQM) a été développé. Ce framework vous aide à donner à votre application Web l'apparence d'une véritable application en un clin d'œil. Une raison suffisante pour jeter un coup d'œil détaillé sur jQM.
</p>
<footer>
<p>Droits d'auteur par PSD-Tutorials.de</p>
</footer>
</section>Assurez-vous en tout cas que les éléments footer et header ne contiennent pas d'éléments header et footer supplémentaires.
Regrouper les titres
En relation avec les sections, les titres entrent en jeu. Ces titres peuvent tout d'abord être les éléments classiques h1 à h6. Mais en HTML5, l'élément hgroup est également autorisé. À l'intérieur de ces éléments hgroup, plusieurs titres peuvent à leur tour être inclus.
Jetez d'abord un coup d'œil à un document HTML classique où la structure "habituelle" est définie à l'aide d'éléments hx.
<h1>
Livre
</h1>
<h2>
Chapitre 1
</h2>
<h2>
Chapitre 2
</h2>
<h3>
Sous-chapitre 2.1
</h3>
<h3>
Sous-chapitre 2.2
</h3>
<h2>
Chapitre 3
</h2>
Cette définition implique la structure suivante :
Livre
Chapitre 1
Chapitre 2
Sous-chapitre 2.1
Sous-chapitre 2.2
Chapitre 3
Les titres ne sont cependant pas indentés dans le navigateur.
L'élément hgroup est particulièrement intéressant dans le contexte des textes journalistiques. Ils se composent souvent d'un titre en deux parties, composé d'un titre principal et d'un sous-titre. Un exemple peut illustrer cet aspect.
<hgroup> <h1>Cloud OS</h1> <h2> Le Web en tant que système d'exploitation</h2> </hgroup> <p>Commencez ici le contenu de l'article …</p>
Cet exemple montre clairement que le sous-titre ne commence pas une section distincte dans l'article. Il s'agit plutôt d'une partie du titre de l'article. Cela peut être résumé à l'aide de l'élément hgroup.
À l'intérieur de l'élément hgroup, les éléments h1 à h6 sont autorisés.
Le concept de plan
En HTML5, le concept de plan intervient en plus, impliquant la coopération entre les éléments section et les différents éléments hx. Dans ce concept, les titres sont, comme d'habitude, divisés en différentes niveaux par les éléments h1 à h6. Ainsi, h1 correspond au niveau supérieur, tandis que h6 représente le niveau le plus bas. Il n'y a donc pas de changement par rapport au passé. Maintenant, les éléments hx peuvent être définis à l'intérieur des éléments section. À chaque fois, le comptage commence alors à partir du début, mais toujours un niveau plus bas.
Le concept de plan peut sembler assez compliqué dans la spécification HTML5, mais l'idée derrière est en fait très simple. En effet, cela permet de définir un résumé du contenu qui rend la structure du document lisible par les machines.
Un exemple supplémentaire :
<h1>
Chapitre 1
</h1>
<section>
<h1>
Chapitre 2
</h1>
<section>
<h1>
Chapitre 3
</h1>
</section>
</section>
Le concept de plan HTML5 crée la structure suivante:
1. Chapitre 1
- Chapitre 2
- Chapitre 3
- Chapitre 3
Un autre exemple va illustrer l'effet. Ici encore, le document source tout d'abord.
<section>
<h1>Installation et configuration</h1>
<section>
<h2>Installation</h2>
<p>Tout sur le thème de l'installation
</section> <section>
<h2>Configuration</h2>
<p>Ici vous trouverez tout sur la configuration
</section>
<aside>
<p>Livres intéressants sur le thème...
</aside>
</section>
<footer>
<p>(c) par PSD-Tutorials.de
</footer>
</section>
La structure qui en résulte est la suivante:
1. Section (Installation et configuration)
1.1 Section (Installation)
1.2 Section (Configuration)
1.3 Section (aside)
- Section (footer)
Et un autre exemple:
<body>
<h1>Installation et configuration</h1>
<h2>Installation</h2>
<p>Tout sur le thème de l'installation
...encore plus de contenu...
<section>
<h3>Prérequis</h3>
<p>Tout sur le sujet des prérequis d'installation
...encore plus de contenu...
<h3>Préparatifs</h3>
<p>Tout sur le sujet des préparatifs
...encore plus de contenu...
<h2>Configuration</h2>
<p>Tout sur le thème de la configuration
...encore plus de contenu...
</section>
</body>
La structure du résultat est la suivante:
1. Installation et configuration
1.1 Installation
1.1.1 Prérequis
1.1.2 Préparatifs
1.2 Configuration
Le comptage interne commence donc à 1 à chaque fois. Seuls ces éléments sont concernés par le concept de plan:
• article
• aside
• nav
• section
Par contre, les éléments header et footer restent en dehors.
Merci de noter que le concept de plan n'est pas encore pris en charge par les navigateurs.
Cependant, il ne faudra que peu de temps avant que les fabricants de navigateurs agissent dans ce sens. Les avantages du concept de plan sont trop importants. Pensez par exemple aux barres de navigation générées automatiquement. Mais même dans ce cas, rappelez-vous : même si la structuration sous la forme mentionnée est actuellement ignorée par les navigateurs, vous devriez déjà essayer de structurer logiquement vos documents. Cela vous procurera également une certaine sécurité pour l'avenir de vos sites web.
