Éléments Block vs Inline

Fait partie de la section Styling with CSS du Journey HTML de Coddy — leçon 54 sur 76.

En HTML, les éléments sont classés soit comme des éléments de niveau bloc (block-level), soit comme des éléments en ligne (inline), selon la manière dont ils sont affichés sur la page. Comprendre la différence entre ces deux types d'éléments est crucial pour créer des mises en page bien structurées et visuellement attrayantes. Explorons les caractéristiques et les comportements des éléments de niveau bloc et en ligne.

Éléments de niveau bloc

Un élément de niveau bloc commence toujours sur une nouvelle ligne et occupe toute la largeur disponible, s'étendant vers la gauche et la droite autant que possible. Il crée un « bloc » de contenu.

Voici des exemples d'éléments de bloc :

<div>
<h1> - <h6>
<p>
<ul>, <ol>, <li>
<form>
<table>
<header>, <footer>, <section>, <article>, <nav>

Éléments en ligne

Un élément en ligne ne commence pas sur une nouvelle ligne et n'occupe que la largeur nécessaire pour s'adapter à son contenu. Il permet aux éléments en ligne de s'insérer dans une ligne de texte ou à l'intérieur d'un élément de niveau bloc.

Voici des exemples d'éléments en ligne :

<span>
<a>
<img>
<strong>, <em>
<input>, <button>, <label>
<textarea>

Défi

Facile

On vous donne un document HTML avec divers éléments. Votre tâche consiste à identifier quels éléments sont de type bloc (block-level) et lesquels sont en ligne (inline), puis à appliquer du CSS de base pour mettre en évidence les différences. Suivez les étapes ci-dessous :

Écrivez une règle CSS qui cible tous les éléments de type bloc (div, p, h1). Définissez leur background-color sur lightgray et ajoutez une border de 1px solid blue.
Écrivez une règle CSS qui cible tous les éléments en ligne (span, a, img). Définissez leur background-color sur lightyellow et ajoutez une border de 1px solid red.

Observez comment les éléments de type bloc occupent toute la largeur disponible et commencent sur de nouvelles lignes, tandis que les éléments en ligne ne prennent que l'espace nécessaire et s'insèrent dans la ligne.

Aide-mémoire

Les éléments HTML sont classés comme éléments de bloc ou en ligne en fonction de leur comportement d'affichage.

Éléments de bloc

Les éléments de bloc commencent sur une nouvelle ligne et occupent toute la largeur disponible, s'étirant vers la gauche et la droite autant que possible.

Exemples : <div>, <h1>-<h6>, <p>, <ul>, <ol>, <li>, <form>, <table>, <header>, <footer>, <section>, <article>, <nav>

Éléments en ligne

Les éléments en ligne ne commencent pas sur une nouvelle ligne et ne prennent que la largeur nécessaire pour s'adapter à leur contenu. Ils s'insèrent dans une ligne de texte ou à l'intérieur d'éléments de bloc.

Exemples : <span>, <a>, <img>, <strong>, <em>, <input>, <button>, <label>, <textarea>

Essayez vous-même

<html>
<head>
    <title>Block vs Inline Elements</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div>This is a div element.</div>
    <p>This is a paragraph with a <span>span element</span> inside.</p>
    <h1>This is a heading element.</h1>
    <a href="#">This is a link</a>
    <img src="https://img.freepik.com/free-photo/abstract-luxury-gradient-blue-background-smooth-dark-blue-with-black-vignette-studio-banner_1258-54865.jpg" alt="Image" width="100">
</body>
</html>