HTML Éléments de bloc et en ligne
Chaque élément HTML a une valeur d'affichage par défaut, en fonction du type d'élément dont il s'agit.
Il existe deux valeurs d'affichage : block et inline.
Éléments au niveau du bloc
Un élément de niveau bloc commence toujours sur une nouvelle ligne et les navigateurs ajoutent automatiquement un espace (une marge) avant et après l'élément.
Un élément de niveau bloc occupe toujours toute la largeur disponible (s'étend vers la gauche et la droite aussi loin que possible).
Deux éléments de bloc couramment utilisés sont : <p> et <div>.
L'élément <p> définit un paragraphe dans un document HTML.
L'élément <div> définit une division ou une section dans un document HTML.
L'élément <p> est un élément de niveau bloc.
Voici les éléments de niveau bloc en HTML :
Éléments en ligne
Un élément en ligne ne commence pas sur une nouvelle ligne.
Un élément en ligne n'occupe que la largeur nécessaire.
Il s'agit d'un un élément à l'intérieur d'un paragraphe.
Voici les éléments en ligne en HTML :
Remarque : Un élément en ligne ne peut pas contenir d'élément de niveau bloc !
L'élément <div>
L'élément <div> est souvent utilisé comme conteneur pour d'autres éléments HTML.
L'élément <div> n'a aucun attribut requis, mais style, class et id sont courants.
Lorsqu'il est utilisé avec CSS, l'élément <div> peut être utilisé pour styliser des blocs de contenu :
Exemple
<div style="background-color:black;color:white;padding:20px;">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>
Try it Yourself »
L'élément <span>
L'élément <span> est un conteneur en ligne utilisé pour baliser une partie d'un texte ou une partie d'un document.
L'élément <span> n'a aucun attribut requis, mais style, class et id sont courants.
Lorsqu'il est utilisé avec CSS, l'élément <span> peut être utilisé pour styliser certaines parties du texte :
Exemple
<p>My mother has <span style="color:blue;font-weight:bold">blue</span> eyes and my father has <span style="color:darkolivegreen;font-weight:bold">dark green</span> eyes.</p>
Try it Yourself »
Résumé du chapitre
- Il existe deux valeurs d'affichage : block et inline
- Un élément de niveau bloc commence toujours sur une nouvelle ligne et occupe toute la largeur disponible
- Un élément en ligne ne commence pas sur une nouvelle ligne et prend uniquement la largeur nécessaire
- L'élément
<div>est un niveau de bloc et est souvent utilisé comme conteneur pour d'autres éléments HTML - L'élément
<span>est un conteneur en ligne utilisé pour baliser une partie d'un texte ou une partie d'un document
Balises HTML
| Étiquette | Description |
|---|---|
| <div> | Définir une section dans un document (niveau bloc) |
| <span> | Définir une section dans un document (en ligne) |
Pour une liste complète de toutes les balises HTML disponibles, visitez la Référence des balises HTML sur notre site Web W3SchoolsFR. Le meilleur.
HTML — Bloquer et Inline - Vidéo W3Schools
Cette vidéo explique comment les différents types d'éléments sont affichés. Plus précisément, block et inline.
Fait partie d'une série de didacticiels vidéo pour apprendre le HTML pour les débutants !
