aboutsummaryrefslogtreecommitdiff
path: root/files/fr/web/html/block-level_elements
diff options
context:
space:
mode:
authortristantheb <tristantheb@users.noreply.github.com>2021-04-11 16:41:56 +0200
committerGitHub <noreply@github.com>2021-04-11 16:41:56 +0200
commit73d9be8f9c1ff3622f37fffa117d0f435f7ad4a0 (patch)
tree6c97b630144bd7640802023a94f4a063c364c7b7 /files/fr/web/html/block-level_elements
parente53436927292d51247e5b65eb636dd13d6ad3b9a (diff)
downloadtranslated-content-73d9be8f9c1ff3622f37fffa117d0f435f7ad4a0.tar.gz
translated-content-73d9be8f9c1ff3622f37fffa117d0f435f7ad4a0.tar.bz2
translated-content-73d9be8f9c1ff3622f37fffa117d0f435f7ad4a0.zip
L10N: Update content of the HTML section - Part 1 (#299)
* UPDATE: Update content of the HTML page with en-US * FIX: Removing KS or the translation * UPDATE: Update content of the Applying_color page * UPDATE: Update content of the Block-level_elements page * UPDATE: Update content of the CORS_enabled_image page * UPDATE: Update content of the Date_and_time_formats page * FIX: Fixing html position * Minor fix on html * UPDATE: Update content of the Inline_elements page * UPDATE: Update content of the Link_types page * UPDATE: Update content of the Microdata page * UPDATE: Update content of the Microformats page * UPDATE: Update content of the Preloading_content page * UPDATE: Updating the q_mode_&_s_mode page + removing old invalid link * UPDATE: Removing <x>xref KS and update links * UPDATE: Update content layout and remove old link on Using_the_application_cache page * L10N: Translation of the Viewport_meta_tag page * Review - HTML Applying colors - minor typos and a missing paragraph * Review - HTML Block Elements - minor typos / lint * Review - HTML CORS Images - minor rewording / link fix * Review - HTML date time formats - linting typography, minor changes * Review - HTML Landing page - minor rewording, typos * Review - HTML Inline elements - minor linting / example translation * Review - HTML link types - lint HTML / rm brs * Review - HTML microdata - minor linting * Review - HTML microformat - minor typofixes * Review - HTML preloading - minor changes * Review - HTML quirks - minor changes / rm deadlinked section * Review - HTML element references - minor change * Review - HTML Meta Viewport - minor changes Co-authored-by: julieng <julien.gattelier@gmail.com>
Diffstat (limited to 'files/fr/web/html/block-level_elements')
-rw-r--r--files/fr/web/html/block-level_elements/index.html178
1 files changed, 90 insertions, 88 deletions
diff --git a/files/fr/web/html/block-level_elements/index.html b/files/fr/web/html/block-level_elements/index.html
index c7feba8d34..948738c8c5 100644
--- a/files/fr/web/html/block-level_elements/index.html
+++ b/files/fr/web/html/block-level_elements/index.html
@@ -2,27 +2,29 @@
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
---
-<div>{{HTMLSidebar}}</div>
+<p class="summary">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 éléments de bloc forment une catégorie d'éléments HTML (<em>HyperText Markup Language</em>) en opposition aux <a href="/fr/docs/Web/HTML/Éléments_en_ligne">é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>
-<p>Leur caractéristique principale réside dans le fait qu'ils sont séparés par un saut de ligne avant et après l'élément (créant ainsi un « bloc » de contenu). On peut, en quelque sorte, les représenter comme des blocs empilés les uns sur les autres. Ce faisant, ils prennent la largeur de leurs conteneurs.</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 class="notecard 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="Exemples">Exemples</h2>
+<h2 id="Block-level_Example">Éléments de type bloc</h2>
<h3 id="HTML">HTML</h3>
-<pre class="brush: html">&lt;p&gt;Ce paragraphe est un élément de bloc. Son fond a été coloré pour illustrer son conteneur.&lt;/p&gt;</pre>
+<pre class="brush: html">&lt;p&gt;Ce paragraphe est un élément de bloc.
+Son fond a été coloré pour illustrer son conteneur.&lt;/p&gt;</pre>
<h3 id="CSS">CSS</h3>
@@ -30,98 +32,98 @@ original_slug: Web/HTML/Éléments_en_bloc
background-color: #8ABB55;
}</pre>
-<h3 id="Résultat">Résultat</h3>
+<h3 id="Result">Résultat</h3>
-<p>{{EmbedLiveSample('Exemples')}}</p>
+<p>{{EmbedLiveSample('Block-level_Example','100%',100)}}</p>
-<h2 id="Contrainte">Contrainte</h2>
+<h2 id="Usage">Utilisation</h2>
-<ul>
- <li>Les éléments de bloc ne peuvent apparaître qu'au sein d'un élément {{HTMLElement("body")}}</li>
-</ul>
+<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>&lt;body&gt;</code></a>.</p>
-<h2 id="Élément_de_bloc_ou_élément_en_ligne">Élément de bloc ou élément en ligne ?</h2>
+<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</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>
+ <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/HTML/Catégorie_de_contenu">catégories de contenu</a>. La catégorie des éléments en bloc correspond approximativement à la catégorie de <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">contenu de flux</a> en HTML5, celle des éléments en ligne correspond à la catégorie de <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>. Il y a également d'autres catégories (<a href="/fr/docs/Web/Guide/HTML/Catégories_de_contenu#Contenu_interactif">le contenu interactif</a> par exemple).</p>
-
-<h2 id="Éléments">Éléments</h2>
-
-<p>La liste qui suit contient tous les éléments HTML en bloc (cette catégorie n'est pas strictement applicable pour les éléments apparus avec HTML5).</p>
-
-<div class="threecolumns">
-<dl>
- <dt>{{HTMLElement("address")}}</dt>
- <dd>Information de contact.</dd>
- <dt>{{HTMLElement("article")}}</dt>
- <dd>Contenu d'un article.</dd>
- <dt>{{HTMLElement("aside")}}</dt>
- <dd>Contenu tangentiel.</dd>
- <dt>{{HTMLElement("blockquote")}}</dt>
- <dd>Long bloc de citation.</dd>
- <dt>{{HTMLElement("details")}}</dt>
- <dd>Outil permettant de révéler des informations sur la page.</dd>
- <dt>{{HTMLElement("dialog")}}</dt>
- <dd>Boîte de dialogue.</dd>
- <dt>{{HTMLElement("dd")}}</dt>
- <dd>Description d'une définition.</dd>
- <dt>{{HTMLElement("div")}}</dt>
- <dd>Division d'un document.</dd>
- <dt>{{HTMLElement("dl")}}</dt>
- <dd>Liste de définitions.</dd>
- <dt>{{HTMLElement("dt")}}</dt>
- <dd>Définition/description d'un terme.</dd>
- <dt>{{HTMLElement("fieldset")}}</dt>
- <dd>Ensemble de champs.</dd>
- <dt>{{HTMLElement("figcaption")}}</dt>
- <dd>Légende d'une image.</dd>
- <dt>{{HTMLElement("figure")}}</dt>
- <dd>Permet de grouper des média avec une légende (voir {{HTMLElement("figcaption")}}).</dd>
- <dt>{{HTMLElement("footer")}}</dt>
- <dd>Bas de page ou de section.</dd>
- <dt>{{HTMLElement("form")}}</dt>
- <dd>Formulaire.</dd>
- <dt>{{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}</dt>
- <dd>Éléments de titre de niveau 1 à 6.</dd>
- <dt>{{HTMLElement("header")}}</dt>
- <dd>En-tête de page ou de section.</dd>
- <dt>{{HTMLElement("hgroup")}}</dt>
- <dd>Information d'en-tête de groupe.</dd>
- <dt>{{HTMLElement("hr")}}</dt>
- <dd>Ligne de division horizontale.</dd>
- <dt>{{HTMLElement("li")}}</dt>
- <dd>Élément d'une liste.</dd>
- <dt>{{HTMLElement("main")}}</dt>
- <dd>Contient le contenu central unique au document.</dd>
- <dt>{{HTMLElement("nav")}}</dt>
- <dd>Contient des liens de navigation.</dd>
- <dt>{{HTMLElement("ol")}}</dt>
- <dd>Liste ordonnée.</dd>
- <dt>{{HTMLElement("p")}}</dt>
- <dd>Paragraphe.</dd>
- <dt>{{HTMLElement("pre")}}</dt>
- <dd>Texte pré-formaté.</dd>
- <dt>{{HTMLElement("section")}}</dt>
- <dd>Section d'une page web.</dd>
- <dt>{{HTMLElement("table")}}</dt>
- <dd>Tableau.</dd>
- <dt>{{HTMLElement("ul")}}</dt>
- <dd>Liste non-ordonnée.</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>
+
+<div class="index">
+ <dl>
+ <dt><a href="/fr/docs/Web/HTML/Element/address"><code>&lt;address&gt;</code></a></dt>
+ <dd>Information de contact.</dd>
+ <dt><a href="/fr/docs/Web/HTML/Element/article"><code>&lt;article&gt;</code></a></dt>
+ <dd>Contenu d'un article.</dd>
+ <dt><a href="/fr/docs/Web/HTML/Element/aside"><code>&lt;aside&gt;</code></a></dt>
+ <dd>Contenu tangentiel.</dd>
+ <dt><a href="/fr/docs/Web/HTML/Element/blockquote"><code>&lt;blockquote&gt;</code></a></dt>
+ <dd>Long bloc de citation.</dd>
+ <dt><a href="/fr/docs/Web/HTML/Element/details"><code>&lt;details&gt;</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>&lt;dialog&gt;</code></a></dt>
+ <dd>Boîte de dialogue.</dd>
+ <dt><a href="/fr/docs/Web/HTML/Element/dd"><code>&lt;dd&gt;</code></a></dt>
+ <dd>Description d'une définition.</dd>
+ <dt><a href="/fr/docs/Web/HTML/Element/div"><code>&lt;div&gt;</code></a></dt>
+ <dd>Division d'un document.</dd>
+ <dt><a href="/fr/docs/Web/HTML/Element/dl"><code>&lt;dl&gt;</code></a></dt>
+ <dd>Liste de définitions.</dd>
+ <dt><a href="/fr/docs/Web/HTML/Element/dt"><code>&lt;dt&gt;</code></a></dt>
+ <dd>Définition/description d'un terme.</dd>
+ <dt><a href="/fr/docs/Web/HTML/Element/Fieldset"><code>&lt;fieldset&gt;</code></a></dt>
+ <dd>Ensemble de champs.</dd>
+ <dt><a href="/fr/docs/Web/HTML/Element/figcaption"><code>&lt;figcaption&gt;</code></a></dt>
+ <dd>Légende d'une image.</dd>
+ <dt><a href="/fr/docs/Web/HTML/Element/figure"><code>&lt;figure&gt;</code></a></dt>
+ <dd>Permet de grouper des médias avec une légende (voir <a href="/fr/docs/Web/HTML/Element/figcaption"><code>&lt;figcaption&gt;</code></a>).</dd>
+ <dt><a href="/fr/docs/Web/HTML/Element/footer"><code>&lt;footer&gt;</code></a></dt>
+ <dd>Bas de page ou de section.</dd>
+ <dt><a href="/fr/docs/Web/HTML/Element/Form"><code>&lt;form&gt;</code></a></dt>
+ <dd>Formulaire.</dd>
+ <dt><a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code>&lt;h1&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code>&lt;h2&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code>&lt;h3&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code>&lt;h4&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code>&lt;h5&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code>&lt;h6&gt;</code></a></dt>
+ <dd>Éléments de titre de niveau 1 à 6.</dd>
+ <dt><a href="/fr/docs/Web/HTML/Element/header"><code>&lt;header&gt;</code></a></dt>
+ <dd>En-tête de page ou de section.</dd>
+ <dt><a href="/fr/docs/Web/HTML/Element/hgroup"><code>&lt;hgroup&gt;</code></a></dt>
+ <dd>Information d'en-tête de groupe.</dd>
+ <dt><a href="/fr/docs/Web/HTML/Element/hr"><code>&lt;hr&gt;</code></a></dt>
+ <dd>Ligne de division horizontale.</dd>
+ <dt><a href="/fr/docs/Web/HTML/Element/li"><code>&lt;li&gt;</code></a></dt>
+ <dd>Élément d'une liste.</dd>
+ <dt><a href="/fr/docs/Web/HTML/Element/main"><code>&lt;main&gt;</code></a></dt>
+ <dd>Contient le contenu central unique au document.</dd>
+ <dt><a href="/fr/docs/Web/HTML/Element/nav"><code>&lt;nav&gt;</code></a></dt>
+ <dd>Contient des liens de navigation.</dd>
+ <dt><a href="/fr/docs/Web/HTML/Element/ol"><code>&lt;ol&gt;</code></a></dt>
+ <dd>Liste ordonnée.</dd>
+ <dt><a href="/fr/docs/Web/HTML/Element/p"><code>&lt;p&gt;</code></a></dt>
+ <dd>Paragraphe.</dd>
+ <dt><a href="/fr/docs/Web/HTML/Element/pre"><code>&lt;pre&gt;</code></a></dt>
+ <dd>Texte pré-formaté.</dd>
+ <dt><a href="/fr/docs/Web/HTML/Element/section"><code>&lt;section&gt;</code></a></dt>
+ <dd>Section d'une page web.</dd>
+ <dt><a href="/fr/docs/Web/HTML/Element/table"><code>&lt;table&gt;</code></a></dt>
+ <dd>Tableau.</dd>
+ <dt><a href="/fr/docs/Web/HTML/Element/ul"><code>&lt;ul&gt;</code></a></dt>
+ <dd>Liste non-ordonnée.</dd>
+ </dl>
</div>
-<h2 id="Voir_aussi">Voir aussi</h2>
+<h2 id="See_also">Voir aussi</h2>
<ul>
- <li><a href="/fr/docs/Web/HTML/Éléments_en_ligne">Les éléments en ligne</a></li>
- <li>{{cssxref("display")}}</li>
- <li><a href="/fr/docs/Web/CSS/CSS_Flow_Layout/Disposition_de_bloc_en_ligne_avec_flux_normal">Les éléments de bloc et les éléments en ligne dans le flux normal</a></li>
+ <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>