diff options
| author | tristantheb <tristantheb@users.noreply.github.com> | 2021-04-11 16:41:56 +0200 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-04-11 16:41:56 +0200 |
| commit | 73d9be8f9c1ff3622f37fffa117d0f435f7ad4a0 (patch) | |
| tree | 6c97b630144bd7640802023a94f4a063c364c7b7 /files/fr/web/html/inline_elements | |
| parent | e53436927292d51247e5b65eb636dd13d6ad3b9a (diff) | |
| download | translated-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/inline_elements')
| -rw-r--r-- | files/fr/web/html/inline_elements/index.html | 189 |
1 files changed, 94 insertions, 95 deletions
diff --git a/files/fr/web/html/inline_elements/index.html b/files/fr/web/html/inline_elements/index.html index 5c8664af08..823dc1dd6e 100644 --- a/files/fr/web/html/inline_elements/index.html +++ b/files/fr/web/html/inline_elements/index.html @@ -1,24 +1,25 @@ --- -title: Éléments en-ligne +title: Éléments en ligne slug: Web/HTML/Inline_elements tags: + - Beginner - Débutant - - Elements en ligne + - Elements - Guide - HTML + - HTML Elements + - Layout - Reference translation_of: Web/HTML/Inline_elements original_slug: Web/HTML/Éléments_en_ligne --- -<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 « bloc » (<i>block</i> en anglais) ou de type « en ligne » (<i>inline</i> 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 <a href="/fr/docs/Web/CSS/CSS_Flow_Layout"><i>Flow Layout</i></a> 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 <a href="/fr/docs/Web/HTML/Block-level_elements">éléments de bloc</a>.</p> -<p><span class="seoSummary">En HTML, les éléments en ligne (<em>inline elements</em> en anglais) sont ceux qui occupent l'espace délimités par leurs balises plutôt que d'interrompre le flux du contenu.</span> Dans cet article, nous étudierons ces éléments en ligne et également leurs différences quant <a href="/fr/docs/Web/HTML/Éléments_en_bloc">aux éléments de bloc (<em>block-level elements</em>)</a>.</p> - -<div class="note"> -<p><strong>Note :</strong> Un élément en ligne ne commence pas sur une nouvelle ligne et prend uniquement la largeur qui lui est nécessaire.</p> +<div class="notecard note"> + <p><strong>Note :</strong> Un élément en ligne ne commence pas sur une nouvelle ligne et prend uniquement la largeur qui lui est nécessaire.</p> </div> -<h2 id="Éléments_en_ligne_et_éléments_de_bloc_un_exemple">Éléments en ligne et éléments de bloc : un exemple</h2> +<h2 id="Inline_vs_block-level_elements_a_demonstration">Éléments en ligne et éléments de bloc : un exemple</h2> <p>Un exemple vaut mieux qu'une longue explication. Voici pour commencer la feuille de style CSS que nous utiliserons :</p> @@ -26,17 +27,17 @@ original_slug: Web/HTML/Éléments_en_ligne background-color:#ee3; }</pre> -<h3 id="Élément_en_ligne">Élément en ligne</h3> +<h3 id="Inline">Élément en ligne</h3> <p>Le fragment de code HTML qui suit utilise un élément en ligne avec la classe <code>highlight</code> :</p> -<pre class="brush: html"><p>The following span is an <span class="highlight">inline element</span>; -its background has been colored to display both the beginning and end of -the inline element's influence.</p></pre> +<pre class="brush: html"><p>L'élément span qui suit est un <span class="highlight">élément en ligne</span> ; +son arrière-plan est coloré afin d'illustrer la zone couverte par cet élément en +ligne.</p></pre> -<p>Dans cet exemple, l'élément {{HTMLElement("p")}} (le paragraphe) est un élément de bloc qui contient du texte. Dans ce texte, on a un élément {{HTMLElement("span")}} qui est un élément en ligne. L'élément <code><span></code> étant un élément en ligne, le paragraphe est bien affiché sous la forme d'un flux de texte sans rupture :</p> +<p>Dans cet exemple, l'élément <a href="/fr/docs/Web/HTML/Element/p"><code><p></code></a> (le paragraphe) est un élément de bloc qui contient du texte. Dans ce texte, on a un élément <a href="/fr/docs/Web/HTML/Element/span"><code><span></code></a> qui est un élément en ligne. L'élément <code><span></code> étant un élément en ligne, le paragraphe est bien affiché sous la forme d'un flux de texte sans rupture :</p> -<p>{{EmbedLiveSample("Élément_en_ligne", 600, 80)}}</p> +<p>{{EmbedLiveSample("Inline", "", 120)}}</p> <div class="hidden"> <p>Contenu masqué pour la lecture : cette feuille de style CSS est également utilisée :</p> @@ -52,13 +53,13 @@ the inline element's influence.</p></pre> }</pre> </div> -<h3 id="Élément_de_bloc">Élément de bloc</h3> +<h3 id="Block-level">Élément de bloc</h3> -<p>Transformons l'exemple précédent pour passer d'un élément <code><span></code> à un élément {{HTMLElement("div")}} qui est un élément de bloc :</p> +<p>Transformons l'exemple précédent pour passer d'un élément <code><span></code> à un élément <a href="/fr/docs/Web/HTML/Element/div"><code><div></code></a> qui est un élément de bloc :</p> -<pre class="brush: html"><p>The following div is an <div class="highlight">block-level element;</div> -its background has been colored to display both the beginning and end of -the block-level element's influence.</p></pre> +<pre class="brush: html"><p>L'élément div qui suit est un <div class="highlight">élément de bloc</div> ; +son arrière-plan est coloré afin d'illustrer la zone couverte par cet élément de +bloc.</p></pre> <div class="hidden"> <p>Contenu masqué pour la lecture : cette feuille de style CSS est également utilisée :</p> @@ -76,95 +77,93 @@ the block-level element's influence.</p></pre> <p>Et voici le résultat qu'on obtient :</p> -<p>{{EmbedLiveSample("Élément_de_bloc", 600, 150)}}</p> +<p>{{EmbedLiveSample("Block-level", "", 150)}}</p> -<p>On voit ici que l'élément <code><div></code> modifie complètement la disposition du texte et le découpe en trois partie : une partie avant le <code><div></code>, une partie constituée avec le texte de l'élément <code><div></code> et une dernière partie ensuite.</p> +<p>On voit ici que l'élément <code><div></code> modifie complètement la disposition du texte et le découpe en trois parties : une partie avant le <code><div></code>, une partie constituée avec le texte de l'élément <code><div></code> et une dernière partie ensuite.</p> -<h3 id="Modifier_le_type_d'un_d'élément">Modifier le type d'un d'élément</h3> +<h3 id="Changing_element_levels">Modifier le type d'un d'élément</h3> -<p>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 {{cssxref("display")}}. En passant la valeur de <code>display</code> de <code>"inline"</code> à <code>"block"</code>, 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 <code>display:block</code> sur un élément {{HTMLElement("span")}} ne permettra toujours pas de lui imbriquer un élément {{HTMLElement("div")}} à l'intérieur.</p> +<p>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 <a href="/fr/docs/Web/CSS/display"><code>display</code></a>. En passant la valeur de <code>display</code> de <code>"inline"</code> à <code>"block"</code>, 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 <code>display:block</code> sur un élément <a href="/fr/docs/Web/HTML/Element/span"><code><span></code></a> ne permettra toujours pas de lui imbriquer un élément <a href="/fr/docs/Web/HTML/Element/div"><code><div></code></a> à l'intérieur.</p> -<h2 id="Différences_conceptuelles">Différences conceptuelles</h2> +<h2 id="Conceptual_differences">Différences conceptuelles</h2> <p>Voici, en résumé, les différences conceptuelles entre les éléments en ligne et les éléments de bloc :</p> <dl> - <dt>Modèle de contenu</dt> - <dd>En général, les éléments en ligne ne peuvent contenir que des données ou d'autres éléments en ligne. Il n'est pas possible de placer des éléments de bloc à l'intérieur d'éléments en ligne.</dd> - <dt>Formatage</dt> - <dd>Par défaut, les éléments en ligne n'introduisent pas de saut de ligne dans le flux du document. En revanche, les éléments de bloc provoquent un saut de ligne (ce comportement peut être modifié grâce au CSS).</dd> + <dt>Modèle de contenu</dt> + <dd>En général, les éléments en ligne ne peuvent contenir que des données ou d'autres éléments en ligne. Il n'est pas possible de placer des éléments de bloc à l'intérieur d'éléments en ligne.</dd> + <dt>Formatage</dt> + <dd>Par défaut, les éléments en ligne n'introduisent pas de saut de ligne dans le flux du document. En revanche, les éléments de bloc provoquent un saut de ligne (ce comportement peut être modifié grâce au CSS).</dd> </dl> -<h2 id="Liste_des_éléments_en_ligne">Liste des éléments en ligne</h2> +<h2 id="Elements">Liste des éléments en ligne</h2> -<p>Les éléments HTML suivants sont, par défaut, des éléments en ligne :</p> +<p>Bien que cette notion de présentation soit désormais (depuis HTML5) portée par le CSS et remplacée par les <a href="/fr/docs/Web/Guide/HTML/Content_categories">catégories de contenu</a>, voici les éléments HTML qui se comportent par défaut comme des éléments en ligne:</p> -<div class="threecolumns"> -<dl> - <dt>{{HTMLElement("a")}}</dt> - <dt>{{HTMLElement("abbr")}}</dt> - <dt>{{HTMLElement("acronym")}}</dt> - <dt>{{HTMLElement("audio")}} (if has visible controls)</dt> - <dt>{{HTMLElement("b")}}</dt> - <dt>{{HTMLElement("bdi")}}</dt> - <dt>{{HTMLElement("bdo")}}</dt> - <dt>{{HTMLElement("big")}}</dt> - <dt>{{HTMLElement("br")}}</dt> - <dt>{{HTMLElement("button")}}</dt> - <dt>{{HTMLElement("canvas")}}</dt> - <dt>{{HTMLElement("cite")}}</dt> - <dt>{{HTMLElement("code")}}</dt> - <dt>{{HTMLElement("data")}}</dt> - <dt>{{HTMLElement("datalist")}}</dt> - <dt>{{HTMLElement("del")}}</dt> - <dt>{{HTMLElement("dfn")}}</dt> - <dt>{{HTMLElement("em")}}</dt> - <dt>{{HTMLElement("embed")}}</dt> - <dt>{{HTMLElement("i")}}</dt> - <dt>{{HTMLElement("iframe")}}</dt> - <dt>{{HTMLElement("img")}}</dt> - <dt>{{HTMLElement("input")}}</dt> - <dt>{{HTMLElement("ins")}}</dt> - <dt>{{HTMLElement("kbd")}}</dt> - <dt>{{HTMLElement("label")}}</dt> - <dt>{{HTMLElement("map")}}</dt> - <dt>{{HTMLElement("mark")}}</dt> - <dt>{{HTMLElement("meter")}}</dt> - <dt>{{HTMLElement("noscript")}}</dt> - <dt>{{HTMLElement("object")}}</dt> - <dt>{{HTMLElement("output")}}</dt> - <dt>{{HTMLElement("picture")}}</dt> - <dt>{{HTMLElement("progress")}}</dt> - <dt>{{HTMLElement("q")}}</dt> - <dt>{{HTMLElement("ruby")}}</dt> - <dt>{{HTMLElement("s")}}</dt> - <dt>{{HTMLElement("samp")}}</dt> - <dt>{{HTMLElement("script")}}</dt> - <dt>{{HTMLElement("select")}}</dt> - <dt>{{HTMLElement("slot")}}</dt> - <dt>{{HTMLElement("small")}}</dt> - <dt>{{HTMLElement("span")}}</dt> - <dt>{{HTMLElement("strong")}}</dt> - <dt>{{HTMLElement("sub")}}</dt> - <dt>{{HTMLElement("sup")}}</dt> - <dt>{{HTMLElement("svg")}}</dt> - <dt>{{HTMLElement("template")}}</dt> - <dt>{{HTMLElement("textarea")}}</dt> - <dt>{{HTMLElement("time")}}</dt> - <dt>{{HTMLElement("u")}}</dt> - <dt>{{HTMLElement("tt")}}</dt> - <dt>{{HTMLElement("var")}}</dt> - <dt>{{HTMLElement("video")}}</dt> - <dt>{{HTMLElement("wbr")}}</dt> -</dl> -</div> +<ul> + <li><a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a></li> + <li><a href="/fr/docs/Web/HTML/Element/abbr"><code><abbr></code></a></li> + <li><a href="/fr/docs/Web/HTML/Element/acronym"><code><acronym></code></a></li> + <li><a href="/fr/docs/Web/HTML/Element/audio"><code><audio></code></a> (si les contrôles sont visibles)</li> + <li><a href="/fr/docs/Web/HTML/Element/b"><code><b></code></a></li> + <li><a href="/fr/docs/Web/HTML/Element/bdi"><code><bdi></code></a></li> + <li><a href="/fr/docs/Web/HTML/Element/bdo"><code><bdo></code></a></li> + <li><a href="/fr/docs/Web/HTML/Element/big"><code><big></code></a></li> + <li><a href="/fr/docs/Web/HTML/Element/br"><code><br></code></a></li> + <li><a href="/fr/docs/Web/HTML/Element/Button"><code><button></code></a></li> + <li><a href="/fr/docs/Web/HTML/Element/canvas"><code><canvas></code></a></li> + <li><a href="/fr/docs/Web/HTML/Element/cite"><code><cite></code></a></li> + <li><a href="/fr/docs/Web/HTML/Element/code"><code><code></code></a></li> + <li><a href="/fr/docs/Web/HTML/Element/data"><code><data></code></a></li> + <li><a href="/fr/docs/Web/HTML/Element/datalist"><code><datalist></code></a></li> + <li><a href="/fr/docs/Web/HTML/Element/del"><code><del></code></a></li> + <li><a href="/fr/docs/Web/HTML/Element/dfn"><code><dfn></code></a></li> + <li><a href="/fr/docs/Web/HTML/Element/em"><code><em></code></a></li> + <li><a href="/fr/docs/Web/HTML/Element/embed"><code><embed></code></a></li> + <li><a href="/fr/docs/Web/HTML/Element/i"><code><i></code></a></li> + <li><a href="/fr/docs/Web/HTML/Element/iframe"><code><iframe></code></a></li> + <li><a href="/fr/docs/Web/HTML/Element/Img"><code><img></code></a></li> + <li><a href="/fr/docs/Web/HTML/Element/Input"><code><input></code></a></li> + <li><a href="/fr/docs/Web/HTML/Element/ins"><code><ins></code></a></li> + <li><a href="/fr/docs/Web/HTML/Element/kbd"><code><kbd></code></a></li> + <li><a href="/fr/docs/Web/HTML/Element/Label"><code><label></code></a></li> + <li><a href="/fr/docs/Web/HTML/Element/map"><code><map></code></a></li> + <li><a href="/fr/docs/Web/HTML/Element/mark"><code><mark></code></a></li> + <li><a href="/fr/docs/Web/HTML/Element/Meter"><code><meter></code></a></li> + <li><a href="/fr/docs/Web/HTML/Element/noscript"><code><noscript></code></a></li> + <li><a href="/fr/docs/Web/HTML/Element/object"><code><object></code></a></li> + <li><a href="/fr/docs/Web/HTML/Element/output"><code><output></code></a></li> + <li><a href="/fr/docs/Web/HTML/Element/picture"><code><picture></code></a></li> + <li><a href="/fr/docs/Web/HTML/Element/Progress"><code><progress></code></a></li> + <li><a href="/fr/docs/Web/HTML/Element/q"><code><q></code></a></li> + <li><a href="/fr/docs/Web/HTML/Element/ruby"><code><ruby></code></a></li> + <li><a href="/fr/docs/Web/HTML/Element/s"><code><s></code></a></li> + <li><a href="/fr/docs/Web/HTML/Element/samp"><code><samp></code></a></li> + <li><a href="/fr/docs/Web/HTML/Element/script"><code><script></code></a></li> + <li><a href="/fr/docs/Web/HTML/Element/select"><code><select></code></a></li> + <li><a href="/fr/docs/Web/HTML/Element/slot"><code><slot></code></a></li> + <li><a href="/fr/docs/Web/HTML/Element/small"><code><small></code></a></li> + <li><a href="/fr/docs/Web/HTML/Element/span"><code><span></code></a></li> + <li><a href="/fr/docs/Web/HTML/Element/strong"><code><strong></code></a></li> + <li><a href="/fr/docs/Web/HTML/Element/sub"><code><sub></code></a></li> + <li><a href="/fr/docs/Web/HTML/Element/sup"><code><sup></code></a></li> + <li><a href="/fr/docs/Web/SVG/Element/svg"><code><svg></code></a></li> + <li><a href="/fr/docs/Web/HTML/Element/template"><code><template></code></a></li> + <li><a href="/fr/docs/Web/HTML/Element/u"><code><u></code></a></li> + <li><a href="/fr/docs/Web/HTML/Element/tt"><code><tt></code></a></li> + <li><a href="/fr/docs/Web/HTML/Element/var"><code><var></code></a></li> + <li><a href="/fr/docs/Web/HTML/Element/video"><code><video></code></a></li> + <li><a href="/fr/docs/Web/HTML/Element/wbr"><code><wbr></code></a></li> +</ul> -<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_bloc">Les éléments de bloc</a></li> - <li><a href="/fr/docs/Web/HTML/Element">Référence des éléments HTML</a></li> - <li>{{cssxref("display")}}</li> - <li><a href="/fr/docs/Web/Guide/HTML/Cat%C3%A9gories_de_contenu">Les catégories de contenu</a></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/Block-level_elements">Les éléments de bloc</a></li> + <li><a href="/fr/docs/Web/HTML/Element">Référence des éléments HTML</a></li> + <li><a href="/fr/docs/Web/CSS/display">La propriété CSS <code>display</code></a></li> + <li><a href="/fr/docs/Web/Guide/HTML/Content_categories">Les catégories de contenu</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> |