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 | |
| 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')
| -rw-r--r-- | files/fr/web/html/applying_color/index.html | 310 | ||||
| -rw-r--r-- | files/fr/web/html/block-level_elements/index.html | 178 | ||||
| -rw-r--r-- | files/fr/web/html/cors_enabled_image/index.html | 61 | ||||
| -rw-r--r-- | files/fr/web/html/date_and_time_formats/index.html | 671 | ||||
| -rw-r--r-- | files/fr/web/html/index.html | 130 | ||||
| -rw-r--r-- | files/fr/web/html/inline_elements/index.html | 189 | ||||
| -rw-r--r-- | files/fr/web/html/link_types/index.html | 659 | ||||
| -rw-r--r-- | files/fr/web/html/microdata/index.html | 194 | ||||
| -rw-r--r-- | files/fr/web/html/microformats/index.html | 256 | ||||
| -rw-r--r-- | files/fr/web/html/preloading_content/index.html | 178 | ||||
| -rw-r--r-- | files/fr/web/html/quirks_mode_and_standards_mode/index.html | 34 | ||||
| -rw-r--r-- | files/fr/web/html/reference/index.html | 28 | ||||
| -rw-r--r-- | files/fr/web/html/using_the_application_cache/index.html | 329 | ||||
| -rw-r--r-- | files/fr/web/html/viewport_meta_tag/index.html | 100 |
14 files changed, 1731 insertions, 1586 deletions
diff --git a/files/fr/web/html/applying_color/index.html b/files/fr/web/html/applying_color/index.html index f37557b4fa..f7c67a9c00 100644 --- a/files/fr/web/html/applying_color/index.html +++ b/files/fr/web/html/applying_color/index.html @@ -2,163 +2,169 @@ title: Appliquer des couleurs sur des éléments HTML grâce à CSS slug: Web/HTML/Applying_color tags: + - Beginner - CSS + - CSS Colors - Débutant - Guide - HTML + - HTML Colors + - HTML Styles + - Styling HTML + - color translation_of: Web/HTML/Applying_color original_slug: Web/HTML/Appliquer_des_couleurs --- <div>{{HTMLRef}}</div> -<p>La couleur fait partie intégrante des moyens d'expressions. Lorsqu'on écrit un site web, il est naturel d'y ajouter des couleurs dans la mise en forme. Avec <a href="/fr/docs/Web/CSS">CSS</a>, il existe de nombreuses façons d'ajouter de la couleur aux <a href="/fr/docs/Web/HTML">éléments HTML</a> afin d'obtenir le résultat souhaité. Cet article est une introduction détaillée aux différentes méthodes permettant d'appliquer des couleurs CSS en HTML.</p> +<p class="summary">La couleur fait partie intégrante des moyens d'expressions. Lorsqu'on écrit un site web, il est naturel d'y ajouter des couleurs dans la mise en forme. Avec <a href="/fr/docs/Web/CSS">CSS</a>, il existe de nombreuses façons d'ajouter de la couleur aux <a href="/fr/docs/Web/HTML/Element">éléments</a> <a href="/fr/docs/Web/HTML">HTML</a> afin d'obtenir le résultat souhaité. Cet article est une introduction détaillée aux différentes méthodes permettant d'appliquer des couleurs CSS en HTML.</p> <p>L'ajout de couleur à un document HTML s'avère assez simple et permet de colorer presque tous les éléments.</p> -<p>Nous allons voir ici la liste de ce qui peut être coloré, la liste des propriétés CSS impliquées, les différentes façons de décrire une couleur, comment utiliser des couleurs dans les feuilles de style et dans les scripts. Nous verrons également comment permettre à un utilisateur de sélectionner une couleur.</p> +<p>Nous allons aborder la plupart des points que vous devez connaître lorsque vous utilisez des couleurs, y compris une <a href="#things_that_can_have_color">liste de ce que vous pouvez colorer et des propriétés CSS concernées</a>, <a href="#how_to_describe_a_color">comment décrire une couleur</a>, et comment <a href="#using_color">utiliser les couleurs à la fois dans les feuilles de style et dans les scripts</a>. Nous verrons également comment <a href="#letting_the_user_pick_a_color">permettre à l'utilisateur de choisir une couleur</a>.</p> -<p>Enfin, nous verrons comment utiliser les bonnes couleurs, en gardant à l'esprit les différentes notions d'accessibilité.</p> +<p>Ensuite, nous terminerons avec une brève discussion sur <a href="#using_color_wisely">l'utilisation judicieuse des couleurs</a> : comment sélectionner les couleurs adéquates tout en gardant à l'esprit les besoins des personnes daltoniennes par exemple.</p> -<h2 id="Ce_qui_peut_être_coloré">Ce qui peut être coloré</h2> +<h2 id="Things_that_can_have_color">Ce qui peut être coloré</h2> -<p>On peut appliquer une couleur sur chaque élément HTML. Voyons plutôt quels sont les choses que l'on peut dessiner sur les éléments : le texte, la bordure, etc. Pour chacune de ces choses, nous verrons la liste des propriétés CSS qui permettent de les colorer.</p> +<p>On peut appliquer une couleur sur chaque élément HTML. Voyons plutôt quelles sont les choses que l'on peut dessiner sur les éléments : le texte, la bordure, etc. Pour chacune de ces choses, nous verrons la liste des propriétés CSS qui permettent de les colorer.</p> -<p>De façon générale, la propriété {{cssxref("color")}} permet de définir la couleur de premier plan pour le contenu d'un élément HTML et la propriété {{cssxref("background-color")}} permete de définir la couleur utilisé pour l'arrière-plan de l'élément. Ces propriétés peuvent être utilisées sur la quasi-totalité des éléments HTML.</p> +<p>De façon générale, la propriété <a href="/fr/docs/Web/CSS/color"><code>color</code></a> permet de définir la couleur de premier plan pour le contenu d'un élément HTML et la propriété <a href="/fr/docs/Web/CSS/background-color"><code>background-color</code></a> permet de définir la couleur utilisée pour l'arrière-plan de l'élément. Ces propriétés peuvent être utilisées sur la quasi-totalité des éléments HTML.</p> -<h3 id="Texte">Texte</h3> +<h3 id="Text">Texte</h3> <p>Lorsqu'un élément est affiché à l'écran, les propriétés suivantes déterminent la couleur du texte, celle de son arrière-plan et celle des décorations.</p> <dl> - <dt>{{cssxref("color")}}</dt> - <dd>Cette propriété correspondra à la couleur utilisée pour dessiner le texte ainsi que <a href="/fr/docs/Learn/CSS/Styling_text/initiation-mise-en-forme-du-texte#Style_et_poids_de_police_transformation_et_décoration_de_texte">ses décorations</a> (tels que le soulignement, le surlingement, les rayures, etc.).</dd> - <dt>{{cssxref("background-color")}}</dt> + <dt><a href="/fr/docs/Web/CSS/color"><code>color</code></a></dt> + <dd>Cette propriété correspondra à la couleur utilisée pour dessiner le texte ainsi que <a href="/fr/docs/Learn/CSS/Styling_text/Fundamentals#font_style_font_weight_text_transform_and_text_decoration">ses décorations</a> (tels que le soulignement, le surlignement, les rayures, etc.).</dd> + <dt><a href="/fr/docs/Web/CSS/background-color"><code>background-color</code></a></dt> <dd>Cette propriété correspondra à la couleur utilisée en arrière-plan du texte.</dd> - <dt>{{cssxref("text-shadow")}}</dt> - <dd>Cette propriété permet d'ajouter un effet d'ombre au texte. Parmi les options de cette ombre, on a la couleur de base de l'ombre (qui participe au flou et qui est fusionnée avec l'arrière-plan selon les autres paramètres. Voir <a href="/fr/docs/Learn/CSS/Styling_text/initiation-mise-en-forme-du-texte#Ombres_du_texte">ce paragraphe</a> pour en savoir plus.</dd> - <dt>{{cssxref("text-decoration-color")}}</dt> + <dt><a href="/fr/docs/Web/CSS/text-shadow"><code>text-shadow</code></a></dt> + <dd>Cette propriété permet d'ajouter un effet d'ombre au texte. Parmi les options de cette ombre, on a la couleur de base de l'ombre (qui participe au flou et qui est fusionnée avec l'arrière-plan selon les autres paramètres. Voir <a href="/fr/docs/Learn/CSS/Styling_text/Fundamentals#text_drop_shadows">ce paragraphe</a> pour en savoir plus.</dd> + <dt><a href="/fr/docs/Web/CSS/text-decoration-color"><code>text-decoration-color</code></a></dt> <dd>Par défaut, les décorations du texte (le soulignement, les rayures, etc.) utilise la propriété <code>color</code> pour leurs couleurs. Il est cependant possible de passer outre cette valeur et de fournir une couleur différente avec la propriété <code>text-decoration-color</code>.</dd> - <dt>{{cssxref("text-emphasis-color")}}</dt> + <dt><a href="/fr/docs/Web/CSS/text-emphasis-color"><code>text-emphasis-color</code></a></dt> <dd>Cette propriété correspondra à la couleur utilisée pour dessiner les symboles d'emphase utilisés à côté des caractères du texte. Ces symboles sont principalement utilisés dans des textes écrits dans des langues d'Asie orientale.</dd> - <dt>{{cssxref("caret-color")}}</dt> - <dd>Cette propriété correspondra à la couleur utilisée pour dessiner le curseur de saisie de texte dans l'élément. Cette propriété est uniquement pertinente pour les éléments qui sont éditables (par exemple {{HTMLElement("input")}} et {{HTMLElement("textarea")}} ou les éléments dont l'attribut {{htmlattrxref("contenteditable")}} est activé).</dd> + <dt><a href="/fr/docs/Web/CSS/caret-color"><code>caret-color</code></a></dt> + <dd>Cette propriété correspondra à la couleur utilisée pour dessiner le curseur de saisie de texte dans l'élément. Cette propriété est uniquement pertinente pour les éléments qui sont éditables (par exemple <a href="/fr/docs/Web/HTML/Element/Input"><code><input></code></a> et <a href="/fr/docs/Web/HTML/Element/Textarea"><code><textarea></code></a> ou les éléments dont l'attribut <a href="/fr/docs/Web/HTML/Global_attributes#attr-contenteditable"><code>contenteditable</code></a> est activé).</dd> </dl> -<h3 id="Boîtes">Boîtes</h3> +<h3 id="Boxes">Boîtes</h3> <p>Chaque élément est une boîte avec du contenu. Cette boîte possède un arrière-plan et une bordure, quel que soit le contenu qu'elle renferme</p> <dl> - <dt>{{anch("Bordures")}}</dt> - <dd>Voir la section {{anch("Bordures")}} pour la liste des propriétés CSS qui peuvent être utilisées pour colorer la bordure d'une boîte.</dd> - <dt>{{cssxref("background-color")}}</dt> + <dt><a href="#borders">Bordures</a></dt> + <dd>Voir la section <a href="#borders">Bordures</a> pour la liste des propriétés CSS qui peuvent être utilisées pour colorer la bordure d'une boîte.</dd> + <dt><a href="/fr/docs/Web/CSS/background-color"><code>background-color</code></a></dt> <dd>Cette propriété correspondra à la couleur d'arrière-plan, utilisée dans les zones où l'élément ne possède pas de contenu au premier plan.</dd> - <dt>{{cssxref("column-rule-color")}}</dt> + <dt><a href="/fr/docs/Web/CSS/column-rule-color"><code>column-rule-color</code></a></dt> <dd>Cette propriété correspondra à la couleur utilisée pour dessiner la ligne qui sépare des colonnes de texte.</dd> - <dt>{{cssxref("outline-color")}}</dt> - <dd>Cette propriété correspondra à la couleur utilisée pour le contour de l'élément. Le contour est différent de la bordure car il occupe un espace autour de la boîte et peut alors chevaucher le contenu d'une autre boîte. Le contour est généralement utilisé afin d'indiquer que l'élément a le focus et ainsi montrer quel élément reçoit les évènements de saisie.</dd> + <dt><a href="/fr/docs/Web/CSS/outline-color"><code>outline-color</code></a></dt> + <dd>Cette propriété correspondra à la couleur utilisée pour le contour de l'élément. Le contour est différent de la bordure, car il occupe un espace autour de la boîte et peut alors chevaucher le contenu d'une autre boîte. Le contour est généralement utilisé afin d'indiquer que l'élément a le focus et ainsi montrer quel élément reçoit les évènements de saisie.</dd> </dl> -<h3 id="Bordures">Bordures</h3> +<h3 id="Borders">Bordures</h3> -<p>Tout élément possède une <a href="/fr/docs/Learn/CSS/Styling_boxes/Borders">bordure</a> dessinée autour. Une bordure simple est représentée par une ligne dessinant un rectangle autour du contenu de l'élément. Vous pouvez lire <a href="/fr/docs/Learn/CSS/Styling_boxes/Borders">la mise en forme des bordures grâce à CSS</a> afin d'approfondir ce sujet.</p> +<p>Tout élément possède une <a href="/fr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">bordure</a> dessinée autour. Une bordure simple est représentée par une ligne dessinant un rectangle autour du contenu de l'élément. Vous pouvez lire <a href="/fr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">la mise en forme des bordures grâce à CSS</a> afin d'approfondir ce sujet.</p> -<p>Il est possible d'utiliser la propriété raccourcie {{cssxref("border")}} qui permet de configurer l'ensemble des caractéristiques d'une bordure en une seule règle (y compris les caractéristiques qui ne sont pas liées aux couleurs comme <a href="/fr/docs/Web/CSS/border-width">la largeur</a>, <a href="/fr/docs/Web/CSS/border-style">le style</a> (ligne pleine, pointillés, etc.) et ainsi de suite).</p> +<p>Il est possible d'utiliser la propriété raccourcie <a href="/fr/docs/Web/CSS/border"><code>border</code></a> qui permet de configurer l'ensemble des caractéristiques d'une bordure en une seule règle (y compris les caractéristiques qui ne sont pas liées aux couleurs comme <a href="/fr/docs/Web/CSS/border-width">la largeur</a>, <a href="/fr/docs/Web/CSS/border-style">le style</a> (ligne pleine, pointillés, etc.) et ainsi de suite).</p> <dl> - <dt>{{cssxref("border-color")}}</dt> + <dt><a href="/fr/docs/Web/CSS/border-color"><code>border-color</code></a></dt> <dd>Cette propriété correspondra à la couleur qui sera utilisée pour chacun des côtés de la bordure.</dd> - <dt>{{cssxref("border-left-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-top-color")}}, {{cssxref("border-bottom-color")}}</dt> + <dt><a href="/fr/docs/Web/CSS/border-left-color"><code>border-left-color</code></a>, <a href="/fr/docs/Web/CSS/border-right-color"><code>border-right-color</code></a>, <a href="/fr/docs/Web/CSS/border-top-color"><code>border-top-color</code></a>, <a href="/fr/docs/Web/CSS/border-bottom-color"><code>border-bottom-color</code></a></dt> <dd>Ces propriétés permettent d'indiquer une couleur différente pour chaque côté de la bordure de l'élément.</dd> - <dt>{{cssxref("border-block-start-color")}} et {{cssxref("border-block-end-color")}}</dt> - <dd>Ces propriétés permettent de définir les couleurs utilisées pour les côtés de la bordure dans l'axe orthogonal au sens d'écriture. Ainsi, si le texte est écrit en français (de gauche à droite), <code>border-block-start-color</code> permettra de définir le côté haut de la bordure et <code>border-block-end-color</code> le côté bas.</dd> - <dt>{{cssxref("border-inline-start-color")}} et {{cssxref("border-inline-end-color")}}</dt> - <dd>Ces propriétés permettent de définir les couleurs utilisées pour les bordures pour les côtés sur l'axe du sens d'écriture. Les côtés impactés dépendent donc des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}} qui permettent, la plupart du temps, d'ajuster la directionnalité du texte en fonction de la langue utilisée. Si le texte est écrit de droite à gauche, <code>border-inline-start-color</code> correspondra à la couleur appliquée sur le côté droit.</dd> + <dt><a href="/fr/docs/Web/CSS/border-block-start-color"><code>border-block-start-color</code></a> et <a href="/fr/docs/Web/CSS/border-block-end-color"><code>border-block-end-color</code></a></dt> + <dd>Ces propriétés permettent de définir les couleurs utilisées pour les côtés de la bordure dans l'axe orthogonal au sens d'écriture. Ainsi, si le texte est écrit en français (de gauche à droite), <code>border-block-start-color</code> permettra de définir le côté haut de la bordure et <code>border-block-end-color</code> le côté bas. Ces propriétés sont complétées par les propriétés <code>border-inline-*</code> qui agissent sur l'autre axe.</dd> + <dt><a href="/fr/docs/Web/CSS/border-inline-start-color"><code>border-inline-start-color</code></a> et <a href="/fr/docs/Web/CSS/border-inline-end-color"><code>border-inline-end-color</code></a></dt> + <dd>Ces propriétés permettent de définir les couleurs utilisées pour les bordures pour les côtés sur l'axe du sens d'écriture. Les côtés impactés dépendent donc des propriétés <a href="/fr/docs/Web/CSS/writing-mode"><code>writing-mode</code></a>, <a href="/fr/docs/Web/CSS/direction"><code>direction</code></a>, and <a href="/fr/docs/Web/CSS/text-orientation"><code>text-orientation</code></a> qui permettent, la plupart du temps, d'ajuster la directionnalité du texte en fonction de la langue utilisée. Si le texte est écrit de droite à gauche, <code>border-inline-start-color</code> correspondra à la couleur appliquée sur le côté droit.</dd> </dl> -<h3 id="Les_autres_méthodes_pour_utiliser_de_la_couleur">Les autres méthodes pour utiliser de la couleur</h3> +<h3 id="Other_ways_to_use_color">Autres méthodes pour utiliser de la couleur</h3> <p>CSS n'est pas la seule technologie web qui gère des couleurs. Voici les autres technologies qui permettent d'apporter de la couleur sur une page web.</p> <dl> <dt><a href="/fr/docs/Web/API/Canvas_API">L'API Canvas</a></dt> - <dd>Cette API permet de dessiner des graphiques matriciels en deux dimensions à l'intérieur d'un élément {{HTMLElement("canvas")}}. Vous pouvez lire <a href="/fr/docs/Tutoriel_canvas">le tutoriel sur l'API Canvas</a> pour en savoir plus.</dd> + <dd>Cette API permet de dessiner des graphiques matriciels en deux dimensions à l'intérieur d'un élément <a href="/fr/docs/Web/HTML/Element/canvas"><code><canvas></code></a>. Vous pouvez lire <a href="/fr/docs/Web/API/Canvas_API/Tutorial">le tutoriel sur l'API Canvas</a> pour en savoir plus.</dd> <dt><a href="/fr/docs/Web/SVG">SVG</a> (<em>Scalable Vector Graphics</em>)</dt> - <dd>Ce format permet de dessiner des images en indiquant des commandes pour dessiner des formes, des motifs et des lignes afin de composer une image. Les commandes SVG sont construites dans un fichier XML et peuvent être embarquées dans une page web grâce à un élément {{HTMLElement("img")}}.</dd> + <dd>Ce format permet de dessiner des images en indiquant des commandes pour dessiner des formes, des motifs et des lignes afin de composer une image. Les commandes SVG sont construites dans un fichier XML et peuvent être embarquées dans une page web grâce à un élément <a href="/fr/docs/Web/HTML/Element/Img"><code><img></code></a>.</dd> <dt><a href="/fr/docs/Web/API/WebGL_API">WebGL</a></dt> - <dd>L'API Web Graphics Library est une API basée sur OpenGL ES qui permet de dessiner en deux ou trois dimensions sur le Web. Voir <a href="/fr/docs/Web/API/WebGL_API/Tutorial">Apprendre WebGL pour les graphismes en 2D et 3D</a> afin d'en savoir plus.</dd> + <dd>L'API Web Graphics Library est une API basée sur OpenGL ES qui permet de dessiner en deux ou trois dimensions sur le Web. Voir <a href="/fr/docs/Web/API/WebGL_API/Tutorial">le tutoriel WebGL</a> afin d'en savoir plus.</dd> </dl> -<h2 id="Comment_décrire_une_couleur">Comment décrire une couleur</h2> +<h2 id="How_to_describe_a_color">Comment décrire une couleur</h2> -<p>Afin de représente une couleur en CSS, il est nécessaire de trouver une méthode pour « traduire » le concept analogique de couleur dans un format numérique qu'un ordinateur pourra utiliser. Pour ce faire, on décompose la couleur en différentes composantes. Cela peut être la part de chaque couleur primaire ou bien la teinte et la luminosité de la couleur. Bref, il existe différentes façons de décrire une couleur en CSS.</p> +<p>Afin de représenter une couleur en CSS, il est nécessaire de trouver une méthode pour « traduire » le concept analogique de couleur dans un format numérique qu'un ordinateur pourra utiliser. Pour ce faire, on décompose la couleur en différentes composantes. Cela peut être la part de chaque couleur primaire ou bien la teinte et la luminosité de la couleur. Bref, il existe différentes façons de décrire une couleur en CSS.</p> -<p>Pour des informations plus détaillées sur chaque type de valeur, vous pouvez consulter la page de la référence CSS à propos de l'unité {{cssxref("<color>")}}.</p> +<p>Pour des informations plus détaillées sur chaque type de valeur, vous pouvez consulter la page de la référence CSS à propos de l'unité <a href="/fr/docs/Web/CSS/color_value"><code><color></code></a>.</p> -<h3 id="Mots-clés">Mots-clés</h3> +<h3 id="Keywords">Mots-clés</h3> -<p>Un ensemble standard de noms de couleurs a été défini et il est possible d'utiliser l'un de ces mots-clés plutôt qu'une représentation numérique s'il existe un mot-clé pour la valeur qu'on souhaite utiliser. Les mots-clés désignant les couleurs regroupent les couleurs primaires et secondaires (tels que<code>red</code> pour rouge, <code>blue</code> pour bleu, <code>orange</code>), les tons de gris (allant de <code>black</code> pour noir à <code>white</code> pour blanc et incluant des niveaux tels que <code>darkgray</code> (gris foncé) et <code>lightgrey</code> (gris clair)). D'autres couleurs sont également disponibles avec un mot-clé comme <code>lightseagreen</code>, <code>cornflowerblue</code> ou <code>rebeccapurple</code>.</p> +<p>Un ensemble standard de noms de couleurs a été défini et il est possible d'utiliser l'un de ces mots-clés plutôt qu'une représentation numérique s'il existe un mot-clé pour la valeur qu'on souhaite utiliser. Les mots-clés désignant les couleurs regroupent les couleurs primaires et secondaires (tels que<code>red</code> pour rouge, <code>blue</code> pour bleu, <code>orange</code>), les tons de gris (allant de <code>black</code> pour noir à <code>white</code> pour blanc et incluant des niveaux tels que <code>darkgray</code> (gris foncé) et <code>lightgrey</code> (gris clair)). D'autres couleurs sont également disponibles avec un mot-clé comme <code>lightseagreen</code>, <code>cornflowerblue</code> ou <code>rebeccapurple</code>.</p> -<p>Vous pouvez consulter <a href="/fr/docs/Web/CSS/Type_color#Les_mots-clés">cette liste</a> pour connaître l'ensemble des mots-clés disponibles.</p> +<p>Vous pouvez consulter <a href="/fr/docs/Web/CSS/color_value#color_keywords">cette liste</a> pour connaître l'ensemble des mots-clés disponibles.</p> -<h3 id="Valeurs_RGB">Valeurs RGB</h3> +<h3 id="RGB_values">Valeurs RGB</h3> <p>Il existe trois façons de représenter une couleur RGB en CSS.</p> -<h4 id="La_notation_hexadécimale">La notation hexadécimale</h4> +<h4 id="Hexadecimal_string_notation">La notation hexadécimale</h4> -<p>On peut utiliser une chaîne de caractères avec des chiffres hexadécimaux afin de représenter chacune des composantes (rouge, verte, bleue). On peut également décrire une quatrième composante pour l'opacité. Chaque composante est représentée par un nombre entre 0 et 255 (ce qui correspond à 0x00 et 0xFF en notation hexadécimale) ou par un nombre entre 0 et 15 (ce qui correspond à 0x0 et 0xF en notation hexadécimale). Toutes les composantes doivent être indiquées avec le même nombre de chiffres. Si c'est la notation à un seul chiffre qui est utilisée, la couleur finale sera calculée avec chaque composante doublée, autrement dit, <code>"#D"</code> sera converti en <code>"#DD"</code>.</p> +<p>On peut utiliser une chaîne de caractères avec des chiffres hexadécimaux afin de représenter chacune des composantes (rouge, verte, bleue) (soit, en anglais, <i>red</i>, <i>green</i>, <i>blue</i> qui donne l'acronyme RGB). On peut également décrire une quatrième composante pour l'opacité. Chaque composante est représentée par un nombre entre 0 et 255 (ce qui correspond à 0x00 et 0xFF en notation hexadécimale) ou par un nombre entre 0 et 15 (ce qui correspond à 0x0 et 0xF en notation hexadécimale). Toutes les composantes doivent être indiquées avec le même nombre de chiffres. Si c'est la notation à un seul chiffre qui est utilisée, la couleur finale sera calculée avec chaque composante doublée, autrement dit, <code>"#D"</code> sera converti en <code>"#DD"</code>.</p> -<p>Lorsqu'on utilise une chaîne de caractères avec un code hexadécimale, la chaîne de caractères commence toujours par le caractère <code>"#"</code>. Le reste de la chaîne correspond aux chiffres hexadécimaux. L'utilisation des majuscules ou minuscules n'a pas d'importance.</p> +<p>Lorsqu'on utilise une chaîne de caractères avec un code hexadécimal, la chaîne de caractères commence toujours par le caractère <code>"#"</code>. Le reste de la chaîne correspond aux chiffres hexadécimaux. L'utilisation des majuscules ou minuscules n'a pas d'importance.</p> <dl> <dt><code>"#rrggbb"</code></dt> <dd>Cette forme indique une couleur opaque dont les deux premiers chiffres hexadécimaux indiquent la composante rouge (<code>0xrr</code>), les deux chiffres suivants indiquent la composante verte (<code>0xgg</code>) et les deux derniers chiffres indiquent la composante bleue (<code>0xbb</code>).</dd> <dt><code>"#rrggbbaa"</code></dt> - <dd>Cette forme indique une couleur dont les deux premiers chiffres hexadécimaux indiquent la composante rouge (<code>0xrr</code>), les deux chiffres suivants indiquent la composante verte (<code>0xgg</code>), les deux chiffres suivants indiquent la composante bleue (<code>0xbb</code>), enfin, les deux derniers chiffres indiquent la composante alpha (<code>0xaa</code>) utilisée pour indiquer l'opacité de la couleur (plus la valeur est faible, plus la couleur est transparente).</dd> + <dd>Cette forme indique une couleur dont les deux premiers chiffres hexadécimaux indiquent la composante rouge (<code>0xrr</code>), les deux chiffres suivants indiquent la composante verte (<code>0xgg</code>), les deux chiffres suivants indiquent la composante bleue (<code>0xbb</code>), enfin, les deux derniers chiffres indiquent la composante alpha (<code>0xaa</code>) utilisée pour indiquer l'opacité de la couleur (plus la valeur est faible, plus la couleur est transparente).</dd> <dt><code>"#rgb"</code></dt> <dd>Cette forme indique une couleur dont la composante rouge vaut <code>0xrr</code>, la composante verte vaut <code>0xgg</code> et dont la composante bleue vaut <code>0xbb</code>.</dd> <dt><code>"#rgba"</code></dt> <dd>Cette forme indique une couleur dont la composante rouge vaut <code>0xrr</code>, la composante verte vaut <code>0xgg</code> et dont la composante bleue vaut <code>0xbb</code>. Le canal alpha vaut <code>0xaa</code> (plus la valeur est faible, plus la couleur sera transparente).</dd> </dl> -<p>Par exemple, on pourra représenter un bleu pur et opaque avec les chaînes de caractères <code>"#0000ff"</code> ou <code>"#00f"</code>. Pour le rendre opaquee à 25%, on utilisera <code>"#0000ff44"</code> ou <code>"#00f4"</code>.</p> +<p>Par exemple, on pourra représenter un bleu pur et opaque avec les chaînes de caractères <code>"#0000ff"</code> ou <code>"#00f"</code>. Pour le rendre opaque à 25%, on utilisera <code>"#0000ff44"</code> ou <code>"#00f4"</code>.</p> -<h4 id="La_notation_fonctionnelle_RGB">La notation fonctionnelle RGB</h4> +<h4 id="RGB_functional_notation">La notation fonctionnelle RGB</h4> -<p>La notation fonctionnelle RGB permet, comme les chaînes de caractères hexadécimales, de représenter des couleurs avec leurs composantes rouge, verte, bleue et éventuellement avec une composante alpha pour l'opacité. Toutefois, au lieu d'utiliser une chaîne de caractères, on utilise ici la fonction CSS {{cssxref("Type_color","rgb()","#rgb()")}}. Cette fonction prend trois arguments pour chacune des composantes (dans cet ordre) rouge, verte et bleue. Un quatrième paramètre, optionnel, permet d'indiquer la valeur du canal alpha.</p> +<p>La notation fonctionnelle RGB permet, comme les chaînes de caractères hexadécimales, de représenter des couleurs avec leurs composantes rouge, verte, bleue et éventuellement avec une composante alpha pour l'opacité. Toutefois, au lieu d'utiliser une chaîne de caractères, on utilise ici la fonction CSS <a href="/fr/docs/Web/CSS/color_value#rgb_colors"><code>rgb()</code></a>. Cette fonction prend trois arguments pour chacune des composantes (dans cet ordre) rouge, verte et bleue. Un quatrième paramètre, optionnel, permet d'indiquer la valeur du canal alpha.</p> <p>Voici les valeurs qui peuvent être utilisées pour chacun de ces paramètres :</p> <dl> <dt><code>red</code>, <code>green</code> et <code>blue</code></dt> - <dd>Chaque composante doit être un entier (type {{cssxref("<integer>")}}) compris entre 0 et 255 (inclus) ou un pourcentage (type {{cssxref("<percentage>")}}) compris entre 0% et 100%.</dd> + <dd>Chaque composante doit être un entier (type <a href="/fr/docs/Web/CSS/integer"><code><integer></code></a>) compris entre 0 et 255 (inclus) ou un pourcentage (type <a href="/fr/docs/Web/CSS/percentage"><code><percentage></code></a>) compris entre 0% et 100%.</dd> <dt><code>alpha</code></dt> <dd>Le canal alpha est un nombre entre 0.0 (la couleur est alors totalement transparente) et 1.0 (complètement opaque). On peut également utiliser un pourcentage où 0% correspondra à la valeur 0.0 et 100% correspondra à la valeur 1.0.</dd> </dl> <p>Par exemple, on pourra représenter un rouge pur à moitié opaque grâce à <code>rgb(255, 0, 0, 0.5)</code> ou grâce à <code>rgb(100%, 0, 0, 50%)</code>.</p> -<h3 id="La_notation_fonctionnelle_HSL">La notation fonctionnelle HSL</h3> +<h3 id="HSL_functional_notation">La notation fonctionnelle HSL</h3> -<p>D'autres personnes préfèrent manipuler <a href="https://fr.wikipedia.org/wiki/Teinte_saturation_luminosit%C3%A9">la notation HSL ou aussi appeléee « Teinte saturation luminosité »</a> (NDT : HSL signifie <em>Hue Saturation Lightness</em> en anglais). Sur le Web, les couleurs HSL sont représentées grâce à la notation fonctionnelle <code>hsl()</code> (qui fonctionne de façon analogue à la fonction <code>rgb()</code>).</p> +<p>D'autres personnes préfèrent manipuler <a href="https://fr.wikipedia.org/wiki/Teinte_saturation_luminosit%C3%A9">la notation HSL ou aussi appelée « Teinte saturation luminosité »</a> (NDT : HSL signifie <em>Hue Saturation Lightness</em> en anglais). Sur le Web, les couleurs HSL sont représentées grâce à la notation fonctionnelle <code>hsl()</code> (qui fonctionne de façon analogue à la fonction <code>rgb()</code>).</p> <div style="padding-bottom: 20px;"> -<figure style="width: 500px;"><img alt="HSL color cylinder" src="https://mdn.mozillademos.org/files/15445/1200px-HSL_color_solid_cylinder_alpha_lowgamma.png" style="height: 375px; width: 500px;"> -<figcaption><em><strong>Figure 1. Le cylindre HSL.</strong> Hue (la teinte) définit la couleur sur un axe radial qui parcourt les couleurs du spectre visible. La saturation est un pourcentage de la teinte entre un gris total et la couleur de la teinte vive. Enfin, la luminosité permet d'avoir des couleurs plus sombres (noir pour une luminosité nulle ou blanc pour une luminosité maximale). Cette image a été créée par <a href="http://commons.wikimedia.org/wiki/User:SharkD">SharkD</a> sur <a href="https://www.wikipedia.org/">Wikipédia</a> et est distribuée avec la licence <a href="http://creativecommons.org/licenses/by-sa/3.0">CC BY-SA 3.0</a>.</em></figcaption> -</figure> -</div> + <figure style="width: 500px;"><img alt="HSL color cylinder" src="1200px-hsl_color_solid_cylinder_alpha_lowgamma.png"> + <figcaption><em><strong>Figure 1. Le cylindre HSL.</strong> <i>Hue</i> (la teinte) définit la couleur sur un axe radial qui parcourt les couleurs du spectre visible. La saturation est un pourcentage de la teinte entre un gris total et la couleur de la teinte vive. Enfin, la luminosité permet d'avoir des couleurs plus sombres (noir pour une luminosité nulle ou blanc pour une luminosité maximale). Cette image a été créée par <a href="http://commons.wikimedia.org/wiki/User:SharkD">SharkD</a> sur <a href="https://www.wikipedia.org/">Wikipédia</a> et est distribuée avec la licence <a href="http://creativecommons.org/licenses/by-sa/3.0">CC BY-SA 3.0</a>.</em></figcaption> + </figure> + </div> -<p>La valeur de la teinte (<strong>H</strong>) est un angle qui début au rouge, parcourt le jaune, le vert, le cyan, le bleu et le magenta (avant de revenir à rouge avec un angle de 360°). Cette valeur identifie la teinte de base. La valeur utilisée est de type {{cssxref("<angle>")}} et on peut utiliser différentes unités disponibles en CSS comme les degrés (<code>deg</code>), les radians (<code>rad</code>), les grades (<code>grad</code>) ou les tours (<code>turn</code>).</p> +<p>La valeur de la teinte (<strong>H</strong>) est un angle qui commence au rouge, parcourt le jaune, le vert, le cyan, le bleu et le magenta (avant de revenir à rouge avec un angle de 360°). Cette valeur identifie la teinte de base. La valeur utilisée est de type <a href="/fr/docs/Web/CSS/angle"><code><angle></code></a> et on peut utiliser différentes unités disponibles en CSS comme les degrés (<code>deg</code>), les radians (<code>rad</code>), les grades (<code>grad</code>) ou les tours (<code>turn</code>).</p> <p>Ensuite, la saturation (<strong>S</strong>) indique la force de la teinte dans la couleur. Enfin, la luminosité (<strong>L</strong>) indique le niveau de gris de la couleur.</p> <p>On peut faire une analogie avec la conception d'une couleur pour une peinture :</p> <ol> - <li>On commence avec une peinture de base qui possède l'intensité la plus forte pour une couleur donnée (par exemple, le bleu le plus intense qui puisse être affiché) : c'est la teinte (<em>hue</em>) (<strong>H</strong>). En CSS, c'est un angle qui détermine la couleur parmi une roue de couleurs.</li> - <li>Ensuite, on choisit une peinture avec un niveau de gris qui la force de la couleur. Est-ce qu'on veut qu'elle soit claire ou sombre, voire complètement noire ? C'est la luminosité (<strong>L</strong>). En CSS, c'est un pourcentage, 0% indiquant une couleur noire et 100% une couleur blanche.</li> - <li>Enfin, avec ces deux peintures, on décide de la proportion de chacune pour le mélange final : c'est la saturation (<strong>S</strong>). Plus cette valeur est élevée, plus on utilise la couleur de base, plus cette valeur est faible et plus on utilise la peinture grise.</li> + <li>On commence avec une peinture de base qui possède l'intensité la plus forte pour une couleur donnée (par exemple, le bleu le plus intense qui puisse être affiché) : c'est la teinte (<em>hue</em>) (<strong>H</strong>). En CSS, c'est un angle qui détermine la couleur parmi une roue de couleurs.</li> + <li>Ensuite, on choisit une peinture avec un niveau de gris qui la force de la couleur. Est-ce qu'on veut qu'elle soit claire ou sombre, voire complètement noire ? C'est la luminosité (<strong>L</strong>). En CSS, c'est un pourcentage, 0% indiquant une couleur noire et 100% une couleur blanche.</li> + <li>Enfin, avec ces deux peintures, on décide de la proportion de chacune pour le mélange final : c'est la saturation (<strong>S</strong>). Plus cette valeur est élevée, plus on utilise la couleur de base, plus cette valeur est faible et plus on utilise la peinture grise.</li> </ol> <p>Il est également possible d'ajouter un canal alpha afin d'avoir une couleur partiellement (ou totalement) transparente.</p> @@ -185,59 +191,59 @@ th { }</pre> <pre class="brush: html"><table> - <thead> - <tr> - <th scope="col">Couleur en notation HSL</th> - <th scope="col">Exemple</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>hsl(90deg, 100%, 50%)</code></td> - <td style="background-color: hsl(90deg, 100%, 50%);">&nbsp;</td> - </tr> - <tr> - <td><code>hsl(90, 100%, 50%)</code></td> - <td style="background-color: hsl(90, 100%, 50%);">&nbsp;</td> - </tr> - <tr> - <td><code>hsl(0.15turn, 50%, 75%)</code></td> - <td style="background-color: hsl(0.15turn, 50%, 75%);">&nbsp;</td> - </tr> - <tr> - <td><code>hsl(0.15turn, 90%, 75%)</code></td> - <td style="background-color: hsl(0.15turn, 90%, 75%);">&nbsp;</td> - </tr> - <tr> - <td><code>hsl(0.15turn, 90%, 50%)</code></td> - <td style="background-color: hsl(0.15turn, 90%, 50%);">&nbsp;</td> - </tr> - <tr> - <td><code>hsl(270deg, 90%, 50%)</code></td> - <td style="background-color: hsl(270deg, 90%, 50%);">&nbsp;</td> - </tr> - </tbody> + <thead> + <tr> + <th scope="col">Couleur en notation HSL</th> + <th scope="col">Exemple</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>hsl(90deg, 100%, 50%)</code></td> + <td style="background-color: hsl(90deg, 100%, 50%);">&nbsp;</td> + </tr> + <tr> + <td><code>hsl(90, 100%, 50%)</code></td> + <td style="background-color: hsl(90, 100%, 50%);">&nbsp;</td> + </tr> + <tr> + <td><code>hsl(0.15turn, 50%, 75%)</code></td> + <td style="background-color: hsl(0.15turn, 50%, 75%);">&nbsp;</td> + </tr> + <tr> + <td><code>hsl(0.15turn, 90%, 75%)</code></td> + <td style="background-color: hsl(0.15turn, 90%, 75%);">&nbsp;</td> + </tr> + <tr> + <td><code>hsl(0.15turn, 90%, 50%)</code></td> + <td style="background-color: hsl(0.15turn, 90%, 50%);">&nbsp;</td> + </tr> + <tr> + <td><code>hsl(270deg, 90%, 50%)</code></td> + <td style="background-color: hsl(270deg, 90%, 50%);">&nbsp;</td> + </tr> + </tbody> </table></pre> </div> <p>{{EmbedLiveSample("hsl-swatches", 300, 260)}}</p> </div> -<div class="note"> -<p><strong>Note :</strong> Il est possible d'omettre l'unité pour la valeur de la teinte (<em>hue</em>), l'unité par défaut utilisée sera alors les degrés (<code>deg</code>).</p> +<div class="notecard note"> + <p><strong>Note :</strong> Il est possible d'omettre l'unité pour la valeur de la teinte (<em>hue</em>), l'unité par défaut utilisée sera alors les degrés (<code>deg</code>).</p> </div> -<h2 id="Utiliser_les_couleurs">Utiliser les couleurs</h2> +<h2 id="Using_color">Utiliser les couleurs</h2> <p>Maintenant qu'on connaît les différentes propriétés CSS, comment décrire une couleur et dans quel format, on peut assembler cela pour utiliser les couleurs dans un document web. Comme on l'a vu précédemment, de nombreuses choses peuvent être colorées. Pour ce faire, on peut utiliser deux mécanismes : une « <strong>feuille de style</strong> » et du code JavaScript pour modifier et ajouter des couleurs dynamiquement.</p> -<h3 id="Indiquer_les_couleurs_via_une_feuille_de_style">Indiquer les couleurs via une feuille de style</h3> +<h3 id="Specifying_colors_in_stylesheets">Indiquer les couleurs via une feuille de style</h3> <p>La façon la plus simple (et la plus fréquemment utilisée) pour appliquer des couleurs est d'utiliser une feuille de style CSS qui sera traitée par le navigateur au moment d'afficher les éléments à l'écran. Par la suite, nous verrons plusieurs exemples (sans pour autant exploiter toutes ces propriétés).</p> <p>Prenons un exemple et commençons par le résultat :</p> -<div>{{EmbedLiveSample("Indiquer_les_couleurs_via_une_feuille_de_style", 650, 150)}}</div> +<div>{{EmbedLiveSample("Specifying_colors_in_stylesheets", 650, 200)}}</div> <h4 id="HTML">HTML</h4> @@ -256,7 +262,7 @@ th { </div> </div></pre> -<p>Ce fragment est plutôt simple : on utilise un élément {{HTMLElement("div")}} qui enveloppe le contenu, constitué de deux <code><div></code>, chacun avec une classe différente et contenant chacun un paragraphe (c'est-à-dire un élément {{HTMLElement("p")}}).</p> +<p>Ce fragment est plutôt simple : on utilise un élément <a href="/fr/docs/Web/HTML/Element/div"><code><div></code></a> qui enveloppe le contenu, constitué de deux <code><div></code>, chacun avec une classe différente et contenant chacun un paragraphe (c'est-à-dire un élément <a href="/fr/docs/Web/HTML/Element/p"><code><p></code></a>).</p> <p>Voyons ensuite la feuille de style CSS appliquée au bloc HTML précédent.</p> @@ -272,9 +278,9 @@ th { border: 6px solid mediumturquoise; }</pre> -<p>Le sélecteur de classe <code>.conteneur</code> permet d'appliquer des styles à l'élément {{HTMLElement("div")}} qui enveloppe le reste du contenu. Pour ce style, on indique une largeur avec la propriété {{cssxref("width")}} et une hauteur avec la propriété {{cssxref("height")}}, on définit aussi une marge et une zone de remplissage avec {{cssxref("margin")}} et {{cssxref("padding")}}.</p> +<p>Le sélecteur de classe <code>.conteneur</code> permet d'appliquer des styles à l'élément <a href="/fr/docs/Web/HTML/Element/div"><code><div></code></a> qui enveloppe le reste du contenu. Pour ce style, on indique une largeur avec la propriété <a href="/fr/docs/Web/CSS/width"><code>width</code></a> et une hauteur avec la propriété <a href="/fr/docs/Web/CSS/height"><code>height</code></a>, on définit aussi une marge et une zone de remplissage avec <a href="/fr/docs/Web/CSS/margin"><code>margin</code></a> et <a href="/fr/docs/Web/CSS/padding"><code>padding</code></a>.</p> -<p>La règle la plus intéressante est celle où on manipule la propriété {{cssxref("border")}} afin de dessiner une bordure sur l'extérieur de l'élément. Cette bordure sera une ligne pleine de 6 pixels avec la couleur <code>mediumturquoise</code>.</p> +<p>La règle la plus intéressante est celle où on manipule la propriété <a href="/fr/docs/Web/CSS/border"><code>border</code></a> afin de dessiner une bordure sur l'extérieur de l'élément. Cette bordure sera une ligne pleine de 6 pixels avec la couleur <code>mediumturquoise</code>.</p> <p>Les deux boîtes colorées possèdent un certain nombre de propriétés communes. On utilise donc une classe : <code>.boite</code> pour laquelle on définit ces propriétés qui seront appliquées sur les deux éléments :</p> @@ -289,7 +295,7 @@ th { align-items: center; }</pre> -<p>Pour résumer, les styles ciblés par <code>.boite</code> indiquent la taille de la boîte, la configuration de la police de caractères utilisée, centrent le contenu des boîtes grâce <a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS">aux boîtes flexibles CSS</a>. Pour cela, on utilise le mode d'affichage <code>flex</code> avec {{cssxref("display", "display: flex")}} et on paramètre les propriétés {{cssxref("justify-content")}} et {{cssxref("align-items")}} avec la valeur <code>center</code>. Ensuite, on crée une classe pour chacune des deux boîtes dont chacune définit les propriétés qui diffèrent entre ces éléments.</p> +<p>Pour résumer, les styles ciblés par <code>.boite</code> indiquent la taille de la boîte, la configuration de la police de caractères utilisée, centrent le contenu des boîtes grâce <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout">aux boîtes flexibles CSS</a>. Pour cela, on utilise le mode d'affichage <code>flex</code> avec <a href="/fr/docs/Web/CSS/display"><code>display: flex</code></a> et on paramètre les propriétés <a href="/fr/docs/Web/CSS/justify-content"><code>justify-content</code></a> et <a href="/fr/docs/Web/CSS/align-items"><code>align-items</code></a> avec la valeur <code>center</code>. Ensuite, on crée une classe pour chacune des deux boîtes dont chacune définit les propriétés qui diffèrent entre ces éléments.</p> <pre class="brush: css">.boiteGauche { float: left; @@ -300,9 +306,9 @@ th { <p>La classe <code>.boiteGauche</code> permet de mettre en forme la boîte située à gauche et on l'utilise pour définir certaines couleurs :</p> <ul> - <li>La couleur de l'arrière-plan est définie grâce à la propriété {{cssxref("background-color")}} pour laquelle on fournit la valeur <code>rgb(245, 130, 130)</code>.</li> - <li>Un contour est défini autour de la boîte grâce à la propriété {{cssxref("outline")}}. Ici, ce contour est une ligne pleine, rouge foncée (le mot-clé <code>darkred</code>) de deux pixels.</li> - <li>On notera ici qu'on ne définit pas de couleur pour le texte. La valeur qui sera utilisée pour la propriété {{cssxref("color")}} sera celle qui est héritée par le plus proche élément englobant qui définit cette propriété. La couleur par défaut est le noir.</li> + <li>La couleur de l'arrière-plan est définie grâce à la propriété <a href="/fr/docs/Web/CSS/background-color"><code>background-color</code></a> pour laquelle on fournit la valeur <code>rgb(245, 130, 130)</code>.</li> + <li>Un contour est défini autour de la boîte grâce à la propriété <a href="/fr/docs/Web/CSS/outline"><code>outline</code></a>. Ici, ce contour est une ligne pleine, rouge foncée (le mot-clé <code>darkred</code>) de deux pixels.</li> + <li>On notera ici qu'on ne définit pas de couleur pour le texte. La valeur qui sera utilisée pour la propriété <a href="/fr/docs/Web/CSS/color"><code>color</code></a> sera celle qui est héritée par le plus proche élément englobant qui définit cette propriété. La couleur par défaut est le noir.</li> </ul> <pre class="brush: css">.boiteDroite { @@ -317,32 +323,32 @@ th { <p>Enfin, la classe <code>.boiteDroite</code> décrit les propriétés de la boîte dessinée à droite. On configure cette boîte afin qu'elle flotte à droite de la boîte précédente. Ensuite, on paramètre les couleurs suivantes :</p> <ul> - <li>La propriété <code>background-color</code> est définie avec la notation fonctionnelle HSL : <code>hsl(270deg, 50%, 75%)</code>. Cela correspond à un violet.</li> - <li>La propriété <code>outline</code> permet d'indiquer un contour de 4 pixels formé par une ligne pointillée dont la couleur est exprimée avec la notation fonctionnelle RGB <code>rgb(110, 20, 120)</code> (violet foncé).</li> - <li>La couleur de premier plan (c'est-à-dire celle utilisée pour le texte) est définie avec la propriété {{cssxref("color")}} et la valeur <code>hsl(0deg, 100%, 100%)</code> qui correspond au blanc.</li> - <li>On ajoute une ligne verte ondulée sous le texte avec {{cssxref("text-decoration")}}.</li> - <li>Enfin, on ajoute une ombre au texte avec la propriété {{cssxref("text-shadow")}} dont le paramètre de couleur vaut <code>black</code> (noir).</li> + <li>La propriété <code>background-color</code> est définie avec la notation fonctionnelle HSL : <code>hsl(270deg, 50%, 75%)</code>. Cela correspond à un violet.</li> + <li>La propriété <code>outline</code> permet d'indiquer un contour de 4 pixels formé par une ligne pointillée dont la couleur est exprimée avec la notation fonctionnelle RGB <code>rgb(110, 20, 120)</code> (violet foncé).</li> + <li>La couleur de premier plan (c'est-à-dire celle utilisée pour le texte) est définie avec la propriété <a href="/fr/docs/Web/CSS/color"><code>color</code></a> et la valeur <code>hsl(0deg, 100%, 100%)</code> qui correspond au blanc.</li> + <li>On ajoute une ligne verte ondulée sous le texte avec <a href="/fr/docs/Web/CSS/text-decoration"><code>text-decoration</code></a>.</li> + <li>Enfin, on ajoute une ombre au texte avec la propriété <a href="/fr/docs/Web/CSS/text-shadow"><code>text-shadow</code></a> dont le paramètre de couleur vaut <code>black</code> (noir).</li> </ul> -<h2 id="Permettre_à_l'utilisateur_de_choisir_une_couleur">Permettre à l'utilisateur de choisir une couleur</h2> +<h2 id="Letting_the_user_pick_a_color">Permettre à l'utilisateur de choisir une couleur</h2> -<p>Il existe différentes situations où l'on peut/doit permettre à l'utilisateur de sélectionner une couleur. Il peut s'agir d'une interface personnalisable, d'une application de dessin, d'une application d'édition où on peut choisir la couleur du texte, etc. Bien que, par le passé, il fut nécessaire d'implémenter son propre sélecteur de couleur, HTML fournit désormais au navigateurs une façon homogène de le faire avec un élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type", "input")}} vaut <code>"color"</code>.</p> +<p>Il existe différentes situations où l'on peut/doit permettre à l'utilisateur de sélectionner une couleur. Il peut s'agir d'une interface personnalisable, d'une application de dessin, d'une application d'édition où on peut choisir la couleur du texte, etc. Bien que, par le passé, il fût nécessaire d'implémenter son propre sélecteur de couleur, HTML fournit désormais aux navigateurs une façon homogène de le faire avec un élément <a href="/fr/docs/Web/HTML/Element/Input"><code><input></code></a> dont l'attribut <a href="/fr/docs/Web/HTML/Element/Input#attr-type"><code>type</code></a> vaut <code>"color"</code>.</p> <p>Lorsqu'on choisit une couleur via un élément <code><input></code>, la valeur stockée dans le document et envoyée via le formulaire est représentée avec une chaîne de caractères hexadécimale.</p> -<h3 id="Exemple_sélectionner_une_couleur">Exemple : sélectionner une couleur</h3> +<h3 id="Example_Picking_a_color">Exemple : sélectionner une couleur</h3> <p>Prenons un exemple simple où l'utilisateur choisit une couleur qui est immédiatement appliquée sur la bordure de l'exemple. Une fois la couleur finale sélectionnée, la valeur du sélecteur de couleur est affichée.</p> -<p>{{EmbedLiveSample("Exemple_:_sélectionner_une_couleur", 525, 275)}}</p> +<p>{{EmbedLiveSample("Example_Picking_a_color", 525, 275)}}</p> -<div class="note"> -<p><strong>Note :</strong> Sur macOS, pour indiquer qu'on a fini de choisir la couleur, il faut fermer la fenêtre du sélecteur de couleur.</p> +<div class="notecard note"> + <p><strong>Note :</strong> Sur macOS, pour indiquer qu'on a fini de choisir la couleur, il faut fermer la fenêtre du sélecteur de couleur.</p> </div> <h4 id="HTML_2">HTML</h4> -<p>Voici le fragment HTML qui permet de créer une boîte qui contient un sélecteur de couleur avec un libellé associé (l'élément {{HTMLElement("label")}}) ainsi qu'un paragraphe ({{HTMLElement("p")}}) vide dans lequel nous placerons plus tard du texte avec JavaScript.</p> +<p>Voici le fragment HTML qui permet de créer une boîte qui contient un sélecteur de couleur avec un libellé associé (l'élément <a href="/fr/docs/Web/HTML/Element/Label"><code><label></code></a>) ainsi qu'un paragraphe (<a href="/fr/docs/Web/HTML/Element/p"><code><p></code></a>) vide dans lequel nous placerons plus tard du texte avec JavaScript.</p> <pre class="brush: html"><div id="box"> <label for="colorPicker">Couleur de la bordure :</label> @@ -380,54 +386,54 @@ colorPicker.addEventListener("change", function(event) { output.innerText = "Couleur choisie : " + colorPicker.value; }, false);</pre> -<p>L'évènement {{event("input")}} est envoyé chaque fois que la valeur de l'élément change, c'est-à-dire chaque fois que l'utilisateur ajuste la couleur via le sélecteur. Pour chacun de ces évènements, on modifie la couleur de la bordure afin qu'elle corresponde à celle du sélecteur.</p> +<p>L'évènement <a href="/fr/docs/Web/API/HTMLElement/input_event"><code>input</code></a> est envoyé chaque fois que la valeur de l'élément change, c'est-à-dire chaque fois que l'utilisateur ajuste la couleur via le sélecteur. Pour chacun de ces évènements, on modifie la couleur de la bordure afin qu'elle corresponde à celle du sélecteur.</p> -<p>L'évènement {{event("change")}} est reçu lors de la finalisation du choix de la couleur via le sélecteur. Lorsque cet évènement suvient, on modifie le contenu de l'élément <code><p></code> (le paragraphe) qui possède l'identifiant <code>"output"</code> en y ajoutant une chaîne de caractères qui décrit la couleur choisie.</p> +<p>L'évènement <a href="/fr/docs/Web/API/HTMLElement/change_event"><code>change</code></a> est reçu lors de la finalisation du choix de la couleur via le sélecteur. Lorsque cet évènement suvient, on modifie le contenu de l'élément <code><p></code> (le paragraphe) qui possède l'identifiant <code>"output"</code> en y ajoutant une chaîne de caractères qui décrit la couleur choisie.</p> -<h2 id="L'art_de_choisir_une_couleur">L'art de choisir une couleur</h2> +<h2 id="Using_color_wisely">L'art de choisir une couleur</h2> <p>Choisir les bonnes couleurs lors de la conception d'un site web peut s'avérer plus compliqué qu'il n'y paraît. Un mauvais choix de couleur peut nuire à l'attractivité du site voire empêcher les utilisateurs de consulter le contenu si le contraste est trop faible ou les couleurs trop criardes. Dans le pire des cas, le site peut être inutilisable à cause des couleurs choisies pour les personnes qui ont des handicaps visuels.</p> -<h3 id="Trouver_les_bonnes_couleurs">Trouver les bonnes couleurs</h3> +<h3 id="Finding_the_right_colors">Trouver les bonnes couleurs</h3> <p>Il existe des outils qui permettent de faciliter la sélection des couleurs. Bien qu'ils ne remplacent pas un bon designer, ils permettent au moins de commencer.</p> -<h4 id="La_couleur_de_base">La couleur de base</h4> +<h4 id="Base_color">La couleur de base</h4> <p>La première étape consiste à choisir la couleur de base. C'est la couleur principale qui participe à la définition du site web ou du sujet dont il est question. Par exemple, on associe la couleur jaune à La Poste, le bleu au ciel ou à quelque chose de marin, etc. Voici quelques idées (parmi les nombreuses qui existent) pour choisir une couleur de base :</p> <ul> - <li>Une couleur naturellement associée au contenu : la couleur d'un produit ou une couleur rattachée à un concept/une émotion dont il serait question sur le site.</li> + <li>Une couleur naturellement associée au contenu : la couleur d'un produit ou une couleur rattachée à un concept ou une émotion dont il serait question sur le site.</li> <li>Naviguer parmi les sites existants et les bibliothèques d'image pour puiser de l'inspiration parmi les couleurs.</li> </ul> -<p>Une fois la couleur de base sélectionnéee, vous pouvez utiliser certaines extensions de navigateur pour « prélever » des couleurs existantes sur le web. Le site web <a href="http://www.colorzilla.com/">ColorZilla</a>, par exemple, propose une extension (<a href="http://www.colorzilla.com/chrome">Chrome</a> / <a href="http://www.colorzilla.com/firefox">Firefox</a>) qui permet d'utiliser une pipette pour identifier les couleurs utilisées à un endroit d'une page web. Cette extension permet également de mesurer la couleur moyenne des pixels d'une zone donnée.</p> +<p>Une fois la couleur de base sélectionnée, vous pouvez utiliser certaines extensions de navigateur pour « prélever » des couleurs existantes sur le web. Le site web <a href="http://www.colorzilla.com/">ColorZilla</a>, par exemple, propose une extension (<a href="http://www.colorzilla.com/chrome">Chrome</a> / <a href="http://www.colorzilla.com/firefox">Firefox</a>) qui permet d'utiliser une pipette pour identifier les couleurs utilisées à un endroit d'une page web. Cette extension permet également de mesurer la couleur moyenne des pixels d'une zone donnée.</p> -<div class="note"> -<p><strong>Note :</strong> On peut s'apercevoir qu'un site contient plusieurs couleurs très proches les unes des autres, utiliser une « moyenne » permet alors de récupérer le ton principal sous la forme d'une seule couleur.</p> +<div class="notecard note"> + <p><strong>Note :</strong> On peut s'apercevoir qu'un site contient plusieurs couleurs très proches les unes des autres, utiliser une « moyenne » permet alors de récupérer le ton principal sous la forme d'une seule couleur.</p> </div> -<h4 id="Agrémenter_la_palette">Agrémenter la palette</h4> +<h4 id="Fleshing_out_the_palette">Agrémenter la palette</h4> <p>Une fois la couleur de base sélectionnée et identifiée, il existe de nombreux outils qui permettent de construire une palette de couleurs qui pourront être utilisées avec cette couleur de base. Ces outils utilisent la théorie des couleurs pour déterminer les couleurs appropriées. Certains de ces outils permettent également de voir les couleurs « filtrées » afin de visualiser ce qu'une personne daltonienne verrait.</p> <p>Voici quelques exemples (libres d'accès et gratuits au moment où nous écrivons ces lignes) de tels outils :</p> <ul> - <li><a href="/fr/docs/Web/CSS/Couleurs_CSS/Sélecteur_de_couleurs">Le sélecteur de couleur MDN</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Colors/Color_picker_tool">Le sélecteur de couleur MDN</a></li> <li><a href="http://paletton.com">Paletton</a> (en anglais)</li> <li><a href="https://color.adobe.com/fr/create/color-wheel">La roue des couleurs en ligne d'Adobe Color CC</a></li> </ul> <p>Lorsque vous concevez votre palette de couleurs, gardez à l'esprit qu'en plus des couleurs générées par ces outils, il faudra vraisemblablement prévoir des couleurs neutres (telles que le blanc ou un ton de blanc, du noir ou un ton de noir et certaines nuances de gris).</p> -<div class="note"> -<p><strong>Note :</strong> On utilise généralement le moins de couleurs possibles afin de garder une cohérence. En utilisant des couleurs afin d'accentuer certains éléments plutôt que d'en utiliser pour tous les éléments de la page, on rend le contenu plus facile à lire et à parcourir. De plus, les couleurs ont ainsi plus d'impact</p> +<div class="notecard note"> + <p><strong>Note :</strong> On utilise généralement le moins de couleurs possibles afin de garder une cohérence. En utilisant des couleurs afin d'accentuer certains éléments plutôt que d'en utiliser pour tous les éléments de la page, on rend le contenu plus facile à lire et à parcourir. De plus, les couleurs ont ainsi plus d'impact</p> </div> -<h3 id="Quelques_ressources_sur_la_théorie_des_couleurs">Quelques ressources sur la théorie des couleurs</h3> +<h3 id="Color_theory_resources">Quelques ressources sur la théorie des couleurs</h3> -<p>Décrire l'ensemble des notions liées à la théorie des couleurs dépasse le sujet de cet article. Toutefois, il existe de nombreux articles traitant de ce sujet ainsi que des cours pour apprendre ces notions. Voici quelques unes des ressources disponibles en ligne à propos de la théorie des couleurs :</p> +<p>Décrire l'ensemble des notions liées à la théorie des couleurs dépasse le sujet de cet article. Toutefois, il existe de nombreux articles traitant de ce sujet ainsi que des cours pour apprendre ces notions. Voici quelques-unes des ressources disponibles en ligne à propos de la théorie des couleurs :</p> <dl> <dt><a href="https://www.khanacademy.org/partner-content/pixar/color">La science des couleurs (en anglais)</a> (<a href="https://www.khanacademy.org/">Khan Academy</a> en association avec <a href="https://www.pixar.com/">Pixar</a>)</dt> @@ -436,14 +442,14 @@ colorPicker.addEventListener("change", function(event) { <dd>La page Wikipédia qui traite de la théorie des couleurs et qui fournit de nombreuses informations techniques.</dd> </dl> -<h3 id="Les_couleurs_et_l'accessibilité">Les couleurs et l'accessibilité</h3> +<h3 id="Color_and_accessibility">Les couleurs et l'accessibilité</h3> <p>Une couleur peut poser différents problèmes d'accessibilité. Une couleur mal choisie pourra empêcher certaines personnes d'utiliser l'interface du site, ce qui peut se traduire par une baisse de fréquentation, une mauvaise image (au sens propre comme au figuré), etc.</p> <p>Pour commencer, n'hésitez pas à vous renseigner sur le daltonisme et les différents types de daltonisme : confusion rouge/vert, confusion sur l'ensemble des couleurs.</p> -<div class="note"> -<p><strong>Note :</strong> Une règle d'or consiste à ne jamais utiliser une couleur comme seule façon d'indiquer une information. Si, par exemple, vous souhaitez indiquer une réussite ou un échec en changeant uniquement la couleur d'un symbole (un drapeau par exemple), les utilisateurs souffrant de daltonismes et avec une confusion rouge/vert ne pourront pas lire cette information. Il est sans doute préférable d'utiliser du texte et de la couleur afin que tout le monde puisse être en mesure de comprendre ce qui a changé.</p> +<div class="notecard note"> + <p><strong>Note :</strong> Une règle d'or consiste à ne jamais utiliser une couleur comme seule façon d'indiquer une information. Si, par exemple, vous souhaitez indiquer une réussite ou un échec en changeant uniquement la couleur d'un symbole (un drapeau par exemple), les utilisateurs souffrant de daltonismes et avec une confusion rouge/vert ne pourront pas lire cette information. Il est sans doute préférable d'utiliser du texte et de la couleur afin que tout le monde puisse être en mesure de comprendre ce qui a changé.</p> </div> <p>Pour plus d'informations sur le daltonisme, vous pouvez consulter les articles suivants (en anglais, n'hésitez pas à éditer la page pour ajouter des ressources francophones) :</p> @@ -454,7 +460,7 @@ colorPicker.addEventListener("change", function(event) { <li><a href="https://www.usability.gov/get-involved/blog/2010/02/color-blindness.html">Color Blindness & Web Design</a></li> </ul> -<h3 id="Un_exemple_de_conception_de_palette">Un exemple de conception de palette</h3> +<h3 id="Palette_design_example">Un exemple de conception de palette</h3> <p>Considérons un exemple rapide pour construire une palette. Imaginons qu'on souhaite construire un site web pour un jeu dont l'action se déroule sur Mars. On peut <a href="https://www.google.com/search?q=Mars&tbm=isch">rechercher des images relatives à Mars sur Google</a> ou sur un autre moteur de recherche. On utilise un sélecteur de couleur pour sélectionner un échantillon de couleur.</p> @@ -462,46 +468,46 @@ colorPicker.addEventListener("change", function(event) { <p>Une fois la couleur de base sélectionnée, on construit la palette. Pour cela, nous avons choisi <a href="http://www.paletton.com/">Paletteon</a> afin de compléter avec d'autres couleurs. Lorsqu'on ouvre Palleton, on voit ceci :</p> -<p><img alt="L'affichage du site Palleton après l'ouverture" src="https://mdn.mozillademos.org/files/15451/paletton1.png" style="height: 361px; width: 600px;"></p> +<p><img alt="L'affichage du site Palleton après l'ouverture" src="paletton1.png"></p> -<p>Ensuite, on saisi le code de la couleur (<code>D79C7A</code>) dans le champ "Base RGB" situé en bas à gauche de l'outil :</p> +<p>Ensuite, on saisit le code de la couleur (<code>D79C7A</code>) dans le champ "Base RGB" situé en bas à gauche de l'outil :</p> -<p><img alt="After entering base color" src="https://mdn.mozillademos.org/files/15453/paletton2.png" style="height: 361px; width: 600px;"></p> +<p><img alt="After entering base color" src="paletton2.png"></p> -<p>On obtient alors une palette monochromatique, basée sur la couleur sélectionnée. Si vous avez besoin d'un nuancier autour de cette couleur, la palette monochromatique pourra sans doute vous aider. Mais ici, on souhaite plutôt avoir une couleur qui ressorte, pour cela on clique sur le case "<em>add complementary</em>"sous le menu permettant de sélectionner le type de palette (et qui vaut "Monochromatic"). Paletteon calcule alors une couleur complémentaire appropriée et indique le code de cette nouvelle couleur dans le coin inférieur droit : <code>#508D7C</code>.</p> +<p>On obtient alors une palette monochromatique, basée sur la couleur sélectionnée. Si vous avez besoin d'un nuancier autour de cette couleur, la palette monochromatique pourra sans doute vous aider. Mais ici, on souhaite plutôt avoir une couleur qui ressorte, pour cela on clique sur la case "<em>add complementary</em>" sous le menu permettant de sélectionner le type de palette (et qui vaut "Monochromatic"). Paletteon calcule alors une couleur complémentaire appropriée et indique le code de cette nouvelle couleur dans le coin inférieur droit : <code>#508D7C</code>.</p> -<p><img alt="Now with complementary colors included." src="https://mdn.mozillademos.org/files/15455/paletton3.png" style="height: 361px; width: 600px;"></p> +<p><img alt="Now with complementary colors included." src="paletton3.png"></p> <p>Si vous n'êtes pas satisfait du résultat obtenu, vous pouvez faire varier le schéma de composition. Ainsi, on pourra utiliser le thème "Triad" qui fournira le résultat suivant :</p> -<p><img alt="Triad color scheme selected" src="https://mdn.mozillademos.org/files/15457/paletton4.png" style="height: 361px; width: 600px;"></p> +<p><img alt="Triad color scheme selected" src="paletton4.png"></p> <p>On obtient alors un bleu gris en haut à droite. En cliquant dessus, on obtient le code <code>#556E8D</code>. On pourra utiliser cette couleur afin d'accentuer certains éléments tels que les titres ou les onglets mis en évidence ou bien d'autres indicateurs sur le site :</p> -<p><img alt="Triad color scheme selected" src="https://mdn.mozillademos.org/files/15459/paletton-color-detail.png" style="height: 370px; width: 526px;"></p> +<p><img alt="Triad color scheme selected" src="paletton-color-detail.png"></p> -<p>Maintenant, nous disposons d'une couleur de base, d'une couleur d'accentuation ainsi que de variations autour de celles-ci au cas où nous aurions besoin de dégradés. On peut exporter les couleurs sous différents formats afin de les utiliser.</p> +<p>Maintenant, nous disposons d'une couleur de base, d'une couleur d'accentuation ainsi que de variations autour de celles-ci au cas où nous aurions besoin de dégradés. On peut exporter les couleurs sous différents formats afin de les utiliser.</p> -<p>Avec ces couleurs, il faudra probablement sélectionner quelques couleurs neutres. Une pratique courante consiste à trouver le contraste suffisant pour que le texte soit pleinement lisible mais sans que ce contraste soit trop fort. Il est facile de s'égarer dans l'une ou l'autre des directions : n'hésitez pas à demander des retours sur les couleurs que vous avez sélectionnées. Si le contraste est trop faible, le texte sera illisible et on ne pourra pas le distinger de l'arrière-plan, cela pourra également poser des problèmes d'accessibilité. Si le contraste est trop élevé, le site pourra paraître criard.</p> +<p>Avec ces couleurs, il faudra probablement sélectionner quelques couleurs neutres. Une pratique courante consiste à trouver le contraste suffisant pour que le texte soit pleinement lisible mais sans que ce contraste soit trop fort. Il est facile de s'égarer dans l'une ou l'autre des directions : n'hésitez pas à demander des retours sur les couleurs que vous avez sélectionnées. Si le contraste est trop faible, le texte sera illisible et on ne pourra pas le distinguer de l'arrière-plan, cela pourra également poser des problèmes d'accessibilité. Si le contraste est trop élevé, le site pourra paraître criard.</p> -<h3 id="Les_couleurs_les_arrière-plans_le_contraste_et_l'impression">Les couleurs, les arrière-plans, le contraste et l'impression</h3> +<h3 id="Color_backgrounds_contrast_and_printing">Couleurs, arrière-plans, contraste et impression</h3> -<p>Le rendu d'un document peut être différent selon que ce dernier est affiché sur un écran ou sur du papier. De plus, sur papier, on peut chercher à économiser l'encre superflu. Lorsqu'un utilisateur imprime une page, il n'est par exemple peut-être pas nécessaire d'imprimer les arrière-plans. Par défaut, la plupart des navigateurs retire les images d'arrière-plan à l'impression.</p> +<p>Le rendu d'un document peut être différent selon que ce dernier est affiché sur un écran ou sur du papier. De plus, sur papier, on peut chercher à économiser l'encre superflu. Lorsqu'un utilisateur imprime une page, il n'est par exemple peut-être pas nécessaire d'imprimer les arrière-plans. Par défaut, la plupart des navigateurs retirent les images d'arrière-plan à l'impression.</p> -<p>Si les couleurs d'arrière-plan ou les images sont importantes pour l'ensemble du document, on peut utiliser la propriété {{cssxref("color-adjust")}} afin d'indiquer au navigateur qu'il ne faut pas modifier l'apparence du contenu.</p> +<p>Si les couleurs d'arrière-plan ou les images sont importantes pour l'ensemble du document, on peut utiliser la propriété <a href="/fr/docs/Web/CSS/color-adjust"><code>color-adjust</code></a> afin d'indiquer au navigateur qu'il ne faut pas modifier l'apparence du contenu.</p> <p>Par défaut, la propriété <code>color-adjust</code> vaut <code>economy</code> et indique au navigateur qu'il peut modifier l'apparence afin d'optimiser la lisibilité du contenu et d'économiser de l'encre selon le support d'imprimerie.</p> <p><code>color-adjust</code> peut être paramétré avec la valeur <code>exact</code> afin d'indiquer au navigateur qu'un ou plusieurs éléments doivent être conservés tels quels afin que l'ensemble du document ne soit pas détérioré.</p> -<div class="note"> -<p><strong>Note :</strong> Il n'est pas garanti que le navigateur respecte exactement la feuille de style utilisée avec <code>color-adjust: exact</code>. En effet, si le navigateur fournit une option à l'utilisateur pour ne pas imprimer les arrière-plans, ce réglage prendra le pas sur la feuille de style.</p> +<div class="notecard note"> + <p><strong>Note :</strong> Il n'est pas garanti que le navigateur respecte exactement la feuille de style utilisée avec <code>color-adjust: exact</code>. En effet, si le navigateur fournit une option à l'utilisateur pour ne pas imprimer les arrière-plans, ce réglage prendra le pas sur la feuille de style.</p> </div> -<h2 id="Voir_aussi">Voir aussi</h2> +<h2 id="See_also">Voir aussi</h2> <ul> <li><a href="/fr/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Dessiner des graphiques</a></li> <li><a href="/fr/docs/Web/Guide/Graphics">Le graphisme sur le Web</a></li> - <li><a href="/fr/docs/Outils/Couleurs_des_DevTools">Un outil de sélection de couleur sur MDN</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Colors/Color_picker_tool">Un outil de sélection de couleur sur MDN</a></li> </ul> 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"><p>Ce paragraphe est un élément de bloc. Son fond a été coloré pour illustrer son conteneur.</p></pre> +<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> @@ -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><body></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><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> </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> diff --git a/files/fr/web/html/cors_enabled_image/index.html b/files/fr/web/html/cors_enabled_image/index.html index e73a5ed29e..07aef9b0ef 100644 --- a/files/fr/web/html/cors_enabled_image/index.html +++ b/files/fr/web/html/cors_enabled_image/index.html @@ -1,50 +1,52 @@ --- -title: Images avec le contrôle d'accès HTTP +title: Autoriser les images et canevas provenant d'autres origines slug: Web/HTML/CORS_enabled_image tags: - - Avancé + - Advanced - CORS - Canvas - HTML + - Image - Reference + - Security + - Storage + - data translation_of: Web/HTML/CORS_enabled_image original_slug: Web/HTML/Images_avec_le_contrôle_d_accès_HTTP --- -<div>{{QuickLinksWithSubpages("/fr/docs/Web/HTML/")}}</div> - -<p><span class="seoSummary">HTML permet d'utiliser l'attribut {{htmlattrxref("crossorigin", "img")}} sur les images. Utilisé avec un en-tête {{Glossary("CORS")}} adéquat, les images définies par {{HTMLElement("img")}} provenant d'origines étrangères pourront être utilisées au sein d'un élément {{HTMLElement("canvas")}} comme si elles avaient été chargées depuis l'origine courante.</span></p> +<p class="summary">HTML permet d'utiliser l'attribut <a href="/fr/docs/Web/HTML/Element/Img#attr-crossorigin"><code>crossorigin</code></a> sur les images. Utilisé avec un en-tête <a href="/fr/docs/Glossary/CORS">CORS</a> adéquat, les images définies par <a href="/fr/docs/Web/HTML/Element/Img"><code><img></code></a> provenant d'origines étrangères pourront être utilisées au sein d'un élément <a href="/fr/docs/Web/HTML/Element/canvas"><code><canvas></code></a> comme si elles avaient été chargées depuis l'origine courante.</p> -<p>Pour plus de détails sur l'attribut <code>crossorigin</code>, voir <a href="/fr/docs/Web/HTML/Reglages_des_attributs_CORS">les attributs de paramétrage du CORS</a>.</p> +<p>Pour plus de détails sur l'attribut <code>crossorigin</code>, voir <a href="/fr/docs/Web/HTML/Attributes/crossorigin">les attributs de paramétrage du CORS</a>.</p> -<h2 id="Canevas_corrompu_et_sécurité">Canevas corrompu et sécurité</h2> +<h2 id="Security_and_tainted_canvases">Canevas corrompu et sécurité</h2> <p>Les pixels composant un canevas pouvant venir de différentes sources, notamment d'images ou de vidéos récupérées depuis des hôtes tiers, il est nécessaire de se prémunir contre certains problèmes de sécurité.</p> -<p>Dès que des données sont chargées dans le canevas depuis une autre origine sans avoir été « approuvées » par le CORS, le canevas devient <strong>corrompu</strong> (<em>tainted</em>). Dès qu'un canevas est corrompu, il n'est plus considéré comme sécurisé et toute tentative de récupérer des données depuis les données de l'image résultera en une exception.</p> +<p>Dès que des données sont chargées dans le canevas depuis une autre origine sans avoir été « approuvées » par le CORS, le canevas devient <strong>corrompu</strong> (<i>tainted</i>). Dès qu'un canevas est corrompu, il n'est plus considéré comme sécurisé et toute tentative de récupérer des données depuis les données de l'image résultera en une exception.</p> -<p>Si la source du contenu tiers est un élément HTML {{HTMLElement("img")}} ou SVG {{SVGElement("svg")}}, il n'est plus permis de récupérer le contenu du canevas.</p> +<p>Si la source du contenu tiers est un élément HTML <a href="/fr/docs/Web/HTML/Element/Img"><code><img></code></a> ou SVG <a href="/fr/docs/Web/SVG/Element/svg"><code><svg></code></a>, il n'est plus permis de récupérer le contenu du canevas.</p> -<p>Si la source du contenu tiers est une image obtenue à partir d'un {{domxref("HTMLCanvasElement")}} ou d'une {{domxref("ImageBitMap")}} et que la source de l'image ne respecte pas les règles quant à l'unicité de l'origine, il ne sera pas possible de lire le contenu du canevas.</p> +<p>Si la source du contenu tiers est une image obtenue à partir d'un <a href="/fr/docs/Web/API/HTMLCanvasElement"><code>HTMLCanvasElement</code></a> ou d'une <a href="/fr/docs/Web/API/ImageBitMap"><code>ImageBitMap</code></a> et que la source de l'image ne respecte pas les règles quant à l'unicité de l'origine, il ne sera pas possible de lire le contenu du canevas.</p> <p>Appeler l'une des méthodes suivantes sur un canevas corrompu déclenchera une erreur :</p> <ul> - <li>{{domxref("CanvasRenderingContext2D.getImageData", "getImageData()")}} sur le contexte du canevas</li> - <li>{{domxref("HTMLCanvasElement.toBlob", "toBlob()")}} sur l'élément {{HTMLElement("canvas")}}</li> - <li>{{domxref("HTMLCanvasElement.toDataURL", "toDataURL()")}} sur le canevas</li> + <li><a href="/fr/docs/Web/API/CanvasRenderingContext2D/getImageData"><code>getImageData()</code></a> sur le contexte du canevas</li> + <li><a href="/fr/docs/Web/API/HTMLCanvasElement/toBlob"><code>toBlob()</code></a> sur l'élément <a href="/fr/docs/Web/HTML/Element/canvas"><code><canvas></code></a></li> + <li><a href="/fr/docs/Web/API/HTMLCanvasElement/toDataURL"><code>toDataURL()</code></a> sur le canevas</li> </ul> <p>L'exception levée par de tels appels sera une exception <code>SecurityError</code>. Cette mesure protège les utilisateurs contre l'exposition de données privées via des images provenant de sites tiers sans permission.</p> -<h2 id="Stocker_une_image_provenant_d'une_origine_tierce">Stocker une image provenant d'une origine tierce</h2> +<h2 id="Storing_an_image_from_a_foreign_origin">Stocker une image provenant d'une origine tierce</h2> <p>Dans cet exemple, on souhaite autoriser la récupération et l'enregistrement d'images provenant d'une autre origine. Pour parvenir à ce résultat, il faudra configurer le serveur et également écrire du code pour le site web.</p> -<h3 id="Configuration_serveur">Configuration serveur</h3> +<h3 id="Web_server_configuration">Configuration serveur</h3> -<p>Pour commencer, configurons le serveur stockant les images avec un en-tête {{HTTPHeader("Access-Control-Allow-Origin")}} qui permet un accès multi-origines aux fichiers images.</p> +<p>Pour commencer, configurons le serveur stockant les images avec un en-tête <a href="/fr/docs/Web/HTTP/Headers/Access-Control-Allow-Origin"><code>Access-Control-Allow-Origin</code></a> qui permet un accès multi-origines aux fichiers images.</p> -<p>Dans la suite de cet exemple, on prendra le cas d'un site est servi via <a href="https://httpd.apache.org/">Apache</a>. On pourra utiliser le fragment <a href="https://github.com/h5bp/server-configs-apache/blob/master/src/cross-origin/images.conf">de configuration serveur Apache pour les images CORS</a> :</p> +<p>Dans la suite de cet exemple, on prendra le cas d'un site est servi via <a href="https://httpd.apache.org/">Apache</a>. On pourra utiliser le fragment <a href="https://github.com/h5bp/server-configs-apache/blob/master/h5bp/cross-origin/images.conf">de configuration serveur Apache pour les images CORS</a> :</p> <pre class="brush: xml"><IfModule mod_setenvif.c> <IfModule mod_headers.c> @@ -57,13 +59,13 @@ original_slug: Web/HTML/Images_avec_le_contrôle_d_accès_HTTP <p>Pour résumer, cela permet de configurer le serveur afin de pouvoir accéder aux fichiers graphiques (ceux avec les extensions ".bmp", ".cur", ".gif", ".ico", ".jpg", ".jpeg", ".png", ".svg", ".svgz", and ".webp") depuis d'autres origines, d'où qu'elles soient sur Internet.</p> -<h3 id="Implémenter_l'enregistrement">Implémenter l'enregistrement</h3> +<h3 id="Implementing_the_save_feature">Implémenter l'enregistrement</h3> <p>Maintenant que le serveur est configuré pour permettre la récupération d'image depuis plusieurs origines, on peut écrire le code qui permet à l'utilisateur d'enregistrer les images <a href="/fr/docs/Web/API/Web_Storage_API">en stockage local</a> comme si elles étaient servies depuis le même domaine que le code.</p> -<p>Pour cela, on utilise l'attribut {{htmlattrxref("crossorigin")}} en définissant {{domxref("HTMLImageElement.crossOrigin", "crossOrigin")}} sur l'élément {{domxref("HTMLImageElement")}} sur lequel l'image sera chargée. Ainsi, on indique au navigateur de demander un accès multi-origine lors du téléchargement de l'image.</p> +<p>Pour cela, on utilise l'attribut <a href="/fr/docs/Web/HTML/Global_attributes#attr-crossorigin"><code>crossorigin</code></a> en définissant <a href="/fr/docs/Web/API/HTMLImageElement/crossOrigin"><code>crossOrigin</code></a> sur l'élément <a href="/fr/docs/Web/API/HTMLImageElement"><code>HTMLImageElement</code></a> sur lequel l'image sera chargée. Ainsi, on indique au navigateur de demander un accès multi-origine lors du téléchargement de l'image.</p> -<h4 id="Démarrer_le_téléchargement">Démarrer le téléchargement</h4> +<h4 id="Starting_the_download">Démarrer le téléchargement</h4> <p>Voici le code qui démarre le téléchargement (déclenché par exemple lorsque l'utilisateur clique sur un bouton « Télécharger ») :</p> @@ -76,11 +78,11 @@ original_slug: Web/HTML/Images_avec_le_contrôle_d_accès_HTTP downloadedImg.src = imageURL; }</pre> -<p>Ici, l'URL de l'image à télécharger est codée en dur mais cette valeur pourrait très bien provenir d'un argument passé à la fonction. Pour démarrer le téléchargement, on crée un nouvel objet {{domxref("HTMLImageElement")}} grâce au constructeur {{domxref("HTMLImageElement.Image", "Image()")}}. L'image est ensuite configurée afin de permettre un téléchargement multi-origine grâce à l'attribut <code>crossOrigin</code> paramétré avec <code>"Anonymous"</code> (qui permet le téléchargement, non-authentifié, d'une image multi-origine). Un gestionnaire d'évènement est ajouté afin de réagir à l'évènement {{event("load")}} lorsque l'image a été reçue.</p> +<p>Ici, l'URL de l'image à télécharger est codée en dur mais cette valeur pourrait très bien provenir d'un argument passé à la fonction. Pour démarrer le téléchargement, on crée un nouvel objet <a href="/fr/docs/Web/API/HTMLImageElement"><code>HTMLImageElement</code></a> grâce au constructeur <a href="/fr/docs/Web/API/HTMLImageElement/Image"><code>Image()</code></a>. L'image est ensuite configurée afin de permettre un téléchargement multi-origine grâce à l'attribut <code>crossOrigin</code> paramétré avec <code>"Anonymous"</code> (qui permet le téléchargement, non-authentifié, d'une image multi-origine). Un gestionnaire d'évènement est ajouté afin de réagir à l'évènement <a href="/fr/docs/Web/API/Window/load_event"><code>load</code></a> lorsque l'image a été reçue.</p> -<p>Enfin, l'attribut {{domxref("HTMLImageElement.src", "src")}} de l'image est défini avec l'URL de l'image à télécharger et le téléchargement démarre.</p> +<p>Enfin, l'attribut <a href="/fr/docs/Web/API/HTMLImageElement/src"><code>src</code></a> de l'image est défini avec l'URL de l'image à télécharger et le téléchargement démarre.</p> -<h4 id="Recevoir_et_enregistrer_l'image">Recevoir et enregistrer l'image</h4> +<h4 id="Receiving_and_saving_the_image">Recevoir et enregistrer l'image</h4> <p>Voici le fragment de code exécuté lorsque l'image a été téléchargée :</p> @@ -102,17 +104,20 @@ original_slug: Web/HTML/Images_avec_le_contrôle_d_accès_HTTP } }</pre> -<p><code>imageReceived()</code> est invoquée lorsque l'évènement <code>"load"</code> est déclenché sur l'élément <code>HTMLImageElement</code> qui reçoit l'image téléchargée. Cet évènement se produit lorsque l'ensemble des données téléchargées est disponible. Cette fonction commence par créer un nouvel élément {{HTMLElement("canvas")}} qui sera utilisé afin de convertir l'image en une URL de donnée. On récupère également un accès au contexte du canevas pour dessiner en 2D ({{domxref("CanvasRenderingContext2D")}}) dans la variable <code>context</code>.</p> +<p><code>imageReceived()</code> est invoquée lorsque l'évènement <code>"load"</code> est déclenché sur l'élément <code>HTMLImageElement</code> qui reçoit l'image téléchargée. Cet évènement se produit lorsque l'ensemble des données téléchargées est disponible. Cette fonction commence par créer un nouvel élément <a href="/fr/docs/Web/HTML/Element/canvas"><code><canvas></code></a> qui sera utilisé afin de convertir l'image en une URL de donnée. On récupère également un accès au contexte du canevas pour dessiner en 2D (<a href="/fr/docs/Web/API/CanvasRenderingContext2D"><code>CanvasRenderingContext2D</code></a>) dans la variable <code>context</code>.</p> -<p>La taille du canevas est ajustée afin que ses dimensions correspondent à celles de l'image. L'image est ensuite dessinée dans le canevas grâce à {{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}}. Le canevas est alors inséré dans le document et l'image y devient visible.</p> +<p>La taille du canevas est ajustée afin que ses dimensions correspondent à celles de l'image. L'image est ensuite dessinée dans le canevas grâce à <a href="/fr/docs/Web/API/CanvasRenderingContext2D/drawImage"><code>drawImage()</code></a>. Le canevas est alors inséré dans le document et l'image y devient visible.</p> -<p>Enfin, on enregistre l'image dans le stockage local. Pour cela, on utilise les méthodes de l'API <em>Web Storage</em> en passant par la variable globale {{domxref("Window.localStorage", "localStorage")}}. La méthode {{domxref("HTMLCanvasElement.toDataURL", "toDataURL()")}} est utilisée afin de convertir l'image en une URL de données représentant une image PNG qui est enregistrée dans l'espace local grâce à la méthode {{domxref("Storage.setItem", "setItem()")}}.</p> +<p>Enfin, on enregistre l'image dans le stockage local. Pour cela, on utilise les méthodes de l'API <em>Web Storage</em> en passant par la variable globale <a href="/fr/docs/Web/API/Window/localStorage"><code>localStorage</code></a>. La méthode <a href="/fr/docs/Web/API/HTMLCanvasElement/toDataURL"><code>toDataURL()</code></a> est utilisée afin de convertir l'image en une URL de données représentant une image PNG qui est enregistrée dans l'espace local grâce à la méthode <a href="/fr/docs/Web/API/Storage/setItem"><code>setItem()</code></a>.</p> <p>Vous pouvez <a href="https://cors-image-example.glitch.me/">essayer</a> ou <a href="https://glitch.com/edit/#!/remix/cors-image-example">adapter</a> cet exemple sur Glitch.</p> <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a class="external" href="https://html.spec.whatwg.org/multipage/embedded-content.html#attr-img-crossorigin">Spécification HTML : l'attribut <code>crossorigin</code></a></li> - <li><a href="/fr/docs/Web/API/Web_Storage_API">L'API <em>Web Storage</em></a></li> + <li><a href="http://blog.chromium.org/2011/07/using-cross-domain-images-in-webgl-and.html">Utilisation d'images inter-domaines dans WebGL et Chrome 13</a></li> + <li><a class="external" href="https://html.spec.whatwg.org/multipage/embedded-content.html#attr-img-crossorigin">Spécification HTML : l'attribut <code>crossorigin</code></a></li> + <li><a href="/fr/docs/Web/API/Web_Storage_API">L'API <em>Web Storage</em></a></li> </ul> + +<div>{{QuickLinksWithSubpages("/fr/docs/Web/HTML/")}}</div> diff --git a/files/fr/web/html/date_and_time_formats/index.html b/files/fr/web/html/date_and_time_formats/index.html index 7985e0169b..71e7e3483f 100644 --- a/files/fr/web/html/date_and_time_formats/index.html +++ b/files/fr/web/html/date_and_time_formats/index.html @@ -3,89 +3,100 @@ title: Formats de date et d'heure utilisés en HTML slug: Web/HTML/Date_and_time_formats tags: - Date - - Guide + - Element + - Format - HTML + - ISO 8601 + - Input + - Reference + - String - Time + - Week + - datetime + - datetime-local + - del + - ins + - month + - month-year + - week-year translation_of: Web/HTML/Date_and_time_formats original_slug: Web/HTML/Formats_date_heure_HTML --- <div>{{HTMLRef}}</div> -<p><span class="seoSummary">Certains éléments HTML manipulent des valeurs temporelles pour des dates ou des heures. Les formats utilisés pour les chaînes de caractères qui définissent ces valeurs sont décrits dans cet article.</span> Les éléments qui utilisent ces données sont notamment les éléments {{HTMLElement("input")}} qui permettent de choisir une date, une heure ou les deux, les éléments {{HTMLElement("ins")}} et {{HTMLElement("del")}} dont l'attribut {{htmlattrxref("datetime", "ins")}} indique la date (ou la date et l'heure) à laquelle l'ajout ou la suppression de contenu a eu lieu.</p> +<p class="summary">Certains éléments HTML manipulent des valeurs temporelles pour des dates ou des heures. Les formats utilisés pour les chaînes de caractères qui définissent ces valeurs sont décrits dans cet article. Les éléments qui utilisent ces données sont notamment les éléments <a href="/fr/docs/Web/HTML/Element/Input"><code><input></code></a> qui permettent de choisir une date, une heure ou les deux, les éléments <a href="/fr/docs/Web/HTML/Element/ins"><code><ins></code></a> et <a href="/fr/docs/Web/HTML/Element/del"><code><del></code></a> dont l'attribut <a href="/fr/docs/Web/HTML/Element/ins#attr-datetime"><code>ins</code></a> indique la date (ou la date et l'heure) à laquelle l'ajout ou la suppression de contenu a eu lieu.</p> -<p>Pour les éléments <code><input></code>, voici les différents type (cf. {{htmlattrxref("type", "input")}}) pour lesquels l'attribut {{htmlattrxref("value")}} contient une chaîne de caractères représentant une date ou une heure :</p> +<p>Pour les éléments <code><input></code>, voici les différents type (cf. <a href="/fr/docs/Web/HTML/Element/Input#attr-type"><code>input</code></a>) pour lesquels l'attribut <a href="/fr/docs/Web/HTML/Global_attributes#attr-value"><code>value</code></a> contient une chaîne de caractères représentant une date ou une heure :</p> -<div class="twocolumns"> -<ul style="list-style-type: none; padding-left: 0;"> - <li><code><a href="/fr/docs/Web/HTML/Element/input/date">date</a></code></li> - <li><code><a href="/fr/docs/Web/HTML/Element/input/datetime">datetime</a></code> {{deprecated_inline}}</li> - <li><code><a href="/fr/docs/Web/HTML/Element/input/datetime-local">datetime-local</a></code></li> - <li><code><a href="/fr/docs/Web/HTML/Element/input/month">month</a></code></li> - <li><code><a href="/fr/docs/Web/HTML/Element/input/time">time</a></code></li> - <li><code><a href="/fr/docs/Web/HTML/Element/input/week">week</a></code></li> +<ul> + <li><a href="/fr/docs/Web/HTML/Element/Input/date"><code>date</code></a></li> + <li><a href="/fr/docs/Web/HTML/Element/Input/datetime"><code>datetime</code></a> {{deprecated_inline}}</li> + <li><code><a href="/fr/docs/Web/HTML/Element/Input/datetime-local">datetime-local</a></code></li> + <li><a href="/fr/docs/Web/HTML/Element/Input/month"><code>month</code></a></li> + <li><a href="/fr/docs/Web/HTML/Element/Input/time"><code>time</code></a></li> + <li><a href="/fr/docs/Web/HTML/Element/Input/week"><code>week</code></a></li> </ul> -</div> -<h2 id="Exemples">Exemples</h2> +<h2 id="Examples">Exemples</h2> <p>Avant de détailler plus, voyons quelques exemples de chaînes de caractères utilisées en HTML et qui représentent des valeurs temporelles.</p> <table class="standard-table"> - <caption>Exemple de chaînes de caractères utilisées en HTML pour représenter des dates et des heures</caption> - <thead> - <tr> - <th scope="col">Chaîne de caractères</th> - <th colspan="2" scope="col">Date/heure</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>2005-06-07</code></td> - <td>7 juin 2005</td> - <td><a href="/en-US/docs/Web/HTML/Date_and_time_formats#Date_strings">[détails]</a></td> - </tr> - <tr> - <td><code>08:45</code></td> - <td>08h45m (le matin)</td> - <td><a href="/en-US/docs/Web/HTML/Date_and_time_formats#Time_strings">[détails]</a></td> - </tr> - <tr> - <td><code>08:45:25</code></td> - <td>08h45m25s</td> - <td><a href="/en-US/docs/Web/HTML/Date_and_time_formats#Time_strings">[détails]</a></td> - </tr> - <tr> - <td><code>0033-08-04T03:40</code></td> - <td>03h40 (du matin), le 04 août 33</td> - <td><a href="/en-US/docs/Web/HTML/Date_and_time_formats#Local_date_and_time_strings">[détails]</a></td> - </tr> - <tr> - <td><code>1977-04-01T14:00:30</code></td> - <td>30 secondes après 14h00, le premier avril 1977</td> - <td><a href="/en-US/docs/Web/HTML/Date_and_time_formats#Local_date_and_time_strings">[détails]</a></td> - </tr> - <tr> - <td><code>1901-01-01T00:00Z</code></td> - <td>Minuit, UTC, le 1er janvier 1901</td> - <td><a href="/en-US/docs/Web/HTML/Date_and_time_formats#Global_date_and_time_strings">[détails]</a></td> - </tr> - <tr> - <td><code>1901-01-01T00:00:01-04:00</code></td> - <td>Minuit passé d'une seconde sur l'heure de l'Est (EST), le 1er janvier 1901</td> - <td><a href="/en-US/docs/Web/HTML/Date_and_time_formats#Global_date_and_time_strings">[détails]</a></td> - </tr> - </tbody> + <caption>Exemple de chaînes de caractères utilisées en HTML pour représenter des dates et des heures</caption> + <thead> + <tr> + <th scope="col">Chaîne de caractères</th> + <th colspan="2" scope="col">Date/heure</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>2005-06-07</code></td> + <td>7 juin 2005</td> + <td><a href="/fr/docs/Web/HTML/Date_and_time_formats#date_strings">[détails]</a></td> + </tr> + <tr> + <td><code>08:45</code></td> + <td>08h45m (le matin)</td> + <td><a href="/fr/docs/Web/HTML/Date_and_time_formats#time_strings">[détails]</a></td> + </tr> + <tr> + <td><code>08:45:25</code></td> + <td>08h45m25s</td> + <td><a href="/fr/docs/Web/HTML/Date_and_time_formats#time_strings">[détails]</a></td> + </tr> + <tr> + <td><code>0033-08-04T03:40</code></td> + <td>03h40 (du matin), le 04 août 33</td> + <td><a href="/fr/docs/Web/HTML/Date_and_time_formats#local_date_and_time_strings">[détails]</a></td> + </tr> + <tr> + <td><code>1977-04-01T14:00:30</code></td> + <td>30 secondes après 14h00, le premier avril 1977</td> + <td><a href="/fr/docs/Web/HTML/Date_and_time_formats#local_date_and_time_strings">[détails]</a></td> + </tr> + <tr> + <td><code>1901-01-01T00:00Z</code></td> + <td>Minuit, UTC, le 1er janvier 1901</td> + <td><a href="/fr/docs/Web/HTML/Date_and_time_formats#global_date_and_time_strings">[détails]</a></td> + </tr> + <tr> + <td><code>1901-01-01T00:00:01-04:00</code></td> + <td>Minuit passé d'une seconde sur l'heure de l'Est (EST), le 1er janvier 1901</td> + <td><a href="/fr/docs/Web/HTML/Date_and_time_formats#global_date_and_time_strings">[détails]</a></td> + </tr> + </tbody> </table> -<h2 id="Notions_essentielles">Notions essentielles</h2> +<h2 id="Basics">Notions essentielles</h2> -<p>Avant de s'intéresser aux différents formats pour la représentation textuelle des valeurs temporelles en HTML, commençons par décrire comment ces valeurs sont définies formellement. HTML utilise une variation du standard {{interwiki("wikipedia", "ISO 8601")}} pour les chaînes de caractères représentant les dates et les heures. Il est toujours utile de vérifier que le format utilisé est compatible avec HTML car la spécification HTML utilise des algorithmes pour analyser ces chaînes qui sont plus précis que le standard ISO 8601 (il peut donc y avoir quelques fines différences).</p> +<p>Avant de s'intéresser aux différents formats pour la représentation textuelle des valeurs temporelles en HTML, commençons par décrire comment ces valeurs sont définies formellement. HTML utilise une variation du standard <a class="external" href="https://fr.wikipedia.org/wiki/ISO_8601">ISO 8601</a> pour les chaînes de caractères représentant les dates et les heures. Il est toujours utile de vérifier que le format utilisé est compatible avec HTML, car la spécification HTML utilise des algorithmes pour analyser ces chaînes qui sont plus précis que le standard ISO 8601 (il peut donc y avoir quelques fines différences).</p> -<h3 id="Jeu_de_caractères">Jeu de caractères</h3> +<h3 id="Character_set">Jeu de caractères</h3> -<p>En HTML, les chaînes qui représentent des dates et des heures manipulent uniquement des caractères {{interwiki("wikipedia", "ASCII")}}.</p> +<p>En HTML, les chaînes qui représentent des dates et des heures manipulent uniquement des caractères <a class="external" href="https://fr.wikipedia.org/wiki/ASCII">ASCII</a>.</p> -<h3 id="Numérotation_des_années">Numérotation des années</h3> +<h3 id="Year_numbers">Numérotation des années</h3> <p>La spécification HTML indique que les années doivent être exprimées selon le <a href="https://fr.wikipedia.org/wiki/Calendrier_gr%C3%A9gorien">calendrier grégorien</a>. Bien que les interfaces utilisateur permettent éventuellement de saisir des dates grâce à d'autres calendriers, la valeur sous-jacente est toujours représentée à l'aide du calendrier grégorien.</p> @@ -93,105 +104,105 @@ original_slug: Web/HTML/Formats_date_heure_HTML <p>En HTML, les années sont toujours écrites avec au moins 4 chiffres. Aussi, les années antérieures à l'an 1000 sont complétées avec des zéros : l'an 72 est donc écrit <code>0072</code>. Les années antérieures à l'an 1 ne sont pas prises en charge par HTML.</p> -<p>Une année est normalement constituée de 365 jours, sauf pendant les <strong>{{anch("Années bissextiles", "années bissextiles")}}</strong>.</p> +<p>Une année est normalement constituée de 365 jours, sauf pendant les <strong><a href="#leap_years">années bissextiles</a></strong>.</p> -<h4 id="Années_bissextiles">Années bissextiles</h4> +<h4 id="leap_years">Années bissextiles</h4> -<p>Une année bissextile est une année dont le numéro est:</p> +<p>Une année bissextile est une année dont le numéro est :</p> <ul> - <li>Divisible par 400 ou,</li> - <li>Divisible par 4 mais pas par 100</li> + <li>Divisible par 400 ou,</li> + <li>Divisible par 4 mais pas par 100</li> </ul> <p>Bien qu'une année calendaire s'étende sur 365 jours, la Terre met environ 365,2422 jours avant d'effectuer une orbite complète autour du soleil. Les années bissextiles permettent d'ajuster le calendrier et de le synchroniser avec la position de la planète le long de l'orbite. Ajouter un jour tous les 4 ans (environ) permet d'avoir une année moyenne longue de 365,25 jours, ce qui est relativement correct.</p> -<p>En ajustant l'algorithme avec les contraintes ci-avant (divisible par 400 ou divisible par 4 mais pas par 100), on s'approche plus précisement du nombre correct de jours (365,2425). Des secondes intercalaires sont parfois ajoutées au calendrier afin de compenser les trois millièmes restant et le ralentissement naturel de la rotation de la Terre.</p> +<p>En ajustant l'algorithme avec les contraintes ci-avant (divisible par 400 ou divisible par 4 mais pas par 100), on s'approche plus précisément du nombre correct de jours (365,2425). Des secondes intercalaires sont parfois ajoutées au calendrier afin de compenser les trois millièmes restant et le ralentissement naturel de la rotation de la Terre.</p> <p>Le deuxième mois de l'année (février) possède 28 jours pendant les années non-bissextiles et 29 jours pendant les années bissextiles.</p> -<h3 id="Mois_de_l'année">Mois de l'année</h3> +<h3 id="Months_of_the_year">Mois de l'année</h3> <p>Une année comporte 12 mois, numérotés de 1 à 12. Les valeurs des mois sont toujours représentées par une chaîne de caractères se composant de deux chiffres : des valeurs entre <code>01</code> et <code>12</code>. Voir le tableau ci-après pour les numéros des mois et le nombre de jours correspondant.</p> -<h3 id="Jours_du_mois">Jours du mois</h3> +<h3 id="Days_of_the_month">Jours du mois</h3> <p>Les mois numérotés 1, 3, 5, 7, 8, 10 et 12 possèdent 31 jours. Les mois 4, 6, 9 et 11 possèdent 30 jours. Le deuxième mois, février, possède 28 jours sauf pendant les années bissextiles où il possède 29 jours. Le tableau ci-après détaille les mois et leurs noms, ainsi que leur durée en jours.</p> <table class="standard-table"> - <caption>Les mois de l'année et leur durée en jours</caption> - <thead> - <tr> - <th scope="row">Numéro du mois</th> - <th scope="col">Nom (en français))</th> - <th scope="col">Durée du mois (en nombre de jours)</th> - </tr> - </thead> - <tbody> - <tr> - <th scope="row">01</th> - <td>Janvier</td> - <td>31</td> - </tr> - <tr> - <th scope="row">02</th> - <td>Février</td> - <td>28 (29 pour les années bissextiles)</td> - </tr> - <tr> - <th scope="row">03</th> - <td>Mars</td> - <td>31</td> - </tr> - <tr> - <th scope="row">04</th> - <td>Avril</td> - <td>30</td> - </tr> - <tr> - <th scope="row">05</th> - <td>Mai</td> - <td>31</td> - </tr> - <tr> - <th scope="row">06</th> - <td>Juin</td> - <td>30</td> - </tr> - <tr> - <th scope="row">07</th> - <td>Juillet</td> - <td>31</td> - </tr> - <tr> - <th scope="row">o8</th> - <td>Août</td> - <td>31</td> - </tr> - <tr> - <th scope="row">09</th> - <td>Septembre</td> - <td>30</td> - </tr> - <tr> - <th scope="row">10</th> - <td>Octobre</td> - <td>31</td> - </tr> - <tr> - <th scope="row">11</th> - <td>Novembre</td> - <td>30</td> - </tr> - <tr> - <th scope="row">12</th> - <td>Décembre</td> - <td>31</td> - </tr> - </tbody> + <caption>Les mois de l'année et leur durée en jours</caption> + <thead> + <tr> + <th scope="row">Numéro du mois</th> + <th scope="col">Nom (en français)</th> + <th scope="col">Durée du mois (en nombre de jours)</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">01</th> + <td>Janvier</td> + <td>31</td> + </tr> + <tr> + <th scope="row">02</th> + <td>Février</td> + <td>28 (29 pour les années bissextiles)</td> + </tr> + <tr> + <th scope="row">03</th> + <td>Mars</td> + <td>31</td> + </tr> + <tr> + <th scope="row">04</th> + <td>Avril</td> + <td>30</td> + </tr> + <tr> + <th scope="row">05</th> + <td>Mai</td> + <td>31</td> + </tr> + <tr> + <th scope="row">06</th> + <td>Juin</td> + <td>30</td> + </tr> + <tr> + <th scope="row">07</th> + <td>Juillet</td> + <td>31</td> + </tr> + <tr> + <th scope="row">o8</th> + <td>Août</td> + <td>31</td> + </tr> + <tr> + <th scope="row">09</th> + <td>Septembre</td> + <td>30</td> + </tr> + <tr> + <th scope="row">10</th> + <td>Octobre</td> + <td>31</td> + </tr> + <tr> + <th scope="row">11</th> + <td>Novembre</td> + <td>30</td> + </tr> + <tr> + <th scope="row">12</th> + <td>Décembre</td> + <td>31</td> + </tr> + </tbody> </table> -<h2 id="Représentation_des_semaines">Représentation des semaines</h2> +<h2 id="Week_strings">Représentation des semaines</h2> <p>Une chaîne de caractères représentant une semaine correspondra à une semaine d'une année donnée. Aussi, une chaîne de caractères <strong>valide</strong> pour représenter une semaine se compose de 4 chiffres représentant l'année, suivis d'un tiret ("<code>-</code>" ou U+002D), suivi de la lettre majuscule "<code>W</code>" (U+0057), suivie d'un numéro de semaine sur deux chiffres.</p> @@ -201,258 +212,258 @@ original_slug: Web/HTML/Formats_date_heure_HTML <ul> <li>Le premier jour de l'année calendaire (le premier janvier) est un jeudi <strong>ou</strong></li> - <li>Le premier jour de l'année calendaire (le premier janvier) est un mercredi et que l'année est une {{anch("Années bissextiles", "année bissextile")}}.</li> + <li>Le premier jour de l'année calendaire (le premier janvier) est un mercredi et que l'année est une <a href="#leap_years">année bissextile</a>.</li> </ul> <p>Les autres années contiennent 52 semaines.</p> <table class="standard-table"> - <caption>Exemples de chaînes de caractères valides pour représenter des semaines</caption> - <thead> - <tr> - <th scope="col">Chaîne de caractères</th> - <th scope="col">Semaine et année (intervalle de dates)</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>2001-W37</code></td> - <td>Semaine 37 de l'année 2001 (entre le 10 et le 16 septembre 2001)</td> - </tr> - <tr> - <td><code>1953-W01</code></td> - <td>Semaine 1 de l'année 1953 (entre le 29 décembre 1952 et le 4 janvier 1953)</td> - </tr> - <tr> - <td><code>1948-W53</code></td> - <td>Semaine 53 de l'année 1948 (entre le 27 décembre 1948 et le 2 janvier 1949)</td> - </tr> - <tr> - <td><code>1949-W01</code></td> - <td>Semaine 1 de l'année 1949 (entre le 3 janvier et le 9 janvier 1949)</td> - </tr> - <tr> - <td><code>0531-W16</code></td> - <td>Semaine 16 de l'année 531 (entre le 13 avril et le 19 avril 531)</td> - </tr> - <tr> - <td><code>0042-W04</code></td> - <td>Semaine 4 de l'année 42 (entre le 21 et le 27 janvier 42)</td> - </tr> - </tbody> + <caption>Exemples de chaînes de caractères valides pour représenter des semaines</caption> + <thead> + <tr> + <th scope="col">Chaîne de caractères</th> + <th scope="col">Semaine et année (intervalle de dates)</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>2001-W37</code></td> + <td>Semaine 37 de l'année 2001 (entre le 10 et le 16 septembre 2001)</td> + </tr> + <tr> + <td><code>1953-W01</code></td> + <td>Semaine 1 de l'année 1953 (entre le 29 décembre 1952 et le 4 janvier 1953)</td> + </tr> + <tr> + <td><code>1948-W53</code></td> + <td>Semaine 53 de l'année 1948 (entre le 27 décembre 1948 et le 2 janvier 1949)</td> + </tr> + <tr> + <td><code>1949-W01</code></td> + <td>Semaine 1 de l'année 1949 (entre le 3 janvier et le 9 janvier 1949)</td> + </tr> + <tr> + <td><code>0531-W16</code></td> + <td>Semaine 16 de l'année 531 (entre le 13 avril et le 19 avril 531)</td> + </tr> + <tr> + <td><code>0042-W04</code></td> + <td>Semaine 4 de l'année 42 (entre le 21 et le 27 janvier 42)</td> + </tr> + </tbody> </table> <p>On notera que les deux composantes pour l'année et pour la semaine sont complétées avec des zéros à gauche afin que l'année soit exprimée sur 4 chiffres et que la semaine soit exprimée sur 2 chiffres.</p> -<h2 id="Représentation_des_mois">Représentation des mois</h2> +<h2 id="Month_strings">Représentation des mois</h2> -<p>Une chaîne de caractères pour un mois représente un mois d'une année donnée (plutôt qu'un mois « générique »). Aussi, on ne représentera pas simplement le mois de janvier mais le mois de janvier de l'année 1972.</p> +<p>Une chaîne de caractères pour un mois représente un mois d'une année donnée (plutôt qu'un mois « générique »). Aussi, on ne représentera pas simplement le mois de janvier mais le mois de janvier de l'année 1972.</p> <p>Une chaîne de caractères représentant un mois est valide si elle commence par un numéro d'année valide (une chaîne de caractères composée de quatre chiffres), suivie d'un tiret ("<code>-</code>", ou U+002D), suivi d'un nombre sur deux chiffres où <code>01</code> représente janvier et où <code>12</code> représente décembre.</p> <table class="standard-table"> - <caption>Exemples de chaînes de caractères valides pour la représentation d'un mois</caption> - <thead> - <tr> - <th scope="col">Chaîne de caractères</th> - <th scope="col">Le mois et l'année</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>17310-09</code></td> - <td>Le mois de septembre de l'année 17310</td> - </tr> - <tr> - <td><code>2019-01</code></td> - <td>Le mois de janvier de l'année 2019</td> - </tr> - <tr> - <td><code>1993-11</code></td> - <td>Le mois de novembre de l'année 1993</td> - </tr> - <tr> - <td><code>0571-04</code></td> - <td>Le mois d'avril de l'année 571</td> - </tr> - <tr> - <td><code>0001-07</code></td> - <td>Le mois de juillet de l'an 1</td> - </tr> - </tbody> + <caption>Exemples de chaînes de caractères valides pour la représentation d'un mois</caption> + <thead> + <tr> + <th scope="col">Chaîne de caractères</th> + <th scope="col">Le mois et l'année</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>17310-09</code></td> + <td>Le mois de septembre de l'année 17310</td> + </tr> + <tr> + <td><code>2019-01</code></td> + <td>Le mois de janvier de l'année 2019</td> + </tr> + <tr> + <td><code>1993-11</code></td> + <td>Le mois de novembre de l'année 1993</td> + </tr> + <tr> + <td><code>0571-04</code></td> + <td>Le mois d'avril de l'année 571</td> + </tr> + <tr> + <td><code>0001-07</code></td> + <td>Le mois de juillet de l'an 1</td> + </tr> + </tbody> </table> <p>On notera que les années sont exprimées sur au moins 4 chiffres et que les années antérieures à 1000 sont préfixées de 0.</p> -<h2 id="Représentation_des_dates">Représentation des dates</h2> +<h2 id="Date_strings">Représentation des dates</h2> <p>Une chaîne de caractères représentant une date est valide si elle contient : une année (cf. ci-avant) suivie d'un tiret, suivi d'un mois, suivi d'un tiret ("<code>-</code>" ou U+002D) suivi du numéro du jour dans le mois sur deux chiffres.</p> <table class="standard-table"> - <caption>Exemples de chaînes de caractères valides pour représenter des dates</caption> - <thead> - <tr> - <th scope="col">Chaîne de caractères</th> - <th scope="col">Date complète</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>1993-11-01</code></td> - <td>1er novembre 1993</td> - </tr> - <tr> - <td><code>1066-10-14</code></td> - <td>14 octobre 1066</td> - </tr> - <tr> - <td><code>0571-04-22</code></td> - <td>22 avril 571</td> - </tr> - <tr> - <td><code>0062-02-05</code></td> - <td>5 février 62</td> - </tr> - </tbody> + <caption>Exemples de chaînes de caractères valides pour représenter des dates</caption> + <thead> + <tr> + <th scope="col">Chaîne de caractères</th> + <th scope="col">Date complète</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>1993-11-01</code></td> + <td>1er novembre 1993</td> + </tr> + <tr> + <td><code>1066-10-14</code></td> + <td>14 octobre 1066</td> + </tr> + <tr> + <td><code>0571-04-22</code></td> + <td>22 avril 571</td> + </tr> + <tr> + <td><code>0062-02-05</code></td> + <td>5 février 62</td> + </tr> + </tbody> </table> -<h2 id="Représentation_des_heures">Représentation des heures</h2> +<h2 id="Time_strings">Représentation des heures</h2> <p>Une chaîne de caractères représentant une heure peut décrire différentes précisions : minute, seconde ou milliseconde. Il n'est pas possible d'indiquer uniquement l'heure ou les minutes. Une chaîne valide se compose <em>a minima</em> d'une valeur sur deux chiffres représentant une heure, suivi de deux-points ("<code>:</code>", U+003A) puis d'une valeur sur deux chiffres exprimant les minutes. La valeur des minutes peut ensuite être suivie d'un autre deux-points puis d'une valeur sur deux chiffres pour les secondes. Il est possible d'indiquer les millisecondes en ajoutant un point ("<code>.</code>", U+002E) après les secondes, suivi d'une valeur sur un, deux ou trois chiffres.</p> <p>Voici quelques règles supplémentaires :</p> <ul> - <li>L'heure est toujours exprimée selon une horloge sur 24 heures où <code>00</code> correspond à minuit et où <code>23</code> correspond à onze heures du soir. Aucune valeur en dehors de l'intervalle <code>00</code>–<code>23</code> n'est autorisée.</li> - <li>La valeur représentant les minutes doit être composée de deux chiffres et être située entre <code>00</code> et <code>59</code>. Les valeurs en dehors de cet intervalle ne sont pas autorisées.</li> - <li>Si les secondes ne sont pas exprimées, il ne faut pas que la valeur se termine par un deux-points (après les minutes).</li> - <li>Si les secondes sont exprimées, leur nombre doit être entre <code>00</code> et <code>59</code>. Il n'est pas possible d'indiquer des secondes intercalaires à l'aide de valeurs telles que <code>60</code> ou <code>61</code>.</li> - <li>Si le nombre de secondes est indiqué et que c'est un entier, il ne doit pas être suivi d'un point.</li> - <li>Si les millisecondes sont indiquées, la valeur correspondante peut être composée d'un à trois chiffres.</li> + <li>L'heure est toujours exprimée selon une horloge sur 24 heures où <code>00</code> correspond à minuit et où <code>23</code> correspond à onze heures du soir. Aucune valeur en dehors de l'intervalle <code>00</code>-<code>23</code> n'est autorisée.</li> + <li>La valeur représentant les minutes doit être composée de deux chiffres et être située entre <code>00</code> et <code>59</code>. Les valeurs en dehors de cet intervalle ne sont pas autorisées.</li> + <li>Si les secondes ne sont pas exprimées, il ne faut pas que la valeur se termine par un deux-points (après les minutes).</li> + <li>Si les secondes sont exprimées, leur nombre doit être entre <code>00</code> et <code>59</code>. Il n'est pas possible d'indiquer des secondes intercalaires à l'aide de valeurs telles que <code>60</code> ou <code>61</code>.</li> + <li>Si le nombre de secondes est indiqué et que c'est un entier, il ne doit pas être suivi d'un point.</li> + <li>Si les millisecondes sont indiquées, la valeur correspondante peut être composée d'un à trois chiffres.</li> </ul> <table class="standard-table"> - <caption>Exemples de chaînes de caractères valides pour exprimer une heure</caption> - <thead> - <tr> - <th scope="col">Chaîne de caractères</th> - <th scope="col">Heure</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>00:00:30.75</code></td> - <td>Minuit passé de 30 secondes et 750 millisecondes</td> - </tr> - <tr> - <td><code>12:15</code></td> - <td>Midi passé de quinze minutes</td> - </tr> - <tr> - <td><code>13:44:25</code></td> - <td>13 heures 44 et 25 secondes</td> - </tr> - </tbody> + <caption>Exemples de chaînes de caractères valides pour exprimer une heure</caption> + <thead> + <tr> + <th scope="col">Chaîne de caractères</th> + <th scope="col">Heure</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>00:00:30.75</code></td> + <td>Minuit passé de 30 secondes et 750 millisecondes</td> + </tr> + <tr> + <td><code>12:15</code></td> + <td>Midi passé de quinze minutes</td> + </tr> + <tr> + <td><code>13:44:25</code></td> + <td>13 heures 44 et 25 secondes</td> + </tr> + </tbody> </table> -<h2 id="Représentation_des_dates_et_heures_locales">Représentation des dates et heures locales</h2> +<h2 id="Local_date_and_time_strings">Représentation des dates et heures locales</h2> -<p>Une chaîne de caractères <code><a href="/fr/docs/Web/HTML/Element/input/datetime-local">datetime-local</a></code> se compose d'une chaîne de caractères représentant une date, suivie de la lettre "<code>T</code>" ou d'une espace puis d'une chaîne de caractères représentant une heure. La représentation ne contient aucune information quant au fuseau horaire dont il est question et on présume que la valeur temporelle indiquée est relative au fuseau horaire de l'utilisateur.</p> +<p>Une chaîne de caractères valide pour un élément de saisie <code><a href="/fr/docs/Web/HTML/Element/Input/datetime-local">datetime-local</a></code> se compose d'une chaîne de caractères représentant une date, suivie de la lettre "<code>T</code>" ou d'une espace puis d'une chaîne de caractères représentant une heure. La représentation ne contient aucune information quant au fuseau horaire dont il est question et on présume que la valeur temporelle indiquée est relative au fuseau horaire de l'utilisateur.</p> -<p>Lorsqu'on définit la valeur de l'attribut {{htmlattrxref("value", "input")}} d'un champ <code>datetime-local</code>, la chaîne de caractères est normalisée. Les formes normalisées utilisent toujours la lettre T comme séparateur entre la date et l'heure. De plus, les formes normalisées utilisent toujours la forme la plus courte pour exprimer l'heure (les secondes sont omises si leur valeur est <code>:00</code>).</p> +<p>Lorsqu'on définit la valeur de l'attribut <a href="/fr/docs/Web/HTML/Element/Input#attr-value"><code>value</code></a> d'un champ <code><input></code> de type <code>datetime-local</code>, la chaîne de caractères est normalisée. Les formes normalisées utilisent toujours la lettre T comme séparateur entre la date et l'heure. De plus, les formes normalisées utilisent toujours la forme la plus courte pour exprimer l'heure (les secondes sont omises si leur valeur est <code>:00</code>).</p> <table class="standard-table"> - <caption>Exemples de chaînes de caractères valides pour l'expression de dates/heures</caption> - <thead> - <tr> - <th scope="col">Chaîne de caractères</th> - <th scope="col">Version normalisée</th> - <th scope="col">Date et heure correspondantes</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>1986-01-28T11:38:00.01</code></td> - <td><code>1986-01-28T11:38:00.01</code></td> - <td>28 janvier 1986 à 11 heures et 38 minutes passées de 10 millisecondes</td> - </tr> - <tr> - <td><code>1986-01-28 11:38:00.010</code></td> - <td><code>1986-01-28T11:38:00.01</code><sup><a href="#datetime-local-footnote1">1</a></sup></td> - <td>28 janvier 1986 à 11 heures et 38 minutes passées de 10 millisecondes</td> - </tr> - <tr> - <td><code>0170-07-31T22:00:00</code></td> - <td><code>0170-07-31T22:00</code><sup><a href="#datetime-local-footnote2">2</a></sup></td> - <td>31 juillet 170 à 22 heures</td> - </tr> - </tbody> + <caption>Exemples de chaînes de caractères valides pour l'expression de dates/heures</caption> + <thead> + <tr> + <th scope="col">Chaîne de caractères</th> + <th scope="col">Version normalisée</th> + <th scope="col">Date et heure correspondantes</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>1986-01-28T11:38:00.01</code></td> + <td><code>1986-01-28T11:38:00.01</code></td> + <td>28 janvier 1986 à 11 heures et 38 minutes passées de 10 millisecondes</td> + </tr> + <tr> + <td><code>1986-01-28 11:38:00.010</code></td> + <td><code>1986-01-28T11:38:00.01</code><sup><a href="#datetime-local-footnote1">1</a></sup></td> + <td>28 janvier 1986 à 11 heures et 38 minutes passées de 10 millisecondes</td> + </tr> + <tr> + <td><code>0170-07-31T22:00:00</code></td> + <td><code>0170-07-31T22:00</code><sup><a href="#datetime-local-footnote2">2</a></sup></td> + <td>31 juillet 170 à 22 heures</td> + </tr> + </tbody> </table> <ol> - <li>On notera qu'après la normalisation, on obtient la même chaîne que sur l'exemple précédent : l'espace séparateur a été remplacé par un <code>"T"</code> et le zéro de terminaison a été supprimé pour raccourcir la chaîne de l'heure.</li> - <li>On notera que la forme normalisée de cette date ne contient pas l'expression des secondes.</li> + <li>On notera qu'après la normalisation, on obtient la même chaîne que sur l'exemple précédent : l'espace séparateur a été remplacé par un <code>"T"</code> et le zéro de terminaison a été supprimé pour raccourcir la chaîne de l'heure.</li> + <li>On notera que la forme normalisée de cette date ne contient pas l'expression des secondes.</li> </ol> -<h2 id="Représentation_des_dates_et_heures_universelles">Représentation des dates et heures universelles</h2> +<h2 id="Global_date_and_time_strings">Représentation des dates et heures universelles</h2> <p>Une valeur de date/heure universelle exprime la date et l'heure mais aussi le fuseau horaire de l'instant. Une chaîne de caractères représentant une telle valeur commence de la même façon qu'une chaîne de caractère représentant une date/heure locale, suivie d'une chaîne de caractères indiquant le décalage horaire.</p> -<h3 id="Chaîne_de_caractères_exprimant_le_décalage_horaire">Chaîne de caractères exprimant le décalage horaire</h3> +<h3 id="Time_zone_offset_string">Chaîne de caractères exprimant le décalage horaire</h3> <p>La chaîne de caractères qui décrit le décalage horaire contient un décalage positif d'heures et de minutes, relativement à un fuseau de base. Il existe deux points de référence qui sont très proches sans être identiques :</p> <ul> - <li>Pour les dates situées après la création du temps coordonné universel (UTC, {{interwiki("wikipedia", "Coordinated Universal Time")}}) au début des années 60, le point de référence est indiqué avec <code>Z</code> et le décalage indique le décalage d'un fuseau horaire par rapport au méridien situé à la longitude 0° (méridien de Greenwich).</li> - <li>Pour les dates antérieures à UTC, le point de référence est exprimé en {{interwiki("wikipedia", "UT1")}}, qui correspond au temps solaire au méridien de longitude 0°.</li> + <li>Pour les dates situées après la création du temps coordonné universel (UTC, <a class="external" href="https://fr.wikipedia.org/wiki/Coordinated_Universal_Time">Coordinated Universal Time</a>) au début des années 60, le point de référence est indiqué avec <code>Z</code> et le décalage indique le décalage d'un fuseau horaire par rapport au méridien situé à la longitude 0° (méridien de Greenwich).</li> + <li>Pour les dates antérieures à UTC, le point de référence est exprimé en <a class="external" href="https://fr.wikipedia.org/wiki/UT1">UT1</a>, qui correspond au temps solaire au méridien de longitude 0°.</li> </ul> <p>La chaîne de caractères indiquant le décalage est directement ajoutée après la valeur pour la date et l'heure. Si la date et l'heure sont déjà exprimées relativement à UTC, on pourra simplement suffixer <code>"Z"</code>, sinon, on construira le complément de la façon suivante :</p> <ol> - <li>Un caractère indiquant le signe du décalage : le plus ("<code>+</code>" ou U+002B) pour les fuseaux situés à l'est du méridien ou le moins ("<code>-</code>" ou U+002D) pour les fuseaux situés à l'ouest.</li> - <li>Deux chiffres indiquant le nombre d'heures de décalage par rapport au méridien. Cette valeur doit être comprise entre <code>00</code> et <code>23</code>.</li> - <li>Deux-points ("<code>:</code>") (nécessaires uniquement si le décalage contient des minutes)</li> - <li>Deux chiffres indiquant les minutes de décalage. Cette valeur doit être comprise entre <code>00</code> et <code>59</code>.</li> + <li>Un caractère indiquant le signe du décalage : le plus ("<code>+</code>" ou U+002B) pour les fuseaux situés à l'est du méridien ou le moins ("<code>-</code>" ou U+002D) pour les fuseaux situés à l'ouest.</li> + <li>Deux chiffres indiquant le nombre d'heures de décalage par rapport au méridien. Cette valeur doit être comprise entre <code>00</code> et <code>23</code>.</li> + <li>Deux-points ("<code>:</code>") (nécessaires uniquement si le décalage contient des minutes)</li> + <li>Deux chiffres indiquant les minutes de décalage. Cette valeur doit être comprise entre <code>00</code> et <code>59</code>.</li> </ol> <p>Bien que ces règles permettent d'exprimer des fuseaux horaires entre -23:59 et +23:59, l'intervalle actuel des décalages horaires est -12:00 à +14:00 et il n'y a pas de fuseau horaire pour lequel le décalage en minutes est différent de <code>00</code>, <code>30</code> ou <code>45</code>. Cela peut en théorie évoluer à tout moment car les pays sont libres de modifier leur fuseau horaire quand ils le souhaitent.</p> <table class="standard-table"> - <caption>Exemples de chaînes de caractères valides pour l'expression de dates/heures universelles</caption> - <thead> - <tr> - <th scope="col">Chaîne de caractères</th> - <th scope="col">Date/heure universelle</th> - <th scope="col">Date/heure sur le méridien solaire</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>2005-06-07T00:00Z</code></td> - <td>7 juin 2005 à minuit UTC</td> - <td>7 juin 2005 à minuit</td> - </tr> - <tr> - <td><code>1789-08-22T12:30:00.1-04:00</code></td> - <td>22 août 1789 à midi trente (passé d'un dixième de seconde) selon l'heure avancée de l'Est (<em>Eastern Daylight Time</em> (EDT))</td> - <td>22 août 1789 à 16 heures trente passées d'un dixième de seconde</td> - </tr> - <tr> - <td><code>3755-01-01 00:00+10:00</code></td> - <td>1er janvier 3755 à minuit pour le fuseau AEST (<em>Australian Eastern Standard Time</em>)</td> - <td>31 décembre 3754 à 14h</td> - </tr> - </tbody> + <caption>Exemples de chaînes de caractères valides pour l'expression de dates/heures universelles</caption> + <thead> + <tr> + <th scope="col">Chaîne de caractères</th> + <th scope="col">Date/heure universelle</th> + <th scope="col">Date/heure sur le méridien solaire</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>2005-06-07T00:00Z</code></td> + <td>7 juin 2005 à minuit UTC</td> + <td>7 juin 2005 à minuit</td> + </tr> + <tr> + <td><code>1789-08-22T12:30:00.1-04:00</code></td> + <td>22 août 1789 à midi trente (passé d'un dixième de seconde) selon l'heure avancée de l'Est (<em>Eastern Daylight Time</em> (EDT))</td> + <td>22 août 1789 à 16 heures trente passées d'un dixième de seconde</td> + </tr> + <tr> + <td><code>3755-01-01 00:00+10:00</code></td> + <td>1er janvier 3755 à minuit pour le fuseau AEST (<em>Australian Eastern Standard Time</em>)</td> + <td>31 décembre 3754 à 14h</td> + </tr> + </tbody> </table> -<h2 id="Voir_aussi">Voir aussi</h2> +<h2 id="See_also">Voir aussi</h2> <ul> - <li>{{HTMLElement("input")}}</li> - <li>Les éléments {{HTMLElement("ins")}} et {{HTMLElement("del")}} qui possèdent l'attribut <code>datetime</code> qui permet de définir une date ou une date et une heure locales pour indiquer le moment où le contenu a été inséré ou supprimé</li> - <li><a href="https://www.iso.org/iso-8601-date-and-time-format.html">La spécification ISO 8601</a></li> - <li><a href="/fr/docs/Web/JavaScript/Guide/Nombres_et_dates">Le chapitre sur les nombres et les dates</a> dans le <a href="/fr/docs/Web/JavaScript/Guide">Guide JavaScript</a></li> - <li>L'objet JavaScript {{jsxref("Date")}}</li> - <li>L'objet <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/DateTimeFormat">Intl.DateTimeFormat</a></code> qui permet de formater des dates et des heures pour une locale donnée</li> + <li><a href="/fr/docs/Web/HTML/Element/Input"><code><input></code></a></li> + <li>Les éléments <a href="/fr/docs/Web/HTML/Element/ins"><code><ins></code></a> et <a href="/fr/docs/Web/HTML/Element/del"><code><del></code></a> qui possèdent l'attribut <code>datetime</code> qui permet de définir une date ou une date et une heure locales pour indiquer le moment où le contenu a été inséré ou supprimé</li> + <li><a href="https://www.iso.org/iso-8601-date-and-time-format.html">La spécification ISO 8601</a></li> + <li><a href="/fr/docs/Web/JavaScript/Guide/Numbers_and_dates">Le chapitre sur les nombres et les dates</a> dans le <a href="/fr/docs/Web/JavaScript/Guide">Guide JavaScript</a></li> + <li>L'objet JavaScript <code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Date">Date</a></code></li> + <li>L'objet <code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat">Intl.DateTimeFormat</a></code> qui permet de formater des dates et des heures pour une locale donnée</li> </ul> diff --git a/files/fr/web/html/index.html b/files/fr/web/html/index.html index 9d4ec4719b..05eccb44b5 100644 --- a/files/fr/web/html/index.html +++ b/files/fr/web/html/index.html @@ -3,7 +3,7 @@ title: HTML (HyperText Markup Language) slug: Web/HTML tags: - HTML - - HTML 5 + - HTML5 - Landing - Reference - Web @@ -11,88 +11,88 @@ translation_of: Web/HTML --- <div>{{HTMLSidebar}}</div> -<p><strong>HTML</strong> signifie « <em>HyperText Markup Language</em> » qu'on peut traduire par « langage de balises pour l'hypertexte ». Il est utilisé afin de créer et de représenter le contenu d'une page web et sa structure. D'autres technologies sont utilisées avec HTML pour décrire la présentation d'une page (<a href="/fr/docs/Web/CSS">CSS</a>) et/ou ses fonctionnalités interactives (<a href="/fr/docs/Web/JavaScript">JavaScript</a>).</p> +<p class="summary"><strong>HTML</strong> signifie « <em>HyperText Markup Language</em> » qu'on peut traduire par « langage de balises pour l'hypertexte ». Il est utilisé afin de créer et de représenter le contenu d'une page web et sa structure. D'autres technologies sont utilisées avec HTML pour décrire la présentation d'une page (<a href="/fr/docs/Web/CSS">CSS</a>) et/ou ses fonctionnalités interactives (<a href="/fr/docs/Web/JavaScript">JavaScript</a>).</p> -<p>HTML fonctionne grâce à des « balises » qui sont insérées au sein d'un texte normal. Chacune de ces balises indique la signification de telle ou telle portion de texte dans le site. On parle d'« hypertexte » en référence aux liens qui connectent les pages web entre elles. C'est la mécanique originelle du « World Wide Web » que nous connaissons aujourd'hui. En écrivant et publiant des pages web, vous devenez un acteur du Web dès que votre site est accessible en ligne.</p> +<p>L'« hypertexte » désigne les liens qui relient les pages web entre elles, que ce soit au sein d'un même site web ou entre différents sites web. Les liens sont un aspect fondamental du Web. Ce sont eux qui forment cette « toile » (ce mot est traduit par <i>web</i> en anglais). En téléchargeant du contenu sur l'Internet et en le reliant à des pages créées par d'autres personnes, vous devenez un participant actif du World Wide Web.</p> -<p>HTML permet d'inclure des images et d'autres contenus dans les pages web. Grâce à HTML, chacun peut créer des sites web aussi bien statiques que dynamiques. HTML est le langage qui permet de décrire la structure et le contenu d'un document web. Ce contenu est balisé par des éléments HTML comme {{HTMLElement("head")}}, {{HTMLElement("title")}}, {{HTMLElement("body")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}},{{HTMLElement("p")}}, {{HTMLElement("div")}}, {{HTMLElement("span")}}, {{HTMLElement("img")}} et bien d'autres encore. Ces éléments forment les blocs utilisés pour construire un site web.</p> +<p>Le langage HTML utilise des « balises » pour annoter du texte, des images et d'autres contenus afin de les afficher dans un navigateur web. Le balisage HTML comprend des « éléments » spéciaux tels que <a href="/fr/docs/Web/HTML/Element/head"><code><head></code></a>, <a href="/fr/docs/Web/HTML/Element/title"><code><title></code></a>, <a href="/fr/docs/Web/HTML/Element/body"><code><body></code></a>, <a href="/fr/docs/Web/HTML/Element/header"><code><header></code></a>, <a href="/fr/docs/Web/HTML/Element/footer"><code><footer></code></a>, <a href="/fr/docs/Web/HTML/Element/article"><code><article></code></a>, <a href="/fr/docs/Web/HTML/Element/section"><code><section></code></a>, <a href="/fr/docs/Web/HTML/Element/p"><code><p></code></a>, <a href="/fr/docs/Web/HTML/Element/div"><code><div></code></a>, <a href="/fr/docs/Web/HTML/Element/span"><code><span></code></a>, <a href="/fr/docs/Web/HTML/Element/Img"><code><img></code></a>, <a href="/fr/docs/Web/HTML/Element/aside"><code><aside></code></a>, <a href="/fr/docs/Web/HTML/Element/audio"><code><audio></code></a>, <a href="/fr/docs/Web/HTML/Element/canvas"><code><canvas></code></a>, <a href="/fr/docs/Web/HTML/Element/datalist"><code><datalist></code></a>, <a href="/fr/docs/Web/HTML/Element/details"><code><details></code></a>, <a href="/fr/docs/Web/HTML/Element/embed"><code><embed></code></a>, <a href="/fr/docs/Web/HTML/Element/nav"><code><nav></code></a>, <a href="/fr/docs/Web/HTML/Element/output"><code><output></code></a>, <a href="/fr/docs/Web/HTML/Element/Progress"><code><progress></code></a>, <a href="/fr/docs/Web/HTML/Element/video"><code><video></code></a>, <a href="/fr/docs/Web/HTML/Element/ul"><code><ul></code></a>, <a href="/fr/docs/Web/HTML/Element/ol"><code><ol></code></a>, <a href="/fr/docs/Web/HTML/Element/li"><code><li></code></a> et bien d'autres.</p> <p>En HTML, les balises sont insensibles à la casse et peuvent aussi bien être écrites en minuscules, en majuscules voire avec un mélange des deux. Autrement dit, la balise <code><title></code> pourrait très bien être écrite comme <code><Title></code>, <code><TiTle></code> ou d'une autre façon.</p> -<p>Les articles suivants fournissent des éléments de référence utiles au développement web :</p> +<p>Les articles suivants fournissent des éléments de référence utiles au développement web.</p> -<section class="cleared" id="sect1"> -<ul class="card-grid"> - <li><span>Introduction à HTML</span> +<h2 id="Key_resources">Ressources clés</h2> - <p>Vous faites vos premiers pas dans le développement web ? <a href="/fr/Apprendre/Commencer_avec_le_web/Les_bases_HTML">Nos articles sur les bases de HTML</a> expliquent ce qu'est HTML et comment l'utiliser.</p> - </li> - <li><span>Tutoriels HTML</span> - <p>Pour plus d'informations sur l'utilisation du HTML, des tutoriels et des exemples complets, vous pouvez consulter <a href="/fr/Apprendre/HTML">notre section Apprendre HTML</a>.</p> - </li> - <li><span>Référence HTML</span> - <p>Dans notre <a href="/fr/docs/Web/HTML/Reference">référence exhaustive</a>, vous trouverez le détail de chaque élément et attribut constituant HTML.</p> - </li> -</ul> +<dl> + <dt>Introduction au HTML</dt> + <dd>Vous faites vos premiers pas dans le développement web ? <a href="/fr/docs/Learn/Getting_started_with_the_web/HTML_basics">Nos articles sur les bases de HTML</a> expliquent ce qu'est HTML et comment l'utiliser.</dd> + <dt>Tutoriels HTML</dt> + <dd>Pour plus d'informations sur l'utilisation du HTML, des tutoriels et des exemples complets, vous pouvez consulter <a href="/fr/docs/Learn/HTML">notre section Apprendre HTML</a>.</dd> + <dt>Référence HTML</dt> + <dd>Dans notre <a href="/fr/docs/Web/HTML/Reference">référence exhaustive</a>, vous trouverez le détail de chaque élément et attribut constituant HTML.</dd> +</dl> + +<div class="callout"> + <h4 id="Looking_to_become_a_front-end_web_developer">Vous cherchez à devenir un développeur web front-end ?</h4> + + <p>Nous avons élaboré un cours qui comprend toutes les informations essentielles dont vous avez besoin pour atteindre votre objectif.</p> + + <p><a class="button primary" href="/fr/docs/Learn/Front-end_web_developer">Commencer</a> + </p> +</div> -<div> -<div> -<h2 id="Tutoriels">Tutoriels</h2> +<h2 id="Beginners_tutorials">Tutoriels pour les débutants</h2> -<p>La section <a href="/fr/docs/Apprendre/HTML">Apprendre HTML</a> contient plusieurs modules pour vous apprendre à utiliser HTML sans autre connaissance particulière.</p> +<p>La section <a href="/fr/docs/Learn/HTML">Apprendre HTML</a> contient plusieurs modules pour vous apprendre à utiliser HTML — sans autre connaissance particulière.</p> <dl> - <dt><a href="/fr/Apprendre/HTML/Introduction_à_HTML">Une introduction à HTML</a></dt> - <dd>Dans ce module, on brosse un premier portrait de HTML pour présenter les concepts importants, la syntaxe. On voit comment appliquer HTML sur du texte, comment créer des hyperliens et comment structurer une page web grâce à HTML.</dd> - <dt><a href="/fr/docs/Apprendre/HTML/Multimedia_and_embedding">Le multimédia et l'intégration</a></dt> - <dd>Dans ce module, on explore comment utiliser HTML pour intégrer des fichiers multimédias dans une page web. Cela couvre les différentes façons d'inclure une image, comment ajouter une vidéo ou un fichier audio voire aussi comment intégrer d'autres pages web.</dd> - <dt><a href="/fr/docs/Apprendre/HTML/Tableaux">Les tableaux HTML</a></dt> - <dd>Il est parfois compliqué de représenter des données tabulaires de façon compréhensible et lisible sur une page web. Dans ce module, on voit les différentes balises utilisées pour construire des tableaux et certaines fonctionnalités plus complexes comme les légendes et résumés.</dd> - <dt><a href="/fr/docs/Web/Guide/HTML/Formulaires">Les formulaires HTML</a></dt> - <dd>Les formulaires sont cruciaux sur le Web, ils permettent de créer un compte sur un site, de se connecter, d'acheter des produits, d'écrire des commentaires, etc. Dans ce module, on voit comment créer des formulaires pour le navigateur (« côté client »).</dd> - <dt><a href="/fr/Apprendre/HTML/Comment">Utiliser HTML pour résoudre des problèmes courants</a></dt> - <dd>Ce module fournit un ensemble d'articles au sujet des problèmes qu'on rencontre fréquemment lorsqu'on crée une page web : gérer les titres, ajouter des images ou des vidéos, mettre en avant une partie du texte, créer un formulaire, etc.</dd> + <dt><a href="/fr/docs/Learn/HTML/Introduction_to_HTML">Une introduction à HTML</a></dt> + <dd>Dans ce module, on brosse un premier portrait de HTML pour présenter les concepts importants, la syntaxe. On voit comment appliquer HTML sur du texte, comment créer des hyperliens et comment structurer une page web grâce à HTML.</dd> + <dt><a href="/fr/docs/Learn/HTML/Multimedia_and_embedding">Le multimédia et l'intégration</a></dt> + <dd>Dans ce module, on explore comment utiliser HTML pour intégrer des fichiers multimédias dans une page web. Cela couvre les différentes façons d'inclure une image, comment ajouter une vidéo ou un fichier audio voire aussi comment intégrer d'autres pages web.</dd> + <dt><a href="/fr/docs/Learn/HTML/Tables">Les tableaux HTML</a></dt> + <dd>Il est parfois compliqué de représenter des données tabulaires de façon compréhensible et lisible sur une page web. Dans ce module, on voit les différentes balises utilisées pour construire des tableaux et certaines fonctionnalités plus complexes comme les légendes et résumés.</dd> + <dt><a href="/fr/docs/Learn/Forms">Les formulaires HTML</a></dt> + <dd>Les formulaires sont cruciaux sur le Web, ils permettent de créer un compte sur un site, de se connecter, d'acheter des produits, d'écrire des commentaires, etc. Dans ce module, on voit comment créer des formulaires pour le navigateur (« côté client »).</dd> + <dt><a href="/fr/docs/Learn/HTML/Howto">Utiliser HTML pour résoudre des problèmes courants</a></dt> + <dd>Ce module fournit un ensemble d'articles au sujet des problèmes qu'on rencontre fréquemment lorsqu'on crée une page web : gérer les titres, ajouter des images ou des vidéos, mettre en avant une partie du texte, créer un formulaire, etc.</dd> </dl> -<h2 id="Références">Références</h2> +<h2 id="Advanced_topics">Sujets avancés</h2> <dl> - <dt><a href="/fr/docs/Web/HTML/Reference">Référence HTML</a></dt> - <dd>HTML est un langage décrivant la structure et le contenu sémantique d'un document web. Il est constitué d'<strong>éléments</strong>, chacun pouvant être paramétré grâce à différents <strong>attributs</strong>.</dd> - <dt><a href="/fr/docs/Web/HTML/Element">Référence des éléments HTML</a></dt> - <dd>Cette page liste les différents éléments HTML.</dd> - <dt><a href="/fr/docs/Web/HTML/Attributs_globaux">Référence des attributs HTML</a></dt> - <dd>Les éléments HTML possèdent des attributs. Ce sont des valeurs additionnelles permettant de configurer ou d'ajuster le comportement les éléments de manières à répondre aux critères de l'utilisateur.</dd> - <dt><a href="/fr/docs/Web/HTML/Éléments_en_ligne">Éléments en ligne</a> et <a href="/fr/docs/Web/HTML/%C3%89l%C3%A9ments_en_bloc">éléments de bloc</a></dt> - <dd>Les éléments HTML sont habituellement des éléments « en ligne » ou des éléments de bloc. Un élément en ligne occupe seulement l'espace associé aux balises. Les éléments de bloc sont une catégorie d'éléments HTML opposés aux éléments en ligne. 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. Ce faisant, ils prennent la largeur de leurs conteneurs (créant ainsi un bloc de contenu).</dd> - <dt><a href="">Attributs universels</a></dt> - <dd>Les attributs universels peuvent être utilisés sur tous les éléments HTML, <em>même ceux non spécifiés dans le standard</em>. Par exemple, les navigateurs qui prennent en charge HTML5 masquent les contenus marqués comme <code><toto hidden>...<toto></code><code>, bien que </code><code><toto></code> ne soit pas un élément valide HTML.</dd> - <dt><a href="/fr/docs/Web/HTML/Types_de_lien">Types de lien</a></dt> - <dd>Les différents liens permettent de décrire les relations entre deux documents qui sont reliés entre eux par un élément {{HTMLElement("a")}}, {{HTMLElement("area")}} ou {{HTMLElement("link")}}.</dd> - <dt><a href="/fr/docs/Web/Media/Formats">Formats de média audio et vidéo pris en charge par HTML</a></dt> - <dd>Les éléments {{HTMLElement("audio")}} et {{HTMLElement("video")}} permettent d'ajouter des médias audio et vidéo directement dans le navigateur (sans avoir à utiliser des plugins ou programmes tiers).</dd> - <dt><a href="/fr/docs/Web/Guide/HTML/Catégories_de_contenu">Types de contenu HTML</a></dt> - <dd>HTML s'organise selon différents types de contenu dont chacun peut être autorisé ou non en fonction du contexte. Ces catégories indiquent quels éléments peuvent être contenus ou non dans d'autres éléments. Cet article explique le fonctionnement de ces catégories.</dd> + <dt><a href="/fr/docs/Web/HTML/CORS_enabled_image">Images avec le contrôle d'accès HTTP</a></dt> + <dd>L'attribut <a href="/fr/docs/Web/HTML/Element/Img#attr-crossorigin"><code>crossorigin</code></a>, associé à un en-tête <a href="/fr/docs/Glossary/CORS">CORS</a> approprié, permet de charger des images définies par l'élément <a href="/fr/docs/Web/HTML/Element/Img"><code><img></code></a> depuis des origines étrangères et de les utiliser dans un élément <a href="/fr/docs/Web/HTML/Element/canvas"><code><canvas></code></a> comme si elles étaient chargées depuis l'origine actuelle.</dd> + <dt><a href="/fr/docs/Web/HTML/Attributes/crossorigin">Attributs de réglage du CORS</a></dt> + <dd>Certains éléments HTML qui fournissent un support pour <a href="/fr/docs/Web/HTTP/CORS">CORS</a>, tels que <a href="/fr/docs/Web/HTML/Element/Img"><code><img></code></a> ou <a href="/fr/docs/Web/HTML/Element/video"><code><video></code></a>, ont un attribut <code>crossorigin</code> (propriété <code>crossOrigin</code>), qui vous permet de configurer les requêtes CORS pour les données extraites de l'élément.</dd> + <dt><a href="/fr/docs/Web/HTML/Preloading_content">Précharger du contenu avec <code>rel="preload"</code></a></dt> + <dd>La valeur <code>preload</code> de l'attribut <a href="/fr/docs/Web/HTML/Element/link"><code><link></code></a> de l'élément <a href="/fr/docs/Web/HTML/Element/link#attr-rel"><code>rel</code></a> vous permet d'écrire des requêtes déclaratives de récupération dans votre <a href="/fr/docs/Web/HTML/Element/head"><code><head></code></a> HTML, en spécifiant les ressources dont vos pages auront besoin très rapidement après le chargement, et que vous souhaitez donc commencer à précharger au début du cycle de vie d'une page, avant que le cycle de rendu du navigateur ne se mette en marche. Cela permet de s'assurer que ces éléments sont disponibles plus tôt et qu'ils risquent moins de bloquer le premier rendu de la page, améliorant ainsi les performances. Cet article fournit un guide de base sur le fonctionnement du <code>preload</code>.</dd> </dl> -</div> -<div> -<h2 id="Autres_guides">Autres guides</h2> +<h2 id="References">Références</h2> <dl> - <dt class="landingPageList"><a href="/fr/docs/Web/HTML/Images_avec_le_contrôle_d_accès_HTTP">Images avec CORS activé</a></dt> - <dd class="landingPageList">L'attribut {{htmlattrxref("crossorigin", "img")}}, utilisé avec un en-tête {{glossary("CORS")}} adéquat, permet aux images définies via un élément {{HTMLElement("img")}} d'être chargées depuis des origines tierces et d'être utilisées au sein d'éléments {{HTMLElement("canvas")}} comme si elles étaient chargées depuis l'origine courante.</dd> - <dt><a href="fr/docs/Web/HTML/Reglages_des_attributs_CORS">Attributs de réglage du CORS</a></dt> - <dd>Certains des éléments HTML supportant le <a href="/fr/docs/HTTP/Access_control_CORS">CORS</a> (Cross-Origin Resource Sharing) comme {{HTMLElement("img")}} ou {{HTMLElement("video")}} ont un attribut {{HTMLattrxref("crossorigin","img")}} qui permet de configurer les requêtes CORS pour les données de l'élément à renvoyer.</dd> - <dt><a href="/fr/docs/Web/HTML/Gestion_du_focus_en_HTML">Gérer le focus en HTML</a></dt> - <dd>L'attribut DOM {{domxref("Document.activeElement")}} et la méthode DOM {{domxref("Document.hasFocus()")}} permettent au programmeur de mieux contrôler l'interactivité d'une page vis à vis des actions de l'utilisateur. Ils peuvent par exemple être utilisés pour des statistiques, pour surveiller le nombre de clics sur certains liens d'une page, pour comptabiliser le nombre de fois où l'élément reçoit le focus, etc. De plus, combinés à AJAX, ils aident à minimiser le nombre de requêtes au serveur, en fonction de l'activité de l'utilisateur et de l'agencement de la page.</dd> - <dt class="landingPageList"><a href="/fr/docs/Web/HTML/Précharger_du_contenu">Précharger du contenu grâce à <code>rel="preload"</code></a></dt> - <dd class="landingPageList">La valeur <code>preload</code> de l'attribut {{htmlattrxref("rel", "link")}} associé à l'élément {{htmlelement("link")}} permet d'écrire des requêtes de récupération de ressources au sein de l'élément {{htmlelement("head")}} du document HTML pour les ressources qui seront nécessaires à la page peu de temps après le chargement. Les ressources ciblées sont ainsi préchargées lors du chargement de la page avant que le navigateur effectue un premier rendu. Cela permets que les ressources soient disponibles plus tôt et moins susceptibles de bloquer l'affichage de la page, améliorant ainsi les performances. Cet article explique les bases du fonctionnement de <code>preload</code>.</dd> - <dt class="landingPageList"><a href="/fr/docs/Web/HTML/Quirks_Mode_and_Standards_Mode">Modes de compatibilité (<em>quirks mode</em>) et mode standard</a></dt> - <dd class="landingPageList">Des informations historiques à propos du mode <em>quirks</em> et du mode standard.</dd> + <dt><a href="/fr/docs/Web/HTML/Reference">Référence HTML</a></dt> + <dd>HTML est un langage décrivant la structure et le contenu sémantique d'un document web. Il est constitué d'<strong>éléments</strong>, chacun pouvant être paramétré grâce à différents <strong>attributs</strong>. Les documents HTML sont connectés à d'autres via des <a href="/en-US/docs/Web/HTML/Link_types">liens</a></dd> + <dt><a href="/fr/docs/Web/HTML/Element">Référence des éléments HTML</a></dt> + <dd>Cette page liste les différents éléments HTML.</dd> + <dt class="landingPageList"><a href="/fr/docs/Web/HTML/Attributes">Liste des attributs HTML</a></dt> + <dd class="landingPageList">Les éléments du langage HTML possèdent des <strong>attributs</strong>. Il s'agit de valeurs supplémentaires qui configurent les éléments ou ajustent leur comportement de diverses manières.</dd> + <dt><a href="/fr/docs/Web/HTML/Global_attributes">Attributs universels</a></dt> + <dd>Les attributs universels peuvent être spécifiés sur tous les <a href="/fr/docs/Web/HTML/Element">éléments HTML</a>, <em>même ceux qui ne sont pas spécifiés dans la norme</em>. Par exemple, les navigateurs qui prennent en charge HTML5 masquent les contenus marqués comme <code><toto hidden>…<toto></code><code>, bien que </code><code><toto></code> ne soit pas un élément valide HTML.</dd> + <dt><a href="/fr/docs/Web/HTML/Inline_elements">Éléments en ligne</a> et <a href="/fr/docs/Web/HTML/Block-level_elements">éléments de bloc</a></dt> + <dd>Les éléments HTML sont habituellement des éléments « en ligne » ou des éléments de bloc. Un élément en ligne occupe seulement l'espace associé aux balises. Les éléments de bloc sont une catégorie d'éléments HTML opposés aux éléments en ligne. 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. Ce faisant, ils prennent la largeur de leurs conteneurs (créant ainsi un bloc de contenu).</dd> + <dt><a href="/fr/docs/Web/HTML/Link_types">Types de lien</a></dt> + <dd>Les différents liens permettent de décrire les relations entre deux documents qui sont reliés entre eux par un élément <a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a>, <a href="/fr/docs/Web/HTML/Element/area"><code><area></code></a> ou <a href="/fr/docs/Web/HTML/Element/link"><code><link></code></a>.</dd> + <dt><a href="/fr/docs/Web/Media/Formats">Formats de média audio et vidéo pris en charge par HTML</a></dt> + <dd>Les éléments <a href="/fr/docs/Web/HTML/Element/audio"><code><audio></code></a> et <a href="/fr/docs/Web/HTML/Element/video"><code><video></code></a> permettent d'ajouter des médias audio et vidéo directement dans le navigateur (sans avoir à utiliser des plugins ou programmes tiers).</dd> + <dt><a href="/fr/docs/Web/Guide/HTML/Content_categories">Types de contenu HTML</a></dt> + <dd>HTML s'organise selon différents types de contenu dont chacun peut être autorisé ou non en fonction du contexte. Ces catégories indiquent quels éléments peuvent être contenus ou non dans d'autres éléments. Cet article explique le fonctionnement de ces catégories.</dd> </dl> -</div> -</div> -<p><a href="/fr/docs/tag/HTML">Voir tout…</a></p> -</section> +<h2 id="Related_topics">Sujets connexes</h2> + +<dl> + <dt><a href="/fr/docs/Web/HTML/Applying_color">Appliquer des couleurs sur des éléments HTML grâce à CSS</a></dt> + <dd>Cet article couvre la plupart des façons d'utiliser CSS pour ajouter de la couleur au contenu HTML, en indiquant les parties des documents HTML qui peuvent être colorées et les propriétés CSS à utiliser pour ce faire. Il comprend des exemples, des liens vers des outils de création de palettes, etc.</dd> +</dl> 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> diff --git a/files/fr/web/html/link_types/index.html b/files/fr/web/html/link_types/index.html index ea1701af04..0ed90a4804 100644 --- a/files/fr/web/html/link_types/index.html +++ b/files/fr/web/html/link_types/index.html @@ -2,368 +2,341 @@ title: Types de lien slug: Web/HTML/Link_types tags: + - Attribute - HTML + - Link + - Link types - Reference - - Types de lien - - Web translation_of: Web/HTML/Link_types original_slug: Web/HTML/Types_de_lien --- <div>{{HTMLSidebar}}</div> -<p>En HTML, les types de lien indiquent la relation entre deux documents, reliés ensemble grâce à un élément {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}} ou {{HTMLElement("link")}}.</p> +<p class="summary">En HTML, les types de lien indiquent la relation entre deux documents, reliés ensemble grâce à un élément <a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a>, <a href="/fr/docs/Web/HTML/Element/area"><code><area></code></a>, <a href="/fr/docs/Web/HTML/Element/Form"><code><form></code></a> ou <a href="/fr/docs/Web/HTML/Element/link"><code><link></code></a>.</p> <table class="standard-table"> - <caption>Liste des types de lien HTML et leur signification</caption> - <thead> - <tr> - <th scope="col">Type de lien</th> - <th scope="col">Description</th> - <th scope="col">Utilisable dans ces éléments</th> - <th scope="col">Interdit dans ces éléments</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>alternate</code></td> - <td> - <ul> - <li>Si l'élément est un élément {{HTMLElement("link")}} et que l'attribut {{htmlattrxref("rel", "link")}} contient le type <code>stylesheet</code>, ce lien définit <a href="/fr/docs/Web/CSS/Feuilles_de_style_alternatives">une feuille de style alternative</a>. Dans ce cas, l'attribut {{htmlattrxref("title", "link")}} doit être présent et ne doit pas être la chaîne de caractères vide.</li> - <li>Si l'attribut {{htmlattrxref("type","link")}} vaut <code>application/rss+xml</code> ou <code>application/atom+xml</code>, le lien définit <a href="/fr/docs/Web/RSS/Premiers_pas/Syndication">un flux de syndication</a>. Le premier flux définit sur la page est le flux par défaut.</li> - <li>Sinon, le lien définit une page alternative, il peut s'agir : - <ul> - <li>Si l'attribut {{htmlattrxref("media","link")}} est défini, d'une page destinée à un autre support (par exemple une tablette)</li> - <li>D'une page dans une autre langue si l'attribut {{htmlattrxref("hreflang","link")}} est défini,</li> - <li>D'une page dans un autre format (par exemple PDF) si l'attribut {{htmlattrxref("type","link")}} est défini,</li> - <li>D'une combinaison de ces documents.</li> - </ul> - </li> - </ul> - </td> - <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td> - <td>{{HTMLElement("form")}}</td> - </tr> - <tr> - <td><code>archives</code> {{obsolete_inline}}</td> - <td>Ce type définit un hyperlien vers un document qui contient un lien d'archive vers le document courant. Un billet de blog pourrait ainsi créer un lien vers un index qui liste les articles publiés pendant ce mois.<br> - <br> - <strong>Note :</strong> Bien que la forme <code>archive</code> (au singulier) soit reconnue, elle est incorrecte et doit être évitée.</td> - <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td> - <td>{{HTMLElement("form")}}</td> - </tr> - <tr> - <td><code>author</code></td> - <td>Ce type définit un hyperlien vers une page qui décrit l'auteur ou qui fournit un moyen de contacter l'auteur du document.<br> - <br> - <strong>Note :</strong> Ce lien peut être un lien <code>mailto:</code> bien que ce ne soit pas recommandé afin d'éviter la collecte de l'adresse électronique (mieux vaut avoir un formulaire de contact).<br> - <br> - Bien que l'attribut {{htmlattrxref("rev", "link")}} soit reconnu pour les éléments {{HTMLElement("a")}}, {{HTMLElement("area")}} et {{HTMLElement("link")}}, il ne faut pas utiliser cet attribut avec un type de lien « <code>made</code> » mais plutôt utiliser {{htmlattrxref("rel", "link")}} avec ce type de lien (« <code>author</code> »).</td> - <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td> - <td>{{HTMLElement("form")}}</td> - </tr> - <tr> - <td><code>bookmark</code></td> - <td>Ce type de lien indique l'hyperlien est <a href="https://fr.wikipedia.org/wiki/Permalien">un permalien</a> pour l'élément {{HTMLElement("article")}} qui est l'ancêtre le plus proche. S'il n'y en a aucun, c'est un permalien pour <a href="/fr/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document">la section</a> la plus proche de l'élément courant.<br> - <br> - Ce type de lien permet de placer un marque-page pour un seul article d'une page qui contient plusieurs articles (par exemple un agrégateur).</td> - <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td> - <td>{{HTMLElement("link")}}, {{HTMLElement("form")}}</td> - </tr> - <tr> - <td><code>canonical</code></td> - <td>Un lien canonique est un élément HTML qui aide les webmasters à ne pas dupliquer du contenu en indiquant la version <em>canonique</em> ou <em>préférée</em> de la page pour l'optimisation à destination des moteurs de recherche.</td> - <td>{{HTMLElement("link")}}</td> - <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}</td> - </tr> - <tr> - <td><code>dns-prefetch</code> {{experimental_inline}}</td> - <td>Ce type de lien indique au navigateur qu'une ressource est nécessaire et permet au navigateur d'effectuer une requête DNS et un établissement de connexion avant que l'utilisateur clique sur le lien.</td> - <td>{{HTMLElement("link")}}</td> - <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}</td> - </tr> - <tr> - <td><code>external</code></td> - <td>Ce type de lien indique que l'hyperlien mène vers une ressource située à l'extérieur du site sur lequel se trouve la page courante. Autrement dit, en suivant ce lien, l'utilisateur quitte le site qu'il visite.</td> - <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}</td> - <td>{{HTMLElement("link")}}</td> - </tr> - <tr> - <td><code>first</code> {{obsolete_inline}}</td> - <td>Ce type indique que l'hyperlien mène à la première ressource dans la série de ressources à laquelle appartient la page actuelle.<br> - <br> - <strong>Note :</strong> les autres types de lien permettant une navigation séquentielle sont : <code>last</code>, <code>prev</code>, <code>next</code> (pour respectivement la dernière, la précédente et la suivante).<br> - <br> - Bien que les synonymems <code>begin</code> et <code>start</code> puissent être reconnus, ils sont incorrects et devraient être évités.</td> - <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td> - <td>{{HTMLElement("form")}}</td> - </tr> - <tr> - <td><code>help</code></td> - <td> - <ul> - <li>Si l'élément est un élément {{HTMLElement("a")}} ou {{HTMLElement("area")}}, ce type indique que l'hyperlien mène vers une ressource contenant de l'aide sur l'utilisation de l'élément parent du lien et de ses descendants.</li> - <li>Si l'élément est un élément {{HTMLElement("link")}}, ce type indique que l'hyperlien mène vers une ressource fournissant une aide à propos de la page entière.</li> - </ul> - </td> - <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}, {{HTMLElement("link")}}</td> - <td><em>Aucun</em>.</td> - </tr> - <tr> - <td><code>icon</code></td> - <td>Ce type définit une ressource qui représente la page dans l'interface utilisateur. C'est généralement une icône (visuelle ou auditive).<br> - <br> - Les attributs {{htmlattrxref("media","link")}}, {{htmlattrxref("type","link")}} et {{htmlattrxref("sizes","link")}} permettent au navigateur de choisir l'icône la plus appropriée au contexte. Si plusieurs ressources sont équivalentes, le navigateur sélectionnera celle qui est déclarée en dernière, dans l'ordre des éléments de l'arbre du document. Ces attributs ne sont que des indications et les ressources associées peuvent ne pas correspondre, auquel cas, le navigateur en sélectionnera une autre s'il en existe une adéquate.<br> - <br> - <strong>Note :</strong> sur iOS, ce type de lien n'est pas utilisé, à la place, ce sont les relations ({{htmlattrxref("rel","link")}}) <code><a href="https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW4">apple-touch-icon</a></code> et <code><a href="https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW6">apple-touch-startup-image</a></code> qui sont utilisées.<br> - <br> - Le type de lien <code>shortcut</code> est souvent vu avant <code>icon</code> mais il n'est pas conforme et les navigateurs l'ignorent, c'est pourquoi il ne doit plus être utilisé.</td> - <td>{{HTMLElement("link")}}</td> - <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}</td> - </tr> - <tr> - <td><code>import</code>{{experimental_inline}}</td> - <td>Imports de ressource en HTML</td> - <td>{{HTMLElement("link")}}</td> - <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}</td> - </tr> - <tr> - <td><code>index</code> {{obsolete_inline}}</td> - <td>Ce type indique que la page fait partie d'une structure hiérarchique et que l'hyperlien renvoie au niveau le plus haut de cette structure.<br> - <br> - Si un ou plusieurs liens de type <code>up</code> sont présent, la quantité de ces liens indique la profondeur de la page courante au sein de la hiérarchie.</td> - <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td> - <td>{{HTMLElement("form")}}</td> - </tr> - <tr> - <td><code>last</code> {{obsolete_inline}}</td> - <td> - <p>Ce type indique que l'hyperlien mène à la dernière ressource dans la série de ressources à laquelle appartient la page actuelle.<br> - <br> - <strong>Note :</strong> les autres types de lien permettant une navigation séquentielle sont : <code>first</code>, <code>prev</code>, <code>next</code> (pour respectivement la première, la précédente et la suivante).</p> + <caption>Liste des types de lien HTML et leur signification</caption> + <thead> + <tr> + <th scope="col">Type de lien</th> + <th scope="col">Description</th> + <th scope="col">Utilisable dans ces éléments</th> + <th scope="col">Interdit dans ces éléments</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>alternate</code></td> + <td> + <ul> + <li>Si l'élément est un élément <a href="/fr/docs/Web/HTML/Element/link"><code><link></code></a> et que l'attribut <a href="/fr/docs/Web/HTML/Element/link#attr-rel"><code><rel></code></a> contient le type <code>stylesheet</code>, ce lien définit <a href="/fr/docs/Web/CSS/Alternative_style_sheets">une feuille de style alternative</a>. Dans ce cas, l'attribut <a href="/fr/docs/Web/HTML/Element/link#attr-title"><code><title></code></a> doit être présent et ne doit pas être la chaîne de caractères vide.</li> + <li>Si l'attribut <a href="/fr/docs/Web/HTML/Element/link#attr-type"><code>type</code></a> vaut <code>application/rss+xml</code> ou <code>application/atom+xml</code>, le lien définit <a href="/fr/docs/Web/Archive/RSS/Premiers_pas/Syndication">un flux de syndication</a>. Le premier flux définit sur la page est le flux par défaut.</li> + <li>Sinon, le lien définit une page alternative, il peut s'agir : + <ul> + <li>Si l'attribut <a href="/fr/docs/Web/HTML/Element/link#attr-media"><code>media</code></a> est défini, d'une page destinée à un autre support (par exemple une tablette)</li> + <li>D'une page dans une autre langue si l'attribut <a href="/fr/docs/Web/HTML/Element/link#attr-hreflang"><code>hreflang</code></a> est défini,</li> + <li>D'une page dans un autre format (par exemple PDF) si l'attribut <a href="/fr/docs/Web/HTML/Element/link#attr-type"><code>type</code></a> est défini,</li> + <li>D'une combinaison de ces documents.</li> + </ul> + </li> + </ul> + </td> + <td><a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a>, <a href="/fr/docs/Web/HTML/Element/area"><code><area></code></a>, <a href="/fr/docs/Web/HTML/Element/link"><code><link></code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/Form"><code><form></code></a></td> + </tr> + <tr> + <td><code>archives</code> {{obsolete_inline}}</td> + <td><p>Ce type définit un hyperlien vers un document qui contient un lien d'archive vers le document courant. Un billet de blog pourrait ainsi créer un lien vers un index qui liste les articles publiés pendant ce mois.</p> + <p><strong>Note :</strong> Bien que la forme <code>archive</code> (au singulier) soit reconnue, elle est incorrecte et doit être évitée.</p></td> + <td><a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a>, <a href="/fr/docs/Web/HTML/Element/area"><code><area></code></a>, <a href="/fr/docs/Web/HTML/Element/link"><code><link></code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/Form"><code><form></code></a></td> + </tr> + <tr> + <td><code>author</code></td> + <td><p>Ce type définit un hyperlien vers une page qui décrit l'auteur ou qui fournit un moyen de contacter l'auteur du document.</p> + <p><strong>Note :</strong> Ce lien peut être un lien <code>mailto:</code> bien que ce ne soit pas recommandé afin d'éviter la collecte de l'adresse électronique (mieux vaut avoir un formulaire de contact).</p> + <p>Bien que l'attribut <a href="/fr/docs/Web/HTML/Element/link#attr-rev"><code><rev></code></a> soit reconnu pour les éléments <a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a>, <a href="/fr/docs/Web/HTML/Element/area"><code><area></code></a> et <a href="/fr/docs/Web/HTML/Element/link"><code><link></code></a>, il ne faut pas utiliser cet attribut avec un type de lien « <code>made</code> » mais plutôt utiliser <a href="/fr/docs/Web/HTML/Element/link#attr-rel"><code><rel></code></a> avec ce type de lien (« <code>author</code> »).</p></td> + <td><a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a>, <a href="/fr/docs/Web/HTML/Element/area"><code><area></code></a>, <a href="/fr/docs/Web/HTML/Element/link"><code><link></code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/Form"><code><form></code></a></td> + </tr> + <tr> + <td><code>bookmark</code></td> + <td><p>Ce type de lien indique l'hyperlien est <a href="https://fr.wikipedia.org/wiki/Permalien">un permalien</a> pour l'élément <a href="/fr/docs/Web/HTML/Element/article"><code><article></code></a> qui est l'ancêtre le plus proche. S'il n'y en a aucun, c'est un permalien pour <a href="/fr/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines">la section</a> la plus proche de l'élément courant.</p> + <p>Ce type de lien permet de placer un marque-page pour un seul article d'une page qui contient plusieurs articles (par exemple un agrégateur).</p></td> + <td><a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a>, <a href="/fr/docs/Web/HTML/Element/area"><code><area></code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/link"><code><link></code></a>, <a href="/fr/docs/Web/HTML/Element/Form"><code><form></code></a></td> + </tr> + <tr> + <td><code>canonical</code></td> + <td>Un lien canonique est un élément HTML qui aide les webmasters à ne pas dupliquer du contenu en indiquant la version <em>canonique</em> ou <em>préférée</em> de la page pour l'optimisation à destination des moteurs de recherche.</td> + <td><a href="/fr/docs/Web/HTML/Element/link"><code><link></code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a>, <a href="/fr/docs/Web/HTML/Element/area"><code><area></code></a>, <a href="/fr/docs/Web/HTML/Element/Form"><code><form></code></a></td> + </tr> + <tr> + <td><code><a href="/fr/docs/Web/HTML/Link_types/dns-prefetch">dns-prefetch</a></code> {{experimental_inline}}</td> + <td>Ce type de lien indique au navigateur qu'une ressource est nécessaire et permet au navigateur d'effectuer une requête DNS et un établissement de connexion avant que l'utilisateur clique sur le lien.</td> + <td><a href="/fr/docs/Web/HTML/Element/link"><code><link></code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a>, <a href="/fr/docs/Web/HTML/Element/area"><code><area></code></a>, <a href="/fr/docs/Web/HTML/Element/Form"><code><form></code></a></td> + </tr> + <tr> + <td><code>external</code></td> + <td>Ce type de lien indique que l'hyperlien mène vers une ressource située à l'extérieur du site sur lequel se trouve la page courante. Autrement dit, en suivant ce lien, l'utilisateur quitte le site qu'il visite.</td> + <td><a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a>, <a href="/fr/docs/Web/HTML/Element/area"><code><area></code></a>, <a href="/fr/docs/Web/HTML/Element/Form"><code><form></code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/link"><code><link></code></a></td> + </tr> + <tr> + <td><code>first</code> {{obsolete_inline}}</td> + <td><p>Ce type indique que l'hyperlien mène à la première ressource dans la série de ressources à laquelle appartient la page actuelle.</p> + <p><strong>Note :</strong> les autres types de lien permettant une navigation séquentielle sont : <code>last</code>, <code>prev</code>, <code>next</code> (pour respectivement la dernière, la précédente et la suivante).</p> + <p>Bien que les synonymes <code>begin</code> et <code>start</code> puissent être reconnus, ils sont incorrects et devraient être évités.</p></td> + <td><a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a>, <a href="/fr/docs/Web/HTML/Element/area"><code><area></code></a>, <a href="/fr/docs/Web/HTML/Element/link"><code><link></code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/Form"><code><form></code></a></td> + </tr> + <tr> + <td><code>help</code></td> + <td> + <ul> + <li>Si l'élément est un élément <a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a> ou <a href="/fr/docs/Web/HTML/Element/area"><code><area></code></a>, ce type indique que l'hyperlien mène vers une ressource contenant de l'aide sur l'utilisation de l'élément parent du lien et de ses descendants.</li> + <li>Si l'élément est un élément <a href="/fr/docs/Web/HTML/Element/link"><code><link></code></a>, ce type indique que l'hyperlien mène vers une ressource fournissant une aide à propos de la page entière.</li> + </ul> + </td> + <td><a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a>, <a href="/fr/docs/Web/HTML/Element/area"><code><area></code></a>, <a href="/fr/docs/Web/HTML/Element/Form"><code><form></code></a>, <a href="/fr/docs/Web/HTML/Element/link"><code><link></code></a></td> + <td><em>Aucun</em>.</td> + </tr> + <tr> + <td><code>icon</code></td> + <td><p>Ce type définit une ressource qui représente la page dans l'interface utilisateur. C'est généralement une icône (visuelle ou auditive).</p> + <p>Les attributs <a href="/fr/docs/Web/HTML/Element/link#attr-media"><code>media</code></a>, <a href="/fr/docs/Web/HTML/Element/link#attr-type"><code>type</code></a> et <a href="/fr/docs/Web/HTML/Element/link#attr-sizes"><code>sizes</code></a> permettent au navigateur de choisir l'icône la plus appropriée au contexte. Si plusieurs ressources sont équivalentes, le navigateur sélectionnera celle qui est déclarée en dernière, dans l'ordre des éléments de l'arbre du document. Ces attributs ne sont que des indications et les ressources associées peuvent ne pas correspondre, auquel cas, le navigateur en sélectionnera une autre s'il en existe une adéquate.</p> + <p><strong>Note :</strong> sur iOS, ce type de lien n'est pas utilisé, à la place, ce sont les relations (<a href="/fr/docs/Web/HTML/Element/link#attr-rel"><code>rel</code></a>) <code><a href="https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW4">apple-touch-icon</a></code> et <code><a href="https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW6">apple-touch-startup-image</a></code> qui sont utilisées.</p> + <p>Le type de lien <code>shortcut</code> est souvent vu avant <code>icon</code> mais il n'est pas conforme et les navigateurs l'ignorent, c'est pourquoi il ne doit plus être utilisé.</p></td> + <td><a href="/fr/docs/Web/HTML/Element/link"><code><link></code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a>, <a href="/fr/docs/Web/HTML/Element/area"><code><area></code></a>, <a href="/fr/docs/Web/HTML/Element/Form"><code><form></code></a></td> + </tr> + <tr> + <td><code>import</code>{{experimental_inline}}</td> + <td><a href="/fr/docs/Web/Web_Components/HTML_Imports">Imports de ressources en HTML</a></td> + <td><a href="/fr/docs/Web/HTML/Element/link"><code><link></code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a>, <a href="/fr/docs/Web/HTML/Element/area"><code><area></code></a>, <a href="/fr/docs/Web/HTML/Element/Form"><code><form></code></a></td> + </tr> + <tr> + <td><code>index</code> {{Obsolete_Inline("HTML5")}}</td> + <td><p>Ce type indique que la page fait partie d'une structure hiérarchique et que l'hyperlien renvoie au niveau le plus haut de cette structure.</p> + <p>Si un ou plusieurs liens de type <code>up</code> sont présents, la quantité de ces liens indique la profondeur de la page courante au sein de la hiérarchie.</p></td> + <td><a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a>, <a href="/fr/docs/Web/HTML/Element/area"><code><area></code></a>, <a href="/fr/docs/Web/HTML/Element/link"><code><link></code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/Form"><code><form></code></a></td> + </tr> + <tr> + <td><code>last</code> {{obsolete_inline}}</td> + <td> + <p>Ce type indique que l'hyperlien mène à la dernière ressource dans la série de ressources à laquelle appartient la page actuelle.</p> + <p><strong>Note :</strong> les autres types de lien permettant une navigation séquentielle sont : <code>first</code>, <code>prev</code>, <code>next</code> (pour respectivement la première, la précédente et la suivante).</p> - <p>Bien que le synonyme <code>end</code> puisse être reconnu, il est incorrect et doit être évité.</p> - </td> - <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td> - <td><em>Aucun</em>.</td> - </tr> - <tr> - <td><code>license</code></td> - <td>Ce type de lien mène vers un document contenant des informations relatives à la licence appliquée au contenu. Si le lien n'est pas dans l'élément {{HTMLElement("head")}}, le standard n'indique pas que la licence doit s'appliquer à tout ou partie du document, seules les données de la page permettent de le savoir.<br> - <br> - <strong>Note :</strong> bien qu'il puisse être reconnu, le synonyme <code>copyright</code> est incorrect et doit être évité.</td> - <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}, {{HTMLElement("link")}}</td> - <td><em>Aucun</em>.</td> - </tr> - <tr> - <td><code>manifest</code></td> - <td>Ce type de lien indique que la ressource liée est <a href="/fr/docs/Web/Manifest">un manifeste d'application web</a>.</td> - <td>{{HTMLElement("link")}}</td> - <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}</td> - </tr> - <tr> - <td><code>modulepreload</code></td> - <td>Initialise le chargement anticipé (et prioritaire) des modules de scripts</td> - <td>{{HTMLElement("link")}}</td> - <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}</td> - <td></td> - </tr> - <tr> - <td><code>next</code></td> - <td>Ce type indique que l'hyperlien mène à la prochaine ressource dans la série de ressources à laquelle appartient la page actuelle.<br> - <br> - <strong>Note :</strong> les autres types de lien permettant une navigation séquentielle sont : <code>first</code>, <code>prev</code>, <code>last</code> (pour respectivement la première, la précédente et la dernière).</td> - <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}, {{HTMLElement("link")}}</td> - <td><em>Aucun</em>.</td> - </tr> - <tr> - <td><code>nofollow</code></td> - <td>Ce type de lien indique que le document lié n'est pas approuvé par l'auteur du document actuel, par exemple s'il n'a aucun contrôle envers le document lié ou si le document est un mauvais exemple ou encore s'il existe une relation commerciale (le lien a été vendu). Ce type de lien peut être utilisé par certains moteurs de recherche qui utilise des classements selon la popularité des documents.</td> - <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}</td> - <td>{{HTMLElement("link")}}</td> - </tr> - <tr> - <td><code>noopener</code></td> - <td> - <p>Ce type de lien indique au navigateur d'ouvrir le lien sans que le nouveau contexte de navigation créé ait accès au document qui contenait le lien (techniquement la propriété {{domxref("Window.opener")}} renverra <code>null</code>).<br> - <br> - Ce type est particulièrement utile lorsqu'on ouvre un lien pour lequel on ne veut pas qu'il puisse interagir avec le document source (voir également l'article <em><a href="https://mathiasbynens.github.io/rel-noopener/">About <code>rel=noopener</code></a></em> pour plus de détails) tout en fournissant un référent via l'en-tête HTTP (à moins que <code>noreferrer</code> n'y soit également utilisé).</p> + <p>Bien que le synonyme <code>end</code> puisse être reconnu, il est incorrect et doit être évité.</p> + </td> + <td><a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a>, <a href="/fr/docs/Web/HTML/Element/area"><code><area></code></a>, <a href="/fr/docs/Web/HTML/Element/link"><code><link></code></a></td> + <td><em>Aucun</em>.</td> + </tr> + <tr> + <td><code>license</code></td> + <td><p>Ce type de lien mène vers un document contenant des informations relatives à la licence appliquée au contenu. Si le lien n'est pas dans l'élément <a href="/fr/docs/Web/HTML/Element/head"><code><head></code></a>, le standard n'indique pas que la licence doit s'appliquer à tout ou partie du document, seules les données de la page permettent de le savoir.</p> + <p><strong>Note :</strong> bien qu'il puisse être reconnu, le synonyme <code>copyright</code> est incorrect et doit être évité.</p></td> + <td><a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a>, <a href="/fr/docs/Web/HTML/Element/area"><code><area></code></a>, <a href="/fr/docs/Web/HTML/Element/Form"><code><form></code></a>, <a href="/fr/docs/Web/HTML/Element/link"><code><link></code></a></td> + <td><em>Aucun</em>.</td> + </tr> + <tr> + <td><code><a href="/fr/docs/Web/HTML/Link_types/manifest">manifest</a></code></td> + <td>Ce type de lien indique que la ressource liée est <a href="/fr/docs/Web/Manifest">un manifeste d'application web</a>.</td> + <td><a href="/fr/docs/Web/HTML/Element/link"><code><link></code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a>, <a href="/fr/docs/Web/HTML/Element/area"><code><area></code></a>, <a href="/fr/docs/Web/HTML/Element/Form"><code><form></code></a></td> + </tr> + <tr> + <td><code><a href="/fr/docs/Web/HTML/Link_types/modulepreload">modulepreload</a></code></td> + <td>Initialise le chargement anticipé (et prioritaire) des modules de scripts</td> + <td><a href="/fr/docs/Web/HTML/Element/link"><code><link></code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a>, <a href="/fr/docs/Web/HTML/Element/area"><code><area></code></a>, <a href="/fr/docs/Web/HTML/Element/Form"><code><form></code></a></td> + </tr> + <tr> + <td><code>next</code></td> + <td><p>Ce type indique que l'hyperlien mène à la prochaine ressource dans la série de ressources à laquelle appartient la page actuelle.</p> + <p><strong>Note :</strong> les autres types de lien permettant une navigation séquentielle sont : <code>first</code>, <code>prev</code>, <code>last</code> (pour respectivement la première, la précédente et la dernière).</p></td> + <td><a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a>, <a href="/fr/docs/Web/HTML/Element/area"><code><area></code></a>, <a href="/fr/docs/Web/HTML/Element/Form"><code><form></code></a>, <a href="/fr/docs/Web/HTML/Element/link"><code><link></code></a></td> + <td><em>Aucun</em>.</td> + </tr> + <tr> + <td><code>nofollow</code></td> + <td>Ce type de lien indique que le document lié n'est pas approuvé par l'auteur du document actuel, par exemple s'il n'a aucun contrôle envers le document lié ou si le document est un mauvais exemple ou encore s'il existe une relation commerciale (le lien a été vendu). Ce type de lien peut être utilisé par certains moteurs de recherche qui utilise des classements selon la popularité des documents.</td> + <td><a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a>, <a href="/fr/docs/Web/HTML/Element/area"><code><area></code></a>, <a href="/fr/docs/Web/HTML/Element/Form"><code><form></code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/link"><code><link></code></a></td> + </tr> + <tr> + <td><code><a href="/fr/docs/Web/HTML/Link_types/noopener">noopener</a></code></td> + <td> + <p>Ce type de lien indique au navigateur d'ouvrir le lien sans que le nouveau contexte de navigation créé ait accès au document qui contenait le lien (techniquement la propriété <a href="/fr/docs/Web/API/Window/opener"><code>Window.opener</code></a> renverra <code>null</code>).</p> + <p>Ce type est particulièrement utile lorsqu'on ouvre un lien pour lequel on ne veut pas qu'il puisse interagir avec le document source (voir également l'article <em><a href="https://mathiasbynens.github.io/rel-noopener/">About <code>rel=noopener</code></a></em> pour plus de détails) tout en fournissant un référent via l'en-tête HTTP (à moins que <code>noreferrer</code> n'y soit également utilisé).</p> - <p>Lorsque <code>noopener</code> est utilisé, les noms utilisés pour l'attribut <code>target</code>, qui ne sont pas vides et qui ne sont pas <code>_top</code>, <code>_self</code> ou <code>_parent</code> sont alors traités comme s'ils étaient synonymes de <code>_blank</code> lorsqu'il s'agit de décider d'ouvrir une nouvelle fenêtre ou un nouvel onglet.</p> - </td> - <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}</td> - <td>{{HTMLElement("link")}}</td> - </tr> - <tr> - <td><code>noreferrer</code></td> - <td> - <p>Ce type de lien empêche le navigateur, lorsqu'on navigue vers une autre page, que le l'adresse de la page ou toute autre valeur soit fournie via l'en-tête HTTP {{HTTPHeader("Referer")}}.<br> - (Dans Firefox, avant Firefox 37, ce type ne fonctionnait que pour les liens sur lesquels on cliquait directement, lorsqu'on utilisait un menu « Ouvrir dans un nouvel onglet », ce type était ignoré.</p> - </td> - <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}</td> - <td>{{HTMLElement("link")}}</td> - </tr> - <tr> - <td><code>opener</code> {{experimental_inline}} {{non-standard_inline}}</td> - <td>Annule l'effet de l'ajout implicite de <code>rel="noopener"</code> sur les liens qui possèdent explicitement <code>target="_blank"</code> (voir <a href="https://github.com/whatwg/html/issues/4078">la discussion sur les spécifications HTML</a>, <a href="https://trac.webkit.org/changeset/237144/webkit/">la modification WebKit change</a> et <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1503681">la discussion sur le bug Firefox correspondant</a>).</td> - <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}</td> - <td>{{HTMLElement("link")}}</td> - </tr> - <tr> - <td><code>pingback</code></td> - <td>Ce type définit une URI vers une ressource externee qui doit être appelée si quelqu'un ajoute un commentaire ou une citation à propos de la page web courant. Le protocole pour un tel appel est défini dans la spécification <a href="https://www.hixie.ch/specs/pingback/pingback">Pingback 1.0</a>.<br> - <br> - <strong>Note :</strong> si l'en-tête HTTP {{HTTPHeader("X-Pingback")}} est également présent, celui-ci aura la prioriété sur l'élément {{HTMLElement("link")}} avec ce type de lien.</td> - <td>{{HTMLElement("link")}}</td> - <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}</td> - </tr> - <tr> - <td><code>preconnect</code> {{experimental_inline}}</td> - <td>Ce type de lien suggère au navigateur d'ouvrir une connexion vers le site web visé de façon anticipée, sans diffuser d'information privée et sans télécharger de contenu. Il est utilisé afin de pouvoir récupérer le contenu lié plus rapidement.</td> - <td>{{HTMLElement("link")}}</td> - <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}</td> - </tr> - <tr> - <td><code>prefetch</code></td> - <td>Ce type de lien suggère au navigateur de récupérer la ressource liée de façon anticipée phase car il est probable que l'utilisateur la demande. À partir de Firefox 44, la valeur de l'attribut {{htmlattrxref("crossorigin", "link")}} est prise en compte, ce qui permet d'effectuer des récupérations anticipées anonymes.<br> - <br> - <strong>Note :</strong> <a href="/fr/docs/FAQ_sur_le_préchargement_des_liens">la FAQ sur <code>prefetch</code></a> explique quels liens peuvent être récupérés de façon anticipée et quelles peuvent être les méthodes alternatives.</td> - <td>{{HTMLElement("a")}} {{unimplemented_inline}},<br> - {{HTMLElement("area")}} {{unimplemented_inline}},<br> - {{HTMLElement("link")}}</td> - <td>{{HTMLElement("form")}}</td> - </tr> - <tr> - <td><code>preload</code></td> - <td> - <p>Ce type de lien indique au navigateur de précharger une ressource car celle-ci sera nécessaire par la suite lors de la navigation.</p> + <p>Lorsque <code>noopener</code> est utilisé, les noms utilisés pour l'attribut <code>target</code>, qui ne sont pas vides et qui ne sont pas <code>_top</code>, <code>_self</code> ou <code>_parent</code> sont alors traités comme s'ils étaient synonymes de <code>_blank</code> lorsqu'il s'agit de décider d'ouvrir une nouvelle fenêtre ou un nouvel onglet.</p> + </td> + <td><a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a>, <a href="/fr/docs/Web/HTML/Element/area"><code><area></code></a>, <a href="/fr/docs/Web/HTML/Element/Form"><code><form></code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/link"><code><link></code></a></td> + </tr> + <tr> + <td><code>noreferrer</code></td> + <td> + <p>Ce type de lien empêche le navigateur, lorsqu'on navigue vers une autre page, que le l'adresse de la page ou toute autre valeur soit fournie via l'en-tête HTTP <a href="/fr/docs/Web/HTTP/Headers/Referer"><code>Referer</code></a>.</p> + <p>(Dans Firefox, avant Firefox 37, ce type ne fonctionnait que pour les liens sur lesquels on cliquait directement, lorsqu'on utilisait un menu « Ouvrir dans un nouvel onglet », ce type était ignoré.</p> + </td> + <td><a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a>, <a href="/fr/docs/Web/HTML/Element/area"><code><area></code></a>, <a href="/fr/docs/Web/HTML/Element/Form"><code><form></code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/link"><code><link></code></a></td> + </tr> + <tr> + <td><code>opener</code> {{experimental_inline}}</td> + <td>Annule l'effet de l'ajout implicite de <code>rel="noopener"</code> sur les liens qui possèdent explicitement <code>target="_blank"</code> (voir <a href="https://github.com/whatwg/html/issues/4078">la discussion sur les spécifications HTML</a>, <a href="https://trac.webkit.org/changeset/237144/webkit/">la modification WebKit change</a> et <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1503681">la discussion sur le bug Firefox correspondant</a>).</td> + <td><a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a>, <a href="/fr/docs/Web/HTML/Element/area"><code><area></code></a>, <a href="/fr/docs/Web/HTML/Element/Form"><code><form></code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/link"><code><link></code></a></td> + </tr> + <tr> + <td><code>pingback</code></td> + <td><p>Ce type définit une URI vers une ressource externee qui doit être appelée si quelqu'un ajoute un commentaire ou une citation à propos de la page web courant. Le protocole pour un tel appel est défini dans la spécification <a href="https://www.hixie.ch/specs/pingback/pingback">Pingback 1.0</a>.</p> + <p><strong>Note :</strong> si l'en-tête HTTP <a href="/fr/docs/Web/HTTP/Headers/X-Pingback"><code>X-Pingback</code></a> est également présent, celui-ci aura la prioriété sur l'élément <a href="/fr/docs/Web/HTML/Element/link"><code><link></code></a> avec ce type de lien.</p></td> + <td><a href="/fr/docs/Web/HTML/Element/link"><code><link></code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a>, <a href="/fr/docs/Web/HTML/Element/area"><code><area></code></a>, <a href="/fr/docs/Web/HTML/Element/Form"><code><form></code></a></td> + </tr> + <tr> + <td><code><a href="/fr/docs/Web/HTML/Link_types/preconnect">preconnect</a></code> {{experimental_inline}}</td> + <td>Ce type de lien suggère au navigateur d'ouvrir une connexion vers le site web visé de façon anticipée, sans diffuser d'information privée et sans télécharger de contenu. Il est utilisé afin de pouvoir récupérer le contenu lié plus rapidement.</td> + <td><a href="/fr/docs/Web/HTML/Element/link"><code><link></code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a>, <a href="/fr/docs/Web/HTML/Element/area"><code><area></code></a>, <a href="/fr/docs/Web/HTML/Element/Form"><code><form></code></a></td> + </tr> + <tr> + <td><code><a href="/fr/docs/Web/HTML/Link_types/prefetch">prefetch</a></code></td> + <td><p>Ce type de lien suggère au navigateur de récupérer la ressource liée de façon anticipée phase car il est probable que l'utilisateur la demande. À partir de Firefox 44, la valeur de l'attribut <a href="/fr/docs/Web/HTML/Element/link#attr-crossorigin"><code><crossorigin></code></a> est prise en compte, ce qui permet d'effectuer des récupérations anticipées anonymes.</p> + <p><strong>Note :</strong> <a href="/fr/docs/Web/HTTP/Link_prefetching_FAQ">la FAQ sur <code>prefetch</code></a> explique quels liens peuvent être récupérés de façon anticipée et quelles peuvent être les méthodes alternatives.</p></td> + <td><a href="/fr/docs/Web/HTML/Element/link"><code><link></code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a>, <a href="/fr/docs/Web/HTML/Element/area"><code><area></code></a>, <a href="/fr/docs/Web/HTML/Element/Form"><code><form></code></a></td> + </tr> + <tr> + <td><code><a href="/fr/docs/Web/HTML/Link_types/preload">preload</a></code></td> + <td> + <p>Ce type de lien indique au navigateur de précharger une ressource car celle-ci sera nécessaire par la suite lors de la navigation.</p> - <p>Voir l'article <a href="/fr/docs/Web/HTML/Précharger_du_contenu">Précharger du contenu grâce à <code>rel="preload"</code></a> pour plus d'informations.</p> - </td> - <td>{{HTMLElement("link")}}</td> - <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}</td> - </tr> - <tr> - <td><code>prerender</code> {{experimental_inline}}</td> - <td>Ce type de lien suggère au navigateur de récupérer la ressource liée en avance et de préparer son rendu hors de l'écran afin qu'elle puisse être présentée rapidement à l'utilisateur lorsqu'elle sera nécessaire.</td> - <td>{{HTMLElement("link")}}</td> - <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}</td> - </tr> - <tr> - <td><code>prev</code></td> - <td>Ce type indique que l'hyperlien mène à la ressource précédente dans la série de ressources à laquelle appartient la page actuelle.<br> - <br> - <strong>Note :</strong> les autres types de lien permettant une navigation séquentielle sont : <code>first</code>, next, <code>last</code> (pour respectivement la première, la suivante et la dernière).<br> - <br> - Bien que la valeur <code>previous</code> soit reconnue comme synonyme, elle est incorrecte et ne doit pas être utilisée.</td> - <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}, {{HTMLElement("form")}}</td> - <td><em>Aucun</em>.</td> - </tr> - <tr> - <td><code>search</code></td> - <td>Ce type de lien indique que l'hyperlien cible un document dont l'interface est destinée à la recherche sur ce document, sur ce site ou sur les ressources associées.<br> - <br> - Si l'attribut {{htmlattrxref("type","link")}} vaut <code>application/opensearchdescription+xml</code>, la ressource est <a href="/fr/Add-ons/Creating_OpenSearch_plugins_for_Firefox">un plugin OpenSearch</a> qui peut facilement être ajouté à l'interface de certains navigateurs comme Firefox ou Internet Explorer.</td> - <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}, {{HTMLElement("form")}}</td> - <td><em>Aucun</em>.</td> - </tr> - <tr> - <td><code>sidebar</code> {{non-standard_inline}}</td> - <td>Ce type indique que l'hyperlien mène vers une ressource qui serait plus pertinente au sein d'un contexte de navigation secondaire tel qu'une barre latérale. Les navigateurs qui ne possèdent pas de tel contexte ignoreront ce mot-clé.<br> - <br> - Bien que ce type de lien ait fait partie de la spécification HTML, il a été retiré de la spécification et est uniquement implémenté par Firefox pour les versions antérieures à Firefox 63.</td> - <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td> - <td>{{HTMLElement("form")}}</td> - </tr> - <tr> - <td><code>stylesheet</code></td> - <td>Ce type de lien définit une ressource externe qui doit être utilisée comme une feuille de style. Si le type de la ressource n'est pas défini, le navigateur considèrera que c'est une feuille de style <code>text/css</code>.<br> - <br> - Utilisé avec le mot-clé <code>alternate</code>, il permet de définir <a href="/fr/docs/Web/CSS/Feuilles_de_style_alternatives">une feuille de style alternative</a> auquel cas l'atttribut {{htmlattrxref("title", "link")}} doit être présent et ne doit pas être la chaîne vide.</td> - <td>{{HTMLElement("link")}}</td> - <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}</td> - </tr> - <tr> - <td><code>tag</code></td> - <td>Ce type indique que l'hyperlien fait référence à un document qui décrit l'étiquette (le <em>tag</em>) appliquée à ce document.<br> - <br> - <strong>Note :</strong> ce type de lien ne doit pas être utilisé pour renvoyer vers un nuage de <em>tags</em> car ce dernier concerne un ensemble de pages et pas uniquement le document courant.</td> - <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td> - <td>{{HTMLElement("link")}}, {{HTMLElement("form")}}</td> - </tr> - <tr> - <td><code>up</code> {{obsolete_inline}}</td> - <td>Ce type de lien indique que la page fait partie d'une structure hiérarchique et que l'hyperlien mène vers une ressource située au niveau supérieur de cette structure.<br> - <br> - Le nombre de <code>up</code> indique la différence de profondeur dans la hiérarchie entre la page courante et la page associée.</td> - <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td> - <td>{{HTMLElement("form")}}</td> - </tr> - </tbody> + <p>Voir l'article <a href="/fr/docs/Web/HTML/Preloading_content">Précharger du contenu grâce à <code>rel="preload"</code></a> pour plus d'informations.</p> + </td> + <td><a href="/fr/docs/Web/HTML/Element/link"><code><link></code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a>, <a href="/fr/docs/Web/HTML/Element/area"><code><area></code></a>, <a href="/fr/docs/Web/HTML/Element/Form"><code><form></code></a></td> + </tr> + <tr> + <td><code><a href="/fr/docs/Web/HTML/Link_types/prerender">prerender</a></code> {{experimental_inline}}</td> + <td>Ce type de lien suggère au navigateur de récupérer la ressource liée en avance et de préparer son rendu hors de l'écran afin qu'elle puisse être présentée rapidement à l'utilisateur lorsqu'elle sera nécessaire.</td> + <td><a href="/fr/docs/Web/HTML/Element/link"><code><link></code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a>, <a href="/fr/docs/Web/HTML/Element/area"><code><area></code></a>, <a href="/fr/docs/Web/HTML/Element/Form"><code><form></code></a></td> + </tr> + <tr> + <td><code>prev</code></td> + <td><p>Ce type indique que l'hyperlien mène à la ressource précédente dans la série de ressources à laquelle appartient la page actuelle.</p> + <p><strong>Note :</strong> les autres types de lien permettant une navigation séquentielle sont : <code>first</code>, next, <code>last</code> (pour respectivement la première, la suivante et la dernière).</p> + <p>Bien que la valeur <code>previous</code> soit reconnue comme synonyme, elle est incorrecte et ne doit pas être utilisée.</p></td> + <td><a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a>, <a href="/fr/docs/Web/HTML/Element/area"><code><area></code></a>, <a href="/fr/docs/Web/HTML/Element/link"><code><link></code></a>, <a href="/fr/docs/Web/HTML/Element/Form"><code><form></code></a></td> + <td><em>Aucun</em>.</td> + </tr> + <tr> + <td><code>search</code></td> + <td><p>Ce type de lien indique que l'hyperlien cible un document dont l'interface est destinée à la recherche sur ce document, sur ce site ou sur les ressources associées.</p> + <p>Si l'attribut <a href="/fr/docs/Web/HTML/Element/link#attr-type"><code>type</code></a> vaut <code>application/opensearchdescription+xml</code>, la ressource est <a href="/fr/docs/Web/OpenSearch">un plugin OpenSearch</a> qui peut facilement être ajouté à l'interface de certains navigateurs comme Firefox ou Internet Explorer.</p></td> + <td><a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a>, <a href="/fr/docs/Web/HTML/Element/area"><code><area></code></a>, <a href="/fr/docs/Web/HTML/Element/link"><code><link></code></a>, <a href="/fr/docs/Web/HTML/Element/Form"><code><form></code></a></td> + <td><em>Aucun</em>.</td> + </tr> + <tr> + <td><code>shortlink</code></td> + <td><p><a href="https://code.google.com/archive/p/shortlink/wikis/Specification.wiki">Spécification pour <code>shortlink</code></a></p> + <p>Page Wikipédia : <a href="https://fr.wikipedia.org/wiki/URL_shortening">Le raccourcissement des URL</a></p> + <p>Certains sites web créent des liens courts pour faciliter le partage de liens par messagerie instantanée.</p></td> + <td><a href="/fr/docs/Web/HTML/Element/link"><code><link></code></a></td> + <td></td> + </tr> + <tr> + <td><code>sidebar</code> {{non-standard_inline}}{{Obsolete_Inline("Gecko63")}}</td> + <td><p>Ce type indique que l'hyperlien mène vers une ressource qui serait plus pertinente au sein d'un contexte de navigation secondaire tel qu'une barre latérale. Les navigateurs qui ne possèdent pas de tel contexte ignoreront ce mot-clé.</p> + <p>Bien que ce type de lien ait fait partie de la spécification HTML, il a été retiré de la spécification et est uniquement implémenté par Firefox pour les versions antérieures à Firefox 63.</p></td> + <td><a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a>, <a href="/fr/docs/Web/HTML/Element/area"><code><area></code></a>, <a href="/fr/docs/Web/HTML/Element/link"><code><link></code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/Form"><code><form></code></a></td> + </tr> + <tr> + <td><code>stylesheet</code></td> + <td><p>Ce type de lien définit une ressource externe qui doit être utilisée comme une feuille de style. Si le type de la ressource n'est pas défini, le navigateur considèrera que c'est une feuille de style <code>text/css</code>.</p> + <p>Utilisé avec le mot-clé <code>alternate</code>, il permet de définir <a href="/fr/docs/Web/CSS/Alternative_style_sheets">une feuille de style alternative</a> auquel cas l'atttribut <a href="/fr/docs/Web/HTML/Element/link#attr-title"><code><title></code></a> doit être présent et ne doit pas être la chaîne vide.</p></td> + <td><a href="/fr/docs/Web/HTML/Element/link"><code><link></code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a>, <a href="/fr/docs/Web/HTML/Element/area"><code><area></code></a>, <a href="/fr/docs/Web/HTML/Element/Form"><code><form></code></a></td> + </tr> + <tr> + <td><code>tag</code></td> + <td><p>Ce type indique que l'hyperlien fait référence à un document qui décrit l'étiquette (le <em>tag</em>) appliquée à ce document.</p> + <p><strong>Note :</strong> ce type de lien ne doit pas être utilisé pour renvoyer vers un nuage de <em>tags</em> car ce dernier concerne un ensemble de pages et pas uniquement le document courant.</p></td> + <td><a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a>, <a href="/fr/docs/Web/HTML/Element/area"><code><area></code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/link"><code><link></code></a>, <a href="/fr/docs/Web/HTML/Element/Form"><code><form></code></a></td> + </tr> + <tr> + <td><code>up</code> {{obsolete_inline}}</td> + <td><p>Ce type de lien indique que la page fait partie d'une structure hiérarchique et que l'hyperlien mène vers une ressource située au niveau supérieur de cette structure.</p> + <p>Le nombre de <code>up</code> indique la différence de profondeur dans la hiérarchie entre la page courante et la page associée.</p></td> + <td><a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a>, <a href="/fr/docs/Web/HTML/Element/area"><code><area></code></a>, <a href="/fr/docs/Web/HTML/Element/link"><code><link></code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/Form"><code><form></code></a></td> + </tr> + </tbody> </table> <h2 id="Spécifications">Spécifications</h2> <table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('Preload','#x2.link-type-preload','preload')}}</td> - <td>{{Spec2('Preload')}}</td> - <td>Ajout du type <code>preload</code>.</td> - </tr> - <tr> - <td>{{SpecName('Resource Hints', '#dfn-preconnect', 'preconnect')}}</td> - <td>{{Spec2('Resource Hints')}}</td> - <td>Ajout des types <code>dns-prefetch</code>, <code>preconnect</code> et <code>prerender</code>.</td> - </tr> - <tr> - <td>{{SpecName("HTML WHATWG", "links.html#linkTypes", "link types")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Ajout de <code>opener</code>. <code>noopener</code> devient le comportement par défaut pour les liens avec <code>target="_blank"</code>.</td> - </tr> - <tr> - <td>{{SpecName("HTML5 W3C", "links.html#linkTypes", "link types")}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td>Ajout de <code>tag</code>, <code>search</code>, <code>prefetch</code>, <code>noreferrer</code>, <code>nofollow</code>, <code>icon</code> et <code>author</code>.<br> - Renommage de <code>copyright</code> en <code>license</code>.<br> - Suppression de <code>start</code>, <code>chapter</code>, <code>section</code>, <code>subsection</code> et <code>appendix</code></td> - </tr> - <tr> - <td>{{SpecName("HTML4.01", "types.html#type-links", "link types")}}</td> - <td>{{Spec2('HTML4.01')}}</td> - <td>Ajout de <code>alternate</code>, <code>stylesheet</code>, <code>start</code>, <code>chapter</code>, <code>section</code>, <code>subsection</code>, <code>appendix</code> et <code>bookmark</code>.<br> - Renomme <code>previous</code> en <code>prev</code>.<br> - Suppression de <code>top</code> et <code>search</code>.</td> - </tr> - <tr> - <td>{{SpecName("HTML3.2", "#link", "<link>")}}</td> - <td>Obsolète</td> - <td>Ajout de <code>top</code>, <code>contents</code>, <code>index</code>, <code>glossary</code>, <code>copyright</code>, <code>next</code>, <code>previous</code>, <code>help</code> et <code>search</code>.</td> - </tr> - <tr> - <td>{{RFC(1866, "HTML 2.0")}}</td> - <td>Obsolète</td> - <td>Définition initiale.</td> - </tr> - </tbody> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Preload','#x2.link-type-preload','preload')}}</td> + <td>{{Spec2('Preload')}}</td> + <td>Ajout du type <code>preload</code>.</td> + </tr> + <tr> + <td>{{SpecName('Resource Hints', '#dfn-preconnect', 'preconnect')}}</td> + <td>{{Spec2('Resource Hints')}}</td> + <td>Ajout des types <code>dns-prefetch</code>, <code>preconnect</code> et <code>prerender</code>.</td> + </tr> + <tr> + <td>{{SpecName("HTML WHATWG", "links.html#linkTypes", "link types")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Ajout de <code>opener</code>. <code>noopener</code> devient le comportement par défaut pour les liens avec <code>target="_blank"</code>.</td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "links.html#linkTypes", "link types")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td><p>Ajout de <code>tag</code>, <code>search</code>, <code>prefetch</code>, <code>noreferrer</code>, <code>nofollow</code>, <code>icon</code> et <code>author</code>.</p> + <p>Renommage de <code>copyright</code> en <code>license</code>.</p> + <p>Suppression de <code>start</code>, <code>chapter</code>, <code>section</code>, <code>subsection</code> et <code>appendix</code></p></td> + </tr> + <tr> + <td>{{SpecName("HTML4.01", "types.html#type-links", "link types")}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td><p>Ajout de <code>alternate</code>, <code>stylesheet</code>, <code>start</code>, <code>chapter</code>, <code>section</code>, <code>subsection</code>, <code>appendix</code> et <code>bookmark</code>.</p> + <p>Renommage de <code>previous</code> en <code>prev</code>.</p> + <p>Suppression de <code>top</code> et <code>search</code>.</p></td> + </tr> + <tr> + <td>{{SpecName("HTML3.2", "#link", "<link>")}}</td> + <td><span class="spec-obsolete">Obsolete</span></td> + <td>Ajout de <code>top</code>, <code>contents</code>, <code>index</code>, <code>glossary</code>, <code>copyright</code>, <code>next</code>, <code>previous</code>, <code>help</code> et <code>search</code>.</td> + </tr> + <tr> + <td>{{RFC(1866, "HTML 2.0")}}</td> + <td><span class="spec-obsolete">Obsolete</span></td> + <td>Définition initiale.</td> + </tr> + </tbody> </table> <h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> -<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> - <p>{{Compat("html.elements.link.rel")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{HTMLElement("link")}}</li> - <li>{{HTMLElement("a")}}</li> - <li>{{HTMLElement("area")}}</li> -</ul> diff --git a/files/fr/web/html/microdata/index.html b/files/fr/web/html/microdata/index.html index b07c99ddee..cd51409509 100644 --- a/files/fr/web/html/microdata/index.html +++ b/files/fr/web/html/microdata/index.html @@ -2,140 +2,168 @@ title: Microdonnées slug: Web/HTML/Microdata tags: + - Composing + - Example - HTML - Microdata - - Microdonnées + - Reference + - SEO + - Search translation_of: Web/HTML/Microdata original_slug: Web/HTML/Microdonnées --- -<div>{{QuickLinksWithSubpages("/en-US/docs/Web/HTML")}}</div> - -<p>Les microdonnées (<em>microdata</em>) sont une partie de la spécification HTML du <a href="/fr/docs/Glossaire/WHATWG">WHATWG</a> qui est utilisée afin de fournir des métadonnées sur le contenu des pages web. Les moteurs de recherche, les robots (<em>crawlers</em>) d'analyse peuvent traiter les microdonnées d'une page web pour améliorer l'expérience de navigation. Les moteurs de recherches peuvent tirer parti des informations pour obtenir une meilleure pertinence. Les microdonnées sont structurées grâce à un vocabulaire permettant de décrire des objets qui sont des groupes de paires de noms/valeurs. Le but des microdonnées est de faciliter l'annotation des éléments HTML et d'être plus simple à utiliser que RDFa ou les microformats.</p> +<p class="summary">Les microdonnées (<em>microdata</em>) sont une partie de la spécification HTML du <a href="/fr/docs/Glossary/WHATWG">WHATWG</a> qui est utilisée afin de fournir des métadonnées sur le contenu des pages web. Les moteurs de recherche, les robots (<em>crawlers</em>) d'analyse peuvent traiter les microdonnées d'une page web pour améliorer l'expérience de navigation. Les moteurs de recherches peuvent tirer parti des informations pour obtenir une meilleure pertinence. Les microdonnées sont structurées grâce à un vocabulaire permettant de décrire des objets qui sont des groupes de paires de noms/valeurs. Le but des microdonnées est de faciliter l'annotation des éléments HTML et d'être plus simple à utiliser que RDFa ou les microformats.</p> <p>Les microdonnées sont des groupes de paires nom-valeur. Ces groupes sont appelés des objets (<em>items</em>) et chaque paire nom-valeur est une propriété. Les objets et les propriétés s'inscrivent dans des éléments HTML classiques :</p> <ul> - <li>Pour créer un objet, on utilise l'attribut <strong><code>itemscope</code></strong></li> - <li>Pour ajouter une propriété, on utilise l'attribut <strong><code>itemprop</code></strong> sur l'un des descendants.</li> + <li>Pour créer un objet, on utilise l'attribut <strong><code>itemscope</code></strong></li> + <li>Pour ajouter une propriété, on utilise l'attribut <strong><code>itemprop</code></strong> sur l'un des descendants.</li> </ul> -<h2 id="Vocabulaires">Vocabulaires</h2> +<h2 id="Vocabularies">Vocabulaires</h2> <p>Google et les autres moteurs de recherches participent au vocabulaire défini par <a href="https://schema.org/">schema.org</a> pour structurer les données. Ce vocabulaire définit un ensemble standard de types et de noms de propriétés. Par exemple <code><a href="https://schema.org/MusicEvent">MusicEvent</a></code> indique un événement musical dont les propriétés <code><a href="https://schema.org/startDate">startDate</a></code> et <code><a href="https://schema.org/location">location</a></code> utilisées pour définir les détails du concert. Dans ce cas, l'URL <code><a href="https://schema.org/MusicEvent">https://schema.org/MusicEvent</a></code> sera l'URL utilisée pour l'attribut <code>itemtype</code> et les propriétés <code>startDate</code> et <code>location</code> seront les propriétés utilisées, définies par <code><a href="https://schema.org/MusicEvent">https://schema.org/MusicEvent</a></code>.</p> -<p>Les vocabulaires de microdonnées fournissent la sémantique (c'est-à-dire la signification) d'un élément. Les développeurs et auteurs web peuvent construire des vocabulaires spécifiques ou réutiliser ceux disponibles sur le Web comme <a href="https://schema.org">schema.org</a>.</p> +<div class="notecard note"> + <p><strong>Note :</strong> Pour en savoir plus sur les attributs <code>itemtype</code>, consultez le site <a href="http://schema.org/Thing">http://schema.org/Thing</a>.</p> +</div> + +<p>Les vocabulaires de microdonnées fournissent la sémantique ou la signification d'un élément. Les développeurs Web peuvent concevoir un vocabulaire personnalisé ou utiliser des vocabulaires disponibles sur le Web, tels que le vocabulaire largement utilisé <a href="http://schema.org">schema.org</a>. Une collection de vocabulaires de balisage couramment utilisés est fournie par Schema.org.</p> -<p>Plusieurs moteurs de recherche (Google, Bing et Yahoo!) s'appuient sur <a href="https://schema.org/">schema.org</a> pour améliorer les résultats de recherche.</p> +<p>Vocabulaires couramment utilisés :</p> + +<ul> + <li>Œuvres créatives : <a href="http://schema.org/CreativeWork">CreativeWork</a>, <a href="http://schema.org/Book">Book</a>, <a href="http://schema.org/Movie">Movie</a>, <a href="http://schema.org/MusicRecording">MusicRecording</a>, <a href="http://schema.org/Recipe">Recipe</a>, <a href="http://schema.org/TVSeries">TVSeries</a></li> + <li>Objets non textuels incorporés : <a href="http://schema.org/AudioObject">AudioObject</a>, <a href="http://schema.org/ImageObject">ImageObject</a>, <a href="http://schema.org/VideoObject">VideoObject</a></li> + <li><a href="http://schema.org/Event">Event</a></li> + <li><a href="http://schema.org/docs/meddocs.html">Health and medical types</a> : Notes sur les types de santé et médicaux sous <a href="http://schema.org/MedicalEntity">MedicalEntity</a></li> + <li><a href="http://schema.org/Organization">Organization</a></li> + <li><a href="http://schema.org/Person">Person</a></li> + <li><a href="http://schema.org/Place">Place</a>, <a href="http://schema.org/LocalBusiness">LocalBusiness</a>, <a href="http://schema.org/Restaurant">Restaurant</a></li> + <li><a href="http://schema.org/Product">Product</a>, <a href="http://schema.org/Offer">Offer</a>, <a href="http://schema.org/AggregateOffer">AggregateOffer</a></li> + <li><a href="http://schema.org/Review">Review</a>, <a href="http://schema.org/AggregateRating">AggregateRating</a></li> + <li><a href="http://schema.org/Action">Action</a></li> + <li><a href="http://schema.org/Thing">Thing</a></li> + <li><a href="http://schema.org/Intangible">Intangible</a></li> +</ul> -<h2 id="Localisation">Localisation</h2> +<p>Les principaux opérateurs de moteurs de recherche comme Google, Microsoft et Yahoo ! s'appuient sur le vocabulaire <a href="http://schema.org/">schema.org</a> pour améliorer les résultats de recherche. Pour certains usages, un vocabulaire ad-hoc est adéquat. Pour d'autres, un vocabulaire devra être conçu. Dans la mesure du possible, les auteurs sont encouragés à réutiliser les vocabulaires existants, car cela facilite la réutilisation du contenu.</p> -<p>Dans certains cas, les moteurs de recherche couvrent un public régional. Certaines extensions sont donc ajoutées aux microdonnées pour fournir du contenu spécifique. Ainsi, <a href="https://www.yandex.com/">Yandex</a> qui est un moteur de recherche très présent en Russie supporte des microformats comme <em>hCard</em>, <em>hRecipe</em>, <em>hReview</em> et <em>hProduct</em> et fournit son propre format pour dédfinir les termes et les articles encyclopédiques. Cette extension a été construite afin de résoudre les problème de translitération entre les alphabets cyrillique et latin.</p> +<h2 id="Localization">Localisation</h2> -<h2 id="Attributs_globaux_liés_aux_microdonnées">Attributs globaux liés aux microdonnées</h2> +<p>Dans certains cas, les moteurs de recherche couvrent un public régional. Certaines extensions sont donc ajoutées aux microdonnées pour fournir du contenu spécifique. Ainsi, <a href="https://www.yandex.com/">Yandex</a> qui est un moteur de recherche très présent en Russie supporte des microformats comme <em>hCard</em>, <em>hRecipe</em>, <em>hReview</em> et <em>hProduct</em> et fournit son propre format pour dédfinir les termes et les articles encyclopédiques. Cette extension a été construite afin de résoudre les problèmes de translitération entre les alphabets cyrillique et latin.</p> -<p>Certains attributs globaux concernent directement les microdonnées :</p> +<h2 id="Global_attributes">Attributs globaux liés aux microdonnées</h2> <dl> - <dt><code><a href="/fr/docs/Web/HTML/Attributs_globaux/itemid">itemid</a></code></dt> + <dt><a href="/fr/docs/Web/HTML/Global_attributes/itemid"><code>itemid</code></a></dt> <dd>Cet attribut est l'identifiant unique d'un objet.</dd> - <dt><code><a href="/fr/docs/Web/HTML/Attributs_globaux/itemprop">itemprop</a></code></dt> + <dt><a href="/fr/docs/Web/HTML/Global_attributes/itemprop"><code>itemprop</code></a></dt> <dd>Cet attribut est utilisé afin d'ajouter des propriétés à un élément.</dd> - <dt><code><a href="/fr/docs/Web/HTML/Attributs_globaux/itemref">itemref</a></code></dt> + <dt><a href="/fr/docs/Web/HTML/Global_attributes/itemref"><code>itemref</code></a></dt> <dd>Cet attribut permet de faire référence à d'autres éléments HTML décrivant le même objet.</dd> - <dt><code><a href="/fr/docs/Web/HTML/Attributs_globaux/itemscope">itemscope</a></code></dt> + <dt><a href="/fr/docs/Web/HTML/Global_attributes/itemscope"><code>itemscope</code></a></dt> <dd>Cet attribut définit la portée du vocabulaire déclaré par <code>itemtype</code> et englobe généralement un objet.</dd> - <dt><code><a href="/fr/docs/Web/HTML/Attributs_globaux/itemtype">itemtype</a></code></dt> - <dd>Cet attribut définit le vocabulaire qui spécifie le modèle de données utilisé pour décrire les objets.</dd> + <dt><a href="/fr/docs/Web/HTML/Global_attributes/itemtype"><code>itemtype</code></a></dt> + <dd>Cet attribut définit l'URL du vocabulaire qui spécifie le modèle de données utilisé pour décrire les objets.</dd> </dl> -<h2 id="Exemple">Exemple</h2> +<h2 id="Example">Exemple</h2> <h3 id="HTML">HTML</h3> <pre class="brush: html"><div itemscope itemtype="https://schema.org/SoftwareApplication"> <span itemprop="name">Angry Birds</span> - - REQUIRES <span itemprop="operatingSystem">ANDROID</span><br> + NÉCESSITE <span itemprop="operatingSystem">ANDROID</span><br> <link itemprop="applicationCategory" href="https://schema.org/GameApplication"/> <div itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating"> - RATING: + ÉVALUATION : <span itemprop="ratingValue">4.6</span> ( - <span itemprop="ratingCount">8864</span> ratings ) + <span itemprop="ratingCount">8864</span> notes ) </div> <div itemprop="offers" itemscope itemtype="https://schema.org/Offer"> - Price: $<span itemprop="price">1.00</span> + Prix : <span itemprop="price">1.00</span>$ <meta itemprop="priceCurrency" content="USD" /> </div> </div></pre> -<h3 id="Structure_de_donnée">Structure de donnée</h3> +<h3 id="Structured_data">Données structurées</h3> <table class="standard-table"> - <tbody> - <tr> - <td colspan="1" rowspan="4">itemscope</td> - <td>itemtype</td> - <td colspan="2" rowspan="1">SoftwareApplication (https://schema.org/SoftwareApplication)</td> - </tr> - <tr> - <td>itemprop</td> - <td>name</td> - <td>Angry Birds</td> - </tr> - <tr> - <td>itemprop</td> - <td>operatingSystem</td> - <td>ANDROID</td> - </tr> - <tr> - <td>itemprop</td> - <td>applicationCategory</td> - <td>GameApplication (https://schema.org/GameApplication)</td> - </tr> - <tr> - <td colspan="1" rowspan="3">itemscope</td> - <td>itemprop[itemtype]</td> - <td colspan="2" rowspan="1">aggregateRating [AggregateRating]</td> - </tr> - <tr> - <td>itemprop</td> - <td>ratingValue</td> - <td>4.6</td> - </tr> - <tr> - <td>itemprop</td> - <td>ratingCount</td> - <td>8864</td> - </tr> - <tr> - <td colspan="1" rowspan="3">itemscope</td> - <td>itemprop[itemtype]</td> - <td colspan="2" rowspan="1">offers [Offer]</td> - </tr> - <tr> - <td>itemprop</td> - <td>price</td> - <td>1.00</td> - </tr> - <tr> - <td>itemprop</td> - <td>priceCurrency</td> - <td>USD</td> - </tr> - </tbody> + <tbody> + <tr> + <td rowspan="4">itemscope</td> + <td>itemtype</td> + <td colspan="2">SoftwareApplication (https://schema.org/SoftwareApplication)</td> + </tr> + <tr> + <td>itemprop</td> + <td>name</td> + <td>Angry Birds</td> + </tr> + <tr> + <td>itemprop</td> + <td>operatingSystem</td> + <td>ANDROID</td> + </tr> + <tr> + <td>itemprop</td> + <td>applicationCategory</td> + <td>GameApplication (https://schema.org/GameApplication)</td> + </tr> + <tr> + <td rowspan="3">itemscope</td> + <td>itemprop[itemtype]</td> + <td colspan="2">aggregateRating [AggregateRating]</td> + </tr> + <tr> + <td>itemprop</td> + <td>ratingValue</td> + <td>4.6</td> + </tr> + <tr> + <td>itemprop</td> + <td>ratingCount</td> + <td>8864</td> + </tr> + <tr> + <td rowspan="3">itemscope</td> + <td>itemprop[itemtype]</td> + <td colspan="2">offers [Offer]</td> + </tr> + <tr> + <td>itemprop</td> + <td>price</td> + <td>1.00</td> + </tr> + <tr> + <td>itemprop</td> + <td>priceCurrency</td> + <td>USD</td> + </tr> + </tbody> </table> -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +<h3 id="Result">Résultat</h3> + +<p>{{EmbedLiveSample("HTML", "", "100")}}</p> + +<div class="note"> + <p><strong>Note :</strong> Un outil pratique pour extraire les structures de microdonnées du HTML est l'<a href="https://developers.google.com/search/docs/guides/intro-structured-data">outil de test des données structurées</a> de Google. Essayez-le sur le HTML présenté ci-dessus.</p> +</div> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> <p>Fonctionnalité ajoutée dans Firefox 16 et retirée dans Firefox 49.</p> -<h2 id="Voir_aussi">Voir aussi</h2> +<h2 id="See_also">Voir aussi</h2> <ul> - <li><a href="/fr/docs/Web/HTML/Attributs_universels">Les attributs universels</a></li> - <li> - <p><a href="/fr/docs/Web/API/Microdata_DOM_API">L'API Microdata</a></p> - </li> + <li><a href="/fr/docs/Web/HTML/Global_attributes">Les attributs universels</a></li> </ul> + +<div>{{QuickLinksWithSubpages("/en-US/docs/Web/HTML")}}</div> diff --git a/files/fr/web/html/microformats/index.html b/files/fr/web/html/microformats/index.html index 9144f6683b..dee6a2c39f 100644 --- a/files/fr/web/html/microformats/index.html +++ b/files/fr/web/html/microformats/index.html @@ -1,33 +1,43 @@ --- -title: microformats +title: Microformats slug: Web/HTML/microformats tags: + - Composing - HTML - - Microformat - - µFormat + - Microformats + - NeedsContent + - NeedsMarkupWork + - Reference + - SEO + - Search translation_of: Web/HTML/microformats --- -<div>{{HTMLSidebar}}</div> +<p class="summary">Les <a href="https://microformats.org/"><dfn>microformats</dfn></a> (parfois abrégés <strong>μF</strong>) sont des normes utilisées pour intégrer la sémantique et les données structurées dans le HTML, et fournir une API à utiliser par les moteurs de recherche, les agrégateurs et autres outils. Ces modèles minimaux de HTML sont utilisés pour marquer des entités allant d'informations fondamentales à des informations spécifiques à un domaine, telles que des personnes, des organisations, des événements et des lieux. Les microformats utilisent des vocabulaires de soutien pour décrire les objets et des paires nom-valeur pour attribuer des valeurs à leurs propriétés. Les propriétés sont transportées dans des attributs de classe qui peuvent être ajoutés à tout élément HTML, tandis que les valeurs des données réutilisent le contenu des éléments HTML et les attributs sémantiques. Microformats2 est une mise à jour de microformats qui offre un moyen plus simple d'annoter la syntaxe structurée et les vocabulaires HTML que les approches précédentes utilisant RDFa et microdata qui nécessitent l'apprentissage de nouveaux attributs.</p> -<p><a href="http://microformats.org/"><dfn>Les microformats</dfn></a> (parfois abrégés <strong>μF</strong>) sont un ensemble de conventions pour intégrer une sémantique en HTML et fournir une API utilisable par les moteurs de recherche, les agrégateurs et d'autres outils. Ces constructions HTML permettent de marquer des entités pouvant être génériques (personnes, organisations, évènements, etc.) ou spécifiques à un domaine.</p> +<p>Les microformats sont pris en charge par tous les principaux moteurs de recherche. Les moteurs de recherche bénéficient grandement d'un accès direct à ces données structurées, car elles leur permettent de comprendre les informations contenues dans les pages Web et de fournir des résultats plus pertinents aux utilisateurs. En plus d'être lisible par les machines, leur format est conçu pour être facilement lu par les humains.</p> -<p>Les microformats sont utilisés par l'ensemble des principaux moteurs de recherche. Les données associées sont fournies via l'attribut {{HTMLAttrXRef("class")}} et peuvent donc être ajoutées à n'importe quel élément HTML.</p> +<ul> + <li>Pour créer un objet microformats, les noms de classe h-* sont utilisés dans l'attribut class.</li> + <li>Pour ajouter une propriété à un objet, les noms de classe p-*, u-*, dt-*, e-* sont utilisés sur un des descendants de l'objet.</li> +</ul> -<p>Les valeurs fournies sont censées être interprétables par des machines et lisibles par les humains.</p> <p>Il existe <a href="http://microformats.org/wiki/microformats2#Parsers">différentes bibliothèques d'analyse pour la plupart des langages de programmation</a> qui permettent d'analyser les données microformats2.</p> -<h3 id="Le_fonctionnement_des_microformat">Le fonctionnement des microformat</h3> +<h2 id="How_Microformats_Work">Comment fonctionnent les microformats</h2> <p>Un auteur d'une page web peut ajouter des microformats via le contenu HTML. Ainsi, si un auteur veut s'identifier via un élément, il peut utiliser une classe <a href="http://microformats.org/wiki/h-card">h-card</a> :</p> -<div dir="ltr" style="text-align: left;"> -<pre class="source-html4strict"><a class="h-card" href="http://example.com">Joe Bloggs</a></pre> +<h3 id="HTML_Example">Exemple HTML</h3> + +<pre class="brush: html"><a class="h-card" href="http://alice.example.com">Alice Blogger</a></pre> + +<p>Lorsqu'un parseur de microformat détectera cette donnée, il saura que cette page contient une « carte » qui décrit une personne ou une organisation nommée <code>Alice Blogger</code> et dont l'URL est <code>http://alice.example.com/</code>. Le parseur rend ensuite cette donnée accessible via des API qui pourront être utilisées par des applications.</p> -<p>Lorsqu'un parseur de microformat détectera cette donnée, il saura que cette page contient une « carte » qui décrit une personne ou une organisation nommée <code>Joe Blogger</code> et donc l'URL est <code>http://example.com/</code>. Le parseur rend ensuite cette donnée accessible via des API qui pourront être utilisées par des applications.</p> +<p>Comme dans cet exemple, certains modèles de balisage ne nécessitent qu'un seul nom de classe racine de microformat, que les analyseurs syntaxiques utilisent pour trouver quelques propriétés génériques telles que <code>name</code>, <code>url</code> et <code>photo</code>.</p> </div> -<h2 id="Préfixes_et_microformats">Préfixes et microformats</h2> +<h2 id="Microformats_Prefixes">Préfixes et microformats</h2> <p>Tous les microformats se composent d'une racine et d'un ensemble de propriétés. Les propriétés sont optionnelles et peuvent avoir plusieurs valeurs (si une application a besoin d'une seule valeur, elle pourra utiliser la première valeur d'une propriété). Les données hiérarchisées sont représentées avec des microformats imbriqués.</p> @@ -45,23 +55,23 @@ translation_of: Web/HTML/microformats </li> <li><strong>"p-*" pour les propriétés textuelles</strong> (ex. "p-name", "p-summary") <ul> - <li>Un contenu texte. Pour certains éléments HTML, certains attributs spécifiques seront utilisés (ex. {{HTMLAttrxref("alt","img")}} pour {{HTMLElement("img")}}, {{HTMLAttrxref("title","abbr")}} pour {{HTMLElement("abbr")}}).</li> + <li>Un contenu texte. Pour certains éléments HTML, certains attributs spécifiques seront utilisés (ex. <a href="/fr/docs/Web/HTML/Element/Img#attr-alt"><code>alt</code></a> pour <a href="/fr/docs/Web/HTML/Element/Img"><code><img></code></a>, <a href="/fr/docs/Web/HTML/Element/abbr#attr-title"><code>title</code></a> pour <a href="/fr/docs/Web/HTML/Element/abbr"><code><abbr></code></a>).</li> </ul> </li> <li><strong>"u-*" pour les propriétés qui sont des URL</strong> (ex. "u-url", "u-photo", "u-logo") <ul> - <li>Une analyse spécifique est nécessaire et ce sont les attributs plutôt que le contenu de l'élément qui seront utilisés (ex. {{HTMLAttrxref("src","img")}} pour {{HTMLElement("img")}}, {{HTMLAttrxref("href","a")}} pour {{HTMLElement("a")}}, {{HTMLAttrxref("object","data")}} pour {{HTMLElement("data")}}, etc.).</li> + <li>Analyse spéciale : attributs d'éléments <a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a>/<a href="/fr/docs/Web/HTML/Element/a#attr-href"><code>href</code></a>, <a href="/fr/docs/Web/HTML/Element/Img"><code><img></code></a>/<a href="/fr/docs/Web/HTML/Element/Img#attr-src"><code>src</code></a>, <a href="/fr/docs/Web/HTML/Element/object"><code><object></code></a>/<a href="/fr/docs/Web/HTML/Element/object#attr-data"><code>data</code></a> etc. attributs sur le contenu des éléments.</li> </ul> </li> <li><strong>"dt-*" pour les propriétés temporelles (date/heure)</strong> (ex. "dt-start", "dt-end", "dt-bday") <ul> - <li>Une analyse spécifique est nécessaire.</li> + <li>Analyse syntaxique spéciale : attribut <a href="/fr/docs/Web/HTML/Element/time#attr-datetime"><code>datetime</code></a> de l'élément <a href="/fr/docs/Web/HTML/Element/time"><code><time></code></a>, <a href="https://microformats.org/wiki/value-class-pattern" title="value-class-pattern">value-class-pattern</a> et analyse séparée de la valeur date-heure pour plus de lisibilité.</li> </ul> </li> <li><strong>"e-*" pour les arborescences</strong> où l'intégralité de la hiérarchie de l'élément est la valeur à récupérer (ex. "e-content"). Le préfixe "e-" peut être retenu en anglais comme "<em><strong>e</strong>lement tree</em>", "<em><strong>e</strong>mbedded markup</em>" ou "<em><strong>e</strong>ncapsulated markup</em>".</li> </ul> -<h2 id="Exemples_de_microformats">Exemples de microformats</h2> +<h2 id="Some_microformats_examples">Exemples de microformats</h2> <h3 id="h-card">h-card</h3> @@ -69,6 +79,8 @@ translation_of: Web/HTML/microformats <p>La valeur de chaque propriété est définie en HTML via l'attribut <code>class</code>.</p> +<h4 id="Example_h-card">Exemple de h-card</h4> + <div dir="ltr" style="text-align: left;"> <pre class="brush: html"><p class="h-card"> <img class="u-photo" src="http://example.org/photo.png" alt="" /> @@ -81,49 +93,48 @@ translation_of: Web/HTML/microformats </div> <table class="standard-table"> - <tbody> - <tr> - <th>Propriété</th> - <th>Description</th> - </tr> - <tr> - <td><strong><code>p-name</code></strong></td> - <td>Le nom complet et formaté de la personne ou de l'organisation.</td> - </tr> - <tr> - <td><strong><code>u-email</code></strong></td> - <td>L'adresse électronique.</td> - </tr> - <tr> - <td><strong><code>u-photo</code></strong></td> - <td>Une photo pour la personne ou l'organisation.</td> - </tr> - <tr> - <td><strong><code>u-url</code></strong></td> - <td>La page d'accueil ou une URL représentant la personne ou l'organisation.</td> - </tr> - <tr> - <td><strong><code>u-uid</code></strong></td> - <td>Un identifiant universel unique (de préférence une URL canonique).</td> - </tr> - <tr> - <td><strong><code>p-street-address</code></strong></td> - <td>L'adresse composée du numéro et du nom de la rue.</td> - </tr> - <tr> - <td><strong><code>p-locality</code></strong></td> - <td>La ville ou le village de résidence.</td> - </tr> - <tr> - <td><strong><code>p-country-name</code></strong></td> - <td>Le nom du pays de résidence.</td> - </tr> - </tbody> + <tbody> + <tr> + <th>Propriété</th> + <th>Description</th> + </tr> + <tr> + <td><strong><code>p-name</code></strong></td> + <td>Le nom complet et formaté de la personne ou de l'organisation.</td> + </tr> + <tr> + <td><strong><code>u-email</code></strong></td> + <td>L'adresse électronique.</td> + </tr> + <tr> + <td><strong><code>u-photo</code></strong></td> + <td>Une photo pour la personne ou l'organisation.</td> + </tr> + <tr> + <td><strong><code>u-url</code></strong></td> + <td>La page d'accueil ou une URL représentant la personne ou l'organisation.</td> + </tr> + <tr> + <td><strong><code>u-uid</code></strong></td> + <td>Un identifiant universel unique (de préférence une URL canonique).</td> + </tr> + <tr> + <td><strong><code>p-street-address</code></strong></td> + <td>L'adresse composée du numéro et du nom de la rue.</td> + </tr> + <tr> + <td><strong><code>p-locality</code></strong></td> + <td>La ville ou le village de résidence.</td> + </tr> + <tr> + <td><strong><code>p-country-name</code></strong></td> + <td>Le nom du pays de résidence.</td> + </tr> + </tbody> </table> -<h4 id="Exemple_imbriqué">Exemple imbriqué</h4> +<h4 id="Nested_h-card_example">Exemple de h-card imbriqué</h4> -<div dir="ltr" style="text-align: left;"> <pre class="brush: html"><div class="h-card"> <a class="p-name u-url" href="http://blog.lizardwrangler.com/" @@ -132,11 +143,9 @@ translation_of: Web/HTML/microformats href="http://mozilla.org/" >Mozilla Foundation</a>) </div></pre> -</div> <p>Cela fournira le JSON suivant :</p> -<div dir="ltr" style="text-align: left;"> <pre class="brush: json">{ "items": [{ "type": ["h-card"], @@ -154,17 +163,15 @@ translation_of: Web/HTML/microformats } }] }</pre> -</div> -<div class="blockIndicator note"> -<p><strong>Note :</strong> Le h-card imbriqué récupère des valeurs implicites pour <code>name</code> et <code>url</code>.</p> +<div class="notecard note"> + <p><strong>Note :</strong> Le h-card imbriqué récupère des valeurs implicites pour <code>name</code> et <code>url</code>.</p> </div> <h3 id="h-entry">h-entry</h3> <p>Le microformat <a href="http://microformats.org/wiki/h-entry">h-entry</a> représente un contenu épisodique ou daté présent sur le Web. Il est généralement utilisé pour du contenu qui est présenté dans un flux (ex. les billets de blog).</p> -<div dir="ltr" style="text-align: left;"> <pre class="brush: html"><article class="h-entry"> <h1 class="p-name">Microformats are amazing</h1> <p>Published by <a class="p-author h-card" href="http://example.com">W. Developer</a> @@ -177,41 +184,40 @@ translation_of: Web/HTML/microformats </div> </article></pre> -<h4 id="Propriétés">Propriétés</h4> -</div> +<h4 id="Properties">Propriétés</h4> <table class="standard-table"> - <tbody> - <tr> - <th>Propriété</th> - <th>Description</th> - </tr> - <tr> - <td><strong><code>p-name</code></strong></td> - <td>Nom ou titre pour l'entrée.</td> - </tr> - <tr> - <td><strong><code>p-author</code></strong></td> - <td>L'auteur de l'entrée (éventuellement imbriquée avec une h-card).</td> - </tr> - <tr> - <td><strong><code>dt-published</code></strong></td> - <td>La date de publication de l'entrée.</td> - </tr> - <tr> - <td><strong><code>p-summary</code></strong></td> - <td>Un résumé de l'entrée.</td> - </tr> - <tr> - <td><strong><code>e-content</code></strong></td> - <td>Le contenu complet de l'entrée.</td> - </tr> - </tbody> + <tbody> + <tr> + <th>Propriété</th> + <th>Description</th> + </tr> + <tr> + <td><strong><code>p-name</code></strong></td> + <td>Nom ou titre pour l'entrée.</td> + </tr> + <tr> + <td><strong><code>p-author</code></strong></td> + <td>L'auteur de l'entrée (éventuellement imbriquée avec une h-card).</td> + </tr> + <tr> + <td><strong><code>dt-published</code></strong></td> + <td>La date de publication de l'entrée.</td> + </tr> + <tr> + <td><strong><code>p-summary</code></strong></td> + <td>Un résumé de l'entrée.</td> + </tr> + <tr> + <td><strong><code>e-content</code></strong></td> + <td>Le contenu complet de l'entrée.</td> + </tr> + </tbody> </table> -<h4 id="Exemple_de_microformat_h-entry_analysé">Exemple de microformat h-entry analysé</h4> +<h4 id="Parsed_reply_h-entry_example">Exemple de microformat h-entry analysé</h4> -<pre class="brush: html" id="line1"><div class="h-entry"> +<pre class="brush: html"><div class="h-entry"> <p><span class="p-author h-card"> <a href="https://quickthoughts.jgregorymcverry.com/profile/jgmac1106" ><img class="u-photo" src="https://quickthoughts.jgregorymcverry.com/file/2d6c9cfed7ac8e849f492b5bc7e6a630/thumb.jpg"/></a> <a class="p-name u-url" href="https://quickthoughts.jgregorymcverry.com/profile/jgmac1106">Greg McVerry</a></span> @@ -224,7 +230,6 @@ translation_of: Web/HTML/microformats datetime="2019-05-31T14:19:09+0000">31 May 2019</time></a></p> </div></pre> -<div class="panelContent"> <pre class="brush: json">{ "items": [ { @@ -255,8 +260,9 @@ translation_of: Web/HTML/microformats ] }, "lang": "en" - }</pre> -</div> + } + ] +}</pre> <h3 id="h-feed">h-feed</h3> @@ -278,26 +284,26 @@ translation_of: Web/HTML/microformats </div></pre> </div> -<h4 id="Propriétés_2">Propriétés</h4> +<h4 id="Properties_2">Propriétés</h4> <table class="standard-table"> - <tbody> - <tr> - <th>Propriété</th> - <th>Description</th> - </tr> - <tr> - <td><strong><code>p-name</code></strong></td> - <td>Nom du flux.</td> - </tr> - <tr> - <td><strong><code>p-author</code></strong></td> - <td>Auteur du flux, éventuellement intégré via une h-card.</td> - </tr> - </tbody> + <tbody> + <tr> + <th>Propriété</th> + <th>Description</th> + </tr> + <tr> + <td><strong><code>p-name</code></strong></td> + <td>Nom du flux.</td> + </tr> + <tr> + <td><strong><code>p-author</code></strong></td> + <td>Auteur du flux, éventuellement intégré via une h-card.</td> + </tr> + </tbody> </table> -<h4 id="Éléments_fils">Éléments fils</h4> +<h4 id="Children">Enfants</h4> <table class="standard-table"> <tbody> @@ -325,7 +331,7 @@ translation_of: Web/HTML/microformats </div></pre> </div> -<h4 id="Propriétés_3">Propriétés</h4> +<h4 id="Properties_3">Propriétés</h4> <table class="standard-table"> <tbody> @@ -356,9 +362,8 @@ translation_of: Web/HTML/microformats </tbody> </table> -<h4 id="Exemple_d'analyse">Exemple d'analyse</h4> +<h4 id="Parsed_h-event_Example">Exemple d'analyse</h4> -<div dir="ltr" style="text-align: left;"> <pre class="brush: html"><div class="h-event"> <h2 class="p-name">IndieWeb Summit</h2> <time class="dt-start" datetime="2019-06-29T09:00:00-07:00">June 29, 2019 at 9:00am (-0700)</time><br>through <time class="dt-end" datetime="2019-06-30T18:00:00-07:00">June 30, 2019 at 6:00pm (-0700)</time><br> @@ -382,9 +387,6 @@ translation_of: Web/HTML/microformats </div> </div></pre> - - -<div class="panelContent"> <pre class="brush: json">{ "items": [ { @@ -432,15 +434,19 @@ translation_of: Web/HTML/microformats }, "lang": "en" } - ],</pre> -</div> -</div> + ] +}</pre> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>Pris en charge dans tous les navigateurs prenant en charge l'attribut class et son API DOM.</p> -<h2 id="Voir_aussi">Voir aussi</h2> +<h2 id="See_also">Voir aussi</h2> <ul> - <li>{{Interwiki("wikipedia", "Microformat")}} on Wikipedia</li> - <li><a href="http://microformats.org/">Le site officiel des microformats</a></li> - <li><a href="http://microformats.org/wiki/search_engines">Prise en charge des différents moteurs de recherche</a> sur le site microformats</li> - <li><a href="https://indiewebcamp.com/microformats">Les microformats sur IndieWebCamp</a></li> + <li><a href="/fr/docs/Web/HTML/Global_attributes/class">attribut <code>class</code></a></li> + <li><a href="https://fr.wikipedia.org/wiki/Microformat">Microformat</a> sur Wikipedia</li> + <li><a href="http://microformats.org/">Le site officiel des microformats</a></li> + <li><a href="http://microformats.org/wiki/search_engines">Prise en charge des différents moteurs de recherche</a> sur le site microformats</li> + <li><a href="https://indiewebcamp.com/microformats">Les microformats sur IndieWebCamp</a></li> </ul> diff --git a/files/fr/web/html/preloading_content/index.html b/files/fr/web/html/preloading_content/index.html index 4ca3b08254..4c60404ec0 100644 --- a/files/fr/web/html/preloading_content/index.html +++ b/files/fr/web/html/preloading_content/index.html @@ -5,14 +5,19 @@ tags: - Guide - HTML - JavaScript + - Link + - Media - Performance + - Web Performance + - as - preload + - rel translation_of: Web/HTML/Preloading_content original_slug: Web/HTML/Précharger_du_contenu --- -<div>{{QuickLinksWithSubpages("/fr/docs/Web/HTML")}}</div> +<p class="summary">La valeur <code>preload</code> de l'attribut <a href="/fr/docs/Web/HTML/Element/link#attr-rel"><code>rel</code></a> pour l'élément <a href="/fr/docs/Web/HTML/Element/link"><code><link></code></a> permet d'écrire des requêtes déclaratives de récupération au sein de l'élément <a href="/fr/docs/Web/HTML/Element/head"><code><head></code></a>. On peut ainsi indiquer les ressources dont la page aura besoin peu après son chargement. Cela permet de les précharger au début du chargement de la page, avant que le rendu intervienne. On s'assure donc que les ressources nécessaires soient disponibles plus tôt, évitant ainsi de bloquer le rendu initial de la page et améliorant les performances.</p> -<p class="summary">La valeur <code>preload</code> de l'attribut {{htmlattrxref("rel", "link")}} pour l'élément {{htmlelement("link")}} permet d'écrire des requêtes déclaratives de récupération au sein de l'élément {{htmlelement("head")}}. On peut ainsi indiquer les ressources dont la page aura besoin peu après son chargement. Cela permet de les précharger au début du chargement de la page, avant que le rendu intervienne. On s'assure donc que les ressources nécessaires soient disponibles plus tôt, évitant ainsi de bloquer le rendu initial de la page et améliorant les performances. Dans cet article, on voit comment utiliser <code>preload</code>.</p> +<p class="summary">Cet article est un guide sur le fonctionnement de <code><link rel="preload"></code>.</p> <h2 id="Les_bases">Les bases</h2> @@ -20,13 +25,18 @@ original_slug: Web/HTML/Précharger_du_contenu <pre class="brush: html"><link rel="stylesheet" href="styles/main.css"></pre> -<p>Dans le cas qui va nous intéresser, on utilisera l'attribut <code>rel</code> avec la valeur <code>preload</code>. Cela va permettre d'utiliser l'élément <code><link></code> pour précharger à peu près n'importe quelle ressource dont on aurait besoin. Dans la version la plus simple, il suffit d'indiquer le chemin de la ressource à précharger via l'attribut {{htmlattrxref("href", "link")}} et le type de la ressource via l'attribut {{htmlattrxref("as", "link")}}.</p> +<p>Dans le cas qui va nous intéresser, on utilisera l'attribut <code>rel</code> avec la valeur <code>preload</code>. Cela va permettre d'utiliser l'élément <code><link></code> pour précharger à peu près n'importe quelle ressource dont on aurait besoin. Dans la version la plus simple, il suffit d'indiquer :</p> + +<ul> + <li>le chemin de la ressource à précharger via l'attribut <a href="/fr/docs/Web/HTML/Element/link#attr-href"><code>href</code></a></li> + <li>et le type de la ressource via l'attribut <a href="/fr/docs/Web/HTML/Element/link#attr-as"><code>as</code></a>.</li> +</ul> -<p>Voici un exemple d'application simple (vous pouvez consulter <a href="https://github.com/mdn/html-examples/tree/master/link-rel-preload/js-and-css">le code source de cet exemple JS et CSS</a> et visualiser <a href="https://mdn.github.io/html-examples/link-rel-preload/js-and-css/">la démo <em>live</em></a>) :</p> +<p>Voici un exemple d'application simple (vous pouvez consulter <a href="https://github.com/mdn/html-examples/tree/master/link-rel-preload/js-and-css">le code source de cet exemple JS et CSS</a> et visualiser <a href="https://mdn.github.io/html-examples/link-rel-preload/js-and-css/">la démo <i>live</i></a>) :</p> <pre class="brush: html"><head> <meta charset="utf-8"> - <title>Exemple de preload avec JS et CSS</title> + <title>Exemple de préchargement pour JS et CSS</title> <link rel="preload" href="style.css" as="style"> <link rel="preload" href="main.js" as="script"> @@ -41,43 +51,53 @@ original_slug: Web/HTML/Précharger_du_contenu <script src="main.js"></script> </body></pre> -<p>Dans cet exemple, on précharge les fichiers CSS et JavaScript afin qu'ils soient disponibles dès qu'ils sont nécessaires pour le rendu de la page. Cet exemple est un peu trivial, mais on peut voir que, plus les ressources sont identifiées <em>tard</em>, plus elles sont grandes. Par exemple, une feuille de style pourra à son tour pointer vers d'autres ressources comme des polices ou des images. On pourrait aussi avoir de grandes images ou des vidéos à afficher plus bas dans la page.</p> +<p>Ici, nous préchargeons nos fichiers CSS et JavaScript afin qu'ils soient disponibles dès qu'ils seront nécessaires au rendu de la page par la suite. Cet exemple est trivial, car le navigateur découvre probablement les éléments <code><link rel="stylesheet"></code> et <code><script></code> dans le même morceau de HTML que les préchargements, mais les avantages sont d'autant plus évidents que les ressources sont découvertes tardivement et qu'elles sont importantes. Par exemple :</p> -<p><code>preload</code> possède d'autres avantages. On pourra utiliser l'attribut <code>as</code> afin d'indiquer le type de contenu à précharger afin que le navigateur puisse :</p> +<ul> + <li>Les ressources qui sont pointées à partir du CSS, comme les polices ou les images.</li> + <li>Les ressources que JavaScript peut demander, comme JSON, les scripts importés ou les <i>web workers</i>.</li> + <li>Images et fichiers vidéo plus volumineux.</li> +</ul> + +<p><code>preload</code> présente également d'autres avantages. L'utilisation de <code>as</code> pour spécifier le type de contenu à précharger permet au navigateur de :</p> <ul> - <li>Prioriser le chargement des ressources plus précisément.</li> - <li>Identifier les requêtes utilisées ensuite afin de réutiliser la même ressource si c'est possible.</li> - <li>Appliquer la bonne <a href="/fr/docs/HTTP/CSP">politique de sécurité du contenu</a> pour la ressource en question</li> - <li>Utiliser le bon {{HTTPHeader("Accept")}} pour les requêtes associées.</li> + <li>Donner la priorité au chargement des ressources de façon plus précise.</li> + <li>Stocker dans le cache pour les demandes futures, en réutilisant la ressource si nécessaire.</li> + <li>Appliquer la bonne <a href="/fr/docs/Web/HTTP/CSP">politique de sécurité du contenu</a> à la ressource.</li> + <li>Définissez les bons en-têtes de requête <a href="/fr/docs/Web/HTTP/Headers/Accept"><code>Accept</code></a> pour celle-ci.</li> </ul> -<h3 id="Quels_sont_les_types_de_contenu_qu'on_peut_précharger">Quels sont les types de contenu qu'on peut précharger ?</h3> +<h3 id="What_types_of_content_can_be_preloaded'on_peut_précharger">Quels sont les types de contenu qu'on peut précharger ?</h3> <p>Il est possible de précharger de nombreux types de contenu, voici les valeurs principales qu'on peut utiliser avec l'attribut <code>as</code> :</p> <ul> - <li><code>audio</code> : un fichier audio.</li> - <li><code>document</code> : un document HTML destiné à être intégré dans un élément {{htmlelement("frame")}} ou dans un élément {{htmlelement("iframe")}}.</li> - <li><code>embed</code> : une ressource destinée à être intégrée dans un élément {{htmlelement("embed")}}.</li> - <li><code>fetch</code> : une ressource à laquelle on accèdera via une requête <code>fetch</code> ou via une requête XHR (par exemple un <code>ArrayBuffer</code> ou un fichier JSON).</li> - <li><code>font</code> : un fichier de police de caractère.</li> - <li><code>image</code> : un fichier contenant une image .</li> - <li><code>object</code> : une ressource à intégrer dans un élément {{htmlelement("embed")}}.</li> - <li><code>script</code> : un fichier JavaScript.</li> - <li><code>style</code> : une feuille de style.</li> - <li><code>track</code> : un fichier WebVTT.</li> - <li><code>worker</code> : un <em>web worker</em> ou un <em>worker</em> partagé JavaScript.</li> - <li><code>video</code> : un fichier vidéo.</li> + <li><code>audio</code> : un fichier audio.</li> + <li><code>document</code> : un document HTML destiné à être intégré dans un élément <a href="/fr/docs/Web/HTML/Element/frame"><code><frame></code></a> ou dans un élément <a href="/fr/docs/Web/HTML/Element/iframe"><code><iframe></code></a>.</li> + <li><code>embed</code> : une ressource destinée à être intégrée dans un élément <a href="/fr/docs/Web/HTML/Element/embed"><code><embed></code></a>.</li> + <li><code>fetch</code> : une ressource à laquelle on accèdera via une requête <code>fetch</code> ou via une requête XHR (par exemple un <code>ArrayBuffer</code> ou un fichier JSON).</li> + <li><code>font</code> : un fichier de police de caractère.</li> + <li><code>image</code> : un fichier contenant une image .</li> + <li><code>object</code> : une ressource à intégrer dans un élément <a href="/fr/docs/Web/HTML/Element/object"><code><object></code></a>.</li> + <li><code>script</code> : un fichier JavaScript.</li> + <li><code>style</code> : une feuille de style CSS.</li> + <li><code>track</code> : un fichier WebVTT.</li> + <li><code>worker</code> : un <i>web worker</i> ou un <i>worker</i> partagé JavaScript.</li> + <li><code>video</code> : un fichier vidéo, généralement utilisé dans un élément <a href="/fr/docs/Web/HTML/Element/video"><code><video></code></a>.</li> </ul> -<div class="note"> -<p><strong>Note </strong>: Pour avoir plus de détails quant à ces valeurs et aux fonctionnalités web associées, vous pouvez consulter la spécification Preload et notamment <a href="https://w3c.github.io/preload/#link-element-extensions">les extensions à l'élément <code><link></code></a>. On notera également que la liste complète des valeurs acceptables pour l'attribut <code>as</code> est définie dans la spécification Fetch (cf. <a href="https://fetch.spec.whatwg.org/#concept-request-destination">les destinations de requête</a>).</p> +<div class="notecard note"> + <p><strong>Note :</strong> Le préchargement de <code>vidéo</code> est inclus dans la spécification Preload, mais n'est pas actuellement mis en œuvre par les navigateurs.</p> +</div> + +<div class="notecard note"> + <p><strong>Note :</strong> Pour avoir plus de détails quant à ces valeurs et aux fonctionnalités web associées, vous pouvez consulter la spécification Preload et notamment <a href="https://w3c.github.io/preload/#link-element-extensions">les extensions à l'élément <code><link></code></a>. On notera également que la liste complète des valeurs acceptables pour l'attribut <code>as</code> est définie dans la spécification Fetch (cf. <a href="https://fetch.spec.whatwg.org/#concept-request-destination">les destinations de requête</a>).</p> </div> -<h2 id="Ajouter_un_type_MIME">Ajouter un type MIME</h2> +<h2 id="Including_a_MIME_type">Ajouter un type MIME</h2> -<p>Les éléments <code><link></code> permettent d'utiliser un attribut {{htmlattrxref("type", "link")}} qui contient <a href="https://fr.wikipedia.org/wiki/Type_MIME">le type MIME</a> de la ressource vers laquelle pointe l'élément. Cet attribut est particulièrement utile pour le préchargement : le navigateur pourra analyser l'attribut <code>type</code> afin de déterminer s'il prend en charge ce type de ressource. Le téléchargement ne démarrera que si c'est le cas, sinon, l'élément sera ignoré.</p> +<p>Les éléments <code><link></code> permettent d'utiliser un attribut <a href="/fr/docs/Web/HTML/Element/link#attr-type"><code>type</code></a> qui contient <a href="https://fr.wikipedia.org/wiki/Type_MIME">le type MIME</a> de la ressource vers laquelle pointe l'élément. Cet attribut est particulièrement utile pour le préchargement : le navigateur pourra analyser l'attribut <code>type</code> afin de déterminer s'il prend en charge ce type de ressource. Le téléchargement ne démarrera que si c'est le cas, sinon, l'élément sera ignoré.</p> <p>Vous pouvez voir un exemple de ce fonctionnement avec une vidéo (<a href="https://github.com/mdn/html-examples/tree/master/link-rel-preload/video">voir le code source complet</a> et <a href="https://mdn.github.io/html-examples/link-rel-preload/video/">la version live</a>) :</p> @@ -98,43 +118,32 @@ original_slug: Web/HTML/Précharger_du_contenu <p>Dans cet exemple, les navigateurs qui prennent en charge le format MP4 préchargeront le fichier en question et l'utiliseront. En revanche, les navigateurs qui ne supportent que WebM pourront bien utiliser le second fichier mais celui-ci ne sera préchargé. Cet exemple illustre comment ajouter le préchargement dans une stratégie d'amélioration progressive.</p> -<h2 id="Récupérer_des_ressources_de_différentes_origines">Récupérer des ressources de différentes origines</h2> +<h2 id="CORS-enabled_fetches">Récupérer des ressources de différentes origines</h2> -<p>Si le paramétrage <a href="/fr/docs/HTTP/Access_control_CORS">CORS</a> de votre site fonctionne correctement, vous pouvez également précharger des ressources provenant d'origines multiples tant que l'attribut {{htmlattrxref("crossorigin","link")}} est utilisé dans l'élément <code><link></code>.</p> +<p>Lors du préchargement de ressources qui sont récupérées avec <a href="/fr/docs/Web/HTTP/CORS">CORS</a> activé (par exemple. <a href="/fr/docs/Web/API/WindowOrWorkerGlobalScope/fetch"><code>fetch()</code></a>, <a href="/fr/docs/Web/API/XMLHttpRequest"><code>XMLHttpRequest</code></a> ou <a href="/fr/docs/Web/CSS/@font-face">fonts</a>), une attention particulière doit être apportée au paramétrage de l'attribut <a href="/fr/docs/Web/HTML/Element/link#attr-crossorigin"><code>crossorigin</code></a> sur votre <a href="/fr/docs/Web/HTML/Element/link"><code><link></code></a>. L'attribut doit être défini pour correspondre au mode CORS et aux informations d'identification de la ressource, même lorsque la récupération n'est pas d'origine croisée.</p> <p>Les fichiers pour les polices de caractères constituent un cas intéressant. En effet, pour différentes raisons, elles doivent être récupérées via un mode CORS anonyme (cf. <a href="https://drafts.csswg.org/css-fonts/#font-fetching-requirements">les spécifications pour la récupération des polices</a> si vous êtes intéressé par les détails).</p> -<p>Utilisons ce cas de figure comme exemple. Tout d'abord parce que le chargement des polices est un scénario fréquent et ensuite parce que c'est plus simple que de mettre en place un exemple avec des requêtes vers plusieurs origines. Vous pouvez consulter <a href="https://github.com/mdn/html-examples/tree/master/link-rel-preload/fonts">le code source complet de l'exemple sur GitHub</a> (<a href="https://mdn.github.io/html-examples/link-rel-preload/fonts/">et voir le résultat <em>live</em> ici</a>) :</p> +<p>Utilisons ce cas de figure comme exemple. Vous pouvez consulter <a href="https://github.com/mdn/html-examples/tree/master/link-rel-preload/fonts">le code source complet de l'exemple sur GitHub</a> (<a href="https://mdn.github.io/html-examples/link-rel-preload/fonts/">et voir le résultat <em>live</em> ici</a>) :</p> <pre class="brush: html"><head> <meta charset="utf-8"> - <title>Exemple de préchargement pour les polices</title> - - <link rel="preload" href="fonts/cicle_fina-webfont.eot" as="font" type="application/vnd.ms-fontobject" crossorigin="anonymous"> - <link rel="preload" href="fonts/cicle_fina-webfont.woff2" as="font" type="font/woff2" crossorigin="anonymous"> - <link rel="preload" href="fonts/cicle_fina-webfont.woff" as="font" type="font/woff" crossorigin="anonymous"> - <link rel="preload" href="fonts/cicle_fina-webfont.ttf" as="font" type="font/ttf" crossorigin="anonymous"> - <link rel="preload" href="fonts/cicle_fina-webfont.svg" as="font" type="image/svg+xml" crossorigin="anonymous"> + <title>Web font example</title> - <link rel="preload" href="fonts/zantroke-webfont.eot" as="font" type="application/vnd.ms-fontobject" crossorigin="anonymous"> - <link rel="preload" href="fonts/zantroke-webfont.woff2" as="font" type="font/woff2" crossorigin="anonymous"> - <link rel="preload" href="fonts/zantroke-webfont.woff" as="font" type="font/woff" crossorigin="anonymous"> - <link rel="preload" href="fonts/zantroke-webfont.ttf" as="font" type="font/ttf" crossorigin="anonymous"> - <link rel="preload" href="fonts/zantroke-webfont.svg" as="font" type="image/svg+xml" crossorigin="anonymous"> + <link rel="preload" href="fonts/cicle_fina-webfont.woff2" as="font" type="font/woff2" crossorigin> + <link rel="preload" href="fonts/zantroke-webfont.woff2" as="font" type="font/woff2" crossorigin> - <link href="style.css" rel="stylesheet" type="text/css"> + <link href="style.css" rel="stylesheet"> </head> <body> - ... + … </body></pre> -<p>Vous pouvez ici voir qu'on fournit l'indication sur le type de ressource via l'attribut <code>as</code>, le type MIME grâce à l'attribut <code>type</code> mais aussi et surtout l'attribut <code>crossorigin</code> qui permet de gérer le CORS.</p> +<p>Non seulement nous fournissons les indications relatives au type MIME dans les attributs <code>type</code>, mais nous fournissons également l'attribut <code>crossorigin</code> pour nous assurer que le mode CORS du préchargement correspond à l'éventuelle demande de ressource de police.</p> -<p>Il y a donc moins de risque que la police soit disponible après le premier rendu de la page, on évite ainsi les problèmes de scintillement de police (ou <em>FOUT</em> pour <em>Flash Of Unstyled Text</em>).</p> +<h2 id="Including_media">Gérer les différents médias</h2> -<h2 id="Gérer_les_différents_médias">Gérer les différents médias</h2> - -<p>Une qualité des éléments <code><link></code> est qu'ils gèrent l'attribut {{htmlattrxref("media", "link")}}. Ce dernier peut être utilisé afin de conditionner le chargement de la ressource <a href="/fr/docs/Web/CSS/@media">selon le type de média</a> voire <a href="/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries">selon des requêtes de média (<em>media queries</em>)</a>. En bref, il est possible de faire du chargement de ressources qui soit <em>responsive</em> !</p> +<p>Une qualité des éléments <code><link></code> est qu'ils gèrent l'attribut <a href="/fr/docs/Web/HTML/Element/link#attr-media"><code>media</code></a>. Ce dernier peut être utilisé afin de conditionner le chargement de la ressource <a href="/fr/docs/Web/CSS/@media">selon le type de média</a> voire <a href="/fr/docs/Web/CSS/Media_Queries/Using_media_queries">selon des requêtes de média (<em>media queries</em>)</a>. En bref, il est possible de faire du chargement de ressources qui soit <em>responsive</em> !</p> <p>Prenons un exemple simple (<a href="https://github.com/mdn/html-examples/tree/master/link-rel-preload/media">le code source est disponible sur GitHub</a>, <a href="https://mdn.github.io/html-examples/link-rel-preload/media/">avec une démonstration <em>live</em></a>) :</p> @@ -164,13 +173,15 @@ original_slug: Web/HTML/Précharger_du_contenu </script> </body></pre> -<p>Vous pouvez ici voir qu'on a ajouté les attributs <code>media</code> sur les éléments <code><link></code> afin de charger une image étroite si l'utilisateur utilise un écran étroit ou une image plus large si l'écran de l'appareil est plus large. Il est toutefois nécessaire d'afficher la bonne image en en-tête selon le résultat de la requête média et on utilise donc {{domxref("Window.matchMedia")}} / {{domxref("MediaQueryList")}} (lire <a href="/fr/docs/Web/CSS/Requêtes_média/Tester_les_media_queries">Tester les requêtes média</a> pour plus d'informations sur ce point).</p> +<p>Vous pouvez ici voir qu'on a ajouté les attributs <code>media</code> sur les éléments <code><link></code> afin de charger une image étroite si l'utilisateur utilise un écran étroit ou une image plus large si l'écran de l'appareil est plus large. Il est toutefois nécessaire d'afficher la bonne image en en-tête selon le résultat de la requête média et on utilise donc <a href="/fr/docs/Web/API/Window/matchMedia"><code>Window.matchMedia</code></a> / <a href="/fr/docs/Web/API/MediaQueryList"><code>MediaQueryList</code></a> (lire <a href="/fr/docs/Web/CSS/Media_Queries/Testing_media_queries">Tester les requêtes média</a> pour plus d'informations sur ce point).</p> + +<p>Il est ainsi beaucoup plus probable que la police soit disponible pour le rendu de la page, ce qui réduit les FOUT (flash de texte non stylisé).</p> <p>Ce concept n'est pas limité aux images voire aux fichiers du même type ! Laissez libre cours à votre imagination ! On peut imaginer charger un diagramme SVG relativement simple si l'utilisateur est sur un écran étroit (où la bande passante et le processeur sont souvent plus limités) ou précharger un code JavaScript complexe, utilisé pour afficher un modèle 3D complexe lorsque l'appareil de l'utilisateur possède plus de ressources.</p> -<h2 id="Utiliser_des_scripts_et_des_préchargements_différés">Utiliser des scripts et des préchargements différés</h2> +<h2 id="Scripting_and_preloads">Utiliser des scripts et des préchargements différés</h2> -<p>Un autre avantage de ce mécanisme est qu'on peut choisir d'exécuter des préchargements par script si besoin. Dans le fragment de code suivant, on crée une instance de {{domxref("HTMLLinkElement")}} qu'on attache au DOM :</p> +<p>Un autre avantage de ce mécanisme est qu'on peut choisir d'exécuter des préchargements par script si besoin. Dans le fragment de code suivant, on crée une instance de <a href="/fr/docs/Web/API/HTMLLinkElement"><code>HTMLLinkElement</code></a> qu'on attache au DOM :</p> <pre class="brush: js">var preloadLink = document.createElement("link"); preloadLink.href = "myscript.js"; @@ -185,54 +196,53 @@ document.head.appendChild(preloadLink); <pre class="brush: js">var preloadedScript = document.createElement("script"); preloadedScript.src = "myscript.js"; -document.body.appendChild(preloadedScript); -</pre> +document.body.appendChild(preloadedScript);</pre> <p>Cela permet de précharger un script et de différer son exécution jusqu'au moment où on en a besoin.</p> -<h2 id="Les_autres_mécanismes_de_préchargement">Les autres mécanismes de préchargement</h2> +<h2 id="Other_resource_preloading_mechanisms">Les autres mécanismes de préchargement</h2> <p>Il existe d'autres fonctionnalités qui permettent de précharger des ressources mais aucune n'est aussi flexible que <code><link rel="preload"></code> :</p> <ul> - <li><code><link rel="prefetch"></code> est pris en charge par les navigateurs depuis longtemps mais sert pour précharger des ressources qui seront utilisées sur la prochaine page vers laquelle on navigue. Autrement dit, c'est utile mais pas pour la page courante ! De plus, les navigateurs choisiront une priorité moins élevée pour les ressources <code>prefetch</code> que pour celles utilisant <code>preload</code> (la page actuelle est considérée comme plus importante que la suivante). Pour plus de détails, lire <a href="/fr/docs/FAQ_sur_le_préchargement_des_liens">la FAQ sur le préchargement des liens</a>.</li> - <li><code><link rel="prerender"></code> est utilisé afin d'afficher la page indiquée en arrière-plan, accélérant le chargement de la page si l'utilisateur navigue vers cette page. Pouvant entraîner une consommation de bande passante plus importante, Chrome considère <code>prerender</code> comme <a href="https://developers.google.com/web/updates/2018/07/nostate-prefetch">un préchargement NoState</a>.</li> - <li><code><link rel="subresource"></code>{{non-standard_inline}} était pris en charge par Chrome par le passé et devait permettre de précharger les ressources pour le chargement et la navigation dans la page mais il n'existait de moyen de priorisation (l'attribut <code>as</code> n'existait pas) et l'ensemble des ressources recevait donc une priorité assez basse.</li> - <li>De nombreux utilitaires de chargement scriptés existent par ailleurs mais ils ne disposent pas du contexte de priorisation disponible dans le navigateur et, en tant que ressources, peuvent participer à ces problèmes de performances de chargement.</li> + <li><code><link rel="prefetch"></code> est pris en charge par les navigateurs depuis longtemps mais sert pour précharger des ressources qui seront utilisées sur la <strong>prochaine</strong> page vers laquelle on navigue. Autrement dit, c'est utile mais pas pour la page courante ! De plus, les navigateurs choisiront une priorité moins élevée pour les ressources <code>prefetch</code> que pour celles utilisant <code>preload</code> (la page actuelle est considérée comme plus importante que la suivante). Pour plus de détails, lire <a href="/fr/docs/Web/HTTP/Link_prefetching_FAQ">la FAQ sur le préchargement des liens</a>.</li> + <li><code><link rel="prerender"></code> est utilisé afin d'afficher la page indiquée en arrière-plan, accélérant le chargement de la page si l'utilisateur navigue vers cette page. Pouvant entraîner une consommation de bande passante plus importante, Chrome considère <code>prerender</code> comme <a href="https://developers.google.com/web/updates/2018/07/nostate-prefetch">un préchargement NoState</a>.</li> + <li><code><link rel="subresource"></code> {{non-standard_inline}} était pris en charge par Chrome par le passé et devait permettre de précharger les ressources pour le chargement et la navigation dans la page mais il n'existait de moyen de priorisation (l'attribut <code>as</code> n'existait pas) et l'ensemble des ressources recevait donc une priorité assez basse.</li> + <li>De nombreux utilitaires de chargement scriptés existent par ailleurs mais ils ne disposent pas du contexte de priorisation disponible dans le navigateur et, en tant que ressources, peuvent participer à ces problèmes de performances de chargement.</li> </ul> -<h2 id="Spécifications">Spécifications</h2> +<h2 id="Specifications">Spécifications</h2> <table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('Preload','#x2.link-type-preload','preload')}}</td> - <td>{{Spec2('Preload')}}</td> - <td>Détails complémentaires sur <code>preload</code>.</td> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', 'link-type-preload', 'rel=preload')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Définition simple de <code>preload</code>.</td> - </tr> - </tbody> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Preload','#x2.link-type-preload','preload')}}</td> + <td>{{Spec2('Preload')}}</td> + <td>Détails complémentaires sur <code>preload</code>.</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'link-type-preload', 'rel=preload')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Définition simple de <code>preload</code>.</td> + </tr> + </tbody> </table> -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> <p>{{Compat("html.elements.link.rel.preload")}}</p> -<h2 id="Voir_aussi">Voir aussi</h2> +<h2 id="See_also">Voir aussi</h2> <ul> <li><a href="https://www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/">Le préchargement : à quoi ça sert ? (en anglais)</a> par Yoav Weiss</li> </ul> + +<div>{{QuickLinksWithSubpages("/fr/docs/Web/HTML")}}</div> diff --git a/files/fr/web/html/quirks_mode_and_standards_mode/index.html b/files/fr/web/html/quirks_mode_and_standards_mode/index.html index e6859b0e04..375a7686fa 100644 --- a/files/fr/web/html/quirks_mode_and_standards_mode/index.html +++ b/files/fr/web/html/quirks_mode_and_standards_mode/index.html @@ -1,22 +1,24 @@ --- -title: Mode quirks de Mozilla +title: Mode quirks et mode standard slug: Web/HTML/Quirks_Mode_and_Standards_Mode tags: + - Gecko - Guide - HTML - - Web + - Web Development + - Web Standards - XHTML translation_of: Web/HTML/Quirks_Mode_and_Standards_Mode --- -<p>Par le passé, les pages web étaient souvent écrites sous deux versions : une destinée à Netscape Navigator et l'autre à Microsoft Internet Explorer. Lorsque les standards du Web sont apparus avec le W3C, les navigateurs ne pouvaient pas simplement commencer à les utiliser car leur mise en place rendrait inutilisable la plupart des sites web existant. Les navigateurs ont alors introduit deux modes afin de traiter les sites respectants les standards des autres sites historiques.</p> +<p>{{HTMLRef}}</p> -<p>Il existe aujourd'hui trois modes utilisés par les moteurs de rendu des navigateurs web : le mode <em>quirks</em>, le mode quasi-standard et le mode standard total. En <strong>mode <em>quirks</em></strong>, le moteur de disposition émule le comportement non-standard de Navigator 4 et d'Internet Explorer 5. Ce mode permet de prendre en charge les sites web rédigés avant l'adoption généralisées des standards web. En <strong>mode standard total</strong>, le comportement du navigateur est entièrement (aux bugs près) celui décrit par les spécifications HTML et CSS. En <strong>mode quasi-standard</strong>, très peu de déviations sont implémentées.</p> +<p class="summary">Par le passé, les pages web étaient souvent écrites sous deux versions : une destinée à Netscape Navigator et l'autre à Microsoft Internet Explorer. Lorsque les standards du Web sont apparus avec le W3C, les navigateurs ne pouvaient pas simplement commencer à les utiliser car leur mise en place rendrait inutilisable la plupart des sites web existant. Les navigateurs ont alors introduit deux modes afin de traiter les sites respectants les standards des autres sites historiques.</p> -<h2 id="How_does_Mozilla_determine_which_mode_to_use.3F" name="How_does_Mozilla_determine_which_mode_to_use.3F">Comment les navigateurs déterminent le mode à utiliser ?</h2> +<p>Il existe aujourd'hui trois modes utilisés par les moteurs de rendu des navigateurs web : le mode <i>quirks</i>, le mode quasi-standard et le mode standard total. En <strong>mode <i>quirks</i></strong>, le moteur de mise en page émule le comportement non-standard de Navigator 4 et d'Internet Explorer 5. Ce mode permet de prendre en charge les sites web rédigés avant l'adoption généralisée des standards web. En <strong>mode standard total</strong>, le comportement du navigateur est entièrement (aux bugs près) celui décrit par les spécifications HTML et CSS. En <strong>mode quasi-standard</strong>, très peu de déviations sont implémentées.</p> -<h3 id="HTML">HTML</h3> +<h2 id="How_does_Mozilla_determine_which_mode_to_use">Comment les navigateurs déterminent le mode à utiliser ?</h2> -<p>Pour les documents <a href="/fr/docs/Web/HTML" title="/en-US/docs/HTML">HTML</a>, les navigateurs utilisent le <em>DOCTYPE</em> présent au début du document afin de déterminer si celui-ci doit être géré avec le mode <em>quirks</em> ou avec l'un des modes standards. Si vous souhaitez qu'une page utilise le mode standard total, son DOCTYPE devra correspondre à celui utilisé dans cet exemple :</p> +<p>Pour les documents <a href="/fr/docs/Web/HTML">HTML</a>, les navigateurs utilisent le <code>DOCTYPE</code> présent au début du document afin de déterminer si celui-ci doit être géré avec le mode <i>quirks</i> ou avec l'un des modes standards. Si vous souhaitez qu'une page utilise le mode standard total, son DOCTYPE devra correspondre à celui utilisé dans cet exemple :</p> <pre class="brush: html"><!DOCTYPE html> <html lang="fr"> @@ -28,26 +30,22 @@ translation_of: Web/HTML/Quirks_Mode_and_Standards_Mode </body> </html></pre> -<p>Le DOCTYPE illustré dans cet exemple, <code><!DOCTYPE html></code>, est le plus simple possible et correspond à la recommandation HTML5. Les versions précédentes des standards HTML recommandaient d'autres variantes. Toutefois, l'ensemble des navigateurs actuels utiliseront le mode standard total avec ce DOCTYPE (y compris IE6). Il n'est pas justifié de choisir un DOCTYPE plus compliqué ; le faire risquerait de déclencher l'utilisation du mode quasi-standard ou du mode <em>quirks</em>.</p> +<p>Le DOCTYPE illustré dans cet exemple, <code><!DOCTYPE html></code>, est le plus simple possible et correspond à la recommandation HTML5. Les versions précédentes des standards HTML recommandaient d'autres variantes. Toutefois, l'ensemble des navigateurs actuels utiliseront le mode standard total avec ce DOCTYPE (y compris IE6). Il n'est pas justifié de choisir un DOCTYPE plus compliqué ; le faire risquerait de déclencher l'utilisation du mode quasi-standard ou du mode <i>quirks</i>.</p> -<p>Assurez-vous que le DOCTYPE soit présent au tout début du document HTML. Tout ce qui précède le DOCTYPE (un commentaire ou une déclaration XML) déclenchera le mode <em>quirks</em> pour Internet Explorer 9 et les versions antérieures.</p> +<p>Assurez-vous que le DOCTYPE soit présent au tout début du document HTML. Tout ce qui précède le DOCTYPE (un commentaire ou une déclaration XML) déclenchera le mode <i>quirks</i> pour Internet Explorer 9 et les versions antérieures.</p> -<p>En HTML5, le seul but du DOCTYPE est d'activer le mode standard total. Les anciennes versions du standard HTML donnaient une sémantique plus riche au DOCTYPE mais aucun navigateur n'a utilisé le DOCTYPE pour autre chose que pour choisir entre le mode <em>quirks</em> et l'un des modes standards.</p> +<p>En HTML5, le seul but du DOCTYPE est d'activer le mode standard total. Les anciennes versions du standard HTML donnaient une sémantique plus riche au DOCTYPE mais aucun navigateur n'a utilisé le DOCTYPE pour autre chose que pour choisir entre le mode <i>quirks</i> et l'un des modes standards.</p> -<p>Vous pouvez également consulter <a class="external" href="https://hsivonen.iki.fi/doctype/" title="http://hsivonen.iki.fi/doctype/">cet article avec plus de détails sur la façon dont les navigateurs choisissent entre les différents modes</a>.</p> +<p>Vous pouvez également consulter <a href="https://hsivonen.iki.fi/doctype/">cet article avec plus de détails sur la façon dont les navigateurs choisissent entre les différents modes</a>.</p> <h3 id="XHTML">XHTML</h3> -<p>Si la page est servie comme <a href="/en-US/docs/XHTML" title="XHTML">XHTML</a> avec le type MIME <code>application/xhtml+xml</code> dans l'en-tête HTTP <code>Content-Type</code>, il n'est pas nécessaire d'utiliser de DOCTYPE afin d'activer le mode standard car de tels documents utiliseront toujours le mode standard total. On notera toutefois que servir les pages avec un type <code>application/xhtml+xml</code> entraînera l'affichage <a href="/en-US/docs/XHTML#Support" title="XHTML">d'une boîte de téléchargement</a> d'un fichier au format inconnu sous Internet Explorer 8 car IE9 est la première version d'Internet Explorer à prendre en charge XHTML.</p> +<p>Si la page est servie comme <a href="/fr/docs/Glossary/XHTML">XHTML</a> avec le type MIME <code>application/xhtml+xml</code> dans l'en-tête HTTP <code>Content-Type</code>, il n'est pas nécessaire d'utiliser de DOCTYPE afin d'activer le mode standard, car de tels documents utiliseront toujours le mode standard total. On notera toutefois que servir les pages avec un type <code>application/xhtml+xml</code> entraînera l'affichage <a href="/fr/docs/Glossary/XHTML#support">d'une boîte de téléchargement</a> d'un fichier au format inconnu sous Internet Explorer 8 car IE9 est la première version d'Internet Explorer à prendre en charge XHTML.</p> <p>Si on sert un contenu semblable à du XHTML mais avec le type MIME <code>text/html</code>, le navigateur l'interprètera comme du HTML et il faudra alors ajouter le DOCTYPE afin d'utiliser un mode standard.</p> -<h2 id="What_are_the_differences_between_the_modes.3F" name="What_are_the_differences_between_the_modes.3F">Comment connaître le mode utilisé ?</h2> +<h2 id="How_do_I_see_which_mode_is_used">Comment connaître le mode utilisé ?</h2> <p>Sous Firefox, vous pouvez utiliser le menu contextuel : "Informations sur la page" et le champ "Mode de rendu" de l'onglet Général..</p> -<p>Sous Internet Explorer, appuyez sur la touche <em>F12</em> et utilisez le champ <em>Document Mode</em>.</p> - -<h2 id="What_are_the_differences_between_the_modes.3F" name="What_are_the_differences_between_the_modes.3F">Quelles sont les différences entre les modes ?</h2> - -<p>Voir <a href="/fr/docs/Comportement_du_mode_quirks_de_Mozilla">la liste des déviations (<em>quirks</em>)</a> et <a href="/fr/docs/Mozilla/Mode_presque_standard_de_Gecko" title="Gecko%27s_%22Almost_Standards%22_Mode">la description du mode quasi-standard</a> pour les différences entre ces modes.</p> +<p>Sous Internet Explorer, appuyez sur la touche <em>F12</em> et utilisez le champ <em>Document Mode</em>.</p>
\ No newline at end of file diff --git a/files/fr/web/html/reference/index.html b/files/fr/web/html/reference/index.html index 5361ee77ac..01aa0aa9e6 100644 --- a/files/fr/web/html/reference/index.html +++ b/files/fr/web/html/reference/index.html @@ -10,21 +10,19 @@ translation_of: Web/HTML/Reference --- <div>{{HTMLSidebar}}</div> -<p>Cette référence <a href="/fr/docs/Web/HTML">HTML</a> décrit l'ensemble des <strong>éléments</strong> et des <strong>attributs</strong> qui peuvent être utilisés en HTML, y compris les <strong>attributs universels</strong> qui peuvent s'appliquer sur tous les éléments.</p> +<p class="summary">Cette référence <a href="/fr/docs/Web/HTML">HTML</a> décrit l'ensemble des <strong>éléments</strong> et des <strong>attributs</strong> qui peuvent être utilisés en HTML, y compris les <strong>attributs universels</strong> qui peuvent s'appliquer sur tous les éléments.</p> <dl> - <dt><a href="/fr/docs/Web/HTML/Element">Référence des éléments HTML</a></dt> - <dd>Cette page énumère tous les éléments HTML, regroupés ici selon leurs fonctions.</dd> - <dt><a href="/fr/docs/Web/HTML/Attributs">Référence des attributs HTML</a></dt> - <dd>Chaque élément HTML peut avoir un ou plusieurs attributs. Ces attributs sont des valeurs supplémentaires qui permettent de configurer les éléments ou d'adapter leur comportement.</dd> - <dt><a href="/fr/docs/Web/HTML/Attributs_universels">Attributs universels</a></dt> - <dd>Les attributs universels peuvent être définis sur tous les éléments HTML, y compris pour les éléments non définis dans le standard. Autrement dit, les éléments non-standards doivent pouvoir accepter ces attributs. Cela permettra au navigateur de les gérer selon certains des aspects de la spécification. Par exemple, pour un navigateur conforme, un élément <toto hidden>...<toto> sera masqué bien que <toto> ne soit pas un élément HTML valide.</dd> - <dt><a href="/fr/docs/Web/HTML/Link_types">Types de liens</a></dt> - <dd>En HTML, les différents types de liens indiquent les relations entre deux documents. Ces liens peuvent prendre la forme d'un élément {{HTMLElement("a")}}, {{HTMLElement("area")}} ou {{HTMLElement("link")}}.</dd> - <dt><a href="/fr/docs/Web/Guide/HTML/Catégories_de_contenu">Catégories de contenu</a></dt> - <dd>Chaque élément HTML appartient à une ou plusieurs catégories de contenu. Ces catégories regroupent des éléments avec des caractéristiques communes.</dd> - <dt><a href="/fr/docs/Web/HTML/Formats_date_heure_HTML">Formats des dates et heures en HTML</a></dt> - <dd>Certains éléments HTML permettent de manipuler des valeurs temporelles (dates, heures, dates et heures). Cet article décrit le format de représentation de ces valeurs, notamment utilisées pour les éléments {{HTMLElement("input")}}, {{HTMLElement("ins")}} et {{HTMLElement("del")}}.</dd> + <dt><a href="/fr/docs/Web/HTML/Element">Référence des éléments HTML</a></dt> + <dd>Cette page énumère tous les éléments HTML, regroupés ici selon leurs fonctions.</dd> + <dt><a href="/fr/docs/Web/HTML/Attributes">Référence des attributs HTML</a></dt> + <dd>Chaque élément HTML peut avoir un ou plusieurs attributs. Ces attributs sont des valeurs supplémentaires qui permettent de configurer les éléments ou d'adapter leur comportement.</dd> + <dt><a href="/fr/docs/Web/HTML/Global_attributes">Attributs universels</a></dt> + <dd>Les attributs universels peuvent être définis sur tous les éléments HTML. Il est toutefois possible qu'ils n'aient pas d'effet sur certains éléments.</dd> + <dt><a href="/fr/docs/Web/HTML/Link_types">Types de liens</a></dt> + <dd>En HTML, les différents types de liens indiquent les relations entre deux documents. Ces liens peuvent prendre la forme d'un élément <a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a>, <a href="/fr/docs/Web/HTML/Element/area"><code><area></code></a> ou <a href="/fr/docs/Web/HTML/Element/link"><code><link></code></a>.</dd> + <dt><a href="/fr/docs/Web/Guide/HTML/Content_categories">Catégories de contenu</a></dt> + <dd>Chaque élément HTML appartient à une ou plusieurs catégories de contenu. Ces catégories regroupent des éléments avec des caractéristiques communes.</dd> + <dt><a href="/fr/docs/Web/HTML/Date_and_time_formats">Formats des dates et heures en HTML</a></dt> + <dd>Certains éléments HTML permettent de manipuler des valeurs temporelles (dates, heures, dates et heures). Cet article décrit le format de représentation de ces valeurs, notamment utilisées pour les éléments <a href="/fr/docs/Web/HTML/Element/Input"><code><input></code></a>, <a href="/fr/docs/Web/HTML/Element/ins"><code><ins></code></a> et <a href="/fr/docs/Web/HTML/Element/del"><code><del></code></a>.</dd> </dl> - -<p><span class="alllinks"><a href="/en-US/docs/tag/HTML">Voir tout...</a></span></p> diff --git a/files/fr/web/html/using_the_application_cache/index.html b/files/fr/web/html/using_the_application_cache/index.html index bf10c6b6bd..0017fc9acb 100644 --- a/files/fr/web/html/using_the_application_cache/index.html +++ b/files/fr/web/html/using_the_application_cache/index.html @@ -2,47 +2,56 @@ title: Utiliser Application Cache slug: Web/HTML/Using_the_application_cache tags: - - Avancé + - Advanced + - App - Cache - - Déprécié - Guide - HTML - appcache + - application cache + - web cache translation_of: Web/HTML/Using_the_application_cache original_slug: Web/HTML/Utiliser_Application_Cache --- <div>{{DefaultAPISidebar("App Cache")}}{{securecontext_header}}{{deprecated_header}}</div> -<div class="warning"> -<p><strong>Attention !</strong> L'utilisation de la fonction de <em>mise en cache d'application</em> décrite ici est actuellement fortement déconseillée; cette fonctionnalité est <a href="https://html.spec.whatwg.org/multipage/browsers.html#offline">en train d' être retiré de la plate-forme Web</a>. Utiliser <a href="/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers">Service Workers</a> à la place. En fait, à partir de Firefox 44, quand l'<a href="/fr/docs/Web/HTML/Using_the_application_cache">application cache</a> est utilisé pour fournir une aide hors ligne pour une page, un message d'avertissement est maintenant affiché dans la console conseillant aux développeurs d'utiliser <a href="/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers">Service workers</a> à la place ({{bug("1204581")}}).</p> +<div class="notecard warning"> + <p> + <strong>Ne pas utiliser cette fonctionnalité de <em>cache d'application</em> !</strong> Elle est <a href="https://html.spec.whatwg.org/multipage/browsers.html#offline">en passe d'être retirée de la plateforme Web</a>. + </p> + <ul> + <li>Elle a été supprimée de Firefox 84 ({{bug("1619673")}}). Sa suppression est également prévue dans Chomium 90, et elle est dépréciée dans Safari.</li> + <li>À partir de Firefox 60, et dans certains voir tous les <a href="#browser_compatibility">navigateurs qui la supportent</a>, elle n'est disponible que dans un <a href="/fr/docs/Web/Security/Secure_Contexts">contextes sécurisés</a> (HTTPS).</li> + <li>À partir de Firefox 44+, lorsque <a href="/fr/docs/Web/HTML/Using_the_application_cache">AppCache</a> est utilisé pour fournir un support hors ligne pour une page, un message d'avertissement s'affiche dans la console conseillant aux développeurs d'utiliser <a href="/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers">Service workers</a> à la place ({{bug("1204581")}}).</li> + </ul> </div> -<h2 id="Introduction">Introduction</h2> - -<p><a href="/fr/docs/Web/Guide/HTML/HTML5">HTML5</a> supporte la mise en cache hors-ligne de ressources d'applications web; les fichiers sont stockés dans<strong> l'Application Cache </strong><em>(AppCache)</em> - une collection de ressources obtenues depuis un fichier <strong>manifest</strong> (<code>*.appcache</code>) inclue dans une application web.</p> +<p class="summary"><a href="/fr/docs/Web/Guide/HTML/HTML5">HTML5</a> supporte la mise en cache hors-ligne de ressources d'applications web; les fichiers sont stockés dans<strong> l'Application Cache </strong><em>(AppCache)</em> - une collection de ressources obtenues depuis un fichier <strong>manifest</strong> (<code>*.appcache</code>) inclue dans une application web.</p> <p>L'utilisation d'une application cache permet les bénéfices suivants :</p> -<ul> - <li>Navigation hors-ligne : les utilisateurs peuvent utiliser un site même s'ils ne sont pas connectés.</li> - <li>Vitesse : les ressources mises en cache sont locales, et se chargent donc plus rapidement.</li> - <li>Réduction de la charge serveur : le navigateur ne télécharge uniquement les ressources qui ont changées sur le serveur.</li> -</ul> +<dl> + <dt>Navigation hors-ligne</dt> + <dd>Les utilisateurs peuvent utiliser un site même s'ils ne sont pas connectés.</dd> + <dt>Vitesse</dt> + <dd>Les ressources mises en cache sont locales, et se chargent donc plus rapidement.</dd> + <dt>Réduction de la charge serveur</dt> + <dd>Le navigateur ne télécharge uniquement les ressources qui ont changées sur le serveur.</dd> +</dl> -<div> -<h2 id="Comment_fonctionne_AppCache">Comment fonctionne AppCache</h2> +<h2 id="How_the_application_cache_works">Comment fonctionne AppCache</h2> -<h3 id="Activer_AppCache">Activer AppCache</h3> +<h3 id="Enabling_the_application_cache">Activer AppCache</h3> -<p>Vous devez, pour utiliser le cache d'application, utiliser l'attribut <code><a href="/fr/docs/Web/HTML/Element/html#attr-manifest">manifest</a> </code>dans l'élément <code><html> </code>comme suit :</p> +<p>Vous devez, pour utiliser le cache d'application, utiliser l'attribut <code><a href="/fr/docs/Web/HTML/Element/html#attr-manifest">manifest</a> </code>dans l'élément {{HTMLElement("html")}} comme suit :</p> -<pre class="brush: html notranslate"><html manifest="example.appcache"> +<pre class="brush: html"><html manifest="example.appcache"> ... </html></pre> <p>L'attribut <code>manifest</code> spécifie l'URI d'un <strong>manifeste de cache</strong>, qui est un fichier texte qui répertorie les ressources (fichiers) que le navigateur doit mettre en cache pour votre application.</p> -<p>Vous devez inclure l'attribut <code>manifest</code> sur chaque page de votre application que vous souhaitez mettre en cache. Le navigateur met pas en cache les pages qui ne contiennent pas l'attribut <code>manifest</code>, sauf si celle-ci sont explicitement mentionnées dans le manifeste même. Vous ne devez pas lister toutes les pages que vous souhaitez mettre en cache dans le fichier manifeste, le navigateur ajoute implicitement chaque page que l'utilisateur visite et qui possède l'attribut <code>manifest</code> réglé sur le cache de l'application.</p> +<p>Vous devez inclure l'attribut <code>manifest</code> sur chaque page de votre application que vous souhaitez mettre en cache. Le navigateur met pas en cache les pages qui ne contiennent pas l'attribut <code>manifest</code>, sauf si celle-ci sont explicitement mentionnées dans le manifeste même. Vous ne devez pas lister toutes les pages que vous souhaitez mettre en cache dans le fichier manifeste, le navigateur ajoute implicitement chaque page que l'utilisateur visite et qui possède l'attribut <code>manifest</code> réglé sur le cache de l'application.</p> <p>Certains navigateurs dont Firefox vont avertir l'utilisateur la première fois que celui-ci charge votre application par une notification :</p> @@ -50,62 +59,64 @@ original_slug: Web/HTML/Utiliser_Application_Cache <p>Le terme « d'applications (fonctionnant) hors-ligne » est parfois utilisé pour désigner les applications que l'utilisateur a autorisé à travailler hors-ligne.</p> -<h3 id="Chargement_des_documents">Chargement des documents</h3> +<h3 id="Loading_documents">Chargement des documents</h3> <p>L'utilisation d'un cache de l'application modifie le processus normal de chargement d'un document :</p> <ul> - <li>Si un cache de l'application existe, le navigateur charge le document et ses ressources associées directement à partir de la mémoire cache, sans accéder au réseau. Cela accélère le temps de chargement du document.</li> - <li>Le navigateur vérifie ensuite si le manifeste de cache a été mis à jour sur le serveur.</li> - <li>Si le manifeste de cache a été mis à jour, le navigateur télécharge une nouvelle version du manifeste et les ressources figurant dans ce dernier. Cela se fait en arrière-plan et n'affecte pas les performances de manière significative.</li> + <li>Si un cache de l'application existe, le navigateur charge le document et ses ressources associées directement à partir de la mémoire cache, sans accéder au réseau. Cela accélère le temps de chargement du document.</li> + <li>Le navigateur vérifie ensuite si le manifeste de cache a été mis à jour sur le serveur.</li> + <li>Si le manifeste de cache a été mis à jour, le navigateur télécharge une nouvelle version du manifeste et les ressources figurant dans ce dernier. Cela se fait en arrière-plan et n'affecte pas les performances de manière significative.</li> </ul> -<p>Le procédé de chargement de documents et mise à jour du cache de l'application est définie de manière plus détaillée ci-dessous:</p> +<p>Le procédé de chargement de documents et mise à jour du cache de l'application est définie de manière plus détaillée ci-dessous:</p> <ol> - <li>Quand le navigateur visite un document qui contient l'attribut <code>manifest </code>et qu'il n'existe pas encore de cache d'application, il chargera le document puis récupérera toutes les entrées listées dans le manifeste, créant ainsi la première version du cache d'application.</li> - <li>Lors des visites ultérieures de ce document, le navigateur chargera le document et les autres ressources précisées dans le manifeste à partir du cache d'application — et non du serveur. De plus, le navigateur enverra aussi un évènement <code>checking </code>à l'objet <a href="/fr/docs/Web/API/Window/applicationCache"><code>window.applicationCache</code></a>, puis récupère le manifeste en fonction de la règle de cache HTTP adéquate.</li> - <li>Si la version en cache du manifeste est à jour, l'évènement <code>noupdate </code>est envoyé a l'<code>applicationCache</code>, et le processus de mise à jour est terminé. C'est la raison pour laquelle vous devez changer le manifeste chaque fois que vous mettez à jour les ressources sur le serveur, afin que le navigateur sache qu'il doit de nouveau récupérer les ressources.</li> - <li>Si le manifeste <em>a changé</em>, tous les fichiers dans le manifeste (dont ceux ajoutés au cache lors de l'appel à <a href="/fr/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIDOMOfflineResourceList#add.28.29"><code>applicationCache.add()</code></a>) sont récupérés dans un cache temporaire, en fonction des règles de cache HTTP adéquates. Un évènement <code>progress </code>est envoyé à l'objet <code>applicationCache </code>chaque fois qu'un fichier est récupéré dans le cache temporaire. Un évènement <code>error </code>est envoyé à chaque erreur, et la mise à jour s'arrête.</li> - <li>Une fois tous les fichiers récupérés en bonne et due forme, ils sont transférés dans le véritable cache hors-ligne un par un, et un évènement <code>cached </code>est envoyé à l'objet <code>applicationCache</code>. Le document étant déjà chargé dans le navigateur depuis le cache, le document mis à jour ne sera pas ré-affiché tant que celui-ci n'est pas chargé à nouveau (que ce soit manuellement ou via un programme).</li> + <li>Quand le navigateur visite un document qui contient l'attribut <code>manifest </code>et qu'il n'existe pas encore de cache d'application, il chargera le document puis récupérera toutes les entrées listées dans le manifeste, créant ainsi la première version du cache d'application.</li> + <li>Lors des visites ultérieures de ce document, le navigateur chargera le document et les autres ressources précisées dans le manifeste à partir du cache d'application — et non du serveur. De plus, le navigateur enverra aussi un évènement <code>checking </code>à l'objet <a href="/fr/docs/Web/API/Window/applicationCache"><code>window.applicationCache</code></a>, puis récupère le manifeste en fonction de la règle de cache HTTP adéquate.</li> + <li>Si la version en cache du manifeste est à jour, l'évènement <code>noupdate </code>est envoyé a l'<code>applicationCache</code>, et le processus de mise à jour est terminé. C'est la raison pour laquelle vous devez changer le manifeste chaque fois que vous mettez à jour les ressources sur le serveur, afin que le navigateur sache qu'il doit de nouveau récupérer les ressources.</li> + <li>Si le manifeste <em>a changé</em>, tous les fichiers dans le manifeste (dont ceux ajoutés au cache lors de l'appel à <code>applicationCache.add()</code> {{deprecated_inline}}) sont récupérés dans un cache temporaire, en fonction des règles de cache HTTP adéquates. Un évènement <code>progress </code>est envoyé à l'objet <code>applicationCache </code>chaque fois qu'un fichier est récupéré dans le cache temporaire. Un évènement <code>error </code>est envoyé à chaque erreur, et la mise à jour s'arrête.</li> + <li>Une fois tous les fichiers récupérés en bonne et due forme, ils sont transférés dans le véritable cache hors-ligne un par un, et un évènement <code>cached </code>est envoyé à l'objet <code>applicationCache</code>. Le document étant déjà chargé dans le navigateur depuis le cache, le document mis à jour ne sera pas ré-affiché tant que celui-ci n'est pas chargé à nouveau (que ce soit manuellement ou via un programme).</li> </ol> -<h2 id="Emplacement_du_stockage_et_effacement_du_cache_hors-ligne">Emplacement du stockage et effacement du cache hors-ligne</h2> +<h2 id="Storage_location_and_clearing_the_offline_cache">Emplacement du stockage et effacement du cache hors-ligne</h2> <p>Dans Chrome, le cache hors-ligne peut être effacé grâce au bouton "Effacer les données de navigation..." dans les préférences, ou en ouvrant <code>chrome://appcache-internals/</code>. Safari a un paramètre "Vider le cache" dans ses préférences, mais il est possible que le redémarrage du navigateur soit nécessaire.</p> <p>Dans Firefox, les données de cache hors-ligne sont stockées séparément du profil Firefox—à côté du cache disque normal :</p> <ul> - <li>Windows Vista/7: <code>C:\Users\<username>\AppData\<strong>Local</strong>\Mozilla\Firefox\Profiles\<salt>.<profile name>\OfflineCache</code></li> - <li>Mac/Linux: <code>/Users/<username>/Library/Caches/Firefox/Profiles/<salt>.<profile name>/OfflineCache</code></li> + <li>Windows Vista/7: <code>C:\Users\<username>\AppData\<strong>Local</strong>\Mozilla\Firefox\Profiles\<salt>.<profile name>\OfflineCache</code></li> + <li>Mac/Linux: <code>/Users/<username>/Library/Caches/Firefox/Profiles/<salt>.<profile name>/OfflineCache</code></li> </ul> -<p>Dans Firefox l'état actuel du cache hors-ligne est consultable sur la page <code>about:cache</code> (dans la section "Offline cache device"). Le cache hors-ligne peut être effacé pour chaque site individuellement à l'aide du boutton "Supprimer..." dans Menu -> Options -> Avancé -> Réseau -> Contenu web et données utilisateur hors connexion.</p> +<p>Dans Firefox l'état actuel du cache hors-ligne est consultable sur la page <code>about:cache</code> (dans la section "Offline cache device"). Le cache hors-ligne peut être effacé pour chaque site individuellement à l'aide du boutton "Supprimer..." dans Menu -> Options -> Avancé -> Réseau -> Contenu web et données utilisateur hors connexion.</p> <p>Avant Firefox 11, ni Tools -> Clear Recent History ni Tools -> Options -> Advanced -> Network -> Offline data -> Clear Now ne permettaient d'effacer le cache hors-ligne. Ceci a été corrigé.</p> -<p>Voir aussi <a href="/fr/docs/DOM/Storage#Storage_location_and_clearing_the_data">effacer les données de stockage DOM</a>.</p> +<p>Voir aussi <a href="/fr/docs/DOM/Storage#storage_location_and_clearing_the_data">effacer les données de stockage DOM</a>.</p> <p>Les caches d'application peuvent aussi devenir obsolètes. Si le manifeste d'une application est retiré du serveur, le navigateur efface toutes les données cachées utilisant ce manifeste, et déclenche un event "obsoleted" à l'objet <code>applicationCache</code>. Le statut du cache de l'application est alors <code>OBSOLETE</code>.</p> -<h2 id="Le_manifeste_du_cache">Le manifeste du cache</h2> +<h2 id="The_cache_manifest_file">Le manifeste du cache</h2> -<h3 id="Référencement_dun_fichier_de_manifeste_de_cache">Référencement d'un fichier de manifeste de cache</h3> +<h3 id="Referencing_a_cache_manifest_file">Référencement d'un fichier de manifeste de cache</h3> -<p>L'attribut <code>manifest</code> dans une application web peut spécifier le chemin relatif d'un manifeste de cache ou une URL absolue. (Les URL absolues doivent être de la même origine que l'application). Le manifeste du cache peut avoir une extension de fichier, mais il doit être servi avec le MIME type <code>text/cache-manifest</code>.</p> +<p>L'attribut <code>manifest</code> dans une application web peut spécifier le chemin relatif d'un manifeste de cache ou une URL absolue. (Les URL absolues doivent être de la même origine que l'application). Le manifeste du cache peut avoir une extension de fichier, mais il doit être servi avec le MIME type <code>text/cache-manifest</code>.</p> -<div class="note"><strong>Note: </strong>Sur les serveurs Apache, le MIME type pour les fichiers manifest (.appcache) peut être défini par l'ajout de <code>AddType text/cache-manifest .appcache</code> à un fichier a .htaccess soit à l'intérieur du répertoire racine, soit le même répertoire que l'application.</div> +<div class="notecard note"> + <p><strong>Note :</strong> Sur les serveurs Apache, le MIME type pour les fichiers manifest (.appcache) peut être défini par l'ajout de <code>AddType text/cache-manifest .appcache</code> à un fichier a .htaccess soit à l'intérieur du répertoire racine, soit le même répertoire que l'application.</p> +</div> -<h3 id="Les_entrées_dans_un_manifeste_de_cache">Les entrées dans un manifeste de cache</h3> +<h3 id="Entries_in_a_cache_manifest_file">Les entrées dans un manifeste de cache</h3> -<p>Le fichier manifest de cache est un simple fichier de texte qui liste les ressources que le navigateur doit cache pour l'accès hors ligne. Les ressources sont identifiées par URI. Les entrées listées dans le manifeste de cache doivent avoir le même plan, hôte, et port comme un manifest.</p> +<p>Le fichier manifest de cache est un simple fichier de texte qui liste les ressources que le navigateur doit cache pour l'accès hors ligne. Les ressources sont identifiées par URI. Les entrées listées dans le manifeste de cache doivent avoir le même plan, hôte, et port comme un manifest.</p> -<h3 id="Example_1_Un_fichier_manifeste_simple">Example 1: Un fichier manifeste simple</h3> +<h3 id="Example_1_a_simple_cache_manifest_file">Example 1: Un fichier manifeste simple</h3> <p>Ci-dessous, un exemple simple de manifeste — <code>example.appcache</code> utilisé par le site imaginaire www.example.com:</p> -<pre class="notranslate">CACHE MANIFEST +<pre>CACHE MANIFEST # v1 - 2011-08-13 # Ceci est un commentaire. https://www.example.com/index.html @@ -117,28 +128,30 @@ https://www.example.com/blah/blah <p>Le commentaire « v1 » n'est pas là par hasard : le cache n'est mis à jour que quand le manifeste change, avec une correspondance d'octet à octet. Si vous utilisez d'autres ressources (par exemple en mettant à jour le contenu de l'image <code>header.png</code>), vous devez changer le manifeste pour signaller au navigateur qu'il doit rafraîchir le cache, et, comme <code>header.png</code> est déjà présent dans le cache, vous devez modifier quelquechose d'autre. Bien que vous puissiez changer n'importe quoi d'autre dans le manifest, utiliser un numéro de version est une bonne pratique conseillée.</p> -<div class="warning"><strong>Important:</strong> N'utilisez pas le manifeste lui-même dans le fichier de manifeste : il vous serait alors quasiment impossible d'informer le navigateur lors de la mise à jour du manifeste.</div> +<div class="notecard warning"> + <p><strong>Important :</strong> N'utilisez pas le manifeste lui-même dans le fichier de manifeste : il vous serait alors quasiment impossible d'informer le navigateur lors de la mise à jour du manifeste.</p> +</div> -<h3 id="Des_sections_dans_un_manifeste_de_cache_CACHE_NETWORK_et_FALLBACK">Des sections dans un manifeste de cache: <code>CACHE</code>, <code>NETWORK</code>, et <code>FALLBACK</code></h3> +<h3 id="Sections_in_a_cache_manifest_file_CACHE_NETWORK_and_FALLBACK">Des sections dans un manifeste de cache: <code>CACHE</code>, <code>NETWORK</code>, et <code>FALLBACK</code></h3> -<p>Un manifeste peut avoir trois sections distinctes: <code>CACHE</code>, <code>NETWORK</code>, et <code>FALLBACK</code>.</p> +<p>Un manifeste peut avoir trois sections distinctes: <code>CACHE</code>, <code>NETWORK</code>, et <code>FALLBACK</code>.</p> <dl> - <dt><code>CACHE:</code></dt> - <dd>Ceci est la section par défaut pour les entrées dans un manifeste de cache. Les fichiers sont répertoriés sous le CACHE: l'en-tête de section (ou immédiatement après la ligne MANIFESTE CACHE) est explicitement mis en cache après qu'il ait été téléchargé pour la première fois.</dd> - <dt><code>NETWORK:</code></dt> - <dd>Les fichiers répertoriés dans le NETWORK: l'en-tête de section dans le fichier manifeste de cache est une ressource de la liste blanche qui nécessite une connexion au serveur. Toutes les demandes à cette ressource contournent le cache, même si l'utilisateur est déconnecté. Le caractère générique * peut être utilisé qu'une seule fois. La plupart des sites en ont besoin *.</dd> - <dt><code>FALLBACK:</code></dt> - <dd>Le <code>FALLBACK:</code> section qui spécifie les pages de repli que le navigateur doit utiliser si une ressource est inaccessible. Chaque entrée dans cette section répertorie deux URIs (le premier est la ressource, le second est le repli). Les deux URIs doivent être relatif et de la même origine que le fichier manifeste. Les Wildcards peuvent être utilisés.</dd> + <dt><code>CACHE:</code></dt> + <dd>Ceci est la section par défaut pour les entrées dans un manifeste de cache. Les fichiers sont répertoriés sous le CACHE: l'en-tête de section (ou immédiatement après la ligne MANIFESTE CACHE) est explicitement mis en cache après qu'il ait été téléchargé pour la première fois.</dd> + <dt><code>NETWORK:</code></dt> + <dd>Les fichiers répertoriés dans le NETWORK: l'en-tête de section dans le fichier manifeste de cache est une ressource de la liste blanche qui nécessite une connexion au serveur. Toutes les demandes à cette ressource contournent le cache, même si l'utilisateur est déconnecté. Le caractère générique * peut être utilisé qu'une seule fois. La plupart des sites en ont besoin *.</dd> + <dt><code>FALLBACK:</code></dt> + <dd>Le <code>FALLBACK:</code> section qui spécifie les pages de repli que le navigateur doit utiliser si une ressource est inaccessible. Chaque entrée dans cette section répertorie deux URIs (le premier est la ressource, le second est le repli). Les deux URIs doivent être relatif et de la même origine que le fichier manifeste. Les Wildcards peuvent être utilisés.</dd> </dl> -<p>Les sections <code>CACHE</code>, <code>NETWORK</code>, et FALLBACK peuvent être listés dans n'importe quel ordre dans un manifeste de cache, et chaque section peut apparaître plus qu'une fois dans un simple manifeste.</p> +<p>Les sections <code>CACHE</code>, <code>NETWORK</code>, et FALLBACK peuvent être listés dans n'importe quel ordre dans un manifeste de cache, et chaque section peut apparaître plus qu'une fois dans un simple manifeste.</p> -<h3 id="Example_2_Un_manifeste_de_cache_plus_complet">Example 2 : Un manifeste de cache plus complet</h3> +<h3 id="Example_2_a_more_complete_cache_manifest_file">Example 2 : Un manifeste de cache plus complet</h3> <p>Voici un exemple plus complet de manifeste pour notre site imaginaire www.example.com.</p> -<pre class="notranslate">CACHE MANIFEST +<pre>CACHE MANIFEST # v1 2011-08-14 # Ceci est un autre commentaire index.html @@ -156,144 +169,148 @@ network.html</pre> <p>Nous utilisons dans cet exemple les sections <code>FALLBACK </code>et <code>NETWORK</code> pour préciser que la page <code>network.html</code> doit toujours être récupérée depuis le réseau et que la page <code>fallback.html</code> doit être utilisée comme ressource de secours, par exemple si la connexion au serveur ne peut être établie.</p> -<h3 id="Structure_dun_manifeste">Structure d'un manifeste</h3> +<h3 id="Structure_of_a_cache_manifest_file">Structure d'un manifeste</h3> -<p>Les manifestes doivent être servis avec le type MIME <code>text/cache-manifest</code>, et toutes les ressources servies en utilisant ce type MIME doivent respecter la syntaxe d'un manifeste, comme défini ici.</p> +<p>Les manifestes doivent être servis avec le type MIME <code>text/cache-manifest</code>, et toutes les ressources servies en utilisant ce type MIME doivent respecter la syntaxe d'un manifeste, comme défini ici.</p> <p>Les manifestes sont des fichiers textes au format UTF-8 et peuvent, éventuellement, inclure un caractère BOM. Les nouvelles lignes peuvent être représentés par saut de ligne (<code>U+000A</code>), retour chariot (<code>U+000D</code>), ou les deux.</p> -<p>La première ligne du manifeste doit être la chaine <code>CACHE MANIFEST</code> (séparé par un simple espace <code>U+0020</code>), suivi par aucun ou plusieurs espaces ou tabulations. Tout autre texte sur la ligne sera ignoré.</p> +<p>La première ligne du manifeste doit être la chaine <code>CACHE MANIFEST</code> (séparé par un simple espace <code>U+0020</code>), suivi par aucun ou plusieurs espaces ou tabulations. Tout autre texte sur la ligne sera ignoré.</p> <p>Le reste du manifeste peut contenir 0 ou plusieurs lignes :</p> <dl> - <dt>Lines vides</dt> - <dd>Vous pouvez utiliser les lignes vides comprenant 0 ou plusieurs espaces ou tabulations.</dd> - <dt>Commentaire</dt> - <dd>Les commentaires consistent en 0 ou plusieurs espaces ou tabulations suivis du caractère <code>#</code>, suivi de 0 ou plusieurs caractères de texte. Les commentaires devraient être utilisés seulement sur leur propre ligne, et ne devrait pas être ajoutés à d'autres lignes. Cela signifie également que vous ne pouvez pas spécifier les identifiants de fragments.</dd> - <dt>Section de tête</dt> - <dd>La <code>section header</code> précise la section du cache qui est manipulée. Il en existe trois types:</dd> + <dt>Lines vides</dt> + <dd>Vous pouvez utiliser les lignes vides comprenant 0 ou plusieurs espaces ou tabulations.</dd> + <dt>Commentaire</dt> + <dd>Les commentaires consistent en 0 ou plusieurs espaces ou tabulations suivis du caractère <code>#</code>, suivi de 0 ou plusieurs caractères de texte. Les commentaires devraient être utilisés seulement sur leur propre ligne, et ne devrait pas être ajoutés à d'autres lignes. Cela signifie également que vous ne pouvez pas spécifier les identifiants de fragments.</dd> + <dt>Section de tête</dt> + <dd>La <code>section header</code> précise la section du cache qui est manipulée. Il en existe trois types:</dd> </dl> <blockquote> -<table class="standard-table" style="height: 130px; width: 535px;"> - <tbody> - <tr> - <th>Section header</th> - <th>Description</th> - </tr> - <tr> - <td><code>CACHE:</code></td> - <td>Passe à la section explicite. C'est la section par défaut.</td> - </tr> - <tr> - <td><code>NETWORK:</code></td> - <td>Passe à la section des sections en ligne sur la liste blanche.</td> - </tr> - <tr> - <td><code>FALLBACK:</code></td> - <td>Passe à la section de secours.</td> - </tr> - </tbody> -</table> + <table class="standard-table"> + <thead> + <tr> + <th>Section header</th> + <th>Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>CACHE:</code></td> + <td>Passe à la section explicite. C'est la section par défaut.</td> + </tr> + <tr> + <td><code>NETWORK:</code></td> + <td>Passe à la section des sections en ligne sur la liste blanche.</td> + </tr> + <tr> + <td><code>FALLBACK:</code></td> + <td>Passe à la section de secours.</td> + </tr> + </tbody> + </table> </blockquote> <dl> - <dd>La ligne d'en-tête de section peut contenir des espaces, mais doit inclure un « : » dans le nom de la section.</dd> - <dt>Section data</dt> - <dd>Le format des lignes de données varie selon les sections. Dans la section explicite (<code>CACHE:</code>) chaque ligne contient une référence URI ou IRI à une ressource en cache (aucun caractère joker n'est admis dans cette section). Des espaces sont accepté avant et après l'URI on l'IRI sur chaque ligne. Dans la section de secours, chaque ligne est une référence URI ou IRI vers une ressource, suivie d'une ressource de secours qui sera utilisée lorsque la connexion au serveur ne peut être établie. Dans la section en ligne, chaque ligne est une référence valide URI ou IRI à une ressource qui sera récupérée sur le réseau (le caractère joker « * » est autorisé dans cette section). - <div class="note"><strong>Note: </strong>Les URI relatives pointent vers les URI du manifeste, et non vers les URI du document qui référence le manifeste.</div> - </dd> + <dd>La ligne d'en-tête de section peut contenir des espaces, mais doit inclure un « : » dans le nom de la section.</dd> + <dt>Section data</dt> + <dd>Le format des lignes de données varie selon les sections. Dans la section explicite (<code>CACHE:</code>) chaque ligne contient une référence URI ou IRI à une ressource en cache (aucun caractère joker n'est admis dans cette section). Des espaces sont accepté avant et après l'URI on l'IRI sur chaque ligne. Dans la section de secours, chaque ligne est une référence URI ou IRI vers une ressource, suivie d'une ressource de secours qui sera utilisée lorsque la connexion au serveur ne peut être établie. Dans la section en ligne, chaque ligne est une référence valide URI ou IRI à une ressource qui sera récupérée sur le réseau (le caractère joker « * » est autorisé dans cette section). + <div class="notecard note"> + <p><strong>Note: </strong>Les URI relatives pointent vers les URI du manifeste, et non vers les URI du document qui référence le manifeste.</p> + </div> + </dd> </dl> <p>Le manifeste peut passer à l'envie d'une section à l'autre (chaque en-tête de section peut être utilisée plusieurs fois), et les sections vides sont tolérées.</p> -<h2 id="Les_ressources_dans_AppCache">Les ressources dans AppCache</h2> +<h2 id="Resources_in_an_application_cache">Les ressources dans AppCache</h2> -<p>Le cache inclue toujours au moins une ressource, identifiée par URI. Toutes les ressources répondent à une des catégories suivantes :</p> +<p>Le cache inclue toujours au moins une ressource, identifiée par URI. Toutes les ressources répondent à une des catégories suivantes :</p> <dl> - <dt>Entrées Maitres</dt> - <dd>Il s'agit de ressources ajoutées au cache parce qu'un contexte de navigation visité par l'utilisateur incluait un document qui indiquait que ces ressources étaient dans le cache en utilisant son attribut <code>manifest</code>.</dd> - <dt>Entrées Explicites</dt> - <dd>Il s'agit de ressources listées dans le manifeste du cache.</dd> - <dt>Entrées Network</dt> - <dd>Il s'agit de ressources listées dans le manifeste du cache comme entrées de network.</dd> - <dt>Entrées Fallback</dt> - <dd>Il s'agit de ressources listées dans le manifeste du cache comme entrées de fallback.</dd> + <dt>Entrées Maitres</dt> + <dd>Il s'agit de ressources ajoutées au cache parce qu'un contexte de navigation visité par l'utilisateur incluait un document qui indiquait que ces ressources étaient dans le cache en utilisant son attribut <code>manifest</code>.</dd> + <dt>Entrées Explicites</dt> + <dd>Il s'agit de ressources listées dans le manifeste du cache.</dd> + <dt>Entrées Network</dt> + <dd>Il s'agit de ressources listées dans le manifeste du cache comme entrées de network.</dd> + <dt>Entrées Fallback</dt> + <dd>Il s'agit de ressources listées dans le manifeste du cache comme entrées de fallback.</dd> </dl> -<div class="note"><strong>Note : </strong>Les ressources peuvent être marquées dans plusieurs catégories, et peuvent donc être catégorisées comme des entrées multiples. Par exemple, une entrée peut être à la fois une entrée explicite et une entrée de fallback.</div> +<div class="notecard note"> + <p><strong>Note : </strong>Les ressources peuvent être marquées dans plusieurs catégories, et peuvent donc être catégorisées comme des entrées multiples. Par exemple, une entrée peut être à la fois une entrée explicite et une entrée de fallback.</p> +</div> <p>Les catégories ressources sont décrites en détail ci-dessous.</p> -<h3 id="Entrées_Maitres">Entrées Maitres</h3> +<h3 id="Master_entries">Entrées Maitres</h3> -<p>Tous les fichiers HTML peuvent inclure un attribut {{htmlattrxref("manifest","html")}} dans leur élément {{HTMLElement("html")}}. Par exemple, disons que nous avons le fichier <code><a class="linkification-ext external" href="https://www.foo.bar/entry.html">https://www.example.com/entry.html</a></code>, qui ressemble à ça :</p> +<p>Tous les fichiers HTML peuvent inclure un attribut {{htmlattrxref("manifest","html")}} dans leur élément {{HTMLElement("html")}}. Par exemple, disons que nous avons le fichier <code><a href="https://www.foo.bar/entry.html">https://www.example.com/entry.html</a></code>, qui ressemble à ça :</p> -<pre class="brush: html notranslate"><html manifest="example.appcache"> +<pre class="brush: html"><html manifest="example.appcache"> <h1>Application Cache Example</h1> </html> </pre> -<p>Si <code>entry.html</code> n'est pas inclue dans le manifeste, visiter la page <code>entry.html</code> provoquera l'ajout de la page <code>entry.html</code> dans le cache de l'application comme une master entry.</p> - -<h3 id="Entrées_Explicites">Entrées Explicites</h3> +<p>Si <code>entry.html</code> n'est pas inclue dans le manifeste, visiter la page <code>entry.html</code> provoquera l'ajout de la page <code>entry.html</code> dans le cache de l'application comme une master entry.</p> -<p>Les entrées explicites sont des ressources explicitement listées dans la section <code>CACHE </code>d'un manifeste de cache.</p> +<h3 id="Explicit_entries">Entrées Explicites</h3> -<h3 id="Entrées_Network">Entrées Network</h3> +<p>Les entrées explicites sont des ressources explicitement listées dans la section <code>CACHE </code>d'un manifeste de cache.</p> -<p>Les entrées listées dans <code>NETWORK :</code> peuvent contenir plusieurs ou aucune ressource que l'application requiert lors d'un accès en ligne. C'est principalement une <em>liste blanche en ligne</em>. Les URIS spécifiées dans la section <code>NETWORK</code> sont chargées depuis le serveur plutôt que depuis le cache. Cela permet au modèle de sécurité du navigateur de protéger l'utilisateur de possibles brèches de sécurité en limitant l'accès aux seules ressources approuvées.</p> +<h3 id="Network_entries">Entrées Network</h3> -<div class="note"><strong>Note :</strong> La <em>liste blanche en ligne</em> est ignorée pour les versions de Firefox antérieures à 3.5.</div> +<p>Les entrées listées dans <code>NETWORK :</code> peuvent contenir plusieurs ou aucune ressource que l'application requiert lors d'un accès en ligne. C'est principalement une <em>liste blanche en ligne</em>. Les URIS spécifiées dans la section <code>NETWORK</code> sont chargées depuis le serveur plutôt que depuis le cache. Cela permet au modèle de sécurité du navigateur de protéger l'utilisateur de possibles brèches de sécurité en limitant l'accès aux seules ressources approuvées.</p> <p>Vous pouvez l'utiliser pour, par exemple, charger et exécuter des scripts et d'autres codes depuis le serveur au lieu du cache. :</p> -<pre class="notranslate">CACHE MANIFEST +<pre>CACHE MANIFEST NETWORK: -/api -</pre> +/api</pre> -<p>Ceci assure que les requêtes téléchargent les ressources contenues dans <code><a class="external" href="https://www.example.com/api/" rel="freelink">https://www.example.com/api/</a></code> viendront toujours du réseau sans essayer d'accéder au cache.</p> +<p>Ceci assure que les requêtes téléchargent les ressources contenues dans <code><a href="https://www.example.com/api/">https://www.example.com/api/</a></code> viendront toujours du réseau sans essayer d'accéder au cache.</p> -<div class="note"><strong>Note </strong>: Juste omettre les <em>master entries</em> (les fichiers qui ont l'attribut <code>manifest</code> défini dans l'élément <code>html</code>) dans le manifeste n'aurait pas le même comportement parce que les <em>master entries</em> seront ajoutées — et donc servies depuis— le cache. </div> +<div class=" notecard note"> + <p><strong>Note </strong>: Juste omettre les <em>master entries</em> (les fichiers qui ont l'attribut <code>manifest</code> défini dans l'élément <code>html</code>) dans le manifeste n'aurait pas le même comportement parce que les <em>master entries</em> seront ajoutées — et donc servies depuis— le cache.</p> +</div> -<h3 id="Entrées_Fallback">Entrées Fallback</h3> +<h3 id="Fallback_entries">Entrées Fallback</h3> -<p>Les entrées de fallback sont utilisées quand une tentative de chargement d'une ressource échoue. Par exemple, imaginons qu'il y a un manifeste situé à <code><a class="external" href="https://www.example.com/example.appcache" rel="freelink">https://www.example.com/example.appcache</a></code>, et qui contient :</p> +<p>Les entrées de fallback sont utilisées quand une tentative de chargement d'une ressource échoue. Par exemple, imaginons qu'il y a un manifeste situé à <code><a href="https://www.example.com/example.appcache">https://www.example.com/example.appcache</a></code>, et qui contient :</p> -<pre class="notranslate">CACHE MANIFEST +<pre>CACHE MANIFEST FALLBACK: -example/bar/ example.html -</pre> +example/bar/ example.html</pre> -<p>Toute requête vers <code><a class="external" href="https://www.example.com/example/bar/" rel="freelink">https://www.example.com/example/bar/</a></code> ou n'importe lequel de ses sous-répertoires et contenus provoquera une tentative de chargement de la ressource demandée. Si la tentative échoue, soit à cause d'un échec réseau ou d'une erreur serveur quelle qu'elle soit, le contenu du fichier <code>example.html</code> sera chargé à la place.</p> +<p>Toute requête vers <code><a href="https://www.example.com/example/bar/">https://www.example.com/example/bar/</a></code> ou n'importe lequel de ses sous-répertoires et contenus provoquera une tentative de chargement de la ressource demandée. Si la tentative échoue, soit à cause d'un échec réseau ou d'une erreur serveur quelle qu'elle soit, le contenu du fichier <code>example.html</code> sera chargé à la place.</p> -<h2 id="Les_états">Les états</h2> +<h2 id="Cache_states">Les états</h2> -<p>Chaque cache a un statut qui indique la condition actuelle du cache. Les caches qui partagent la même URI de manifeste partagent le même statut, qui est un des suivants :</p> +<p>Chaque cache a un statut qui indique la condition actuelle du cache. Les caches qui partagent la même URI de manifeste partagent le même statut, qui est un des suivants :</p> <dl> - <dt><code>UNCACHED</code></dt> - <dd>Une valeur spéciale qui indique qu'un object <em>application cache</em> n'est pas complètement initialisée.</dd> - <dt><code>IDLE</code></dt> - <dd>Le cache n'est pas en cours de mise à jour.</dd> - <dt><code>CHECKING</code></dt> - <dd>Le manifeste est en train d'être contrôlé pour d'éventuelles mises à jour.</dd> - <dt><code>DOWNLOADING</code></dt> - <dd>Des ressources sont en train d'être téléchargées pour être ajoutées au cache, dû à un changement du manifeste.</dd> - <dt><code>UPDATEREADY</code></dt> - <dd>Il y a une nouvelle version du cache disponible. Il y a un évènement <code>updateready</code> correspondant, qui est lancé au lieu de l'évènement <code>cached</code> quand une nouvelle mise à jour a été téléchargée mais pas encore activée via la méthode <code>swapCache()</code>.</dd> - <dt><code>OBSOLETE</code></dt> - <dd>Le groupe de caches est maintenant obsolète.</dd> + <dt><code>UNCACHED</code></dt> + <dd>Une valeur spéciale qui indique qu'un object <em>application cache</em> n'est pas complètement initialisée.</dd> + <dt><code>IDLE</code></dt> + <dd>Le cache n'est pas en cours de mise à jour.</dd> + <dt><code>CHECKING</code></dt> + <dd>Le manifeste est en train d'être contrôlé pour d'éventuelles mises à jour.</dd> + <dt><code>DOWNLOADING</code></dt> + <dd>Des ressources sont en train d'être téléchargées pour être ajoutées au cache, dû à un changement du manifeste.</dd> + <dt><code>UPDATEREADY</code></dt> + <dd>Il y a une nouvelle version du cache disponible. Il y a un évènement <code>updateready</code> correspondant, qui est lancé au lieu de l'évènement <code>cached</code> quand une nouvelle mise à jour a été téléchargée mais pas encore activée via la méthode <code>swapCache()</code>.</dd> + <dt><code>OBSOLETE</code></dt> + <dd>Le groupe de caches est maintenant obsolète.</dd> </dl> -<h2 id="Test_pour_les_mises_à_jour_des_manifestes_de_cache">Test pour les mises à jour des manifestes de cache</h2> +<h2 id="Testing_for_updates_to_the_cache_manifest">Test pour les mises à jour des manifestes de cache</h2> -<p>Vous pouvez programmer un test pour voir si une application possède un manifeste de cache à jour en utilisant JavaScript. Depuis un manifeste de cache peut être été mis à jour avant un script qui teste si les événements sont à jour, les scripts doivent toujours tester <code>window.applicationCache.status</code>.</p> +<p>Vous pouvez programmer un test pour voir si une application possède un manifeste de cache à jour en utilisant JavaScript. Depuis un manifeste de cache peut être été mis à jour avant un script qui teste si les événements sont à jour, les scripts doivent toujours tester <code>window.applicationCache.status</code>.</p> -<pre class="brush: js notranslate">function onUpdateReady() { +<pre class="brush: js">function onUpdateReady() { console.log('nouvelle version trouvée !'); } window.applicationCache.addEventListener('updateready', onUpdateReady); @@ -301,39 +318,31 @@ if(window.applicationCache.status === window.applicationCache.UPDATEREADY) { onUpdateReady(); }</pre> -<p>Pour démarrer manuellement le test pour un nouveau manifeste de cache, vous pouvez utilisez <code>window.applicationCache.update()</code>.</p> +<p>Pour démarrer manuellement le test pour un nouveau manifeste de cache, vous pouvez utilisez <code>window.applicationCache.update()</code>.</p> -<h2 id="Pièges">Pièges</h2> +<h2 id="Gotchas">Pièges</h2> <ul> - <li>Ne jamais accéder à des fichiers mis en cache à l'aide des paramètres GET traditionnels (comme <code>other-cached-page.html?parameterName=value</code>). Cela rendra le contournement du navigateur du cache et de tenter de l'obtenir à partir du réseau. Pour créer un lien vers les ressources mises en cache qui ont des paramètres analysés dans les paramètres d'utilisation de JavaScript dans la partie de hach de la liaison, comme <code>other-cached-page.html#whatever?parameterName=value</code>.</li> - <li>Lorsque les applications sont mises en cache, mettant simplement à jour les ressources (fichiers) qui sont utilisés dans une page Web mais cela ne suffit pas à mettre à jour les fichiers qui ont été mis en cache. Vous devez mettre à jour le fichier manifeste de cache lui-même avant que le navigateur récupère et utilise les fichiers mis à jour. Vous pouvez le faire par programme<code>window.applicationCache.swapCache()</code>, si les ressources qui ont déjà été chargées ne seront pas affectés. Pour vous assurer que les ressources sont chargées à partir d'une nouvelle version du cache de l'application, rafraîchir la page est idéal.</li> - <li>Il est une bonne idée de mettre des en-têtes expirés sur votre serveur web pour les fichiers * .appcache pour qu'ils expirent immédiatement. Cela évite le risque de mise en cache des fichiers manifestes. Par exemple, dans Apache, vous pouvez spécifier une telle configuration comme suit:<br> + <li>Ne jamais accéder à des fichiers mis en cache à l'aide des paramètres GET traditionnels (comme <code>other-cached-page.html?parameterName=value</code>). Cela rendra le contournement du navigateur du cache et de tenter de l'obtenir à partir du réseau. Pour créer un lien vers les ressources mises en cache qui ont des paramètres analysés dans les paramètres d'utilisation de JavaScript dans la partie de hach de la liaison, comme <code>other-cached-page.html#whatever?parameterName=value</code>.</li> + <li>Lorsque les applications sont mises en cache, mettant simplement à jour les ressources (fichiers) qui sont utilisés dans une page Web mais cela ne suffit pas à mettre à jour les fichiers qui ont été mis en cache. Vous devez mettre à jour le fichier manifeste de cache lui-même avant que le navigateur récupère et utilise les fichiers mis à jour. Vous pouvez le faire par programme<code>window.applicationCache.swapCache()</code>, si les ressources qui ont déjà été chargées ne seront pas affectés. Pour vous assurer que les ressources sont chargées à partir d'une nouvelle version du cache de l'application, rafraîchir la page est idéal.</li> + <li>Il est une bonne idée de mettre des en-têtes expirés sur votre serveur web pour les fichiers * .appcache pour qu'ils expirent immédiatement. Cela évite le risque de mise en cache des fichiers manifestes. Par exemple, dans Apache, vous pouvez spécifier une telle configuration comme suit:<br> <code>ExpiresByType text/cache-manifest "access plus 0 seconds"</code></li> </ul> -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> <p>{{Compat("html.elements.html.manifest")}}</p> -<h2 id="Voir_aussi">Voir aussi</h2> +<h2 id="See_also">Voir aussi</h2> <ul> - <li><a href="https://www.html5rocks.com/en/tutorials/appcache/beginner/">HTML5Rocks - A Beginner's Guide to Using the Application Cache</a></li> - <li><a href="https://appcache.offline.technology/">Appcache Facts</a> - detailed information on AppCache idiosyncrasies</li> - <li><a href="https://alistapart.com/article/application-cache-is-a-douchebag">A List Apart: Application Cache is a Douchebag</a> - <ul> - <li><a href="https://flailingmonkey.com/application-cache-not-a-douchebag">The Application Cache is no longer a Douchebag</a> - an overview of the app cache debugging tools added in Firefox 23.</li> - </ul> - </li> - <li><a href="https://hacks.mozilla.org/2010/01/offline-web-applications/">offline web applications</a> at hacks.mozilla.org - showcases an offline app demo and explains how it works.</li> - <li><a href="https://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html#offline">HTML 5 working draft: Offline web applications</a></li> - <li><a href="https://www.w3.org/TR/offline-webapps/">W3C Working Group Note: Offline Web Applications</a></li> - <li><a href="https://developer.teradata.com/blog/js186040/2011/11/html5-cache-manifest-an-off-label-usage">HTML5 Cache Manifest: An Off-label Usage</a></li> - <li><a href="https://www.ibm.com/developerworks/web/library/wa-ffox3/">Get ready for Firefox 3.0 - A Web developer's guide to the many new features in this popular browser, especially the offline application features</a> (IBM developerWorks)</li> - <li><a href="/fr/docs/Application_cache_implementation_overview">Application cache implementation overview</a></li> - <li><a href="https://www.onlinewebcheck.com/check.php?adv=1">OnlineWebCheck.com - Check manifeste file syntax (application Windows)</a></li> + <li><a href="https://web.dev/appcache-removal/">Preparing for AppCache Removal</a> - web.dev blog with useful timeline information</li> + <li><a href="http://www.html5rocks.com/en/tutorials/appcache/beginner/">HTML5Rocks - A Beginner's Guide to Using the Application Cache</a></li> + <li><a href="https://alistapart.com/article/application-cache-is-a-douchebag">A List Apart: Application Cache is a Douchebag</a> + <ul> + <li><a href="https://flailingmonkey.com/application-cache-not-a-douchebag">The Application Cache is no longer a Douchebag</a> - an overview of the app cache debugging tools added in Firefox 23.</li> + </ul> + </li> + <li><a href="https://hacks.mozilla.org/2010/01/offline-web-applications/">offline web applications</a> at hacks.mozilla.org - showcases an offline app demo and explains how it works.</li> + <li><a href="https://www.w3.org/TR/offline-webapps/">W3C Working Group Note: Offline Web Applications</a></li> </ul> -</div> diff --git a/files/fr/web/html/viewport_meta_tag/index.html b/files/fr/web/html/viewport_meta_tag/index.html new file mode 100644 index 0000000000..764a8cb910 --- /dev/null +++ b/files/fr/web/html/viewport_meta_tag/index.html @@ -0,0 +1,100 @@ +--- +title: >- + Utilisation de la balise meta viewport pour contrôler la mise en page sur + mobile +slug: Web/HTML/Viewport_meta_tag +tags: + - Layout + - Responsiveness + - Mobile + - viewport +translation_of: Web/HTML/Viewport_meta_tag +--- +<p class="summary">Le <a href="/fr/docs/Glossary/Viewport"><i>viewport</i></a> du navigateur est la zone de la fenêtre dans laquelle le contenu web peut être vu. Souvent, cette zone n'a pas la même taille que la page rendue, auquel cas le navigateur fournit des barres de défilement pour que l'utilisateur et l'utilisatrice puissent faire défiler la page et accéder à tout le contenu.</p> + +<h2 id="Background">Contexte</h2> + +<p>Les appareils à écran étroit (par exemple, les mobiles) rendent les pages dans une fenêtre virtuelle ou viewport, qui est généralement plus large que l'écran, puis réduisent le résultat rendu afin qu'il puisse être vu en une seule fois. Les utilisateurs et utilisatrices peuvent alors effectuer un panoramique et un zoom pour voir différentes zones de la page. Par exemple, si l'écran d'un téléphone mobile a une largeur de 640 pixels, les pages peuvent être affichées dans une fenêtre virtuelle de 980 pixels, puis réduites pour tenir dans l'espace de 640 pixels.</p> + +<p>En effet, de nombreuses pages ne sont pas optimisées pour les mobiles et ne fonctionnent pas (ou du moins n'ont pas l'air de fonctionner correctement) lorsqu'elles sont affichées sur un écran de petite taille. Cette fenêtre virtuelle est un moyen d'améliorer l'aspect des sites non optimisés pour les mobiles sur les appareils à écran étroit.</p> + +<h3 id="Enter_viewport_meta_tag">Voici la métabalise viewport</h3> + +<p>Cependant, ce mécanisme n'est pas aussi bon pour les pages qui sont optimisées pour les écrans étroits à l'aide de <a href="/fr/docs/Web/CSS/Media_Queries"><i>media queries</i></a> - si le viewport virtuel est de 980px par exemple, les media queries qui se déclenchent à 640px, 480px ou moins ne seront jamais utilisées, ce qui limite l'efficacité de ces techniques de <i>responsive design</i>.</p> + +<p>Pour atténuer ce problème de fenêtre virtuelle sur les appareils à écran étroit, Apple a introduit la « métabalise viewport » dans Safari iOS pour permettre à une page web de contrôler la taille et l'échelle de la fenêtre. De nombreux autres navigateurs mobiles prennent désormais en charge cette balise, bien qu'elle ne fasse partie d'aucune norme web. La <a href="https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html">documentation</a> <small>(en)</small> d'Apple explique bien comment utiliser cette balise, mais nous avons dû faire un travail de détective pour savoir exactement comment l'implémenter dans Fennec. Par exemple, la documentation de Safari indique que le contenu est une « liste délimitée par des virgules », mais les navigateurs et pages web existants utilisent n'importe quel mélange de virgules, points-virgules et espaces comme séparateurs.</p> + +<p>Pour en savoir plus sur les fenêtres d'affichage dans les différents navigateurs mobiles, consultez <a href="http://www.quirksmode.org/mobile/viewports2.html">A Tale of Two Viewports</a> sur quirksmode.org.</p> + +<h2 id="Viewport_basics">Un viewport de base</h2> + +<p>Un site type, optimisé pour les mobiles, contient quelque chose comme ce qui suit :</p> + +<pre class="brush: html"><meta name="viewport" content="width=device-width, initial-scale=1"></pre> + +<p>La propriété <code>width</code> contrôle la taille de la zone d'affichage. Elle peut être définie sur un nombre spécifique de pixels comme <code>width=600</code> ou sur la valeur spéciale <code>device-width</code>, qui est la largeur de l'écran en pixels CSS à une échelle de 100%. (Il existe des valeurs <code>height</code> et <code>device-height</code> correspondantes, qui peuvent être utiles pour les pages comportant des éléments qui changent de taille ou de position en fonction de la hauteur du viewport).</p> + +<p>La propriété <code>initial-scale</code> contrôle le niveau de zoom lors du premier chargement de la page. Les propriétés <code>maximum-scale</code>, <code>minimum-scale</code> et <code>user-scalable</code> contrôlent la manière dont les utilisateurs et utilisatrices sont autorisé·e·s à zoomer ou dézoomer la page.</p> + +<div class="notecard warning"> + <p>L'utilisation du <code>user-scalable=no</code> peut causer des problèmes d'accessibilité aux utilisateurs et utilisatrices ayant des déficiences visuelles telles qu'une vision faible.</p> +</div> + +<h2 id="A_pixel_is_not_a_pixel">Un pixel n'est pas un pixel</h2> + +<p>Ces dernières années, les résolutions d'écran ont atteint une taille telle que les pixels individuels sont difficiles à distinguer à l'œil nu. Par exemple, les smartphones récents ont généralement un écran de 5 pouces avec des résolutions supérieures à 1920-1080 pixels (~400 dpi). Pour cette raison, de nombreux navigateurs peuvent afficher leurs pages dans une taille physique plus petite en convertissant plusieurs pixels matériels pour chaque « pixel » CSS. Au départ, cela a causé des problèmes de convivialité et de lisibilité sur de nombreux sites Web optimisés pour le tactile. Peter-Paul Koch a écrit sur ce problème dans <a href="http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html">A pixel is not a pixel</a> (en anglais).</p> + +<p>Sur les écrans à haute résolution, les pages avec <code>initial-scale=1</code> seront effectivement zoomées par les navigateurs. Leur texte sera lisse et net, mais leurs images bitmap ne profiteront probablement pas de la pleine résolution de l'écran. Pour obtenir des images plus nettes sur ces écrans, les développeurs web peuvent vouloir concevoir des images - ou des mises en page entières - à une échelle plus élevée que leur taille finale, puis les réduire à l'aide de CSS ou de propriétés viewport. Cette méthode est conforme à la spécification <a href="http://www.w3.org/TR/CSS2/syndata.html#length-units">CSS 2.1</a>, qui stipule ce qui suit :</p> + +<blockquote> + <p>Si la densité de pixels, du périphérique de sortie, est très différente de celle d'un écran d'ordinateur typique, l'agent utilisateur doit redimensionner les valeurs des pixels. Il est recommandé que l'unité de pixel fasse référence au nombre entier, de pixels du dispositif, qui se rapproche le plus du pixel de référence. Il est recommandé que le pixel de référence corresponde à l'angle visuel d'un pixel sur un dispositif, dont la densité de pixels est de 96 dpi et qui se trouve à une distance d'une longueur de bras du lecteur.</p> +</blockquote> + +<p>Pour les développeurs et développeuses web, cela signifie que la taille d'une page est beaucoup plus petite que le nombre réel de pixels et que les navigateurs peuvent dimensionner leurs mises en page et leurs images en conséquence. Mais n'oubliez pas que tous les appareils mobiles n'ont pas la même largeur ; vous devez vous assurer que vos pages fonctionnent bien dans une grande variété de tailles d'écran et d'orientations.</p> + +<p>Le rapport de pixels par défaut dépend de la densité de l'affichage. Sur un écran dont la densité est inférieure à 200 dpi, le rapport est de 1,0. Sur les écrans dont la densité est comprise entre 200 et 300dpi, le ratio est de 1,5. Sur les écrans dont la densité est supérieure à 300dpi, le ratio est le chiffre entier inférieur (<em>densité</em>/150dpi). Notez que le ratio par défaut n'est vrai que lorsque l'échelle du viewport est égale à 1. Sinon, le rapport entre les pixels CSS et les pixels du périphérique dépend du niveau de zoom actuel.</p> + +<h2 id="Viewport_width_and_screen_width">Largeur de la zone d'affichage et largeur de l'écran</h2> + +<p>Les sites peuvent définir leur viewport à une taille spécifique. Par exemple, la définition <code>"width=320, initial-scale=1"</code> peut être utilisée pour s'adapter précisément à l'écran d'un petit téléphone en mode portrait. Cela peut causer <a href="http://starkravingfinkle.org/blog/2010/01/perils-of-the-viewport-meta-tag/">des problèmes</a> <small>(en)</small> lorsque le navigateur ne rend pas une page à une taille supérieure. Pour remédier à cela, les navigateurs étendent la largeur de la fenêtre d'affichage si nécessaire pour remplir l'écran à l'échelle demandée. Cela est particulièrement utile sur les appareils à grand écran comme l'iPad. (L'article d'Allen Pike <a href="http://www.antipode.ca/2010/choosing-a-viewport-for-ipad-sites/">Choosing a viewport for iPad sites</a> (en anglais) contient une bonne explication pour les développeurs et développeuses web).</p> + +<p>Pour les pages qui définissent une échelle initiale ou maximale, cela signifie que la propriété <code>width</code> se traduit en fait par une largeur <em>minimum</em> de viewport. Par exemple, si votre mise en page nécessite une largeur d'au moins 500 pixels, vous pouvez utiliser le balisage suivant. Lorsque la largeur de l'écran est supérieure à 500 pixels, le navigateur élargira la fenêtre d'affichage (plutôt que de zoomer) pour s'adapter à l'écran :</p> + +<pre class="brush: html"><meta name="viewport" content="width=500, initial-scale=1"></pre> + +<p>Les autres <a href="/fr/docs/Web/HTML/Element/meta#attributes">attributs</a> disponibles sont <code>minimum-scale</code>, <code>maximum-scale</code> et <code>user-scalable</code>. Ces propriétés affectent l'échelle et la largeur initiales, ainsi que la limitation des changements de niveau de zoom.</p> + +<p>Tous les navigateurs mobiles ne gèrent pas les changements d'orientation de la même manière. Par exemple, Mobile Safari se contente souvent de zoomer la page lors du passage du portrait au paysage, au lieu de la disposer comme elle le ferait si elle était initialement chargée en paysage. Si les développeurs et développeuses Web veulent que leurs paramètres d'échelle restent cohérents lors du changement d'orientation sur l'iPhone, ils/elles doivent ajouter une valeur <code>maximum-scale</code> pour empêcher ce zoom, ce qui a l'effet secondaire parfois indésirable d'empêcher les utilisateurs/utilisatrices de faire un zoom avant :</p> + +<pre class="brush: html"><meta name="viewport" content="initial-scale=1, maximum-scale=1"></pre> + +<p>Supprimer le petit zoom appliqué par de nombreux smartphones en définissant les valeurs d'échelle initiale et d'échelle minimale à 0,86. Le résultat est que le défilement horizontal est supprimé dans n'importe quelle orientation et que l'utilisateur peut zoomer s'il le souhaite.</p> + +<pre class="brush: html"><meta name="viewport" content="width=device-width, initial-scale=0.86, maximum-scale=5.0, minimum-scale=0.86"></pre> + +<h2 id="Common_viewport_sizes_for_mobile_and_tablet_devices">Tailles communes des fenêtres d'affichage pour les appareils mobiles et les tablettes</h2> + +<p>Si vous voulez savoir quels appareils mobiles et tablettes ont quelles largeurs de visualisation, il existe une liste complète de <a href="https://docs.adobe.com/content/help/en/target/using/experiences/vec/mobile-viewports.html">tailles de visualisation des appareils mobiles et tablettes ici</a>. Elle donne des informations telles que la largeur du viewport en orientation portrait et paysage ainsi que la taille physique de l'écran, le système d'exploitation et la densité de pixels de l'appareil.</p> + +<h2 id="Specifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Device', '#viewport-meta', '<meta name="viewport">')}}</td> + <td>{{Spec2('CSS3 Device')}}</td> + <td>Décrit de manière non normative l'élément META Viewport</td> + </tr> + </tbody> +</table> + +<p>Il existe manifestement une demande pour la métabalise viewport, puisqu'elle est prise en charge par la plupart des navigateurs mobiles populaires et utilisée par des milliers de sites web. Il serait bon de disposer d'une véritable norme permettant aux pages web de contrôler les propriétés de la fenêtre d'affichage. Au fur et à mesure que le processus de normalisation avance, Mozilla s'efforcera de se tenir au courant de tout changement.</p> + +<p>{{QuickLinksWithSubpages("/fr/docs/Web/HTML")}}</p> |