Chargement...

Mise en page HTML

Après la sémantique, la mise en page assemble les régions ; CSS place.

Structure d’abord, placement ensuite

Clarifier l’histoire, puis colonnes — pas de tableau géant.

Réponse directe

Squelette landmarks. Contenu unique dans main. Colonnes en CSS. Pas de table de layout.

📊 HTML structure vs CSS visuals

Layer	Responsibility	Examples
HTML landmarks	Name page regions by meaning	header, nav, main, aside, footer
HTML wrappers	Optional styling hooks with no landmark role	div class="row"
CSS	Visual columns, gaps, widths, order on screen	flex, grid, margin, width
Avoid	Fake layout with data tables	table/tr/td for the whole site chrome

Squelette landmarks

Header, rangée, main+article, aside, footer. div.row = crochet CSS.

Landmark layout skeleton

html

HTML Code

<body>
<header>
<h1>News</h1>
<nav>
<a href="index.html">Home</a>
<a href="local.html">Local</a>
</nav>
</header>
<div class="row">
<main>
<article>
<h2>Story</h2>
<p>Primary article content goes here.</p>
</article>
</main>
<aside>
<h2>Related</h2>
<p>Side links and notes.</p>
</aside>
</div>
<footer>
<p>Contact</p>
</footer>
</body>

Lire le squelette

Histoire dans main
aside lié
sans CSS, empilement vertical

Mini CSS pour colonnes

Mêmes landmarks ; flex sur .row.

Layout skeleton with flex row

html

HTML Code

<body>
<header><h1>News</h1></header>
<div class="row">
<main>
<article><h2>Story</h2><p>Primary content.</p></article>
</main>
<aside><h2>Related</h2><p>Side note.</p></aside>
</div>
<footer><p>Contact</p></footer>
<style>
.row { display: flex; gap: 16px; }
main { flex: 2; }
aside { flex: 1; }
</style>
</body>

Lire l’aperçu flex

Sens inchangé
main plus large
pas de td pour colonnes

Tableaux pour données, pas le chrome

Évitez les tableaux de layout.

Pratique

header/main/aside/footer
article dans main
pas de table de layout

Erreurs fréquentes

table de layout
omettre main
prendre row pour un landmark

Résumé

HTML nomme ; CSS place
pas de tables de layout
ensuite : responsive

🧠 Testez Vos Connaissances

Prêt à Commencer

Testez Vos Connaissances

Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet

❓

Questions

🎯

70%

Pour Réussir

♾️

∞

Temps

🔄

∞

Tentatives

📝 Instructions

Lisez chaque question attentivement
Sélectionnez la meilleure réponse pour chaque question
Vous pouvez refaire le quiz autant de fois que vous le souhaitez
Votre progression sera affichée en haut

Langue