Structure HTML de base pour la mise en page web, en cinq blocs principaux : .header
, .nav
, .content
, .aside
et .footer
.
Une page web ressemble grosso modo à ça :
C’est à dire un « contenu » central — c’est quand même le plus important —, flanqué d’une colonne latérale de navigation et/ou d’informations contextuelles, chapeauté d’un « en-tête » et borné d’un « pied de page ».
Bien que ce soit conceptuellement très simple, ça reste toujours assez délicat à mettre en page en HTML et CSS. Voici les balises HTML5 correspondantes :
On ne peut pas se reposer sur ces seules balises, car une page web bien structurée en HTML5 contient plusieurs balises <footer>
et <header>
. C’est pourquoi il vaut mieux doubler chacun de ces blocs principaux d’un sélecteur CSS homonyme :
<header class="header">header</header>
<nav class="nav">nav</nav>
...
<aside class="aside">aside</aside>
<footer class="footer">footer</footer>
avec, dans la feuille de style correspondante :
.header { ... }
.nav { ... }
...
.aside { ... }
.footer { ... }
Cela permet en outre d’utiliser le même code CSS pour des pages structurées en HTML5 ou en XHTML. Poursuivons d’ailleurs en <div>
, lesquelles sont valables dans tous les cas :
<div class="header">header</div>
<div class="nav">nav</div>
...
<div class="aside">aside</div>
<div class="footer">footer</div>
Notez que pour ces blocs principaux, mieux vaut utiliser des class
, et non des id
, afin de se garder une bonne marge de manœuvre lors des inévitables surcharges ultérieures [1].
Nous avons donc :
-
.header
pour l’en-tête, -
.footer
pour le pied de page, - et
.aside
pour les contenus contextuels, - sans oublier
.nav
pour la navigation principale — qui me donne l’idée de préfixer de même tous mes éléments de navigation :.navbar, .navtools, .navsub, .navsup, .navtop
, etc.
Il manque :
- un bloc
.content
pour le contenu principal de la page.
Voici donc notre structure élémentaire complète :
<div class="header">En-tête</div>
<div class="nav">Navigation</div>
<div class="content">Contenu</div>
<div class="aside">Contexte</div>
<div class="footer">Pied de page</div>
Pour être vraiment à l’aise en intégration CSS, il est utile d’ajouter quelques <div>
englobantes :
-
.page
(parfois appelé.container
) englobe toute la page, comme son nom l’indique -
.main
contient les bloc centraux, ici.content
et.aside
, mais qui pourrait être plus nombreux :.extra
, etc. On peut superposer plusieurs blocs.main
, pour faire une mise en page à registres horizontaux [2]. -
.wrapper
englobe le.content
seul, juste pour faciliter la mise en page, comme dans Layout Gala, qui propose ainsi une quarantaine de variantes, rien que ça.
Voici donc :
<div class="page">
<div class="header">En-tête</div>
<div class="nav">Navigation</div>
<div class="main">
<div class="wrapper">
<div class="content">Contenu</div>
</div>
<div class="aside">Contexte</div>
</div>
<div class="footer">Pied de page</div>
</div>
Et pour bien faire, ajoutons quelques ancres, #content
et #nav
, afin de pouvoir accéder rapidement au contenu et à la navigation principale (.skiplink), car c’est bien maintenant, au moment où l’on définit la structure, qu’il faut y penser :
<div class="page">
<p class="skiplink"><a href="#content">Aller au contenu</a> | <a href="#nav">Aller au menu</a></p>
<div class="header">En-tête</div>
<div class="nav" id="nav">Navigation</div>
<div class="main">
<div class="wrapper">
<div class="content" id="content">Contenu</div>
</div>
<div class="aside">Contexte</div>
</div>
<div class="footer">Pied de page</div>
</div>
Cette structure de base à cinq blocs principaux convient dans la majorité des cas, car elle permet de fabriquer une grande variété de mises en page.
Vos commentaires
1. Le 4 novembre 2011 à 22:26, par Olivier G.
En réponse à : Structure HTML de base
Idéalement, tu ajouterais aussi les rôles ARIA…
2. Le 26 septembre 2012 à 08:54, par Edouard
En réponse à : Structure HTML de base
J’ai (enfin) saisi la structure HTML. Mais que recommanderais-tu à propos du HTML 5 : faut-il développer ses sites en HTML 5 ou non ?
Tu as peut-être un article a conseiller ?!
3. Le 30 novembre 2012 à 15:29, par Romy Têtue
En réponse à : Structure HTML de base
Ah ah ! Quand je vous dis qu’il manque un élément pour le bloc principal de la page — que j’avais ici désigné par « content » mais qui, réflexion faite, serait mieux nommé « main » —, voici que le groupe de travail du W3C en discute : The use cases for a
<main>
element in HTML, by silvia.4. Le 5 novembre 2013 à 14:02, par Bernard
En réponse à : Structure HTML de base
Aujourd’hui conseillerais-tu toujours cette stucture ?
5. Le 12 novembre 2013 à 23:32, par Romy Têtue
En réponse à : Structure HTML de base
Bonne question… Et bien oui ! Pour décliner l’exemple donné dans cet article, voici ce que ça donnerait en HTML5 :
Les noms des sélecteurs CSS restent les mêmes, s’appliquant de même en vieux HTML qu’en HTML5.
Répondre à cet article
Suivre les commentaires :
| 