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.

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.

Répondre à cet article

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