Mise en page

Balises de base

Les balises de base d'une page classique:

html, body, header, main, footer etc.


Les balises qu'on voient souvent en entête (pas nécessairement dans cet ordre mais voici un exemple) :

<header> <a href="#" class="logo"> <img src="logo.svg" alt="Texte du logo"> </a> <button id="burger-toggler">☰</button> <nav> <ul> <li><a href="#">Page1</a></li> <li><a href="#">Page2</a></li> <li><a href="#">Page3</a></li> </ul> </nav> </header> Limiter la largeur de la page

🎯 Pourquoi limiter la largeur du contenu (avec max-width) ?

  1. 💡 Lisibilité :

    • Des lignes trop longues fatiguent l'œil. On recommande généralement entre 50 et 75 caractères par ligne pour le confort de lecture. Si ton contenu s’étale sur un écran 4K sans limite de largeur, chaque ligne peut faire plus de 200 caractères : c’est éprouvant à lire.

  2. 📐 Hiérarchie visuelle :

    • Une page trop large peut diluer la structure : les blocs de texte ou de contenu peuvent paraître éparpillés, et l’utilisateur perd ses repères. Un max-width permet de recentrer le contenu et de mieux organiser l’espace.

  3. 🧭 Guidage de l’utilisateur :

    • Un conteneur bien limité permet de canaliser l’attention vers le contenu important, sans que l'œil ne se perde sur les côtés. Cela favorise une lecture en F ou en Z, des schémas de lecture bien établis.

  4. 📱 Cohérence responsive :

    • En fixant un max-width, tu gardes un design fluide mais contenu : il s’adapte aux petits écrans tout en restant cohérent sur les très grands.

✅ Bonnes pratiques

  • Utiliser une max-width autour de 1200px à 1440px pour le conteneur principal (main, .container, etc.).
    👉 Exemple :

    .container { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 1rem; }
  • Sur les très grands écrans (ex. 1920px+), prévoir des marges latérales équilibrées à droite et à gauche du conteneur de la page.
  • Adapter le max-width selon le type de contenu :
    • Texte courant (articles, blog) : ~700–900px pour favoriser la lecture.
    • App web ou tableaux de données : plus large (jusqu’à 1440px), car le contenu est plus technique et moins linéaire.
  • Si nécessaire, créer des breakpoints pour les très grands écrans afin d'éviter une impression de "vide" ou des interfaces trop compactes au centre.

Résumé à propos de la largeur maximum

Même avec les écrans très larges comme dans vos laboratoire au collège et avec le CSS moderne et les outils de layout comme Grid ou Flexbox, le confort utilisateur reste la priorité. Et cela passe encore par :

  • une lecture fluide,
  • une structure claire,
  • et une interface qui ne se perd pas dans l’espace disponible.