Éléments de bloc et en ligne HTML

Chaque élément HTML visible est disposé par le navigateur sous forme de boîte bloc ou en ligne. Les boîtes de bloc s'empilent verticalement et occupent toute la largeur disponible ; les boîtes en ligne s'écoulent horizontalement dans une ligne de texte, comme des mots dans une phrase. Comprendre cette distinction est essentiel pour contrôler la mise en page.

Il est important de savoir que « bloc » et « en ligne » ne sont pas des catégories HTML fixes — ils décrivent la façon dont un élément est rendu par défaut. HTML5 moderne regroupe les éléments par catégories de contenu (contenu de flux, contenu phrasé, etc.), tandis que la distinction bloc/en ligne est en réalité un concept CSS contrôlé par la propriété display. Cela signifie que le comportement par défaut de n'importe quel élément peut être modifié : un <span> peut se comporter comme un bloc, et un <div> comme un élément en ligne.

Voir aussi : Propriété CSS display · Balise <div> · Balise <span>

Cette page explique ce que sont les éléments de bloc et les éléments en ligne, la liste complète de chaque catégorie, comment display permet de modifier le comportement par défaut, la règle d'imbrication fondamentale, et quand choisir <div> plutôt que <span>.

Éléments de bloc

Un élément de bloc est un élément HTML qui commence sur une nouvelle ligne et occupe toute la largeur horizontale disponible de son élément parent. Ce type d'élément crée des blocs de contenu (paragraphes, divisions de page). La majorité des éléments HTML sont des éléments de bloc.

Les éléments de bloc sont utilisés dans le corps d'un document HTML et peuvent contenir des éléments en ligne ou d'autres éléments de bloc.

Exemple d'un élément de bloc :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <div>This is a block-level element. It starts on a new line and takes up the full width.</div>
    <p>This is another block-level element. It also starts on a new line.</p>
  </body>
</html>

Essayez vous-même »

Éléments de bloc :
`<address>`
`<canvas>`
`<dt>`
`<footer>`
`<hr>`
`<noscript>`
`<pre>`
`<ul>`

Éléments en ligne

Contrairement aux éléments de bloc, les éléments en ligne ne commencent pas sur une nouvelle ligne. Ils débutent au sein d'une ligne et n'occupent que la largeur nécessaire. Les éléments en ligne font partie du texte principal.

Les éléments en ligne contiennent généralement d'autres éléments en ligne, ou peuvent être vides.

Exemple d'un élément en ligne :

Ici, un <img> se trouve à côté d'un paragraphe, et un élément <a> en ligne s'intègre dans le texte sans interrompre la ligne :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>Heading </h1>
    <p>This is Aleq's photo</p>
    <img src="https://placehold.co/200x185?text=Photo" alt="Aleq" width="200" height="185"/>
  </body>
</html>

Essayez vous-même »

Pour observer clairement le flux en ligne, placez un <span> au milieu d'une phrase. Puisque <span> est en ligne, le texte continue sur la même ligne et seul le contenu du span est affecté :

<p>The total price is
  <span style="color: red; font-weight: bold;">$49.99</span>
  including tax.</p>

Le $49.99 mis en forme reste dans la ligne de texte courant — rien ne passe à la ligne suivante.

Éléments en ligne :
`<a>`
`<br>`
`<data>`
`<i>`
`<kbd>`
`<output>`
`<script>`
`<strong>`
`<time>`

Modifier l'affichage avec CSS

Puisque les comportements bloc et en ligne sont des comportements de rendu, vous pouvez les modifier avec la propriété CSS display. C'est l'une des raisons les plus courantes d'utiliser display.

Dans l'exemple ci-dessous, un <span> est forcé à se rendre comme un bloc (il commence donc sur une nouvelle ligne et occupe toute la largeur), et un <div> est forcé à se rendre en ligne (il s'intègre dans le flux du texte) :

