Apprends Éléments Block vs Inline

Deux modèles d'affichage

Chaque élément HTML suit l'un des deux comportements d'affichage par défaut :

Éléments de type block (block-level)

Commencent sur une nouvelle ligne et occupent toute la largeur disponible.
Tu peux définir la largeur, la hauteur, les marges et le padding sur tous les côtés.
Exemples : <div>, <p>, <h1>–<h6>, <ul>, <ol>, <li>, <table>, <section>, <article>, <header>, <footer>, <form>, <blockquote>.

Éléments inline

S'intègrent dans le flux du texte sans casser la ligne.
La largeur et la hauteur sont déterminées par leur contenu ; les marges verticales n'ont aucun effet.
Exemples : <span>, <a>, <strong>, <em>, <img>, <code>, <br>, <input>, <label>, <abbr>, <time>.

Cette distinction est essentielle pour comprendre comment ta page organise le contenu.

Block vs Inline en action

html

<!-- Block elements: each starts on a new line -->
<div style="background: #1a1a2e; padding: 8px;">
  <h2>Block Element</h2>
  <p>This paragraph is a block element. It takes the full width.</p>
</div>

<!-- Inline elements: flow within the same line -->
<p>
  This text contains <strong>bold</strong> and <em>italic</em> words,
  plus a <a href="#">link</a> — all inline.
</p>

<!-- Mixing: inline elements inside block elements -->
<p>
  Use <span style="color: #00d4ff;">span</span> to style
  a piece of text without breaking the flow.
</p>

Règles d'imbrication

HTML a des règles strictes concernant quels éléments peuvent contenir d'autres éléments :

Les éléments block peuvent contenir à la fois des éléments block et inline (avec des exceptions).
Les éléments inline ne doivent contenir que d'autres éléments inline — jamais d'éléments block.
<p> ne peut pas contenir d'éléments block. Si tu mets un <div> à l'intérieur d'un <p>, le navigateur fermera automatiquement le paragraphe avant le div.
<a> est spécial — il est inline mais peut envelopper des éléments block en HTML5 (connu sous le nom de "modèle de contenu transparent").

Le duo `<div>` et `<span>`

<div> est le conteneur block générique. Utilise-le quand aucun élément sémantique ne convient.
<span> est le conteneur inline générique. Utilise-le pour cibler un morceau de texte avec du CSS ou JavaScript.

Ni <div> ni <span> ne portent de signification sémantique — ce sont purement des points d'ancrage structurels.

La propriété CSS display

La classification block/inline est en fait une valeur CSS par défaut. Chaque élément a une propriété display par défaut :

Les éléments block ont display: block par défaut.
Les éléments inline ont display: inline par défaut.

Tu peux modifier cela avec du CSS. Par exemple, display: inline-block te donne le comportement de flux inline mais permet de définir la largeur, la hauteur et les marges verticales — le meilleur des deux mondes.

D'autres valeurs courantes de display incluent flex, grid, et none (cache complètement l'élément). Ce sont des sujets CSS, mais comprendre les valeurs par défaut HTML est essentiel avant de les personnaliser.

Que se passe-t-il si tu places un <div> à l'intérieur d'un élément <p> ?

Éléments Block vs Inline