9. Éléments de bloc vs Éléments en ligne

Chaque élément HTML appartient à l'une de ces deux catégories majeures. Comprendre cette distinction est fondamental pour structurer vos mises en page.

9.1 Éléments de bloc (Block-Level)

Les éléments de bloc commencent toujours sur une nouvelle ligne et occupent toute la largeur disponible, repoussant le contenu adjacent en dessous d'eux. Ils créent de grandes divisions structurelles.

Exemples : <h1> - <h6>, <p>, <div>, <section>, <ul>, <form>.

html

Je suis un élément de bloc.

Je suis aussi un élément de bloc, forcé sur une nouvelle ligne.

9.2 Éléments en ligne (Inline)

Les éléments en ligne ne prennent que la largeur nécessaire (la taille de leur contenu). Ils s'insèrent naturellement dans le contenu d'un élément de bloc, apparaissant côte à côte.

Exemples : <a>, <span>, <strong>, <em>, <img>.

html

Ce texte contient un élément en ligne et un autre élément en ligne.

Différence clé : Vous ne pouvez pas placer un élément de bloc à l'intérieur d'un élément en ligne. (Ex: vous ne pouvez pas mettre un <p> à l'intérieur d'un <em>).