4. Balises Inline et Block¶
En HTML, les balises peuvent être de deux types différents : inline et block. Nous allons voir quelles sont les propriétés de chacune.
Les balises de type block¶
Les balises de type block prennent toute la largeur de leur contenant, et se placent les unes au dessous des autres :
Notez
Pour cet exemple, j'ai volontairement stylisé les deux balises avec un fond et une bordure pour que vous puissiez bien les voir. Normalement, les balises ne sont pas stylisées et ont un fond transparent.
Les balises de type inline¶
Contrairement aux balises de type block, les balises de type inline ne prennent pas toute la largeur possible. Elles ne gardent que la largeur de leur contenu.
Aussi, elles ne se mettent pas les une sous les autres, mais restent sur la même ligne :
Les règles d'imbrication¶
Les balises de type block peuvent s'imbriquer les unes dans les autres, comme on a déjà pu le voir :
<div>
Ceci est un exemple de balise de type block.
<div>
Ceci est un autre exemple de balise de type block imbriquée dans la première.
</div>
</div>
Aussi, une balise de type inline peut être imbriquée dans une balise de type block :
En revanche, il n'est pas possible d'imbriquer des balises block dans une balise inline.
La balise <div> et <span>¶
Les balises normales <div> de type block et <span> de type inline sont utiles car elles ne représentent rien de particulier. Elles sont très utilisées pour appliquer des styles de mise en forme. Cependant, elles ont tout de même un comportement par défaut. Considérons pour le moment que la balise <span> s'utilise à l'intérieur d'un <div>, <p>, <h?> ou <li>, tandis que la balise <div> englobe toutes ces balises. Nous approfondirons leur comportement dans le cours sur le CSS.