Structure HTML de base

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" rel="nofollow" accesskey="s">Aller au contenu</a> | <a href="#nav" rel="nofollow" accesskey="n">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.

Gardez cette structure dans un fichier layout.html, dans chaque site, avec le positionnement CSS correspondant dans une feuille de style homonyme, layout.css.

Voir aussi : CSS coding : semantic approach in naming convention, by Antonio Lupetti, November 16, 2008.

[1] Si vous ne comprenez pas pourquoi, faites-le quand même ;) pour faciliter la vie de ceusses qui passent après vous — ils vous remercieront, pour plein de raisons ! Dans le calcul de priorité des sélecteurs, un id pèse davantage qu’une class et est donc plus difficile à surcharger. Par exemple, la déclaration .chapo p { ... } est sans effet après #content p { ... }, alors qu’elle surcharge .content p { ... } de façon satisfaisante.

[2] Éviter les identifiants uniques offre davantage de modularité, en laissant la possibilité de dupliquer l’un de ces blocs si besoin était au cours de la vie du site. Par exemple, pour ajouter un « big footer » à l’arrache, il suffit de dupliquer le bloc .main, avec ceux qu’ils contient (.content et .aside) afin de bénéficier du même colonage, puis de cibler en ajoutant d’autres classes, par exemple : .main.bigfooter — et, pour ajouter des étages à la fusée : .main.primary, .main.secondary, etc.

layout.html (HTML – 2.5 ko) – 06/07/11.
Structure HTML de base pour la mise en page web, en cinq blocs principaux : .header, .nav, .content, .aside et .footer.