1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
|
---
title: Éléments de bloc
slug: Web/HTML/Block-level_elements
tags:
- Beginner
- Development
- Débutant
- HTML
- HTML5
- Web
translation_of: Web/HTML/Block-level_elements
original_slug: Web/HTML/Éléments_en_bloc
---
<p>Les éléments HTML (<strong>Hypertext Markup Language</strong>) étaient historiquement catégorisés comme des éléments de type "block" ou de type "inline". Comme il s'agit d'une caractéristique de présentation, elle est aujourd'hui spécifiée par CSS dans la <a href="/fr/docs/Web/CSS/CSS_Flow_Layout">disposition en flux</a>. Un élément de type bloc occupe tout l'espace horizontal de son élément parent (conteneur), et un espace vertical égal à la hauteur de son contenu, créant ainsi un bloc. Dans cet article, nous examinerons les éléments HTML de type bloc et comment ils diffèrent des <a href="/fr/docs/Web/HTML/Inline_elements">éléments en ligne</a>.</p>
<p>Les navigateurs affichent généralement un élément de type bloc avec une nouvelle ligne avant et après l'élément. Vous pouvez les visualiser comme une pile de boîtes.</p>
<div class="note">
<p><strong>Note :</strong> Un élément de bloc commence toujours sur une nouvelle ligne et prend toute la largeur disponible (autrement dit, il s'étend le plus possible vers la droite et vers la gauche).</p>
</div>
<h2 id="Block-level_Example">Éléments de type bloc</h2>
<h3 id="HTML">HTML</h3>
<pre class="brush: html"><p>Ce paragraphe est un élément de bloc.
Son fond a été coloré pour illustrer son conteneur.</p></pre>
<h3 id="CSS">CSS</h3>
<pre class="brush: css">p {
background-color: #8ABB55;
}</pre>
<h3 id="Result">Résultat</h3>
<p>{{EmbedLiveSample('Block-level_Example','100%',100)}}</p>
<h2 id="Usage">Utilisation</h2>
<p>Les éléments de bloc ne peuvent apparaître qu'au sein d'un élément <a href="/fr/docs/Web/HTML/Element/body"><code><body></code></a>.</p>
<h2 id="Block-level_vs_inline">Éléments blocs vs éléments en ligne</h2>
<p>Les éléments de bloc diffèrent des éléments en ligne par :</p>
<dl>
<dt>La mise en forme par défaut</dt>
<dd>Par défaut, les éléments de bloc commencent sur des nouvelles lignes.</dd>
<dt>Le modèle de contenu</dt>
<dd>De façon générale, les éléments de bloc peuvent contenir des éléments en ligne et d'autres éléments de bloc. L'idée structurelle sous-jacente est que les éléments de bloc créent de plus grandes structures que les éléments en ligne.</dd>
</dl>
<p>La distinction entre bloc et ligne est utilisée dans les spécifications HTML jusqu'à la version 4.01. En HTML5, cette distinction binaire est remplacée par un ensemble plus complexe de <a href="/fr/docs/Web/Guide/HTML/Content_categories">catégories de contenu</a>. La catégorie des éléments en bloc correspond approximativement à la catégorie de <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content">contenu de flux</a> en HTML5, celle des éléments en ligne correspond à la catégorie de <a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">contenu phrasé</a>. Il y a également d'autres catégories (<a href="/fr/docs/Web/Guide/HTML/Content_categories#interactive_content">le contenu interactif</a> par exemple).</p>
<h2 id="Elements">Éléments</h2>
<p>La liste qui suit contient tous les éléments HTML de type bloc (cette catégorie n'est pas strictement applicable pour les éléments apparus avec HTML5).</p>
<dl>
<dt><a href="/fr/docs/Web/HTML/Element/address"><code><address></code></a></dt>
<dd>Information de contact.</dd>
<dt><a href="/fr/docs/Web/HTML/Element/article"><code><article></code></a></dt>
<dd>Contenu d'un article.</dd>
<dt><a href="/fr/docs/Web/HTML/Element/aside"><code><aside></code></a></dt>
<dd>Contenu tangentiel.</dd>
<dt><a href="/fr/docs/Web/HTML/Element/blockquote"><code><blockquote></code></a></dt>
<dd>Long bloc de citation.</dd>
<dt><a href="/fr/docs/Web/HTML/Element/details"><code><details></code></a></dt>
<dd>Outil permettant de révéler des informations sur la page.</dd>
<dt><a href="/fr/docs/Web/HTML/Element/dialog"><code><dialog></code></a></dt>
<dd>Boîte de dialogue.</dd>
<dt><a href="/fr/docs/Web/HTML/Element/dd"><code><dd></code></a></dt>
<dd>Description d'une définition.</dd>
<dt><a href="/fr/docs/Web/HTML/Element/div"><code><div></code></a></dt>
<dd>Division d'un document.</dd>
<dt><a href="/fr/docs/Web/HTML/Element/dl"><code><dl></code></a></dt>
<dd>Liste de définitions.</dd>
<dt><a href="/fr/docs/Web/HTML/Element/dt"><code><dt></code></a></dt>
<dd>Définition/description d'un terme.</dd>
<dt><a href="/fr/docs/Web/HTML/Element/Fieldset"><code><fieldset></code></a></dt>
<dd>Ensemble de champs.</dd>
<dt><a href="/fr/docs/Web/HTML/Element/figcaption"><code><figcaption></code></a></dt>
<dd>Légende d'une image.</dd>
<dt><a href="/fr/docs/Web/HTML/Element/figure"><code><figure></code></a></dt>
<dd>Permet de grouper des médias avec une légende (voir <a href="/fr/docs/Web/HTML/Element/figcaption"><code><figcaption></code></a>).</dd>
<dt><a href="/fr/docs/Web/HTML/Element/footer"><code><footer></code></a></dt>
<dd>Bas de page ou de section.</dd>
<dt><a href="/fr/docs/Web/HTML/Element/Form"><code><form></code></a></dt>
<dd>Formulaire.</dd>
<dt><a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code><h1></code></a>, <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code><h2></code></a>, <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code><h3></code></a>, <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code><h4></code></a>, <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code><h5></code></a>, <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code><h6></code></a></dt>
<dd>Éléments de titre de niveau 1 à 6.</dd>
<dt><a href="/fr/docs/Web/HTML/Element/header"><code><header></code></a></dt>
<dd>En-tête de page ou de section.</dd>
<dt><a href="/fr/docs/Web/HTML/Element/hgroup"><code><hgroup></code></a></dt>
<dd>Information d'en-tête de groupe.</dd>
<dt><a href="/fr/docs/Web/HTML/Element/hr"><code><hr></code></a></dt>
<dd>Ligne de division horizontale.</dd>
<dt><a href="/fr/docs/Web/HTML/Element/li"><code><li></code></a></dt>
<dd>Élément d'une liste.</dd>
<dt><a href="/fr/docs/Web/HTML/Element/main"><code><main></code></a></dt>
<dd>Contient le contenu central unique au document.</dd>
<dt><a href="/fr/docs/Web/HTML/Element/nav"><code><nav></code></a></dt>
<dd>Contient des liens de navigation.</dd>
<dt><a href="/fr/docs/Web/HTML/Element/ol"><code><ol></code></a></dt>
<dd>Liste ordonnée.</dd>
<dt><a href="/fr/docs/Web/HTML/Element/p"><code><p></code></a></dt>
<dd>Paragraphe.</dd>
<dt><a href="/fr/docs/Web/HTML/Element/pre"><code><pre></code></a></dt>
<dd>Texte pré-formaté.</dd>
<dt><a href="/fr/docs/Web/HTML/Element/section"><code><section></code></a></dt>
<dd>Section d'une page web.</dd>
<dt><a href="/fr/docs/Web/HTML/Element/table"><code><table></code></a></dt>
<dd>Tableau.</dd>
<dt><a href="/fr/docs/Web/HTML/Element/ul"><code><ul></code></a></dt>
<dd>Liste non-ordonnée.</dd>
</dl>
<h2 id="See_also">Voir aussi</h2>
<ul>
<li><a href="/fr/docs/Web/HTML/Inline_elements">Les éléments en ligne</a></li>
<li><a href="/fr/docs/Web/CSS/display"><code>display</code></a></li>
<li><a href="/fr/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow">Les éléments de bloc et les éléments en ligne dans le flux normal</a></li>
</ul>
<div>{{QuickLinksWithSubpages("/fr/docs/Web/HTML/")}}</div>
|
