Balise inline ou block ?

On peut catégoriser les éléments HTML par 2 types principaux : block ou inline

Connaître le type d’affichage d’un élément HTML est essentiel pour créer et mettre en forme les pages web car les éléments de type block et ceux de type inline se comporte de façon différente dans la page et certaines propriétés CSS ne s'appliqueront pas de la même manières.

Le type d’affichage peut être modifié selon nos besoins en CSS par la propriété display. Nous reviendrons sur le CSS plus tard, mais gardez-le en-tête ;) !

Inline

Les balises inlines ne créent pas de rupture de ligne et s'insèrent généralement à l'intérieur d'autres éléments. Les balises inline sont utilisées pour marquer du texte ou de petites parties de contenu. Elles ne prennent que l'espace nécessaire autour du contenu qu'elles englobent.

Voici les caractéristiques précises d'une balise inline :

  • Un élément de type inline ne va occuper que la largeur nécessaire à l’affichage de son contenu par défaut ;
  • Les éléments de type inline vont venir essayer de se placer en ligne, c’est-à-dire à côté (sur la même ligne) que l’élément qui les précède dans le code HTML ;
  • Un élément de type inline peut contenir d’autres éléments de type inline mais ne devrait pas contenir d’éléments de type block.

De plus, notez qu’on ne va pas par défaut pouvoir modifier la hauteur, la largeur et l'espacement d'un élément de type inline puisque la caractéristique principale de ce type d’éléments est de n’occuper que la place nécessaire à l’affichage de leur contenu.

<p>
    Je suis un <strong>texte en gras</strong> à l'intérieur d'un paragraphe.
</p>

Dans cet exemple, la balise <p> est un block et elle contient la balise <strong> qui elle est inline.

Les balises de type inline les plus courants sont les suivants :

  • <em>
  • <strong>
  • <span>
  • <a>
  • <input>
  • <textarea>
  • <select>,
  • <img>

Block

Les balises de type block, en revanche, créent des éléments qui forment des blocs distincts sur la page. Elles commencent généralement sur une nouvelle ligne et occupent toute la largeur disponible par défaut. Les balises block sont utilisées pour structurer des sections plus importantes de contenu, comme des paragraphes, des diviseurs, des listes, etc.

Les éléments de type block vont posséder les caractéristiques suivantes :

  • Un élément de type block va toujours prendre toute la largeur disponible au sein de son élément parent (ou élément conteneur)
  • Un élément de type block va toujours « aller à la ligne » (créer un saut de ligne avant et après l’élément), c’est-à-dire occuper une nouvelle ligne dans une page et ne jamais se positionner à côté d’un autre élément par défaut
  • Un élément de type block peut contenir d’autres éléments de type block ou de type inline.
<p>Ceci est un paragraphe qui prendra toute la largeur disponible.</p>
 <p>Cette autre paragraphe ce positionnera en dessous du 1ère.</p>
 <div>Je suis un div et donc un bloc distinct.</div>
 <ul>
   <li>Élément de liste 1</li>
   <li>Élément de liste 2</li>
 </ul>

Les balises de type inline les plus courants sont les suivants :

  • <body>
  • <div>
  • <h1>, <h2>, <h3>, <h4>, <h5>, <h6>
  • <p>
  • <ul>, <ol>, <li>
  • <figure>

En résumé, les balises HTML inline sont utilisées pour des éléments plus petits et insérés dans le flux du texte, tandis que les balises HTML block sont utilisées pour des éléments plus importants qui forment des blocs distincts sur la page.

Sources & liens utiles :

Table of Contents