Chargement...

Block et inline en HTML

Après les tableaux, regardez le flux de page : chaque élément a une habit display par défaut. Deux familles : block et inline.

Que signifie flux ici

L’ordre d’empilement par défaut sans CSS de mise en page. Le paragraphe est block ; le lien reste inline.

Réponse directe

Block : p, div, titres, listes, table. Inline : a, strong, em, span, code. Apprenez d’abord les défauts.

📊 Common defaults

Category	Examples	Flow habit
Block	p, div, h1–h6, ul, ol, section, table	New line, full available width (typical)
Inline	a, strong, em, span, code	Continues inside the text line

Boîtes block avec pièces inline

Un p contient ; a/strong restent dans la ligne. Un div suivant ouvre un nouveau bloc.

Block paragraph with inline pieces

html

HTML Code

<p>
Read the <a href="guide.html">guide</a> and note the
<strong>important</strong> words before you continue.
</p>
<div>This div is a separate block box on its own line.</div>

Lecture de l’exemple paragraphe

p possède la boîte
a et strong dans la ligne
div en dessous = autre block

`div` versus `span`

div est block par défaut ; span est inline. Courtes phrases → span.

div versus span contrast

html

HTML Code

<p>Price: <span class="note">includes tax</span> today only.</p>
<div class="note">This whole note sits on its own block line.</div>

Lecture div/span

span dans la ligne
div sur sa propre rangée block

CSS peut changer display plus tard

Mémorisez les défauts pour voir les overrides.

Pratique

Deux p empilés
Deux a dans un paragraphe
Comparer span et div
strong sans forcer une ligne
Noter trois tags par catégorie

Erreurs faciles

div pour chaque petite phrase
attendre une nouvelle ligne de strong
oublier l’override CSS

Résumé

Block ≈ nouvelle ligne
Inline ≈ dans la ligne
span pour petits crochets
CSS ensuite

🧠 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