---
title: Éléments en ligne
slug: Web/HTML/Inline_elements
tags:
- Beginner
- Débutant
- Elements
- Guide
- HTML
- HTML Elements
- Layout
- Reference
translation_of: Web/HTML/Inline_elements
original_slug: Web/HTML/Éléments_en_ligne
---
Les éléments HTML (**Hypertext Markup Language**) étaient historiquement catégorisés comme des éléments de type « bloc » (_block_ en anglais) ou de type « en ligne » (_inline_ en anglais). Comme il s'agit d'une caractéristique de présentation, elle est aujourd'hui spécifiée par CSS dans le module de spécification [_Flow Layout_](/fr/docs/Web/CSS/CSS_Flow_Layout) qui définit l'organisation visuelle par défaut des éléments (le « flux » normal). Les éléments en lignes n'occupent que l'espace entre leurs balises et s'insèrent dans le flux du contenu plutôt que de créer un nouveau « bloc » visuel. Dans cet article, nous verrons en détails ces éléments en ligne et leurs différences par rapport aux [éléments de bloc](/fr/docs/Web/HTML/Block-level_elements).
> **Note :** Un élément en ligne ne commence pas sur une nouvelle ligne et prend uniquement la largeur qui lui est nécessaire.
## Éléments en ligne et éléments de bloc : un exemple
Un exemple vaut mieux qu'une longue explication. Voici pour commencer la feuille de style CSS que nous utiliserons :
```css
.highlight {
background-color:#ee3;
}
```
### Élément en ligne
Le fragment de code HTML qui suit utilise un élément en ligne avec la classe `highlight` :
```html
L'élément span qui suit est un élément en ligne ;
son arrière-plan est coloré afin d'illustrer la zone couverte par cet élément en
ligne.
```
Dans cet exemple, l'élément [``](/fr/docs/Web/HTML/Element/p) (le paragraphe) est un élément de bloc qui contient du texte. Dans ce texte, on a un élément [``](/fr/docs/Web/HTML/Element/span) qui est un élément en ligne. L'élément `` étant un élément en ligne, le paragraphe est bien affiché sous la forme d'un flux de texte sans rupture :
{{EmbedLiveSample("Inline", "", 120)}}
```css hidden
body {
margin: 0;
padding: 4px;
border: 1px solid #333;
}
.highlight {
background-color:#ee3;
}
```
### Élément de bloc
Transformons l'exemple précédent pour passer d'un élément `` à un élément [``](/fr/docs/Web/HTML/Element/div) qui est un élément de bloc :
```html
L'élément div qui suit est un
élément de bloc
;
son arrière-plan est coloré afin d'illustrer la zone couverte par cet élément de
bloc.
```
```css hidden
body {
margin: 0;
padding: 4px;
border: 1px solid #333;
}
.highlight {
background-color:#ee3;
}
```
Et voici le résultat qu'on obtient :
{{EmbedLiveSample("Block-level", "", 150)}}
On voit ici que l'élément `
` modifie complètement la disposition du texte et le découpe en trois parties : une partie avant le `
`, une partie constituée avec le texte de l'élément `
` et une dernière partie ensuite.
### Modifier le type d'un d'élément
Il est possible de choisir le mode d'affichage d'un élément afin de modifier son comportement par défaut grâce à la propriété CSS [`display`](/fr/docs/Web/CSS/display). En passant la valeur de `display` de `"inline"` à `"block"`, on peut indiquer au navigateur d'afficher l'élément comme une boîte de bloc plutôt que comme une boîte en ligne. Attention, l'élément ne sera plus affiché de la même façon, vérifiez le résultat obtenu. De plus, ce changement n'impactera pas la catégorie et le modèle de contenu de l'élément : utiliser `display:block` sur un élément [`
`](/fr/docs/Web/HTML/Element/span) ne permettra toujours pas de lui imbriquer un élément [`