Boxes and sections · Boîtes et sections
This page needs a recent browser (with SharedArrayBuffer support). Please update Chrome, Edge, Firefox or Safari to the latest version. · Cette page nécessite un navigateur récent (avec support SharedArrayBuffer). Veuillez mettre à jour Chrome, Edge, Firefox ou Safari vers la dernière version.
English
Boxes and sections
- Bigger pages need structure — clear areas, not one long pile.
- A
<div>is a plain box. A<span>is a small inline box for a few words. - Boxes group things together, so you can arrange and style them later.
Français
Boîtes et sections
- Les pages plus grandes ont besoin d'une structure — des zones claires, pas une longue pile unique.
- Un
<div>est une boîte simple. Un<span>est une petite boîte en ligne pour quelques mots. - Les boîtes regroupent les éléments, afin que vous puissiez les organiser et les styliser plus tard.
English
Named sections
- HTML has special boxes with meaningful names:
<header>(top),<main>(the main content),<footer>(bottom),<nav>(menu links).- They work like
<div>, but the names tell people — and search engines — what each part is.
Français
Sections nommées
- HTML possède des boîtes spéciales avec des noms significatifs :
<header>(haut),<main>(le contenu principal),<footer>(bas),<nav>(liens du menu).- Elles fonctionnent comme
<div>, mais les noms indiquent aux utilisateurs — et aux moteurs de recherche — ce qu'est chaque partie.
<header>
<h1>My site</h1>
</header>
<main>
<p>Welcome to my page.</p>
</main>
<footer>
<small>Made by me</small>
</footer>
English
Classes name your boxes
- A class is a label you add to a tag:
<div class="card">. - It does nothing on its own — but soon, CSS will use it to style that box.
- This is your bridge into the next half of the course.
Français
Les classes nomment vos boîtes
- Une classe est une étiquette que vous ajoutez à une balise :
<div class="card">. - Elle ne fait rien seule — mais bientôt, CSS l'utilisera pour styliser cette boîte.
- C'est votre pont vers la seconde moitié du cours.
English
Common mistakes
<div>is a block (new line);<span>is inline (stays in the text).- Use semantic tags like
<header>and<nav>where they fit.
Français
Erreurs courantes
<div>est un élément de bloc (nouvelle ligne) ;<span>est en ligne (reste dans le texte).- Utilisez des balises sémantiques comme
<header>et<nav>là où elles conviennent.
English
Now you try
- Add a
<header>and a<footer>, then give a box a class. - Next lesson, we start making things look good with CSS.
Français
À vous maintenant
- Ajoutez une
<header>et une<footer>, puis donnez une classe à une boîte. - Dans la prochaine leçon, nous commencerons à rendre les choses jolies avec CSS.
Explore · Explorer
A box wraps its content · Une boîte entoure son contenu
A <div> is a box: content surrounded by padding, border, margin. · Une balise <div> est une boîte : contenu entouré de padding, border, margin.
Give the page a top and a bottom. Wrap the title in a <header>, and the small note in a <footer>. · Donnez à la page un haut et un bas. Enveloppez le titre dans une balise <header>, et la petite note dans une balise <footer>.
Give this box a name so we can style it later. Add class="card" to the <div>. · Donnez un nom à cette boîte pour pouvoir la styliser plus tard. Ajoutez class="card" à la balise <div>.