Modèles de mise en page HTML

Une mise en page désigne la façon dont les grandes zones d'une page — la bannière, la navigation, le contenu principal, la barre latérale et le pied de page — sont disposées à l'écran. Ce chapitre montre comment construire une mise en page de façon moderne : balisez les zones avec des éléments sémantiques HTML5, puis positionnez-les avec CSS Flexbox ou CSS Grid. À la fin, vous serez capable d'assembler une page multi-colonnes responsive de zéro.

La structure d'une page typique

Presque tous les sites web sont construits à partir des mêmes cinq blocs de base :

Zone	Rôle	Élément
En-tête	Logo, titre du site, bannière	`<header>`
Navigation	Menu principal / liens	`<nav>`
Contenu principal	Le contenu unique de la page	`<main>`
Barre latérale	Liens connexes, publicités, « extras »	`<aside>`
Pied de page	Copyright, contact, liens secondaires	`<footer>`

Avant HTML5, ces zones étaient toutes écrites sous forme d'éléments génériques <div> avec des attributs id ou class comme <div id="header">. Cela s'affiche toujours correctement, mais sans signification : un navigateur, un lecteur d'écran ou un moteur de recherche ne peut pas distinguer une bannière d'un pied de page. Les éléments sémantiques ci-dessus décrivent ce qu'est chaque zone, ce qui améliore l'accessibilité et le référencement sans effort supplémentaire. Consultez la liste complète dans Éléments sémantiques en HTML5.

Un squelette de page sémantique

Commencez par le balisage, avant d'ajouter du CSS de mise en page. Utilisez chaque élément repère une seule fois à l'endroit où il appartient naturellement :

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My page</title>
  </head>
  <body>
    <header>
      <h1>My Website</h1>
      <nav>
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#">Contact</a>
      </nav>
    </header>

    <main>
      <h2>Welcome</h2>
      <p>This is the primary content of the page.</p>
    </main>

    <aside>
      <h2>Related</h2>
      <p>Links, ads, or extra information go here.</p>
    </aside>

    <footer>
      <p>&copy; 2024 My Website</p>
    </footer>
  </body>
</html>

Quelques règles à retenir :

Il ne doit y avoir qu'un seul <main> par page, et il ne doit pas être imbriqué dans <header>, <nav>, <aside> ou <footer>.
<nav> est réservé aux blocs de navigation principaux, pas à tous les groupes de liens.
<aside> contient du contenu tangentiel au contenu principal — il fonctionne que vous le placiez à l'intérieur ou à côté de <main>.

Ce squelette n'a pas encore de colonnes ; tout s'empile verticalement. La mise en page — transformer ces blocs en colonnes — est l'affaire du CSS, que nous ajoutons ensuite.

Une mise en page à deux colonnes avec Flexbox

CSS Flexbox dispose les éléments sur un seul axe — une ligne ou une colonne — et est idéal pour un agencement contenu-plus-barre-latérale. Enveloppez <main> et <aside> dans un conteneur flex ; display: flex les place côte à côte, et flex contrôle comment l'espace restant est partagé.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Flexbox two-column layout</title>
    <style>
      body {
        margin: 0;
        font-family: Arial, sans-serif;
      }
      header, footer {
        background: #2c3e50;
        color: #fff;
        padding: 16px;
      }
      .container {
        display: flex;
        gap: 16px;
        padding: 16px;
      }
      main {
        flex: 3;            /* main takes 3 shares of the space */
        background: #ecf0f1;
        padding: 16px;
      }
      aside {
        flex: 1;            /* sidebar takes 1 share */
        background: #dfe6e9;
        padding: 16px;
      }
    </style>
  </head>
  <body>
    <header><h1>My Website</h1></header>
    <div class="container">
      <main>
        <h2>Main content</h2>
        <p>This column grows to fill most of the width.</p>
      </main>
      <aside>
        <h2>Sidebar</h2>
        <p>A narrower second column.</p>
      </aside>
    </div>
    <footer><p>&copy; 2024 My Website</p></footer>
  </body>
</html>

flex: 3 et flex: 1 font que les deux colonnes se partagent la largeur disponible selon un rapport de 3 pour 1. Comme ce sont des proportions, les colonnes restent fluides : elles rétrécissent et s'agrandissent avec le viewport au lieu de rester à un nombre fixe de pixels. Pour les empiler sur les petits écrans, encapsulez la règle dans une media query :

@media (max-width: 600px) {
  .container {
    flex-direction: column;
  }
}

Une mise en page complète avec CSS Grid

