Éléments de bloc et en ligne HTML

HTML est composé de différents éléments qui créent des blocs de pages web. Ces éléments sont divisés en éléments de « niveau bloc » et éléments « en ligne ».

Il est possible de modifier le type d'un élément de bloc à en ligne ou inversement à l'aide de la propriété CSS display.

Éléments de niveau bloc

Un élément de niveau bloc est un élément HTML qui commence sur une nouvelle ligne et occupe toute la largeur disponible de l'espace horizontal 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 niveau bloc.

Les éléments de niveau 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 niveau bloc.

Exemple d'un élément de niveau bloc :

html

<!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>

Try it Yourself »

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

Éléments en ligne

Contrairement aux éléments de niveau bloc, les éléments en ligne ne commencent pas sur une nouvelle ligne. Ils s'insèrent 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 :

html

<!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>

Try it Yourself »

Éléments en ligne :
`<a>`
`<bdo>`
`<cite>`
`<i>`
`<label>`
`<q>`
`<small>`
`<sup>`
`<var>`

Pratique

Parmi les affirmations suivantes concernant les éléments de bloc et en ligne HTML, lesquelles sont correctes ?

Un élément de niveau bloc commence toujours sur une nouvelle ligne et occupe toute la largeur disponible.Un élément en ligne n'occupe que la largeur nécessaire et ne commence pas sur une nouvelle ligne.Les éléments en ligne commencent toujours sur une nouvelle ligne en HTML.Les éléments de niveau bloc en HTML ne peuvent pas contenir d'éléments en ligne ni d'autres éléments de niveau bloc.Les exemples d'éléments de niveau bloc incluent <div>, <h1>, <p>, tandis que les exemples d'éléments en ligne incluent <span>, <a>, <img>.

Éléments de bloc et en ligne HTML ​

Éléments de niveau bloc ​

Exemple d'un élément de niveau bloc : ​

Éléments en ligne ​