<!DOCTYPE html>
<html>
  <head>
    <style>
      span.as-block {
        display: block;
        background: #e0f7fa;
      }
      div.as-inline {
        display: inline;
        background: #ffecb3;
      }
    </style>
  </head>
  <body>
    <span class="as-block">I am a span behaving like a block.</span>
    <p>Text before <div class="as-inline">a div behaving inline</div> text after.</p>
  </body>
</html>

display: inline-block

Il existe une troisième valeur utile, display: inline-block. Elle s'écoule aux côtés d'autres contenus comme un élément en ligne, mais elle respecte également les propriétés width, height et les margin/padding haut/bas comme un élément de bloc — le meilleur des deux mondes.

Un cas d'usage classique est une barre de navigation horizontale ou une rangée de boutons qui nécessitent une largeur et un rembourrage définis tout en restant côte à côte :

<!DOCTYPE html>
<html>
  <head>
    <style>
      .btn {
        display: inline-block;
        width: 120px;
        padding: 10px 0;
        margin: 4px;
        text-align: center;
        background: #2196f3;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <a class="btn" href="#">Home</a>
    <a class="btn" href="#">About</a>
    <a class="btn" href="#">Contact</a>
  </body>
</html>

Chaque lien conserve sa width et son padding (comportement de bloc) tout en s'alignant horizontalement (comportement en ligne).

Règle d'imbrication : un bloc à l'intérieur d'un élément en ligne n'est pas autorisé

Une règle fondamentale du HTML : un élément de bloc ne doit pas être placé à l'intérieur d'un élément en ligne. Par exemple, un <span> (en ligne) ne doit pas envelopper un <div> (bloc). Cela produit du HTML invalide, et les navigateurs peuvent « corriger » le balisage de manière inattendue.

Invalide — un <div> de bloc à l'intérieur d'un <span> en ligne :

<!-- Invalid: do not put a block element inside an inline element -->
<span>
  <div>This block must not be here.</div>
</span>

Valide — le <span> en ligne à l'intérieur du <div> de bloc :

<!-- Valid: an inline element nested inside a block element -->
<div>
  <span>This inline element belongs here.</span>
</div>

La direction inverse (en ligne à l'intérieur d'un bloc) est toujours correcte. Quand vous avez besoin d'un conteneur de bloc, utilisez un élément de bloc tel que <div>, et non <span>. Remarque : les liens constituent un cas particulier — depuis HTML5, un élément <a> peut envelopper du contenu de bloc.

div vs span : conteneurs génériques

Lorsqu'aucun élément existant ne convient, HTML propose deux éléments « enveloppes » génériques et sans signification sémantique, utilisés constamment :

<div> — un conteneur générique de type bloc. Utilisez-le pour regrouper de grandes sections de contenu à des fins de mise en page ou de style (une carte, une barre latérale, une rangée).
<span> — un conteneur générique en ligne. Utilisez-le pour cibler un petit fragment de texte au sein d'une ligne, comme colorier un seul mot ou attacher une info-bulle.

Une règle simple : si vous regroupez des blocs entiers de la page, choisissez <div> ; si vous balisez un fragment dans du texte courant, choisissez <span>.

<!-- div: groups a block section -->
<div class="card">
  <h2>Welcome</h2>
  <p>Hello, <span class="username">Aleq</span>!</p>
</div>

Préférez un élément sémantique (<section>, <article>, <nav>, <strong>, <em>, …) lorsqu'il décrit votre contenu ; repliez-vous sur <div>/<span> uniquement quand rien de plus significatif ne s'applique.

Exercice pratique

Pratique

Quelle affirmation sur les éléments de bloc et en ligne HTML est correcte ?

Le fait qu'un élément soit rendu en bloc ou en ligne est contrôlé par la propriété CSS display et peut être modifié.Un élément de bloc tel que div peut être placé à l'intérieur d'un span en ligne sans produire de HTML invalide.L'élément span est un conteneur générique de type bloc utilisé pour regrouper de grandes sections d'une page.Définir display sur inline-block supprime la capacité d'un élément à respecter les propriétés width et height.