CSS Grid dispose les éléments en deux dimensions — lignes et colonnes à la fois — ce qui en fait le meilleur outil pour une mise en page de page entière. Avec grid-template-areas, vous pouvez dessiner la mise en page en texte brut et affecter chaque élément à une zone nommée :

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>CSS Grid page layout</title>
    <style>
      body {
        margin: 0;
        font-family: Arial, sans-serif;
      }
      .grid {
        display: grid;
        grid-template-columns: 1fr 3fr;   /* sidebar : content */
        grid-template-areas:
          "header header"
          "nav    main"
          "footer footer";
        gap: 12px;
        padding: 12px;
      }
      header { grid-area: header; background: #2c3e50; color: #fff; }
      nav    { grid-area: nav;    background: #dfe6e9; }
      main   { grid-area: main;   background: #ecf0f1; }
      footer { grid-area: footer; background: #2c3e50; color: #fff; }
      header, nav, main, footer { padding: 16px; }
    </style>
  </head>
  <body>
    <div class="grid">
      <header><h1>My Website</h1></header>
      <nav>Navigation</nav>
      <main>
        <h2>Main content</h2>
        <p>The header and footer span both columns.</p>
      </main>
      <footer><p>&copy; 2024 My Website</p></footer>
    </div>
  </body>
</html>

L'unité fr signifie « une fraction de l'espace disponible », donc 1fr 3fr rend la colonne de contenu trois fois plus large que la barre latérale — encore une fois, un rapport fluide plutôt qu'une largeur fixe. La carte visuelle dans grid-template-areas permet à l'en-tête et au pied de page de s'étendre sur les deux colonnes simplement en répétant leurs noms sur une ligne.

Flexbox ou Grid — lequel utiliser ?

Les deux sont modernes, bien supportés et souvent interchangeables, mais ils ont une répartition naturelle du travail :

Optez pour Flexbox lorsque vous disposez des éléments dans une seule direction — une barre de navigation, une barre d'outils, une rangée de cartes ou un agencement contenu-plus-barre-latérale.
Optez pour Grid lorsque vous avez besoin de lignes et de colonnes ensemble, comme pour une mise en page de page entière (en-tête / barre latérale / contenu / pied de page) ou une galerie d'images.

Un modèle courant et robuste consiste à utiliser Grid pour le squelette global de la page et Flexbox pour les composants plus petits à l'intérieur de chaque zone.

Mises en page à largeur fixe ou fluides

Les exemples ci-dessus sont fluides (aussi appelées liquides) : les largeurs sont exprimées sous forme de ratios (flex: 3, 3fr) ou de pourcentages, de sorte que la mise en page s'adapte à n'importe quelle taille d'écran. C'est le fondement du design responsive.

Une mise en page à largeur fixe verrouille les zones à une valeur de pixel précise, par exemple width: 960px ou flex: 0 0 240px pour une barre latérale. Les largeurs fixes offrent un contrôle précis, mais ne s'adaptent pas — sur un téléphone étroit, elles provoquent un défilement horizontal, et sur un moniteur large, elles laissent de l'espace vide. En pratique, la plupart des sites combinent les deux : une barre latérale à largeur fixe à côté d'une colonne de contenu fluide, souvent plafonnée avec max-width pour que les très grands écrans restent lisibles.

Info

L'ancienne approche des mises en page multi-colonnes utilisait la propriété CSS float associée à des valeurs négatives de margin. Cette technique est désormais obsolète — elle est fragile et difficile à maintenir. Utilisez Flexbox ou Grid pour la mise en page ; float est aujourd'hui principalement utilisé pour faire flotter du texte autour d'une image.

Modèles de mise en page prêts à l'emploi

Si vous préférez partir d'une structure terminée, la galerie ci-dessous propose des mises en page HTML téléchargeables — fixes, fluides et hybrides, à deux ou trois colonnes. Elles constituent une référence utile, mais les techniques modernes présentées ci-dessus sont la méthode recommandée pour créer de nouvelles pages.

Ces modèles ont été créés avec la technique héritée CSS float et les margin négatives. Vous pouvez les étudier pour vous inspirer, mais reconstruisez la structure avec les approches Flexbox ou Grid ci-dessus pour un résultat plus facile à maintenir et responsive par défaut.

Personnaliser un modèle

Une fois que vous avez trouvé une structure qui vous convient, voici les façons courantes de la rendre vôtre :

Remplacez le texte de remplacement et ajoutez vos propres images.
Ajustez le balisage sémantique pour correspondre à votre contenu.
Approfondissez le balisage avec notre tutoriel HTML.
Restylisez la mise en page avec notre tutoriel CSS.
Ajoutez de l'interactivité avec notre tutoriel JavaScript.

Pratique

Quels éléments sémantiques HTML5 sont couramment utilisés pour structurer une mise en page ?

Pratique

Quelle technique CSS est la mieux adaptée à une mise en page complète à deux dimensions avec lignes et colonnes ?

CSS GridCSS float avec des marges négativesLes tableaux HTMLLa balise <center>