Semaine 3 – Structure HTML & Positionnement

📘 Comment assimiler la matière

Objectif de la semaine : lier sémantique HTML et positionnement CSS.

Méthode recommandée : commence par une structure claire, puis applique position/display étape par étape. Avancez par petites étapes et testez chaque changement immédiatement.

Piège fréquent : utiliser trop de div non sémantiques.

🧱 Structure d'une page HTML

Ces balises donnent un sens sémantique à la structure de la page. Elles remplacent les <div> génériques et aident les lecteurs d'écran et les moteurs de recherche.

<body>
  <header>
    <!-- En-tête : logo, titre du site -->
    <nav>
      <!-- Navigation principale -->
      <ul>
        <li><a href="index.html">Accueil</a></li>
        <li><a href="apropos.html">À propos</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <!-- Contenu principal (unique par page) -->
    <section>
      <!-- Groupe thématique avec titre -->
      <h2>Titre de section</h2>
      <article>
        <!-- Contenu autonome : billet, produit, carte -->
      </article>
    </section>

    <aside>
      <!-- Contenu complémentaire : barre latérale, pub -->
    </aside>
  </main>

  <footer>
    <!-- Pied de page : copyright, liens utiles -->
    <p>&copy; 2026 Mon Site</p>
  </footer>
</body>

Balise	Rôle sémantique
`<div>`	Division générique sans sens sémantique — pour la mise en page
`<header>`	En-tête d'une page ou d'une section
`<nav>`	Bloc de navigation
`<main>`	Contenu principal (un seul par page)
`<section>`	Section thématique avec un titre
`<article>`	Contenu autonome et redistribuable
`<aside>`	Contenu secondaire lié au contexte
`<footer>`	Pied de page d'une page ou section

⚙️ Border Radius

border-radius arrondit les coins d'un élément. C'est une des propriétés les plus utilisées en design web moderne.

/* 4 coins égaux */
.carte   { border-radius: 8px; }
.badge   { border-radius: 4px; }
.bouton  { border-radius: 30px; }  /* très arrondi → aspect "pilule" */

/* Cercle parfait (pour un élément carré) */
.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
}

/* Coins individuels : haut-gauche  haut-droite  bas-droite  bas-gauche */
.carte-speciale { border-radius: 0 20px 20px 0; }

/* Valeurs différentes par axe (ellipse) */
border-radius: 50% / 30%;  /* ellipse horizontale/verticale */

📌 Inline vs Block

Chaque élément HTML a un comportement d'affichage (display) par défaut.

/* ===== BLOCK =====
   - Prend toute la largeur disponible
   - Commence sur une nouvelle ligne
   - Accepte width, height, margin, padding
   Exemples natifs : div, p, h1-h6, ul, li, section… */

div { display: block; }  /* valeur par défaut */

/* ===== INLINE =====
   - Se place dans le flux du texte
   - N'accepte PAS width/height
   - margin-top/bottom ignorés
   Exemples natifs : span, a, strong, em, img… */

span { display: inline; }  /* valeur par défaut */

/* ===== INLINE-BLOCK =====
   - Se place comme inline (dans le texte)
   - Mais accepte width, height, margin, padding */

.badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
}

On peut changer le comportement de n'importe quel élément avec display. Par exemple, on peut afficher des <li> horizontalement avec display: inline-block.

🔲 Grid & Flex — Introduction

CSS Grid — mise en page en 2D (lignes ET colonnes)

/* Exemple simple : grille 2 colonnes */
.grille {
  display: grid;
  grid-template-columns: 250px 1fr;    /* sidebar + contenu */
  gap: 1rem;                           /* espace entre cellules */
}

/* Exemple layout de page avec zones nommées */
.layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  grid-template-areas:
    "header header"
    "aside  main"
    "footer footer";
  gap: 1rem;
}

.header { grid-area: header; }
.aside  { grid-area: aside; }
.main   { grid-area: main; }
.footer { grid-area: footer; }

<div class="layout">
  <header class="header">En-tête</header>
  <aside class="aside">Barre latérale</aside>
  <main class="main">Contenu principal</main>
  <footer class="footer">Pied de page</footer>
</div>

Flexbox — mise en page en 1D (ligne OU colonne)

.conteneur {
  display: flex;
  flex-direction: row;        /* → gauche à droite (défaut) */
  flex-direction: column;     /* ↓ haut en bas */
  justify-content: center;    /* alignement axe principal */
  align-items: center;        /* alignement axe croisé */
  gap: 1rem;
}

/* Centrer un élément dans sa boîte */
.centre {
  display: flex;
  justify-content: center;
  align-items: center;
}

Flexbox est parfait pour une ligne ou une colonne. Grid est idéal pour des layouts 2D (lignes ET colonnes simultanément). Les deux se complètent. Pour pratiquer, essayez Flexbox Froggy.

📍 Positionnement : absolute, fixed, sticky

La propriété position contrôle comment un élément est placé dans la page. Elle change son comportement par rapport au flux normal.

/* STATIC (défaut) — suit le flux normal */
.normal { position: static; }

/* RELATIVE — décalé par rapport à sa position normale
   L'espace d'origine est conservé */
.decale {
  position: relative;
  top: 10px;    /* descend de 10px */
  left: 20px;   /* déplace à droite de 20px */
}

/* ABSOLUTE — sort du flux, se positionne par rapport
   au plus proche ancêtre "positionné" (non static) */
.parent { position: relative; }  /* ancêtre de référence */

.badge-absolu {
  position: absolute;
  top: 10px;
  right: 10px;  /* 10px du coin supérieur droit du parent */
}

/* FIXED — sort du flux, reste visible même en défilant.
   Se positionne par rapport à la fenêtre du navigateur */
.barre-superieure {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;    /* toujours en haut de l'écran */
  z-index: 100;   /* passe au-dessus des autres éléments */
}

.bouton-haut {
  position: fixed;
  bottom: 20px;
  right: 20px;   /* bouton "retour en haut" */
}

/* STICKY — normal jusqu'à un point de défilement,
   puis se colle comme fixed */
.en-tete-tableau {
  position: sticky;
  top: 0;   /* se colle en haut quand on fait défiler */
  background: white;
}

nav {
  position: sticky;
  top: 0;   /* nav qui reste visible lors du défilement */
}

z-index contrôle l'ordre d'empilement des éléments positionnés. Un z-index plus élevé passe au-dessus. Fonctionne uniquement sur les éléments avec position autre que static.

📝 Exercice de la semaine

Réalisez une page structurée avec balises sémantiques et positionnement.

Créez un layout avec header, nav, main, section et footer.
Ajoutez un élément positionné en absolute à l’intérieur d’un conteneur relative.
Utilisez au moins une zone sticky (ex. barre de navigation) et testez le défilement.

🧠 Mini quiz de la semaine

Les questions sont cachées par défaut. Clique sur « Commencer le quiz » pour débuter.

Structure HTML & Positionnement CSS

CSS Grid — mise en page en 2D (lignes ET colonnes)

Flexbox — mise en page en 1D (ligne OU colonne)