Lorsque vous concevrez vos pages web, vous vous poserez certainement des questions du type : “est-ce que je peux mettre ma liste à puce dans un paragraphe”, “est-ce que je peux mettre mon image dans une liste à puce”, etc. Voici quelques éléments de réponses.
Les 2 grandes familles de balises : “bloc” et “inline”
Les éléments HTML sont classés en deux catégories principales : les éléments de type « bloc » et les éléments de type « inline » (aussi appelés éléments de type phrasé).
Ces deux types d’éléments ont des comportements différents en termes de mise en forme et de structure du contenu.
Les éléments de type bloc
Ce sont des éléments qui occupent toute la largeur disponible de leur conteneur parent et forment une nouvelle ligne avant et après leur contenu. Ils sont généralement utilisés pour définir la structure d’une page web et organiser des sections de contenu plus importantes.
Les éléments de type bloc peuvent contenir d’autres éléments de type bloc ou de type inline, mais pas l’inverse. Des exemples d’éléments de type bloc incluent <div>, <p>, <h1> à <h6>, <ul>, <ol>, <li>, <header>, <footer> et <section>.
Les éléments de type inline
Les éléments de type inline (ou « phrasé ») sont des éléments qui n’occupent que l’espace nécessaire pour leur contenu et ne forment pas de nouvelle ligne avant ou après leur contenu. Ils sont généralement utilisés pour formater du texte ou insérer de petites portions de contenu, comme des images ou des liens, à l’intérieur d’un texte.
Les éléments de type inline peuvent être imbriqués à l’intérieur d’autres éléments de type inline ou de type bloc, mais ils ne peuvent pas contenir d’éléments de type bloc. Des exemples d’éléments de type inline incluent <span>, <a>, <img>, <strong>, <em> et <br>.
Pour que cela soit plus parlant, voici quelques exemples de bonne et mauvaise utilisation des éléments de type « bloc » et « inline » en HTML :
Exemples d’utilisation
Bonne utilisation
- Utiliser un élément de type bloc pour structurer des sections de contenu :
<header>
<h1>Titre du site</h1>
<nav>
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">À propos</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>Dans cet exemple, les éléments de type bloc (<header>, <nav>, <ul>, <li>) sont utilisés pour structurer la mise en page et organiser les sections de contenu.
Les éléments de type inline (<a>) sont utilisés pour insérer des liens hypertextes.
2. Utiliser un élément de type inline pour formater du texte :
<p>Ce texte est en <strong>gras</strong> et celui-ci est en <em>italique</em>.</p>Dans cet exemple, les éléments de type inline (<strong> et <em>) sont utilisés pour appliquer des styles de formatage au texte à l’intérieur d’un élément de type bloc (<p>).
Mauvaise utilisation
1. Imbriquer un élément de type bloc dans un élément de type inline :
<span>
<div>Contenu à l'intérieur d'un élément de type bloc</div>
</span>Dans cet exemple, un élément de type bloc (<div>) est imbriqué dans un élément de type inline (<span>), ce qui n’est pas conforme aux spécifications HTML. La structure correcte serait d’utiliser deux éléments de type bloc, comme un <div> à la place du <span>.
2. Imbriquer un élément de type bloc dans un autre élément de type bloc qui n’est pas prévu pour contenir des éléments de type bloc :
<p>
<ul>
<li>Élément 1</li>
<li>Élément 2</li>
</ul>
</p>Dans cet exemple, un élément de type bloc (<ul>) est imbriqué dans un autre élément de type bloc (<p>) qui n’est pas conçu pour contenir des éléments de type bloc. La structure correcte consisterait à fermer le paragraphe avant la liste à puces et à en ouvrir un nouveau après celle-ci.
En conclusion
En résumé, la principale différence entre les éléments de type bloc et les éléments de type inline réside dans la manière dont ils sont affichés et structurés dans la mise en page d’une page web.
Les éléments de type bloc créent une nouvelle ligne et occupent toute la largeur disponible, tandis que les éléments de type inline sont intégrés dans le flux du texte et n’occupent que l’espace nécessaire pour leur contenu.