diff options
| author | julieng <julien.gattelier@gmail.com> | 2021-10-13 07:13:08 +0200 |
|---|---|---|
| committer | SphinxKnight <SphinxKnight@users.noreply.github.com> | 2021-11-07 11:56:53 +0100 |
| commit | dea9d1f019d9e14357c58cf18653df1ac779d9d8 (patch) | |
| tree | d20318111821d4e935a6c53409240078c4f687e5 /files/fr/web/html/block-level_elements | |
| parent | 8829a7c9eb82f180bac76ed5836aaef95be209a1 (diff) | |
| download | translated-content-dea9d1f019d9e14357c58cf18653df1ac779d9d8.tar.gz translated-content-dea9d1f019d9e14357c58cf18653df1ac779d9d8.tar.bz2 translated-content-dea9d1f019d9e14357c58cf18653df1ac779d9d8.zip | |
convert content to md
Diffstat (limited to 'files/fr/web/html/block-level_elements')
| -rw-r--r-- | files/fr/web/html/block-level_elements/index.md | 209 |
1 files changed, 102 insertions, 107 deletions
diff --git a/files/fr/web/html/block-level_elements/index.md b/files/fr/web/html/block-level_elements/index.md index 7b1944d421..30365d9044 100644 --- a/files/fr/web/html/block-level_elements/index.md +++ b/files/fr/web/html/block-level_elements/index.md @@ -11,118 +11,113 @@ tags: 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> +Les éléments HTML (**Hypertext Markup Language**) é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 [disposition en flux](/fr/docs/Web/CSS/CSS_Flow_Layout). 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 [éléments en ligne](/fr/docs/Web/HTML/Inline_elements). -<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> +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. -<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> +> **Note :** 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). -<h2 id="Block-level_Example">Éléments de type bloc</h2> +## Éléments de type bloc -<h3 id="HTML">HTML</h3> +### HTML -<pre class="brush: html"><p>Ce paragraphe est un élément de bloc. -Son fond a été coloré pour illustrer son conteneur.</p></pre> +```html +<p>Ce paragraphe est un élément de bloc. +Son fond a été coloré pour illustrer son conteneur.</p> +``` -<h3 id="CSS">CSS</h3> +### CSS -<pre class="brush: css">p { +```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> +} +``` + +### Résultat + +{{EmbedLiveSample('Block-level_Example','100%',100)}} + +## Utilisation + +Les éléments de bloc ne peuvent apparaître qu'au sein d'un élément [`<body>`](/fr/docs/Web/HTML/Element/body). + +## Éléments blocs vs éléments en ligne + +Les éléments de bloc diffèrent des éléments en ligne par : + +- La mise en forme par défaut + - : Par défaut, les éléments de bloc commencent sur des nouvelles lignes. +- Le modèle de contenu + - : 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. + +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 [catégories de contenu](/fr/docs/Web/Guide/HTML/Content_categories). La catégorie des éléments en bloc correspond approximativement à la catégorie de [contenu de flux](/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content) en HTML5, celle des éléments en ligne correspond à la catégorie de [contenu phrasé](/fr/docs/Web/Guide/HTML/Content_categories#flow_content). Il y a également d'autres catégories ([le contenu interactif](/fr/docs/Web/Guide/HTML/Content_categories#interactive_content) par exemple). + +## Éléments + +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). + +- [`<address>`](/fr/docs/Web/HTML/Element/address) + - : Information de contact. +- [`<article>`](/fr/docs/Web/HTML/Element/article) + - : Contenu d'un article. +- [`<aside>`](/fr/docs/Web/HTML/Element/aside) + - : Contenu tangentiel. +- [`<blockquote>`](/fr/docs/Web/HTML/Element/blockquote) + - : Long bloc de citation. +- [`<details>`](/fr/docs/Web/HTML/Element/details) + - : Outil permettant de révéler des informations sur la page. +- [`<dialog>`](/fr/docs/Web/HTML/Element/dialog) + - : Boîte de dialogue. +- [`<dd>`](/fr/docs/Web/HTML/Element/dd) + - : Description d'une définition. +- [`<div>`](/fr/docs/Web/HTML/Element/div) + - : Division d'un document. +- [`<dl>`](/fr/docs/Web/HTML/Element/dl) + - : Liste de définitions. +- [`<dt>`](/fr/docs/Web/HTML/Element/dt) + - : Définition/description d'un terme. +- [`<fieldset>`](/fr/docs/Web/HTML/Element/Fieldset) + - : Ensemble de champs. +- [`<figcaption>`](/fr/docs/Web/HTML/Element/figcaption) + - : Légende d'une image. +- [`<figure>`](/fr/docs/Web/HTML/Element/figure) + - : Permet de grouper des médias avec une légende (voir [`<figcaption>`](/fr/docs/Web/HTML/Element/figcaption)). +- [`<footer>`](/fr/docs/Web/HTML/Element/footer) + - : Bas de page ou de section. +- [`<form>`](/fr/docs/Web/HTML/Element/Form) + - : Formulaire. +- [`<h1>`](/fr/docs/Web/HTML/Element/Heading_Elements), [`<h2>`](/fr/docs/Web/HTML/Element/Heading_Elements), [`<h3>`](/fr/docs/Web/HTML/Element/Heading_Elements), [`<h4>`](/fr/docs/Web/HTML/Element/Heading_Elements), [`<h5>`](/fr/docs/Web/HTML/Element/Heading_Elements), [`<h6>`](/fr/docs/Web/HTML/Element/Heading_Elements) + - : Éléments de titre de niveau 1 à 6. +- [`<header>`](/fr/docs/Web/HTML/Element/header) + - : En-tête de page ou de section. +- [`<hgroup>`](/fr/docs/Web/HTML/Element/hgroup) + - : Information d'en-tête de groupe. +- [`<hr>`](/fr/docs/Web/HTML/Element/hr) + - : Ligne de division horizontale. +- [`<li>`](/fr/docs/Web/HTML/Element/li) + - : Élément d'une liste. +- [`<main>`](/fr/docs/Web/HTML/Element/main) + - : Contient le contenu central unique au document. +- [`<nav>`](/fr/docs/Web/HTML/Element/nav) + - : Contient des liens de navigation. +- [`<ol>`](/fr/docs/Web/HTML/Element/ol) + - : Liste ordonnée. +- [`<p>`](/fr/docs/Web/HTML/Element/p) + - : Paragraphe. +- [`<pre>`](/fr/docs/Web/HTML/Element/pre) + - : Texte pré-formaté. +- [`<section>`](/fr/docs/Web/HTML/Element/section) + - : Section d'une page web. +- [`<table>`](/fr/docs/Web/HTML/Element/table) + - : Tableau. +- [`<ul>`](/fr/docs/Web/HTML/Element/ul) + - : Liste non-ordonnée. + +## Voir aussi + +- [Les éléments en ligne](/fr/docs/Web/HTML/Inline_elements) +- [`display`](/fr/docs/Web/CSS/display) +- [Les éléments de bloc et les éléments en ligne dans le flux normal](/fr/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow) + +{{QuickLinksWithSubpages("/fr/docs/Web/HTML/")}} |