Structure HTML de base

layout.html

7 juillet 2011,
par Romy Têtue

Mots-clefs associés à cet article :

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.


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 (cas vécu), il suffit alors 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 (HTML2.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.

Partagez cet article :

Voter pour cet artice sur hellocoton.fr Netvibes Del.ico.us

Vos commentaires

  • 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…

  • 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 ?!

  • 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.

  • Le 5 novembre 2013 à 14:02, par Bernard En réponse à : Structure HTML de base

    Aujourd’hui conseillerais-tu toujours cette stucture ?

  • 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 :

    <div class="page">
           <nav class="skiplink"><a href="#content">Aller au contenu</a> | <a href="#nav">Aller au menu</a></nav>
           <header class="header">En-tête</header>
           <nav class="nav" id="nav">Navigation</nav>
           <main class="main">
                   <div class="wrapper">
                           <article class="content" id="content">Contenu</article>
                   </div>
                   <aside class="aside">Contexte</aside>
           </main>
           <footer class="footer">Pied de page</footer>
    </div>

    Les noms des sélecteurs CSS restent les mêmes, s’appliquant de même en vieux HTML qu’en HTML5.

Un message, un commentaire ?


Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici
  • Ce formulaire accepte les raccourcis SPIP [->url] {{gras}} {italique} <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Suivre les commentaires : RSS 2.0 | Atom