Structure HTML de base

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.