From 39f2114f9797eb51994966c6bb8ff1814c9a4da8 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 12:36:08 +0100 Subject: unslug fr: move --- .../fr/web/html/appliquer_des_couleurs/index.html | 506 -------------- files/fr/web/html/applying_color/index.html | 506 ++++++++++++++ .../fr/web/html/attributes/autocomplete/index.html | 228 ++++++ .../fr/web/html/attributes/crossorigin/index.html | 96 +++ files/fr/web/html/attributes/index.html | 767 +++++++++++++++++++++ files/fr/web/html/attributes/pattern/index.html | 161 +++++ .../fr/web/html/attributs/autocomplete/index.html | 228 ------ files/fr/web/html/attributs/index.html | 767 --------------------- files/fr/web/html/attributs/pattern/index.html | 161 ----- .../html/attributs_universels/accesskey/index.html | 143 ---- .../attributs_universels/autocapitalize/index.html | 49 -- .../web/html/attributs_universels/class/index.html | 63 -- .../contenteditable/index.html | 85 --- .../attributs_universels/contextmenu/index.html | 118 ---- .../attributs_universels/data-_star_/index.html | 83 --- .../web/html/attributs_universels/dir/index.html | 90 --- .../html/attributs_universels/draggable/index.html | 71 -- .../html/attributs_universels/dropzone/index.html | 48 -- .../html/attributs_universels/hidden/index.html | 69 -- .../fr/web/html/attributs_universels/id/index.html | 72 -- files/fr/web/html/attributs_universels/index.html | 196 ------ .../html/attributs_universels/inputmode/index.html | 65 -- .../fr/web/html/attributs_universels/is/index.html | 67 -- .../html/attributs_universels/itemid/index.html | 116 ---- .../html/attributs_universels/itemprop/index.html | 436 ------------ .../html/attributs_universels/itemref/index.html | 97 --- .../html/attributs_universels/itemscope/index.html | 228 ------ .../html/attributs_universels/itemtype/index.html | 113 --- .../web/html/attributs_universels/lang/index.html | 86 --- .../web/html/attributs_universels/slot/index.html | 49 -- .../attributs_universels/spellcheck/index.html | 153 ---- .../web/html/attributs_universels/style/index.html | 92 --- .../html/attributs_universels/tabindex/index.html | 115 --- .../web/html/attributs_universels/title/index.html | 129 ---- .../html/attributs_universels/translate/index.html | 71 -- .../x-ms-acceleratorkey/index.html | 45 -- .../x-ms-format-detection/index.html | 60 -- files/fr/web/html/block-level_elements/index.html | 126 ++++ files/fr/web/html/contenu_editable/index.html | 36 - files/fr/web/html/cors_enabled_image/index.html | 117 ++++ files/fr/web/html/date_and_time_formats/index.html | 457 ++++++++++++ files/fr/web/html/element/command/index.html | 117 ---- files/fr/web/html/element/element/index.html | 73 -- .../fr/web/html/formats_date_heure_html/index.html | 457 ------------ .../html/global_attributes/accesskey/index.html | 143 ++++ .../global_attributes/autocapitalize/index.html | 49 ++ .../fr/web/html/global_attributes/class/index.html | 63 ++ .../global_attributes/contenteditable/index.html | 85 +++ .../html/global_attributes/contextmenu/index.html | 118 ++++ .../html/global_attributes/data-_star_/index.html | 83 +++ files/fr/web/html/global_attributes/dir/index.html | 90 +++ .../html/global_attributes/draggable/index.html | 71 ++ .../web/html/global_attributes/hidden/index.html | 69 ++ files/fr/web/html/global_attributes/id/index.html | 72 ++ files/fr/web/html/global_attributes/index.html | 196 ++++++ .../html/global_attributes/inputmode/index.html | 65 ++ files/fr/web/html/global_attributes/is/index.html | 67 ++ .../web/html/global_attributes/itemid/index.html | 116 ++++ .../web/html/global_attributes/itemprop/index.html | 436 ++++++++++++ .../web/html/global_attributes/itemref/index.html | 97 +++ .../html/global_attributes/itemscope/index.html | 228 ++++++ .../web/html/global_attributes/itemtype/index.html | 113 +++ .../fr/web/html/global_attributes/lang/index.html | 86 +++ .../fr/web/html/global_attributes/slot/index.html | 49 ++ .../html/global_attributes/spellcheck/index.html | 153 ++++ .../fr/web/html/global_attributes/style/index.html | 92 +++ .../web/html/global_attributes/tabindex/index.html | 115 +++ .../fr/web/html/global_attributes/title/index.html | 129 ++++ .../html/global_attributes/translate/index.html | 71 ++ .../x-ms-acceleratorkey/index.html | 45 ++ .../x-ms-format-detection/index.html | 60 ++ .../index.html" | 117 ---- files/fr/web/html/inline_elements/index.html | 169 +++++ files/fr/web/html/introduction_to_html5/index.html | 40 -- files/fr/web/html/link_types/index.html | 368 ++++++++++ files/fr/web/html/microdata/index.html | 140 ++++ "files/fr/web/html/microdonn\303\251es/index.html" | 140 ---- .../index.html | 36 - files/fr/web/html/preloading_content/index.html | 237 +++++++ .../html/pr\303\251charger_du_contenu/index.html" | 237 ------- .../html/reglages_des_attributs_cors/index.html | 96 --- .../index.html | 375 ---------- files/fr/web/html/types_de_lien/index.html | 368 ---------- .../html/using_the_application_cache/index.html | 338 +++++++++ .../index.html | 245 ------- .../web/html/utiliser_application_cache/index.html | 338 --------- .../index.html" | 103 --- .../\303\251l\303\251ments_en_bloc/index.html" | 126 ---- .../\303\251l\303\251ments_en_ligne/index.html" | 169 ----- 89 files changed, 6671 insertions(+), 7744 deletions(-) delete mode 100644 files/fr/web/html/appliquer_des_couleurs/index.html create mode 100644 files/fr/web/html/applying_color/index.html create mode 100644 files/fr/web/html/attributes/autocomplete/index.html create mode 100644 files/fr/web/html/attributes/crossorigin/index.html create mode 100644 files/fr/web/html/attributes/index.html create mode 100644 files/fr/web/html/attributes/pattern/index.html delete mode 100644 files/fr/web/html/attributs/autocomplete/index.html delete mode 100644 files/fr/web/html/attributs/index.html delete mode 100644 files/fr/web/html/attributs/pattern/index.html delete mode 100644 files/fr/web/html/attributs_universels/accesskey/index.html delete mode 100644 files/fr/web/html/attributs_universels/autocapitalize/index.html delete mode 100644 files/fr/web/html/attributs_universels/class/index.html delete mode 100644 files/fr/web/html/attributs_universels/contenteditable/index.html delete mode 100644 files/fr/web/html/attributs_universels/contextmenu/index.html delete mode 100644 files/fr/web/html/attributs_universels/data-_star_/index.html delete mode 100644 files/fr/web/html/attributs_universels/dir/index.html delete mode 100644 files/fr/web/html/attributs_universels/draggable/index.html delete mode 100644 files/fr/web/html/attributs_universels/dropzone/index.html delete mode 100644 files/fr/web/html/attributs_universels/hidden/index.html delete mode 100644 files/fr/web/html/attributs_universels/id/index.html delete mode 100644 files/fr/web/html/attributs_universels/index.html delete mode 100644 files/fr/web/html/attributs_universels/inputmode/index.html delete mode 100644 files/fr/web/html/attributs_universels/is/index.html delete mode 100644 files/fr/web/html/attributs_universels/itemid/index.html delete mode 100644 files/fr/web/html/attributs_universels/itemprop/index.html delete mode 100644 files/fr/web/html/attributs_universels/itemref/index.html delete mode 100644 files/fr/web/html/attributs_universels/itemscope/index.html delete mode 100644 files/fr/web/html/attributs_universels/itemtype/index.html delete mode 100644 files/fr/web/html/attributs_universels/lang/index.html delete mode 100644 files/fr/web/html/attributs_universels/slot/index.html delete mode 100644 files/fr/web/html/attributs_universels/spellcheck/index.html delete mode 100644 files/fr/web/html/attributs_universels/style/index.html delete mode 100644 files/fr/web/html/attributs_universels/tabindex/index.html delete mode 100644 files/fr/web/html/attributs_universels/title/index.html delete mode 100644 files/fr/web/html/attributs_universels/translate/index.html delete mode 100644 files/fr/web/html/attributs_universels/x-ms-acceleratorkey/index.html delete mode 100644 files/fr/web/html/attributs_universels/x-ms-format-detection/index.html create mode 100644 files/fr/web/html/block-level_elements/index.html delete mode 100644 files/fr/web/html/contenu_editable/index.html create mode 100644 files/fr/web/html/cors_enabled_image/index.html create mode 100644 files/fr/web/html/date_and_time_formats/index.html delete mode 100644 files/fr/web/html/element/command/index.html delete mode 100644 files/fr/web/html/element/element/index.html delete mode 100644 files/fr/web/html/formats_date_heure_html/index.html create mode 100644 files/fr/web/html/global_attributes/accesskey/index.html create mode 100644 files/fr/web/html/global_attributes/autocapitalize/index.html create mode 100644 files/fr/web/html/global_attributes/class/index.html create mode 100644 files/fr/web/html/global_attributes/contenteditable/index.html create mode 100644 files/fr/web/html/global_attributes/contextmenu/index.html create mode 100644 files/fr/web/html/global_attributes/data-_star_/index.html create mode 100644 files/fr/web/html/global_attributes/dir/index.html create mode 100644 files/fr/web/html/global_attributes/draggable/index.html create mode 100644 files/fr/web/html/global_attributes/hidden/index.html create mode 100644 files/fr/web/html/global_attributes/id/index.html create mode 100644 files/fr/web/html/global_attributes/index.html create mode 100644 files/fr/web/html/global_attributes/inputmode/index.html create mode 100644 files/fr/web/html/global_attributes/is/index.html create mode 100644 files/fr/web/html/global_attributes/itemid/index.html create mode 100644 files/fr/web/html/global_attributes/itemprop/index.html create mode 100644 files/fr/web/html/global_attributes/itemref/index.html create mode 100644 files/fr/web/html/global_attributes/itemscope/index.html create mode 100644 files/fr/web/html/global_attributes/itemtype/index.html create mode 100644 files/fr/web/html/global_attributes/lang/index.html create mode 100644 files/fr/web/html/global_attributes/slot/index.html create mode 100644 files/fr/web/html/global_attributes/spellcheck/index.html create mode 100644 files/fr/web/html/global_attributes/style/index.html create mode 100644 files/fr/web/html/global_attributes/tabindex/index.html create mode 100644 files/fr/web/html/global_attributes/title/index.html create mode 100644 files/fr/web/html/global_attributes/translate/index.html create mode 100644 files/fr/web/html/global_attributes/x-ms-acceleratorkey/index.html create mode 100644 files/fr/web/html/global_attributes/x-ms-format-detection/index.html delete mode 100644 "files/fr/web/html/images_avec_le_contr\303\264le_d_acc\303\250s_http/index.html" create mode 100644 files/fr/web/html/inline_elements/index.html delete mode 100644 files/fr/web/html/introduction_to_html5/index.html create mode 100644 files/fr/web/html/link_types/index.html create mode 100644 files/fr/web/html/microdata/index.html delete mode 100644 "files/fr/web/html/microdonn\303\251es/index.html" delete mode 100644 files/fr/web/html/optimizing_your_pages_for_speculative_parsing/index.html create mode 100644 files/fr/web/html/preloading_content/index.html delete mode 100644 "files/fr/web/html/pr\303\251charger_du_contenu/index.html" delete mode 100644 files/fr/web/html/reglages_des_attributs_cors/index.html delete mode 100644 files/fr/web/html/sections_and_outlines_of_an_html5_document/index.html delete mode 100644 files/fr/web/html/types_de_lien/index.html create mode 100644 files/fr/web/html/using_the_application_cache/index.html delete mode 100644 files/fr/web/html/utilisation_d'audio_et_video_en_html5/index.html delete mode 100644 files/fr/web/html/utiliser_application_cache/index.html delete mode 100644 "files/fr/web/html/utiliser_dash_avec_les_vid\303\251os_en_html/index.html" delete mode 100644 "files/fr/web/html/\303\251l\303\251ments_en_bloc/index.html" delete mode 100644 "files/fr/web/html/\303\251l\303\251ments_en_ligne/index.html" (limited to 'files/fr/web/html') diff --git a/files/fr/web/html/appliquer_des_couleurs/index.html b/files/fr/web/html/appliquer_des_couleurs/index.html deleted file mode 100644 index 58015bad66..0000000000 --- a/files/fr/web/html/appliquer_des_couleurs/index.html +++ /dev/null @@ -1,506 +0,0 @@ ---- -title: Appliquer des couleurs sur des éléments HTML grâce à CSS -slug: Web/HTML/Appliquer_des_couleurs -tags: - - CSS - - Débutant - - Guide - - HTML -translation_of: Web/HTML/Applying_color ---- -
{{HTMLRef}}
- -

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 CSS, il existe de nombreuses façons d'ajouter de la couleur aux éléments HTML 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.

- -

L'ajout de couleur à un document HTML s'avère assez simple et permet de colorer presque tous les éléments.

- -

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.

- -

Enfin, nous verrons comment utiliser les bonnes couleurs, en gardant à l'esprit les différentes notions d'accessibilité.

- -

Ce qui peut être coloré

- -

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.

- -

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.

- -

Texte

- -

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.

- -
-
{{cssxref("color")}}
-
Cette propriété correspondra à la couleur utilisée pour dessiner le texte ainsi que ses décorations (tels que le soulignement, le surlingement, les rayures, etc.).
-
{{cssxref("background-color")}}
-
Cette propriété correspondra à la couleur utilisée en arrière-plan du texte.
-
{{cssxref("text-shadow")}}
-
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 ce paragraphe pour en savoir plus.
-
{{cssxref("text-decoration-color")}}
-
Par défaut, les décorations du texte (le soulignement, les rayures, etc.) utilise la propriété color pour leurs couleurs. Il est cependant possible de passer outre cette valeur et de fournir une couleur différente avec la propriété text-decoration-color.
-
{{cssxref("text-emphasis-color")}}
-
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.
-
{{cssxref("caret-color")}}
-
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é).
-
- -

Boîtes

- -

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

- -
-
{{anch("Bordures")}}
-
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.
-
{{cssxref("background-color")}}
-
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.
-
{{cssxref("column-rule-color")}}
-
Cette propriété correspondra à la couleur utilisée pour dessiner la ligne qui sépare des colonnes de texte.
-
{{cssxref("outline-color")}}
-
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.
-
- -

Bordures

- -

Tout élément possède une bordure 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 la mise en forme des bordures grâce à CSS afin d'approfondir ce sujet.

- -

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 la largeur, le style (ligne pleine, pointillés, etc.) et ainsi de suite).

- -
-
{{cssxref("border-color")}}
-
Cette propriété correspondra à la couleur qui sera utilisée pour chacun des côtés de la bordure.
-
{{cssxref("border-left-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-top-color")}}, {{cssxref("border-bottom-color")}}
-
Ces propriétés permettent d'indiquer une couleur différente pour chaque côté de la bordure de l'élément.
-
{{cssxref("border-block-start-color")}} et {{cssxref("border-block-end-color")}}
-
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), border-block-start-color permettra de définir le côté haut de la bordure et border-block-end-color le côté bas.
-
{{cssxref("border-inline-start-color")}} et {{cssxref("border-inline-end-color")}}
-
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, border-inline-start-color correspondra à la couleur appliquée sur le côté droit.
-
- -

Les autres méthodes pour utiliser de la couleur

- -

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.

- -
-
L'API Canvas
-
Cette API permet de dessiner des graphiques matriciels en deux dimensions à l'intérieur d'un élément {{HTMLElement("canvas")}}. Vous pouvez lire le tutoriel sur l'API Canvas pour en savoir plus.
-
SVG (Scalable Vector Graphics)
-
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")}}.
-
WebGL
-
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 Apprendre WebGL pour les graphismes en 2D et 3D afin d'en savoir plus.
-
- -

Comment décrire une couleur

- -

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.

- -

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>")}}.

- -

Mots-clés

- -

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 quered pour rouge, blue pour bleu, orange), les tons de gris (allant de black pour noir à  white pour blanc et incluant des niveaux tels que darkgray (gris foncé) et lightgrey (gris clair)). D'autres couleurs sont également disponibles avec un mot-clé comme lightseagreen, cornflowerblue ou rebeccapurple.

- -

Vous pouvez consulter cette liste pour connaître l'ensemble des mots-clés disponibles.

- -

Valeurs RGB

- -

Il existe trois façons de représenter une couleur RGB en CSS.

- -

La notation hexadécimale

- -

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, "#D" sera converti en "#DD".

- -

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 "#". Le reste de la chaîne correspond aux chiffres hexadécimaux. L'utilisation des majuscules ou minuscules n'a pas d'importance.

- -
-
"#rrggbb"
-
Cette forme indique une couleur opaque dont les deux premiers chiffres hexadécimaux indiquent la composante rouge (0xrr), les deux chiffres suivants indiquent la composante verte (0xgg) et les deux derniers chiffres indiquent la composante bleue (0xbb).
-
"#rrggbbaa"
-
Cette forme indique une couleur dont les deux premiers chiffres hexadécimaux indiquent la composante rouge (0xrr), les deux chiffres suivants indiquent la composante verte (0xgg), les deux chiffres suivants indiquent la composante bleue (0xbb), enfin, les deux derniers chiffres indiquent la composante alpha (0xaa) utilisée pour indiquer l'opacité de la couleur (plus la valeur est faible, plus la couleur est transparente).
-
"#rgb"
-
Cette forme indique une couleur dont la composante rouge vaut 0xrr, la composante verte vaut 0xgg et dont la composante bleue vaut 0xbb.
-
"#rgba"
-
Cette forme indique une couleur dont la composante rouge vaut 0xrr, la composante verte vaut 0xgg et dont la composante bleue vaut 0xbb. Le canal alpha vaut 0xaa (plus la valeur est faible, plus la couleur sera transparente).
-
- -

Par exemple, on pourra représenter un bleu pur et opaque avec les chaînes de caractères "#0000ff" ou "#00f". Pour le rendre opaquee à 25%, on utilisera "#0000ff44" ou "#00f4".

- -

La notation fonctionnelle RGB

- -

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.

- -

Voici les valeurs qui peuvent être utilisées pour chacun de ces paramètres :

- -
-
red, green et blue
-
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%.
-
alpha
-
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.
-
- -

Par exemple, on pourra représenter un rouge pur à moitié opaque grâce à rgb(255, 0, 0, 0.5) ou grâce à rgb(100%, 0, 0, 50%).

- -

La notation fonctionnelle HSL

- -

D'autres personnes préfèrent manipuler la notation HSL ou aussi appeléee « Teinte saturation luminosité » (NDT : HSL signifie Hue Saturation Lightness en anglais). Sur le Web, les couleurs HSL sont représentées grâce à la notation fonctionnelle hsl() (qui fonctionne de façon analogue à la fonction rgb()).

- -
-
HSL color cylinder -
Figure 1. Le cylindre HSL. 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 SharkD sur Wikipédia et est distribuée avec la licence CC BY-SA 3.0.
-
-
- -

La valeur de la teinte (H) 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 (deg), les radians (rad), les grades (grad) ou les tours (turn).

- -

Ensuite, la saturation (S) indique la force de la teinte dans la couleur. Enfin, la luminosité (L) indique le niveau de gris de la couleur.

- -

On peut faire une analogie avec la conception d'une couleur pour une peinture :

- -
    -
  1. 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 (hue) (H). En CSS, c'est un angle qui détermine la couleur parmi une roue de couleurs.
    2. -
  2. 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é (L). En CSS, c'est un pourcentage, 0% indiquant une couleur noire et 100% une couleur blanche.
    3. -
  3. Enfin, avec ces deux peintures, on décide de la proportion de chacune pour le mélange final : c'est la saturation (S). 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.
    4. -
- -

Il est également possible d'ajouter un canal alpha afin d'avoir une couleur partiellement (ou totalement) transparente.

- -

Voici quelques exemples utilisant la notation HSL :

- -
- - -

{{EmbedLiveSample("hsl-swatches", 300, 260)}}

-
- -
-

Note : Il est possible d'omettre l'unité pour la valeur de la teinte (hue), l'unité par défaut utilisée sera alors les degrés (deg).

-
- -

Utiliser les couleurs

- -

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 « feuille de style » et du code JavaScript pour modifier et ajouter des couleurs dynamiquement.

- -

Indiquer les couleurs via une feuille de style

- -

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).

- -

Prenons un exemple et commençons par le résultat :

- -
{{EmbedLiveSample("Indiquer_les_couleurs_via_une_feuille_de_style", 650, 150)}}
- -

HTML

- -

Voici le fragment de code HTML utilisé pour cet exemple :

- -
<div class="conteneur">
-  <div class="boite boiteGauche">
-    <p>
-      Voici la première boîte.
-    </p>
-  </div>
-  <div class="boite boiteDroite">
-    <p>
-      Voici la seconde boîte.
-    </p>
-  </div>
-</div>
- -

Ce fragment est plutôt simple : on utilise un élément {{HTMLElement("div")}} qui enveloppe le contenu, constitué de deux <div>, chacun avec une classe différente et contenant chacun un paragraphe (c'est-à-dire un élément {{HTMLElement("p")}}).

- -

Voyons ensuite la feuille de style CSS appliquée au bloc HTML précédent.

- -

CSS

- -

Nous allons ici étudier la feuille de style en la décomposant, partie par partie.

- -
.conteneur {
-  width: 620px;
-  height: 110px;
-  margin: 0;
-  padding: 10px;
-  border: 6px solid mediumturquoise;
-}
- -

Le sélecteur de classe .conteneur 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")}}.

- -

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 mediumturquoise.

- -

Les deux boîtes colorées possèdent un certain nombre de propriétés communes. On utilise donc une classe : .boite pour laquelle on définit ces propriétés qui seront appliquées sur les deux éléments :

- -
.boite {
-  width: 290px;
-  height: 100px;
-  margin: 0;
-  padding: 4px 6px;
-  font: 28px "Marker Felt", "Zapfino", cursive;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
- -

Pour résumer, les styles ciblés par .boite 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 aux boîtes flexibles CSS. Pour cela, on utilise le mode d'affichage flex avec {{cssxref("display", "display: flex")}} et on paramètre les propriétés {{cssxref("justify-content")}} et {{cssxref("align-items")}} avec la valeur center. 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.

- -
.boiteGauche {
-  float: left;
-  background-color: rgb(245, 130, 130);
-  outline: 2px solid darkred;
-}
- -

La classe .boiteGauche permet de mettre en forme la boîte située à gauche et on l'utilise pour définir certaines couleurs :

- - - -
.boiteDroite {
-  float: right;
-  background-color: hsl(270deg, 50%, 75%);
-  outline: 4px dashed rgb(110, 20, 120);
-  color: hsl(0deg, 100%, 100%);
-  text-decoration: underline wavy #88ff88;
-  text-shadow: 2px 2px 3px black;
-}
- -

Enfin, la classe .boiteDroite 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 :

- - - -

Permettre à l'utilisateur de choisir une couleur

- -

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 "color".

- -

Lorsqu'on choisit une couleur via un élément <input>, 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.

- -

Exemple : sélectionner une couleur

- -

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.

- -

{{EmbedLiveSample("Exemple_:_sélectionner_une_couleur", 525, 275)}}

- -
-

Note : Sur macOS, pour indiquer qu'on a fini de choisir la couleur, il faut fermer la fenêtre du sélecteur de couleur.

-
- -

HTML

- -

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.

- -
<div id="box">
-  <label for="colorPicker">Couleur de la bordure :</label>
-  <input type="color" value="#8888ff" id="colorPicker">
-  <p id="output"></p>
-</div>
- -

CSS

- -

La feuille CSS détermine la taille de la boîte et une mise en forme simple. La bordure mesure deux pixels de large (mais sera modifiée par le code JavaScript qui va suivre…).

- -
#box {
-  width: 500px;
-  height: 200px;
-  border: 2px solid rgb(245, 220, 225);
-  padding: 4px 6px;
-  font: 16px "Lucida Grande", "Helvetica", "Arial", "sans-serif"
-}
- -

JavaScript

- -

Le script est utilisé pour mettre à jour la couleur de la bordure afin que celle-ci corresponde à la valeur courante du sélecteur. On ajoute ensuite deux gestionnaires d'évènements pour « écouter » ce qui se passe avec l'élément <input type="color">.

- -
let colorPicker = document.getElementById("colorPicker");
-let box = document.getElementById("box");
-let output = document.getElementById("output");
-
-box.style.borderColor = colorPicker.value;
-
-colorPicker.addEventListener("input", function(event) {
-  box.style.borderColor = event.target.value;
-}, false);
-
-colorPicker.addEventListener("change", function(event) {
-  output.innerText = "Couleur choisie : " + colorPicker.value;
-}, false);
- -

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.

- -

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 <p> (le paragraphe) qui possède l'identifiant "output" en y ajoutant une chaîne de caractères qui décrit la couleur choisie.

- -

L'art de choisir une couleur

- -

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.

- -

Trouver les bonnes couleurs

- -

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.

- -

La couleur de base

- -

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 :

- - - -

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 ColorZilla, par exemple, propose une extension (Chrome / Firefox) 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.

- -
-

Note : 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.

-
- -

Agrémenter la palette

- -

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.

- -

Voici quelques exemples (libres d'accès et gratuits au moment où nous écrivons ces lignes) de tels outils :

- - - -

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).

- -
-

Note : 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

-
- -

Quelques ressources sur la théorie des couleurs

- -

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 :

- -
-
La science des couleurs (en anglais) (Khan Academy en association avec Pixar)
-
Un cours en ligne qui introduit certains concepts : qu'est-ce qu'une couleur, comment est-elle perçue, comment utiliser les couleurs afin de véhiculer certaines idées.
-
La théorie des couleurs sur Wikipédia (en anglais)
-
La page Wikipédia qui traite de la théorie des couleurs et qui fournit de nombreuses informations techniques.
-
- -

Les couleurs et l'accessibilité

- -

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.

- -

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.

- -
-

Note : 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é.

-
- -

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) :

- - - -

Un exemple de conception de palette

- -

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 rechercher des images relatives à Mars sur Google ou sur un autre moteur de recherche. On utilise un sélecteur de couleur pour sélectionner un échantillon de couleur.

- -

Avec une pipette, on identifie la couleur de base : c'est la couleur de code D79C7A, qui correspond à un rouge orangé rouillé, typique de l'imaginaire collectif pour la surface martienne.

- -

Une fois la couleur de base sélectionnée, on construit la palette. Pour cela, nous avons choisi Paletteon afin de compléter avec d'autres couleurs. Lorsqu'on ouvre Palleton, on voit ceci :

- -

L'affichage du site Palleton après l'ouverture

- -

Ensuite, on saisi le code de la couleur (D79C7A) dans le champ "Base RGB" situé en bas à gauche de l'outil :

- -

After entering base color

- -

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 "add complementary"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 : #508D7C.

- -

Now with complementary colors included.

- -

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 :

- -

Triad color scheme selected

- -

On obtient alors un bleu gris en haut à droite. En cliquant dessus, on obtient le code #556E8D. 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 :

- -

Triad color scheme selected

- -

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.

- -

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.

- -

Les couleurs, les arrière-plans, le contraste et l'impression

- -

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.

- -

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.

- -

Par défaut, la propriété color-adjust vaut economy 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.

- -

color-adjust peut être paramétré avec la valeur exact 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é.

- -
-

Note : Il n'est pas garanti que le navigateur respecte exactement la feuille de style utilisée avec color-adjust: exact. 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.

-
- -

Voir aussi

- - diff --git a/files/fr/web/html/applying_color/index.html b/files/fr/web/html/applying_color/index.html new file mode 100644 index 0000000000..58015bad66 --- /dev/null +++ b/files/fr/web/html/applying_color/index.html @@ -0,0 +1,506 @@ +--- +title: Appliquer des couleurs sur des éléments HTML grâce à CSS +slug: Web/HTML/Appliquer_des_couleurs +tags: + - CSS + - Débutant + - Guide + - HTML +translation_of: Web/HTML/Applying_color +--- +
{{HTMLRef}}
+ +

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 CSS, il existe de nombreuses façons d'ajouter de la couleur aux éléments HTML 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.

+ +

L'ajout de couleur à un document HTML s'avère assez simple et permet de colorer presque tous les éléments.

+ +

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.

+ +

Enfin, nous verrons comment utiliser les bonnes couleurs, en gardant à l'esprit les différentes notions d'accessibilité.

+ +

Ce qui peut être coloré

+ +

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.

+ +

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.

+ +

Texte

+ +

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.

+ +
+
{{cssxref("color")}}
+
Cette propriété correspondra à la couleur utilisée pour dessiner le texte ainsi que ses décorations (tels que le soulignement, le surlingement, les rayures, etc.).
+
{{cssxref("background-color")}}
+
Cette propriété correspondra à la couleur utilisée en arrière-plan du texte.
+
{{cssxref("text-shadow")}}
+
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 ce paragraphe pour en savoir plus.
+
{{cssxref("text-decoration-color")}}
+
Par défaut, les décorations du texte (le soulignement, les rayures, etc.) utilise la propriété color pour leurs couleurs. Il est cependant possible de passer outre cette valeur et de fournir une couleur différente avec la propriété text-decoration-color.
+
{{cssxref("text-emphasis-color")}}
+
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.
+
{{cssxref("caret-color")}}
+
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é).
+
+ +

Boîtes

+ +

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

+ +
+
{{anch("Bordures")}}
+
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.
+
{{cssxref("background-color")}}
+
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.
+
{{cssxref("column-rule-color")}}
+
Cette propriété correspondra à la couleur utilisée pour dessiner la ligne qui sépare des colonnes de texte.
+
{{cssxref("outline-color")}}
+
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.
+
+ +

Bordures

+ +

Tout élément possède une bordure 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 la mise en forme des bordures grâce à CSS afin d'approfondir ce sujet.

+ +

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 la largeur, le style (ligne pleine, pointillés, etc.) et ainsi de suite).

+ +
+
{{cssxref("border-color")}}
+
Cette propriété correspondra à la couleur qui sera utilisée pour chacun des côtés de la bordure.
+
{{cssxref("border-left-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-top-color")}}, {{cssxref("border-bottom-color")}}
+
Ces propriétés permettent d'indiquer une couleur différente pour chaque côté de la bordure de l'élément.
+
{{cssxref("border-block-start-color")}} et {{cssxref("border-block-end-color")}}
+
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), border-block-start-color permettra de définir le côté haut de la bordure et border-block-end-color le côté bas.
+
{{cssxref("border-inline-start-color")}} et {{cssxref("border-inline-end-color")}}
+
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, border-inline-start-color correspondra à la couleur appliquée sur le côté droit.
+
+ +

Les autres méthodes pour utiliser de la couleur

+ +

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.

+ +
+
L'API Canvas
+
Cette API permet de dessiner des graphiques matriciels en deux dimensions à l'intérieur d'un élément {{HTMLElement("canvas")}}. Vous pouvez lire le tutoriel sur l'API Canvas pour en savoir plus.
+
SVG (Scalable Vector Graphics)
+
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")}}.
+
WebGL
+
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 Apprendre WebGL pour les graphismes en 2D et 3D afin d'en savoir plus.
+
+ +

Comment décrire une couleur

+ +

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.

+ +

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>")}}.

+ +

Mots-clés

+ +

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 quered pour rouge, blue pour bleu, orange), les tons de gris (allant de black pour noir à  white pour blanc et incluant des niveaux tels que darkgray (gris foncé) et lightgrey (gris clair)). D'autres couleurs sont également disponibles avec un mot-clé comme lightseagreen, cornflowerblue ou rebeccapurple.

+ +

Vous pouvez consulter cette liste pour connaître l'ensemble des mots-clés disponibles.

+ +

Valeurs RGB

+ +

Il existe trois façons de représenter une couleur RGB en CSS.

+ +

La notation hexadécimale

+ +

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, "#D" sera converti en "#DD".

+ +

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 "#". Le reste de la chaîne correspond aux chiffres hexadécimaux. L'utilisation des majuscules ou minuscules n'a pas d'importance.

+ +
+
"#rrggbb"
+
Cette forme indique une couleur opaque dont les deux premiers chiffres hexadécimaux indiquent la composante rouge (0xrr), les deux chiffres suivants indiquent la composante verte (0xgg) et les deux derniers chiffres indiquent la composante bleue (0xbb).
+
"#rrggbbaa"
+
Cette forme indique une couleur dont les deux premiers chiffres hexadécimaux indiquent la composante rouge (0xrr), les deux chiffres suivants indiquent la composante verte (0xgg), les deux chiffres suivants indiquent la composante bleue (0xbb), enfin, les deux derniers chiffres indiquent la composante alpha (0xaa) utilisée pour indiquer l'opacité de la couleur (plus la valeur est faible, plus la couleur est transparente).
+
"#rgb"
+
Cette forme indique une couleur dont la composante rouge vaut 0xrr, la composante verte vaut 0xgg et dont la composante bleue vaut 0xbb.
+
"#rgba"
+
Cette forme indique une couleur dont la composante rouge vaut 0xrr, la composante verte vaut 0xgg et dont la composante bleue vaut 0xbb. Le canal alpha vaut 0xaa (plus la valeur est faible, plus la couleur sera transparente).
+
+ +

Par exemple, on pourra représenter un bleu pur et opaque avec les chaînes de caractères "#0000ff" ou "#00f". Pour le rendre opaquee à 25%, on utilisera "#0000ff44" ou "#00f4".

+ +

La notation fonctionnelle RGB

+ +

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.

+ +

Voici les valeurs qui peuvent être utilisées pour chacun de ces paramètres :

+ +
+
red, green et blue
+
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%.
+
alpha
+
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.
+
+ +

Par exemple, on pourra représenter un rouge pur à moitié opaque grâce à rgb(255, 0, 0, 0.5) ou grâce à rgb(100%, 0, 0, 50%).

+ +

La notation fonctionnelle HSL

+ +

D'autres personnes préfèrent manipuler la notation HSL ou aussi appeléee « Teinte saturation luminosité » (NDT : HSL signifie Hue Saturation Lightness en anglais). Sur le Web, les couleurs HSL sont représentées grâce à la notation fonctionnelle hsl() (qui fonctionne de façon analogue à la fonction rgb()).

+ +
+
HSL color cylinder +
Figure 1. Le cylindre HSL. 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 SharkD sur Wikipédia et est distribuée avec la licence CC BY-SA 3.0.
+
+
+ +

La valeur de la teinte (H) 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 (deg), les radians (rad), les grades (grad) ou les tours (turn).

+ +

Ensuite, la saturation (S) indique la force de la teinte dans la couleur. Enfin, la luminosité (L) indique le niveau de gris de la couleur.

+ +

On peut faire une analogie avec la conception d'une couleur pour une peinture :

+ +
    +
  1. 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 (hue) (H). En CSS, c'est un angle qui détermine la couleur parmi une roue de couleurs.
    2. +
  2. 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é (L). En CSS, c'est un pourcentage, 0% indiquant une couleur noire et 100% une couleur blanche.
    3. +
  3. Enfin, avec ces deux peintures, on décide de la proportion de chacune pour le mélange final : c'est la saturation (S). 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.
    4. +
+ +

Il est également possible d'ajouter un canal alpha afin d'avoir une couleur partiellement (ou totalement) transparente.

+ +

Voici quelques exemples utilisant la notation HSL :

+ +
+ + +

{{EmbedLiveSample("hsl-swatches", 300, 260)}}

+
+ +
+

Note : Il est possible d'omettre l'unité pour la valeur de la teinte (hue), l'unité par défaut utilisée sera alors les degrés (deg).

+
+ +

Utiliser les couleurs

+ +

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 « feuille de style » et du code JavaScript pour modifier et ajouter des couleurs dynamiquement.

+ +

Indiquer les couleurs via une feuille de style

+ +

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).

+ +

Prenons un exemple et commençons par le résultat :

+ +
{{EmbedLiveSample("Indiquer_les_couleurs_via_une_feuille_de_style", 650, 150)}}
+ +

HTML

+ +

Voici le fragment de code HTML utilisé pour cet exemple :

+ +
<div class="conteneur">
+  <div class="boite boiteGauche">
+    <p>
+      Voici la première boîte.
+    </p>
+  </div>
+  <div class="boite boiteDroite">
+    <p>
+      Voici la seconde boîte.
+    </p>
+  </div>
+</div>
+ +

Ce fragment est plutôt simple : on utilise un élément {{HTMLElement("div")}} qui enveloppe le contenu, constitué de deux <div>, chacun avec une classe différente et contenant chacun un paragraphe (c'est-à-dire un élément {{HTMLElement("p")}}).

+ +

Voyons ensuite la feuille de style CSS appliquée au bloc HTML précédent.

+ +

CSS

+ +

Nous allons ici étudier la feuille de style en la décomposant, partie par partie.

+ +
.conteneur {
+  width: 620px;
+  height: 110px;
+  margin: 0;
+  padding: 10px;
+  border: 6px solid mediumturquoise;
+}
+ +

Le sélecteur de classe .conteneur 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")}}.

+ +

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 mediumturquoise.

+ +

Les deux boîtes colorées possèdent un certain nombre de propriétés communes. On utilise donc une classe : .boite pour laquelle on définit ces propriétés qui seront appliquées sur les deux éléments :

+ +
.boite {
+  width: 290px;
+  height: 100px;
+  margin: 0;
+  padding: 4px 6px;
+  font: 28px "Marker Felt", "Zapfino", cursive;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+ +

Pour résumer, les styles ciblés par .boite 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 aux boîtes flexibles CSS. Pour cela, on utilise le mode d'affichage flex avec {{cssxref("display", "display: flex")}} et on paramètre les propriétés {{cssxref("justify-content")}} et {{cssxref("align-items")}} avec la valeur center. 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.

+ +
.boiteGauche {
+  float: left;
+  background-color: rgb(245, 130, 130);
+  outline: 2px solid darkred;
+}
+ +

La classe .boiteGauche permet de mettre en forme la boîte située à gauche et on l'utilise pour définir certaines couleurs :

+ + + +
.boiteDroite {
+  float: right;
+  background-color: hsl(270deg, 50%, 75%);
+  outline: 4px dashed rgb(110, 20, 120);
+  color: hsl(0deg, 100%, 100%);
+  text-decoration: underline wavy #88ff88;
+  text-shadow: 2px 2px 3px black;
+}
+ +

Enfin, la classe .boiteDroite 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 :

+ + + +

Permettre à l'utilisateur de choisir une couleur

+ +

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 "color".

+ +

Lorsqu'on choisit une couleur via un élément <input>, 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.

+ +

Exemple : sélectionner une couleur

+ +

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.

+ +

{{EmbedLiveSample("Exemple_:_sélectionner_une_couleur", 525, 275)}}

+ +
+

Note : Sur macOS, pour indiquer qu'on a fini de choisir la couleur, il faut fermer la fenêtre du sélecteur de couleur.

+
+ +

HTML

+ +

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.

+ +
<div id="box">
+  <label for="colorPicker">Couleur de la bordure :</label>
+  <input type="color" value="#8888ff" id="colorPicker">
+  <p id="output"></p>
+</div>
+ +

CSS

+ +

La feuille CSS détermine la taille de la boîte et une mise en forme simple. La bordure mesure deux pixels de large (mais sera modifiée par le code JavaScript qui va suivre…).

+ +
#box {
+  width: 500px;
+  height: 200px;
+  border: 2px solid rgb(245, 220, 225);
+  padding: 4px 6px;
+  font: 16px "Lucida Grande", "Helvetica", "Arial", "sans-serif"
+}
+ +

JavaScript

+ +

Le script est utilisé pour mettre à jour la couleur de la bordure afin que celle-ci corresponde à la valeur courante du sélecteur. On ajoute ensuite deux gestionnaires d'évènements pour « écouter » ce qui se passe avec l'élément <input type="color">.

+ +
let colorPicker = document.getElementById("colorPicker");
+let box = document.getElementById("box");
+let output = document.getElementById("output");
+
+box.style.borderColor = colorPicker.value;
+
+colorPicker.addEventListener("input", function(event) {
+  box.style.borderColor = event.target.value;
+}, false);
+
+colorPicker.addEventListener("change", function(event) {
+  output.innerText = "Couleur choisie : " + colorPicker.value;
+}, false);
+ +

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.

+ +

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 <p> (le paragraphe) qui possède l'identifiant "output" en y ajoutant une chaîne de caractères qui décrit la couleur choisie.

+ +

L'art de choisir une couleur

+ +

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.

+ +

Trouver les bonnes couleurs

+ +

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.

+ +

La couleur de base

+ +

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 :

+ + + +

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 ColorZilla, par exemple, propose une extension (Chrome / Firefox) 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.

+ +
+

Note : 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.

+
+ +

Agrémenter la palette

+ +

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.

+ +

Voici quelques exemples (libres d'accès et gratuits au moment où nous écrivons ces lignes) de tels outils :

+ + + +

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).

+ +
+

Note : 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

+
+ +

Quelques ressources sur la théorie des couleurs

+ +

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 :

+ +
+
La science des couleurs (en anglais) (Khan Academy en association avec Pixar)
+
Un cours en ligne qui introduit certains concepts : qu'est-ce qu'une couleur, comment est-elle perçue, comment utiliser les couleurs afin de véhiculer certaines idées.
+
La théorie des couleurs sur Wikipédia (en anglais)
+
La page Wikipédia qui traite de la théorie des couleurs et qui fournit de nombreuses informations techniques.
+
+ +

Les couleurs et l'accessibilité

+ +

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.

+ +

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.

+ +
+

Note : 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é.

+
+ +

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) :

+ + + +

Un exemple de conception de palette

+ +

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 rechercher des images relatives à Mars sur Google ou sur un autre moteur de recherche. On utilise un sélecteur de couleur pour sélectionner un échantillon de couleur.

+ +

Avec une pipette, on identifie la couleur de base : c'est la couleur de code D79C7A, qui correspond à un rouge orangé rouillé, typique de l'imaginaire collectif pour la surface martienne.

+ +

Une fois la couleur de base sélectionnée, on construit la palette. Pour cela, nous avons choisi Paletteon afin de compléter avec d'autres couleurs. Lorsqu'on ouvre Palleton, on voit ceci :

+ +

L'affichage du site Palleton après l'ouverture

+ +

Ensuite, on saisi le code de la couleur (D79C7A) dans le champ "Base RGB" situé en bas à gauche de l'outil :

+ +

After entering base color

+ +

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 "add complementary"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 : #508D7C.

+ +

Now with complementary colors included.

+ +

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 :

+ +

Triad color scheme selected

+ +

On obtient alors un bleu gris en haut à droite. En cliquant dessus, on obtient le code #556E8D. 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 :

+ +

Triad color scheme selected

+ +

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.

+ +

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.

+ +

Les couleurs, les arrière-plans, le contraste et l'impression

+ +

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.

+ +

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.

+ +

Par défaut, la propriété color-adjust vaut economy 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.

+ +

color-adjust peut être paramétré avec la valeur exact 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é.

+ +
+

Note : Il n'est pas garanti que le navigateur respecte exactement la feuille de style utilisée avec color-adjust: exact. 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.

+
+ +

Voir aussi

+ + diff --git a/files/fr/web/html/attributes/autocomplete/index.html b/files/fr/web/html/attributes/autocomplete/index.html new file mode 100644 index 0000000000..fca919718d --- /dev/null +++ b/files/fr/web/html/attributes/autocomplete/index.html @@ -0,0 +1,228 @@ +--- +title: autocomplete +slug: Web/HTML/Attributs/autocomplete +tags: + - Attribut + - HTML + - Input + - Reference +translation_of: Web/HTML/Attributes/autocomplete +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

L'attribut autocomplete est disponible pour différents types d'éléments {{HTMLElement("input")}}, {{HTMLElement("textarea")}}, {{HTMLElement("select")}} et {{HTMLElement("form")}}. autocomplete permet d'indiquer à l'agent utilisateur qu'une assistance de saisie automatique peut être fournie et également d'indiquer le type de donnée attendu.

+ +

La source fournissant les valeurs suggérées pour l'autocomplétion dépend du navigateur. Généralement, celle-ci est constituée des valeurs saisies précédemment par l'utilisateur. Ce peuvent également être des valeurs préconfigurées. Ainsi, un navigateur pourra permettre à un utilisateur d'enregistrer son nom, son adresse, son numéro de téléphone et des adresses électroniques pour l'aider lors de l'autocomplétion. Le navigateur pourrait également fournir le stockage chiffré des informations de cartes bancaires et déclencher une procédure d'authentification lorsque ces informations doivent être récupérées pour être utilisées.

+ +

Si l'élément {{HTMLElement("input")}}, {{HTMLElement("select")}} ou {{HTMLElement("textarea")}} ne possèdent pas d'attribut autocomplete, le navigateur utilisera l'attribut autocomplete du formulaire associé (c'est-à-dire l'élément {{HTMLElement("form")}} qui est l'ancêtre de l'élément <input> ou l'élément <form> dont la valeur de l'attribut id correspond à celle indiquée avec l'attribut {{htmlattrxref("form", "input")}} de l'élément <input>).

+ +

Pour plus d'informations, voir la documentation de l'attribut {{htmlattrxref("autocomplete", "form")}} pour l'élément {{HTMLElement("form")}}.

+ +
+

Note : Afin de fournir des fonctionnalités d'autocomplétion, un agent utilisateur pourra utiliser les prérequis suivants quant aux éléments <input>/<select>/<textarea>:

+ +
    +
  1. Que ceux-ci aient un attribut name et/ou id
    2. +
  2. Que ceux-ci descendent d'un élément <form>
    3. +
  3. Que le formulaire associé ait un bouton {{HTMLElement("input/submit","submit")}}
    4. +
+
+ +

Valeurs

+ +
+
off
+
Le navigateur n'est pas autorisé à saisir automatiquement des valeurs pour ce champ. Cette valeur peut être utilisée lorsque le document ou l'application fournit son propre mécanisme d'autocomplétion ou lorsque des raisons de sécurité imposent de ne pas pouvoir saisir la valeur automatiquement. +
Note : Pour la plupart des navigateurs modernes, utiliser autocomplete="off" n'empêchera pas un gestionnaire de mots de passe de demander à l'utilisateur s'il souhaite sauvegarder le nom d'utilisateur et le mot de passe ou de renseigner automatiquement les informations pour un formulaire de connexion. Voir l'article sur l'attribut autocomplete et les champs des formulaires de connexion.
+
+
on
+
Le navigateur est autorisé à compléter automatiquement le champ. Aucune indication supplémentaire n'est fournie quant au type de donnée attendu et c'est donc au navigateur d'utiliser une heuristique pour proposer des valeurs pertinentes.
+
name
+
Le champ correspondant doit recevoir le nom complet de la personne. Utiliser cette valeur plutôt que les différents composants est une méthode souvent privilégiée car on évite ainsi de gérer les différents structures des différentes locales. Toutefois, on peut utiliser les composants suivants si on souhaite décomposer l'identité de la personne : +
+
honorific-prefix
+
Le préfixe ou le titre, par exemple « M. », « Mme. », « Me. » , etc.
+
given-name
+
Le prénom.
+
additional-name
+
Le deuxième prénom.
+
family-name
+
Le nom de famille.
+
honorific-suffix
+
Un suffixe (par exemple "Jr.").
+
nickname
+
Un surnom.
+
+
+
email
+
Une adresse électronique.
+
username
+
Un nom de compte ou un nom d'utilisateur.
+
new-password
+
Un nouveau mot de passe. Lors de la création d'un compte ou lors d'un changement de mot de passe, cette valeur pourra être utilisée pour le champ où saisir le nouveau mot de passe. Ainsi, on évitera au navigateur de saisir automatiquement le mot de passe actuel ou le navigateur pourra même proposer un outil permettant de créer un mot de passe sécurisé.
+
current-password
+
Le mot de passe actuel de l'utilisateur.
+
one-time-code
+
Un code à usage unique, utilisé pour vérifier l'identité de l'utilisateur.
+
organization-title
+
Un titre de poste tel que « Directeur général », « Assistant technique » ou « Ingénieur ».
+
organization
+
Le nom d'une entreprise ou d'une organisation.
+
street-address
+
Une adresse postale. Cette adresse peut être un texte sur plusieurs lignes et devrait permettre d'identifier complètement l'emplacement de l'adresse au sein d'une ville. Cette valeur n'inclut pas le nom de la ville, le code postal ou le nom du pays.
+
address-line1, address-line2, address-line3
+
Des lignes individuelles pour décrire l'adresse postale. Ces valeurs peuvent être utilisées seulement lorsque la valeur street-address est absente.
+
address-level4
+
Le niveau d'adresse le plus fin (cf. la section ci-après) lorsque les adresses ont quatre niveau.
+
address-level3
+
Le troisième niveau de précision d'une adresse (cf. la section ci-après) lorsque les adresses ont au moins trois niveaux administratifs.
+
address-level2
+
Le deuxième niveau de précision d'une adresse (cf. la section ci-après) lorsque les adresses ont au moins deux niveaux administratifs. Pour les pays avec deux niveaux administratifs, cela correspond généralement à la ville, au village ou à la localité de l'adresse.
+
address-level1
+
Le premier niveau de précision d'une adresse (cf. la section ci-après). C'est généralement la région ou l'état dans lequel se situe l'adresse.
+
country
+
Un code de pays.
+
country-name
+
Un nom de pays.
+
postal-code
+
Un code postal.
+
cc-name
+
Le nom complet tel qu'indiqué sur une carte bancaire. On préfèrera généralement utiliser le nom complet plutôt que de le décomposer en fragments.
+
cc-given-name
+
Le prénom tel qu'indiqué sur une carte bancaire.
+
cc-additional-name
+
Le deuxième prénom tel qu'indiqué sur une carte bancaire.
+
cc-family-name
+
Le nom de famille tel qu'indiqué sur une carte bancaire.
+
cc-number
+
Le numéro de la carte bancaire ou tout autre numéro identifiant une méthode de paiement (ce peut être un numéro de compte par exemple).
+
cc-exp
+
La date d'expiration de la méthode de paiement telle qu'indiquée sur une carte bancaire (généralement sous la forme MM/YY ou sous la forme MM/YYYYY où MM correspond aux deux chiffres du mois et où YY ou YYYY correspondent aux chiffres de l'année).
+
cc-exp-month
+
Le mois d'expiration du moyen de paiement tel qu'indiqué sur une carte bancaire.
+
cc-exp-year
+
L'année d'expiration du moyen de paiement tel qu'indiqué sur une carte bancaire.
+
cc-csc
+
Le cryptogramme du moyen de paiement tel qu'indiqué sur une carte bancaire. il s'agit généralement du code à trois chiffres de vérification situé au dos de la carte bancaire.
+
cc-type
+
Le type de moyen de paiement ("Visa" ou "Master Card").
+
transaction-currency
+
La devise utilisée pour la transaction courante.
+
transaction-amount
+
Le montant de la transaction, pour un formulaire de paiement, exprimé dans la devise fournie par transaction-currency.
+
language
+
La langue préférée, indiquée sous la forme d'une balise de langue valide selon BCP 47.
+
bday
+
Une date de naissance complète.
+
bday-day
+
Le jour du mois de la date de naissance.
+
bday-month
+
Le mois de l'année de la date de naissance.
+
bday-year
+
L'année de la date de naissance.
+
sex
+
Un genre (tel que « femme », « homme », « Fa'afafine » etc.) sous la forme d'un texte libre sans passage à la ligne.
+
tel
+
Un numéro de téléphone complet qui inclut l'identifiant du pays. Si le numéro de téléphone doit être décomposé en composants, on pourra utiliser les valeurs suivantes : +
+
tel-country-code
+
L'indicateur du pays pour le numéro de téléphone (33 pour la France ou 1 pour les États-Unis par exemple).
+
tel-national
+
Le numéro de téléphone complet sans l'indicateur du pays.
+
tel-area-code
+
La code de la zone pour le numéro de téléphone avec un préfixe interne au pays si nécessaire.
+
tel-local
+
Le numéro de téléphone sans l'indicateur de pays ni l'indicateur de zone.
+
+
+
tel-extension
+
Une extension au numéro de téléphone qui permet par exemple d'indiquer le numéro de chambre dans un hôtel ou le numéro d'un bureau au sein d'une entreprise.
+
impp
+
Une URL pour un protocole de messagerie instantannée (par exemple "xmpp:username@example.net").
+
url
+
Une URL, pertinente dans le contexte du formulaire.
+
photo
+
L'URL d'une image représentant la personne, l'entreprise ou l'information de contact pour ce formulaire.
+
+ +

Voir la spécification WHATWG pour plus de détails.

+ +
+

Note : À la différence des autres navigateurs, pour Firefox, l'attribut autocomplete contrôlera également si l'état de désactivation ou de coche dynamique persiste lors d'un rechargement de la page pour un champ <input>. Par défaut, un élément reste désactivé ou coché/décoché lors des rechargements. En utilisant l'attribut autocomplete avec la valeur off, on désactive cette fonctionnalité. Cela fonctionne, y compris lorsque l'attribut autocomplete ne devrait pas s'appliquer à l'élément <input> d'après son type. Voir {{bug(654072)}}.

+
+ +

Les niveaux administratifs pour les adresses

+ +

Les quatre niveaux administratifs pour les adresses (address-level1 jusqu'à address-level4) décrivent l'adresse avec un niveau de précision croissant au sein du pays dans lequel l'adresse est situé. Chaque pays possède son propre système de division administrative et peut donc organiser les niveaux selon un ordre différent pour l'écriture des adresses.

+ +

address-level1 représente toujours le niveau le plus large : c'est la composante la moins spécifique de l'adresse après la maille du pays.

+ +

Disposition du formulaire

+ +

Étant donné qu'une adresse s'écrit différemment selon le pays, il peut être utile, si possible, de fournir différentes dispositions de formulaires pour les utilisateurs (éventuellement en fonction de leur locale) pour faciliter la saisie de leur adresse pour leur pays.

+ +

Variations

+ +

La façon d'utiliser les niveaux administratifs varie d'un pays à l'autre. Voici quelques exemples non exhaustifs.

+ +

États-Unis

+ +

Aux États-Unis, une adresse s'écrit généralement comme suit :

+ +

432 Anywhere St
+ Exampleville CA 95555

+ +

Dans ce cas, la portion la moins précise est le code "CA" (qui correspond au code postal pour l'état de Californie) et on a donc address-level1 qui correspond à ce niveau (ici l'état et plus particulièrement : "CA").

+ +

La deuxième partie de l'adresse la moins précise est le nom de la ville et c'est donc cette information (ici "Exampleville") qui sera utilisée pour address-level2.

+ +

Les niveaux 3 et 4 ne sont pas utilisés aux États-Unis.

+ +

Royaume-Uni

+ +

Le Royaume-Uni utilise un ou deux niveaux d'adresse selon l'adresse. Il s'agit de la ville postale et, dans certains cas, de la localité.

+ +

Chine

+ +

La Chine utilise jusqu'à trois niveaux administratifs : la province, la ville et le district.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('HTML5.2', "sec-forms.html#autofilling-form-controls-the-autocomplete-attribute", "autocomplete")}}{{Spec2('HTML5.2')}}
{{SpecName('HTML WHATWG', "form-control-infrastructure.html#autofilling-form-controls:-the-autocomplete-attribute", "autocomplete")}}{{Spec2('HTML WHATWG')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("html.global_attributes.autocomplete")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/html/attributes/crossorigin/index.html b/files/fr/web/html/attributes/crossorigin/index.html new file mode 100644 index 0000000000..ebb63f97f5 --- /dev/null +++ b/files/fr/web/html/attributes/crossorigin/index.html @@ -0,0 +1,96 @@ +--- +title: Attributs de réglage du CORS +slug: Web/HTML/Reglages_des_attributs_CORS +tags: + - Avancé + - CORS + - HTML + - Reference +translation_of: Web/HTML/Attributes/crossorigin +--- +
{{HTMLSidebar}}
+ +

En HTML5, certains des éléments HTML supportant le CORS (Cross-Origin Resource Sharing) comme les éléments {{HTMLElement("img")}}, {{HTMLElement("video")}} ou {{HTMLElement("script")}}, ont un attribut crossorigin (propriété crossOrigin), qui permet de configurer les requêtes CORS pour les données de l'élément à renvoyer. Ces attributs sont listés ci-après avec les valeurs qu'ils peuvent avoir :

+ + + + + + + + + + + + + + + + + + + + +
Mot-cléDescription
anonymousLes requêtes CORS pour cet élément auront le marqueur d'authentification (credentials flag) avec la valeur 'same-origin'.
use-credentialsLes requêtes CORS pour cet élément auront le marqueur d'authentification (credentials flag) avec la valeur 'include'.
""Utiliser la chaîne vide (crossorigin="") ou l'attribut seul (crossorigin) sera équivalent à l'utilisation de la valeur anonymous.
+ +

Par défaut (quand l'attribut n'est pas spécifié), le CORS n'est pas du tout utilisé. Le mot-clé anonymous signifie que, lorsqu'il n'y a pas la même origine, il n'y aura ni échange d'informations d'authentification de l'utilisateur via des cookies, ni des certificats SSL côté client ou des authentifications HTTP comme détaillé dans la section terminologique de la spécification CORS.

+ +

Un mot-clé invalide ou une chaîne de caractères vide seront interprétés comme le mot-clé anonymous.

+ +

Exemple : utiliser crossorigin avec l'élément script

+ +

On peut utiliser l'élément {{HTMLElement("script")}} afin d'indiquer au navigateur d'exécuter un script (ici, https://exemple.com/framework-exemple.js) sans envoyer les informations d'authentification de l'utilisateur.

+ +
<script src="https://exemple.com/framework-exemple.js"
+        crossorigin="anonymous">
+</script>
+ +

Exemple : utiliser des informations d'authentification avec un manifeste

+ +

La valeur use-credentials doit être utilisée lorsqu'on récupère un manifeste nécessitant des informations d'authentification, y compris lorsque le fichier provient de la même origine :

+ +
<link rel="manifest" href="/app.manifest" crossorigin="use-credentials">
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', 'infrastructure.html#cors-settings-attributes', 'CORS settings attributes')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML WHATWG', 'embedded-content.html#attr-img-crossorigin', 'crossorigin')}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilité du navigateur

+ +

L'attribut crossorigin pour <script>

+ + + +

{{Compat("html.elements.script.crossorigin")}}

+ +

L'attribut crossorigin pour <video>

+ + + +

{{Compat("html.elements.video.crossorigin")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/html/attributes/index.html b/files/fr/web/html/attributes/index.html new file mode 100644 index 0000000000..1b1c140c4e --- /dev/null +++ b/files/fr/web/html/attributes/index.html @@ -0,0 +1,767 @@ +--- +title: Liste des attributs HTML +slug: Web/HTML/Attributs +tags: + - Attribut + - HTML + - Reference + - Web +translation_of: Web/HTML/Attributes +--- +
{{HTMLSidebar}}
+ +

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.

+ +

Liste des attributs

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Nom de l'attributÉléments auxquels il s'appliqueDescription
accept{{HTMLElement("form")}}, {{HTMLElement("input")}}La liste des types acceptés par le serveur. Généralement, il s'agit de types de fichier.
accept-charset{{HTMLElement("form")}}La liste des jeux de caractères pris en charge.
accesskeyAttribut universelCet attribut permet de définir un raccourci clavier pour activer un élément ou lui passer le focus.
action{{HTMLElement("form")}}L'URI d'un programme qui traite les informations envoyées par le formulaire.
align{{HTMLElement("applet")}}, {{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("hr")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("td")}}, {{HTMLElement("tfoot")}} , {{HTMLElement("th")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}}Cet attribut définit l'alignement horizontal de l'élément.
allow{{HTMLElement("iframe")}}Cet attribut définit les règles des fonctionnalités pour cette iframe.
alt{{HTMLElement("applet")}}, {{HTMLElement("area")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}Un texte alternatif à afficher lorsque l'élément ne peut pas être affiché.
async{{HTMLElement("script")}}Cet attribut indique que le script devrait être exécuté de façon asynchrone.
autocapitalizeAttribut universelCet attribut contrôle la façon dont un champ texte est saisi en majuscules de façon automatique.
autocomplete +

{{HTMLElement("form")}}, {{HTMLElement("input")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}

+ 		Cet attribut indique que ces contrôles ou que ce formulaire peuvent être remplis automatiquement par le navigateur.
autofocus{{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}Cet attribut indique que l'élément doit recevoir le focus automatiquement une fois que la page est chargée.
autoplay{{HTMLElement("audio")}}, {{HTMLElement("video")}}Cet attribut indique que l'élément audio ou vidéo doit être lancé dès que possible.
background{{HTMLElement("body")}}, {{HTMLElement("table")}}, {{HTMLElement("td")}}, {{HTMLElement("th")}} +

Définit l'URL vers un fichier qui est une image.

+ +

Note : Bien que les navigateurs et les clients emails prennent en charge cet attribut, cet attribut est obsolète. On utilisera plutôt la propriété {{cssxref("background-image")}}.

+
bgcolor{{HTMLElement("body")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("marquee")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("td")}}, {{HTMLElement("th")}}, {{HTMLElement("tr")}} +

Cet attribut indique la couleur d'arrière-plan pour l'élément.

+ +
+

Note : Cet attribut est un attribut historique. Veuillez utiliser la propriété CSS standard {{cssxref("background-color")}}.

+
+
border{{HTMLElement("img")}}, {{HTMLElement("object")}}, {{HTMLElement("table")}} +

Cet attribut indique la largeur de la bordure.

+ +
+

Note : Cet attribut est un attribut historique. Veuillez utiliser la propriété CSS standard {{cssxref("border")}}.

+
+
buffered{{HTMLElement("audio")}}, {{HTMLElement("video")}}Cet attribut contient la valeur de l'intervalle de temps d'ores et déjà mis en mémoire tampon pour le média de l'élément.
challenge{{HTMLElement("keygen")}}Une chaîne de challenge qui est envoyée avec la clef publique.
charset{{HTMLElement("meta")}}, {{HTMLElement("script")}}Cet attribut déclare l'encodage de caractères utilisé pour la page ou le script.
checked{{HTMLElement("command")}}, {{HTMLElement("input")}}Cet attribut indique si l'élément doit être vérifié au chargement de la page.
cite{{HTMLElement("blockquote")}}, {{HTMLElement("del")}}, {{HTMLElement("ins")}}, {{HTMLElement("q")}}Cet attribut est une URI qui pointe vers la source de la citation ou de la modification.
classAttribut universelCet attribut permet de définir la ou les classes auxquelles appartient un élément afin de le manipuler en script ou de le mettre en forme avec CSS.
code{{HTMLElement("applet")}}Cet attribut définit l'URL du fichier de classe qui doit être utilisé pour le chargement et l'exécution de l'applet.
codebase{{HTMLElement("applet")}}Cet attribut fournit une URL absolue ou relative du dossier contenant les fichiers .class de l'applet.
color{{HTMLElement("basefont")}}, {{HTMLElement("font")}}, {{HTMLElement("hr")}} +

Cet attribut définit la couleur du texte grâce à un nom de couleur ou grâce à un code hexadécimal dans le format #RRGGBB.

+ +
+

Note : Cet attribut est un attribut historique. Veuillez utiliser la propriété CSS standard {{cssxref("color")}}.

+
+
cols{{HTMLElement("textarea")}}Cet attribut définit le nombre de colonnes pour le texte contenu dans un textarea.
colspan{{HTMLElement("td")}}, {{HTMLElement("th")}}Cet attribut définit le nombre de colonnes sur lequel une cellule doit s'étendre.
content{{HTMLElement("meta")}}Une valeur associée avec http-equiv ou name selon le contexte.
contenteditableAttribut universelCet attribut indique si le contenu de l'élément peut être édité.
contextmenuAttribut universelCet attribut fait référence à l'identifiant d'un élément {{HTMLElement("menu")}} qui sera utilisé comme menu contextuel pour l'élément.
controls{{HTMLElement("audio")}}, {{HTMLElement("video")}}Cet attribut indique si le navigateur doit afficher les contrôles de lecture du média pour l'utilisateur.
coords{{HTMLElement("area")}}Un ensemble de valeurs qui définit les coordonnées de la zone d'intérêt.
crossorigin{{HTMLElement("audio")}}, {{HTMLElement("img")}}, {{HTMLElement("link")}}, {{HTMLElement("script")}}, {{HTMLElement("video")}}Cet attribut gère les requêtes de différentes origines.
csp {{experimental_inline}}{{HTMLElement("iframe")}}Cet attribut définit la politique de sécurité de contenu que le document intégré doit respecter.
data{{HTMLElement("object")}}Cet attribut définit l'URL de la ressource.
data-*Attribut universelGrâce aux attributs de donnée, on peut associer des attributs personnalisés afin de transporter des informations spécifiques.
datetime{{HTMLElement("del")}}, {{HTMLElement("ins")}}, {{HTMLElement("time")}}Cet attribut indique la date et l'heure associées à l'élément.
decoding{{HTMLElement("img")}}Cet attribut indique la méthode préférée pour décoder l'image.
default{{HTMLElement("track")}}Cet attribut indique que la piste devrait être activée sauf si les préférences de l'utilisateur indique un autre choix.
defer{{HTMLElement("script")}}Cet attribut indique que le script doit être exécuté une fois que la page a été analysée.
dirAttribut universelCet attribut définit la direction du texte (gauche à droite ou droite à gauche).
dirname{{HTMLElement("input")}}, {{HTMLElement("textarea")}}
disabled{{HTMLElement("button")}}, {{HTMLElement("command")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("option")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}Cet attribut indique si l'utilisateur peut interagir avec l'élément.
download{{HTMLElement("a")}}, {{HTMLElement("area")}}Cet attribut indique si l'hyperlien est utilisé afin de télécharger une ressource.
draggableAttribut universelCet attribut indique si l'élément peut être déplacé/glissé.
dropzoneAttribut universelCet attribut indique si l'élément peut recevoir du contenu suite à un glisser/déposer.
enctype{{HTMLElement("form")}}Cet attribut définit le type de contenu des données de formulaire envoyées lorsque la méthode utilisée est POST.
enterkeyhint {{experimental_inline}}{{HTMLElement("textarea")}}, contenteditableCet attribut indique le libellé ou l'icône à afficher sur la touche entrée des clavier virtuels. Cet attribut peut être utilisé sur les contrôles de formulaires ou sur les éléments qui sont éditables (par exemple avec l'attribut contenteditable).
for{{HTMLElement("label")}}, {{HTMLElement("output")}}Cet attribut décrit l'élément auquel se rapporte l'élément courant.
form{{HTMLElement("button")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("meter")}}, {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}Cet attribut indique le formulaire auquel l'élément se rapporte.
formaction{{HTMLElement("input")}}, {{HTMLElement("button")}}Cet attribut est l'URI du programme qui traite les données pour ces champs du formulaire. Il prend le pas sur l'attribut action défini pour {{HTMLElement("form")}}.
formenctype{{HTMLElement("input")}}, {{HTMLElement("button")}}Si le bouton ou le champ sert à l'envoi (type="submit"), cet attribut indique l'encodage utilisé pour l'envoi des données. Si cet attribut est indiqué, il surcharge l'attribut enctype du formulaire auquel est rattaché le bouton/champ.
formmethod{{HTMLElement("input")}}, {{HTMLElement("button")}}Si le bouton ou le champ sert à l'envoi (type="submit"), cet attribut indique la méthode HTTP pour envoyer les données (GET, POST, etc.). Si cet attribut est indiqué, il surcharge l'attribut method du formulaire auquel est rattaché le bouton/champ.
formnovalidate{{HTMLElement("input")}}, {{HTMLElement("button")}}Si le bouton ou le champ sert à l'envoi (type="submit"), cet attribut booléen indique que le formulaire ne doit pas être validé à l'envoi. Si cet attribut est indiqué, il surcharge l'attribut novalidate du formulaire auquel est rattaché le bouton/champ.
formtarget{{HTMLElement("input")}}, {{HTMLElement("button")}}Si le bouton ou le champ sert à l'envoi (type="submit"), cet attribut indique le contexte de navigation (onglet, fenêtre ou iframe) dans lequel afficher la réponse après l'envoi du formulaire. Si cet attribut est indiqué, il surcharge l'attribut target du formulaire auquel est rattaché le bouton/champ.
headers{{HTMLElement("td")}}, {{HTMLElement("th")}}Les identifiants des éléments <th> qui s'appliquent à cet élément.
height{{HTMLElement("canvas")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("object")}}, {{HTMLElement("video")}} +

Pour ces éléments, cet attribut définit la hauteur occupée par l'élément. Pour les autres éléments, on utilisera {{cssxref("height")}} property.

+ +
+

Note : Pour certains éléments comme {{HTMLElement("div")}},cet attribut est un reliquat et ne devrait plus être utilisé. C'est la propriété CSS {{cssxref("height")}} qui est la méthode standard pour définir la hauteur d'un élément.

+
+
hiddenAttribut universelCet attribut empêche le rendu d'un élément sur une page tout en conservant les éléments fils actifs.
high{{HTMLElement("meter")}}Cet attribut indique la borne inférieure de l'intervalle haut.
href{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("base")}}, {{HTMLElement("link")}}L'URL de la ressource liée.
hreflang{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}Cet attribut indique la langue utilisé pour la ressource liée.
http-equiv{{HTMLElement("meta")}}
icon{{HTMLElement("command")}}Cet attribut indique une image qui représente la commande.
idAttribut universelCet attribut permet d'identifier un élément d'un document de façon unique. Il est généralement utilisé pour manipuler l'élément avec des scripts ou pour le mettre en forme avec CSS.
importance {{experimental_inline}}{{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("link")}}, {{HTMLElement("script")}}Cet attribut indique la priorité relative pour la récupération (fetch) des ressources.
integrity{{HTMLElement("link")}}, {{HTMLElement("script")}} +

Une fonctionnalité relative à la sécurité qui permet aux navigateurs de vérifier les fichiers qu'ils récupèrent.

+
intrinsicsize {{experimental_inline}}{{HTMLElement("img")}}Cet attribut indique au navigateur qu'il faut ignorer la taille intrinsèque de l'image et qu'il faut utiliser la taille indiquée avec les attributs.
inputmode{{HTMLElement("textarea")}}, contenteditableCet attribut fournit une indication sur le type de donnée qui pourrait être saisi par l'utilisateur lors de l'édition du formulaire ou de l'élément. Cet attribut peut être utilisé sur les contrôles de formulaires ou sur les éléments qui sont éditables (par exemple avec l'attribut contenteditable).
ismap{{HTMLElement("img")}}Cet attribut indique que l'image contribue à une mosaïque d'images interactive côté serveur.
itempropAttribut universel
keytype{{HTMLElement("keygen")}}Cet attribut définit le type de clé qui est généré.
kind{{HTMLElement("track")}}Cet attribut définit le type de piste textuelle.
label{{HTMLElement("optgroup")}}, {{HTMLElement("option")}}, {{HTMLElement("track")}}Cet attribut définit un titre, lisible par un utilisateur, pour l'élément.
langAttribut universelCet attribut définit la langue utilisée dans l'élément.
language{{HTMLElement("script")}}Cet attribut définit le langage de script utilisé dans l'élément.
loading {{experimental_inline}}{{HTMLElement("img")}}, {{HTMLElement("iframe")}}Cet attribut indique que l'élément doit être chargé à la demande.
list{{HTMLElement("input")}}Cet attribut constitue une liste d'options prédéfinie qui est suggérée à l'utilisateur.
loop{{HTMLElement("audio")}}, {{HTMLElement("bgsound")}}, {{HTMLElement("marquee")}}, {{HTMLElement("video")}}Cet attribut indique si le média courant doit recommencer au début une fois que sa lecture est terminée.
low{{HTMLElement("meter")}}Cet attribut indique la borne supérieure de l'intervalle bas.
manifest{{HTMLElement("html")}} +

Cet attribut définit l'URL du manifeste du document pour la gestion du cache.

+ +

Cet attribut est obsolète, on utilisera plutôt <link rel="manifest">.

+
max{{HTMLElement("input")}}, {{HTMLElement("meter")}}, {{HTMLElement("progress")}}Cet attribut indique la valeur maximale autorisée.
maxlength{{HTMLElement("input")}}, {{HTMLElement("textarea")}}Cet attribut définit le nombre maximal de caractères autorisé dans l'élément.
minlength{{HTMLElement("input")}}, {{HTMLElement("textarea")}}Cet attribut définit le nombre minimal de caractères qui doivent être saisis dans l'élément.
media{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}, {{HTMLElement("source")}}, {{HTMLElement("style")}}Cet attribut est indication à propos du type de média pour la ressource liée.
method{{HTMLElement("form")}}Cet attribut définit la méthode HTTP à utiliser pour l'envoi des données du formulaire (GET par défaut ou POST)
min{{HTMLElement("input")}}, {{HTMLElement("meter")}}Cet attribut indique la valeur minimale autorisée.
multiple{{HTMLElement("input")}}, {{HTMLElement("select")}}Cet attribut indique si plusieurs valeurs peuvent être saisies pour des entrées de type email ou file.
muted{{HTMLElement("audio")}},{{HTMLElement("video")}}Cet attribut indique si le son de la vidéo doit être coupé lorsque la page est chargée initialement.
name{{HTMLElement("button")}}, {{HTMLElement("form")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}, {{HTMLElement("map")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}Le nom de l'élément qui peut être utilisé par le serveur pour identifier le champ d'un formulaire.
novalidate{{HTMLElement("form")}}Cet attribut indique que les données du formulaire ne doivent pas être validées lors de l'envoi.
open{{HTMLElement("details")}}Cet attribut indique si les détails seront affichés lors du chargement de la page.
optimum{{HTMLElement("meter")}}Cet attribut indique la valeur numérique optimale.
pattern{{HTMLElement("input")}}Cet attribut définit une expression rationnelle contre laquelle valider la valeur de l'élément.
ping{{HTMLElement("a")}}, {{HTMLElement("area")}}
placeholder{{HTMLElement("input")}}, {{HTMLElement("textarea")}}Cet attribut fournit une indication à l'utilisateur sur ce qu'il peut saisir dans le champ.
poster{{HTMLElement("video")}}Cet attribut est une URL qui indique l'image à afficher tant que l'utilisateur n'a pas lancé la vidéo ou déplacé le curseur.
preload{{HTMLElement("audio")}}, {{HTMLElement("video")}}Cet attribut indique si toute ou partie, voire aucune partie de la ressource doit être téléchargée en avance.
radiogroup{{HTMLElement("command")}}
readonly{{HTMLElement("input")}}, {{HTMLElement("textarea")}}Cet attribut indique si l'élément peut être édité.
referrerpolicy{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("link")}}, {{HTMLElement("script")}}Définit le référent (referrer) envoyé lors de la récupération de la ressource.
rel{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}Cet attribut définit la relation entre l'objet cible et l'objet du lien.
required{{HTMLElement("input")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}Cet attribut indique si l'élément doit obligatoirement être renseigné dans le formulaire.
reversed{{HTMLElement("ol")}}Cet attribut indique si la liste doit être affichée dans un ordre décroissant plutôt que dans un ordre croissant.
rows{{HTMLElement("textarea")}}Cet attribut définit le nombre de lignes pour la zone de texte.
rowspan{{HTMLElement("td")}}, {{HTMLElement("th")}}Cet attribut définit le nombre de lignes sur lesquelles une cellule doit s'étendre.
sandbox{{HTMLElement("iframe")}}Empêche un élément chargé dans une iframe d'utiliser certaines fonctionnalités (envoyer des formulaires ou ouvrir de nouvelles fenêtres par exemples).
scope{{HTMLElement("th")}}Définit les cellules sur lesquelles porte la cellule d'en-tête.
scoped{{HTMLElement("style")}}
selected{{HTMLElement("option")}}Cet attribut définit la valeur qui sera sélectionnée au chargement de la page.
shape{{HTMLElement("a")}}, {{HTMLElement("area")}}
size{{HTMLElement("input")}}, {{HTMLElement("select")}}Cet attribut définit la largeur de l'élément en pixels, si l'attribut type de l'élément vaut text ou password, cela correspond au nombre de caractères du champ.
sizes{{HTMLElement("link")}}, {{HTMLElement("img")}}, {{HTMLElement("source")}}
slotAttribut universelCet attribut affecte un créneau pour un élément dans le shadow DOM.
span{{HTMLElement("col")}}, {{HTMLElement("colgroup")}}
spellcheckAttribut universelCet attribut indique si la vérification orthographique est activée pour l'élément courant.
src{{HTMLElement("audio")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("script")}}, {{HTMLElement("source")}}, {{HTMLElement("track")}}, {{HTMLElement("video")}}Cet attribut indique l'URL du contenu embarqué.
srcdoc{{HTMLElement("iframe")}}
srclang{{HTMLElement("track")}}
srcset{{HTMLElement("img")}}
start{{HTMLElement("ol")}}Cet attribut définit le première nombre de la liste si celui-ci est différent de 1.
step{{HTMLElement("input")}}
styleAttribut universelCet attribut définit des styles CSS qui auront la priorité sur ceux définis précédemment. Il ne devrait être utilisé qu'à des fins de tests car il est conseillé d'utiliser un/des fichier(s) à part pour gérer la mise en forme.
summary{{HTMLElement("table")}}
tabindexAttribut universelCet attribut permet de modifier l'ordre dans la navigation à la tabulation.
target{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("base")}}, {{HTMLElement("form")}}
titleAttribut universelCet attribut définit un texte expliquant le contenu de l'élément et qui est généralement affiché sous la forme d'une bulle d'information au survol de l'élément.
translateAttribut universelCet attribut indique si le contenu textuel de l'élément doit être traduit ou non.
type{{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("command")}}, {{HTMLElement("embed")}}, {{HTMLElement("object")}}, {{HTMLElement("script")}}, {{HTMLElement("source")}}, {{HTMLElement("style")}}, {{HTMLElement("menu")}}Cet attribut définit le type de l'élément.
usemap{{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("object")}}
value{{HTMLElement("button")}}, {{HTMLElement("option")}}, {{HTMLElement("input")}}, {{HTMLElement("li")}}, {{HTMLElement("meter")}}, {{HTMLElement("progress")}}, {{HTMLElement("param")}}Cet attribut définit la valeur par défaut qui sera affichée dans l'élément au chargement de la page.
width{{HTMLElement("canvas")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("object")}}, {{HTMLElement("video")}} +

Pour ces éléments, cet attribut définit la largeur occupée sur l'écran.

+ +
+

Note : Pour tous les autres éléments, comme {{HTMLElement("div")}}, il faut utiliser la propriété CSS standard {{cssxref("width")}} afin de définir la largeur.

+
+
wrap{{HTMLElement("textarea")}}Cet attribut indique l'utilisation du retour automatique à la ligne pour le texte de l'élément.
+ +

Attribut de contenu ou attribut IDL ?

+ +

En HTML, la plupart des attributs ont deux aspects : l'attribut de contenu et l'attribut IDL (pour Interface Definition Language ou langage de définition des interfaces).

+ +

L'attribut de contenu est l'attribut qu'on définit via le contenu (le code HTML) et qu'on obtenir et/ou définir via les méthodes {{domxref("element.setAttribute()")}} et {{domxref("element.getAttribute()")}}. L'attribut de contenu sera toujours une chaîne de caractères, y compris lorsque la valeur attendue est un entier. Ainsi, pour indiquer une maxlength d'un élément {{HTMLElement("input")}} à 42, on utilisera setAttribute("maxlength", "42") sur cet élément.

+ +

L'attribut IDL est également connu sous la forme d'une propriété JavaScript. Ce sont les attributs qu'on peut obtenir ou modifier via JavaScript sous la forme élément.toto. L'attribut IDL utilisera toujours la valeur de l'attribut de contenu sous-jacent, éventuellement en la modifiant pour renvoyer une valeur ou pour la modifier. Autrement dit, les attributs IDL, reflètent les attributs de contenu.

+ +

La plupart du temps, les attributs IDL renverront leurs valeurs, telles qu'elles sont utilisées. Par exemple, le type (l'attribut type) par défaut des éléments {{HTMLElement("input")}} vaut "text", et si on définit input.type="tototruc", l'élément <input> se comportera comme un élément de type text (en termes d'apparence et de comportement) mais le contenu de l'attribut type sera "tototruc". Cependant, l'attribut de type IDL renverra la chaîne "text".

+ +

Les attributs IDL ne sont pas toujours des chaînes de caractères. input.maxlength est un nombre par exemple (un entier long signé pour être précis). Lorsqu'on manipule des attributs IDL on utilisera toujours le type défini pour l'interface. Ainsi, input.maxlength renverra toujours un nombre et si on souhaite le définir, il faudra le faire avec un nombre, si on passe une valeur d'un autre type, cette valeur sera convertie grâce aux mécanismes de conversion habituels de JavaScript.

+ +

Les attributs IDL peuvent avoir d'autres types : entiers longs non-signés, URL, booléens, etc. Cependant, il n'existe pas de règle claire qui définisse le comportement des attributs IDL en fonction de l'attribut de contenu. La plupart du temps, les règles de cette spécification seront suivies.

+ +

Attributs booléens

+ +

Certains attributs de contenu (ex. required, readonly, disabled) sont des attributs booléens. Si un attribut booléen est présent, sa valeur correspondra à vrai (true), s'il est absent, sa valeur correspondra à faux (false).

+ +

HTML5 définit certaines restrictions quant aux valeurs autorisées pour les attributs booléens. Si un attribut est présent, sa valeur doit être :

+ + + +

Voici quelques exemples valides pour utiliser un attribut booléen :

+ +
<div itemscope>Ce fragment est du HTML valide mais du XML invalide.</div>
+<div itemscope=itemscope>Ce fragment est du HTML valide mais du XML invalide.</div>
+<div itemscope="">Ce fragment est du HTML valide et du XML valide.</div>
+<div itemscope="itemscope">Ce fragment est du HTML et du XML valide mais est plus verbeux.</div>
+ +

Pour être tout à fait explicite, les valeurs "true" et "false" ne sont pas autorisées pour les attributs booléens. Pour représenter une valeur fausse, il faudra ne pas écrire l'attribut du tout.

+ +

Cette règle peut entraîner quelques incompréhensions : si on écrit checked="false" l'attribut checked sera présent et donc considéré comme vrai (true).

+ +

Voir aussi

+ + diff --git a/files/fr/web/html/attributes/pattern/index.html b/files/fr/web/html/attributes/pattern/index.html new file mode 100644 index 0000000000..556f50aca9 --- /dev/null +++ b/files/fr/web/html/attributes/pattern/index.html @@ -0,0 +1,161 @@ +--- +title: 'HTML attribute: pattern' +slug: Web/HTML/Attributs/pattern +tags: + - Attribut + - HTML + - Reference +translation_of: Web/HTML/Attributes/pattern +--- +
{{HTMLSidebar}}
+ +

L'attribut pattern indique une expression rationnelle que doit respecter la valeur du contrôle du formulaire. Si une valeur non nulle (qui n'est pas null) ne respecte pas les contraintes portées par pattern, la propriété {{domxref('ValidityState.patternMismatch','patternMismatch')}} en lecture seule, rattachée à l'objet {{domxref('ValidityState')}}, vaudra true.

+ +

L'attribut pattern peut être utilisé pour les champs de type {{HTMLElement("input/text", "text")}}, {{HTMLElement("input/tel", "tel")}}, {{HTMLElement("input/email", "email")}}, {{HTMLElement("input/url", "url")}}, {{HTMLElement("input/password", "password")}}, {{HTMLElement("input/search", "search")}}.

+ +
+

La valeur de cet attribut doit être une expression rationnelle JavaScript valide (voir la documentation de {{jsxref("RegExp")}} et le guide sur les expressions rationnelles). Le marqueur (flag) 'u' pour être utilisé afin d'indiquer que l'expression rationnelle est une séquence de codets Unicode et non ASCII. On n'utilisera pas de barres obliques (slashes) autour du texte du motif de l'expression rationnelle.

+ +

Si le motif n'est pas indiqué ou est invalide, aucune expression rationnelle ne sera appliquée et l'attribut sera ignoré.

+ +
+

Note : On pourra utiliser l'attribut {{htmlattrxref("title", "input")}} afin de fournir aux utilisateurs des explications quant aux règles à respecter pour que la valeur soit valide. Attention, on ne doit pas utiliser uniquement cet attribut pour fournir ces explications. Voir ci-après quant à l'utilisabilité.

+
+
+ +

Certains types d'<input> qui prennent en charge l'attribut pattern (notamment {{HTMLElement("input/email", "email")}} et {{HTMLElement("input/url", "url")}}) ont des contraintes particulières qui doivent également être respectées. Si l'attribut pattern n'est pas présent et que la valeur saisie ne respecte pas la syntaxe attendue pour ce type de champ, la propriété en lecture seule {{domxref('ValidityState.typeMismatch','typeMismatch')}} vaudra true.

+ +

Utilisabilité

+ +

Lorsqu'on utilise l'attribut pattern, il est nécessaire de fournir une description du format attendu avec un texte visible près du contrôle. On pourra en plus utiliser l'attribut title afin de fournir une description. Les agents utilisateur peuvent utiliser la valeur de title lors de la validation des contraintes afin d'indiquer à l'utilisateur que le motif n'est pas respecté. Certains navigateurs pourront afficher une bulle d'information et certains outils d'assistance pourront énoncer le contenu de title à voix haute lorsque le focus arrive sur le contrôle. Toutefois, l'utilisation seule de cet attribut ne suffit pas pour fournir une accessibilité suffisante.

+ +

Validation des contraintes

+ +

Si la valeur du champ n'est pas la chaîne vide et que la valeur ne respecte pas l'expression rationnelle, on aura une incohérence, portée par {{domxref('ValidityState.patternMismatch','patternMismatch')}}.
+ L'expression rationnelle indiquée doit correspondre pour toute la chaîne (depuis son début jusqu'à la fin. Autrement dit, c'est comme si on enveloppait l'expression entre ^(?: et )$ afin d'indiquer que c'est toute la chaîne qui est considérée (et pas une de ses sous-partie).

+ +

Exemples

+ +

Avec le fragment de code HTML suivant :

+ +
+
<p>
+ <label>Veuillez saisir votre numéro de téléphone au format (123)456-7890
+  (<input name="tel1" type="tel" pattern="[0-9]{3}" placeholder="###" aria-label="3-digit area code" size="2"/>)-
+   <input name="tel2" type="tel" pattern="[0-9]{3}" placeholder="###" aria-label="3-digit prefix" size="2"/> -
+   <input name="tel3" type="tel" pattern="[0-9]{4}" placeholder="####" aria-label="4-digit number" size="3"/>
+ </label>
+</p>
+ +

Ici on a les trois sections d'un numéro de téléphone nord-américain avec les deux premières contenant 3 chiffres et la dernière contenant 4 chiffres.

+ +

Si les valeurs saisies sont trop longues ou trop courtes ou si elles contiennent des caractères qui ne sont pas des chiffres, la valeur de l'attribut patternMismatch sera true. On aura également l'activation de la pseudo-classe CSS {{cssxref(":invalid")}}.

+ +
input:invalid {
+  border: red solid 3px;
+}
+ +

{{EmbedLiveSample("exemple1", 300, 40)}}

+
+ +

En utilisant les attributs minlength et maxlength à la place, on aurait eu les propriétés {{domxref('validityState.tooLong')}} ou {{domxref('validityState.tooShort')}} qui auraient valu true.

+ +

Indiquer un motif

+ +

On pourra utiliser l'attribut {{htmlattrxref("pattern","input")}} afin d'indiquer une expression rationnelle qui devra être respectée par la valeur saisie pour que celle-ci soit considérée comme valide (voir ce guide sur la validation avec les expressions rationnelles pour une introduction).

+ +

L'exemple qui suit permet de restreindre les valeurs saisies entre 4 et 8 caractères qui doivent également être des lettres minuscules.

+ +
<form>
+  <div>
+    <label for="uname">Veuillez choisir un nom d'utilisateur : </label>
+    <input type="text" id="uname" name="name" required size="45"
+           pattern="[a-z]{4,8}" title="4 à 8 lettres en minuscules">
+    <span class="validity"></span>
+    <p>Les noms d'utilisateurs doivent être en minuscules et contenir 4 à 8 caractères.</p>
+  </div>
+  <div>
+    <button>Envoyer</button>
+  </div>
+</form>
+ + + +

Résultat

+ +

{{EmbedLiveSample('Indiquer_un_motif', 600, 110)}}

+ +

Accessibilité

+ +

Lorsqu'un contrôle dispose de l'attribut pattern, l'attribut title, s'il est utilisé, doit décrire le motif souhaité. Attention, reposer uniquement sur l'attribut title pour fournir une aide visuelle n'est pas souhaitable car la plupart des agents utilisateur n'exposent pas cet attribut de façon accessible. Certains navigateurs affichent une bulle d'information lorsqu'on survole l'élément avec un pointeur mais cela laisse de côté les utilisateurs qui naviguent avec le clavier ou ceux qui utilisent une interface tactile. Il faut donc inclure au moins autrement des informations sur la façon de saisir des valeurs qui respectent les contraintes.

+ +

L'attribut title est utilisé par certains navigateurs pour écrire les messages d'erreur. Attention toutefois car les navigateurs affichent également le contenu de cet attribut au survol de l'élément y compris lorsqu'il n'y a pas d'erreur. La formulation doit être choisie avec précaution pour ne pas induire l'utilisateur en erreur.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', 'forms.html#attr-input-pattern', 'pattern')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5.1', 'forms.html#attr-input-pattern', 'pattern')}}{{Spec2('HTML5.1')}}
{{SpecName('HTML5 W3C', 'forms.html#attr-input-pattern', 'pattern')}}{{Spec2('HTML5 W3C')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("html.elements.attributes.pattern")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/html/attributs/autocomplete/index.html b/files/fr/web/html/attributs/autocomplete/index.html deleted file mode 100644 index fca919718d..0000000000 --- a/files/fr/web/html/attributs/autocomplete/index.html +++ /dev/null @@ -1,228 +0,0 @@ ---- -title: autocomplete -slug: Web/HTML/Attributs/autocomplete -tags: - - Attribut - - HTML - - Input - - Reference -translation_of: Web/HTML/Attributes/autocomplete ---- -
{{HTMLSidebar("Global_attributes")}}
- -

L'attribut autocomplete est disponible pour différents types d'éléments {{HTMLElement("input")}}, {{HTMLElement("textarea")}}, {{HTMLElement("select")}} et {{HTMLElement("form")}}. autocomplete permet d'indiquer à l'agent utilisateur qu'une assistance de saisie automatique peut être fournie et également d'indiquer le type de donnée attendu.

- -

La source fournissant les valeurs suggérées pour l'autocomplétion dépend du navigateur. Généralement, celle-ci est constituée des valeurs saisies précédemment par l'utilisateur. Ce peuvent également être des valeurs préconfigurées. Ainsi, un navigateur pourra permettre à un utilisateur d'enregistrer son nom, son adresse, son numéro de téléphone et des adresses électroniques pour l'aider lors de l'autocomplétion. Le navigateur pourrait également fournir le stockage chiffré des informations de cartes bancaires et déclencher une procédure d'authentification lorsque ces informations doivent être récupérées pour être utilisées.

- -

Si l'élément {{HTMLElement("input")}}, {{HTMLElement("select")}} ou {{HTMLElement("textarea")}} ne possèdent pas d'attribut autocomplete, le navigateur utilisera l'attribut autocomplete du formulaire associé (c'est-à-dire l'élément {{HTMLElement("form")}} qui est l'ancêtre de l'élément <input> ou l'élément <form> dont la valeur de l'attribut id correspond à celle indiquée avec l'attribut {{htmlattrxref("form", "input")}} de l'élément <input>).

- -

Pour plus d'informations, voir la documentation de l'attribut {{htmlattrxref("autocomplete", "form")}} pour l'élément {{HTMLElement("form")}}.

- -
-

Note : Afin de fournir des fonctionnalités d'autocomplétion, un agent utilisateur pourra utiliser les prérequis suivants quant aux éléments <input>/<select>/<textarea>:

- -
    -
  1. Que ceux-ci aient un attribut name et/ou id
    2. -
  2. Que ceux-ci descendent d'un élément <form>
    3. -
  3. Que le formulaire associé ait un bouton {{HTMLElement("input/submit","submit")}}
    4. -
-
- -

Valeurs

- -
-
off
-
Le navigateur n'est pas autorisé à saisir automatiquement des valeurs pour ce champ. Cette valeur peut être utilisée lorsque le document ou l'application fournit son propre mécanisme d'autocomplétion ou lorsque des raisons de sécurité imposent de ne pas pouvoir saisir la valeur automatiquement. -
Note : Pour la plupart des navigateurs modernes, utiliser autocomplete="off" n'empêchera pas un gestionnaire de mots de passe de demander à l'utilisateur s'il souhaite sauvegarder le nom d'utilisateur et le mot de passe ou de renseigner automatiquement les informations pour un formulaire de connexion. Voir l'article sur l'attribut autocomplete et les champs des formulaires de connexion.
-
-
on
-
Le navigateur est autorisé à compléter automatiquement le champ. Aucune indication supplémentaire n'est fournie quant au type de donnée attendu et c'est donc au navigateur d'utiliser une heuristique pour proposer des valeurs pertinentes.
-
name
-
Le champ correspondant doit recevoir le nom complet de la personne. Utiliser cette valeur plutôt que les différents composants est une méthode souvent privilégiée car on évite ainsi de gérer les différents structures des différentes locales. Toutefois, on peut utiliser les composants suivants si on souhaite décomposer l'identité de la personne : -
-
honorific-prefix
-
Le préfixe ou le titre, par exemple « M. », « Mme. », « Me. » , etc.
-
given-name
-
Le prénom.
-
additional-name
-
Le deuxième prénom.
-
family-name
-
Le nom de famille.
-
honorific-suffix
-
Un suffixe (par exemple "Jr.").
-
nickname
-
Un surnom.
-
-
-
email
-
Une adresse électronique.
-
username
-
Un nom de compte ou un nom d'utilisateur.
-
new-password
-
Un nouveau mot de passe. Lors de la création d'un compte ou lors d'un changement de mot de passe, cette valeur pourra être utilisée pour le champ où saisir le nouveau mot de passe. Ainsi, on évitera au navigateur de saisir automatiquement le mot de passe actuel ou le navigateur pourra même proposer un outil permettant de créer un mot de passe sécurisé.
-
current-password
-
Le mot de passe actuel de l'utilisateur.
-
one-time-code
-
Un code à usage unique, utilisé pour vérifier l'identité de l'utilisateur.
-
organization-title
-
Un titre de poste tel que « Directeur général », « Assistant technique » ou « Ingénieur ».
-
organization
-
Le nom d'une entreprise ou d'une organisation.
-
street-address
-
Une adresse postale. Cette adresse peut être un texte sur plusieurs lignes et devrait permettre d'identifier complètement l'emplacement de l'adresse au sein d'une ville. Cette valeur n'inclut pas le nom de la ville, le code postal ou le nom du pays.
-
address-line1, address-line2, address-line3
-
Des lignes individuelles pour décrire l'adresse postale. Ces valeurs peuvent être utilisées seulement lorsque la valeur street-address est absente.
-
address-level4
-
Le niveau d'adresse le plus fin (cf. la section ci-après) lorsque les adresses ont quatre niveau.
-
address-level3
-
Le troisième niveau de précision d'une adresse (cf. la section ci-après) lorsque les adresses ont au moins trois niveaux administratifs.
-
address-level2
-
Le deuxième niveau de précision d'une adresse (cf. la section ci-après) lorsque les adresses ont au moins deux niveaux administratifs. Pour les pays avec deux niveaux administratifs, cela correspond généralement à la ville, au village ou à la localité de l'adresse.
-
address-level1
-
Le premier niveau de précision d'une adresse (cf. la section ci-après). C'est généralement la région ou l'état dans lequel se situe l'adresse.
-
country
-
Un code de pays.
-
country-name
-
Un nom de pays.
-
postal-code
-
Un code postal.
-
cc-name
-
Le nom complet tel qu'indiqué sur une carte bancaire. On préfèrera généralement utiliser le nom complet plutôt que de le décomposer en fragments.
-
cc-given-name
-
Le prénom tel qu'indiqué sur une carte bancaire.
-
cc-additional-name
-
Le deuxième prénom tel qu'indiqué sur une carte bancaire.
-
cc-family-name
-
Le nom de famille tel qu'indiqué sur une carte bancaire.
-
cc-number
-
Le numéro de la carte bancaire ou tout autre numéro identifiant une méthode de paiement (ce peut être un numéro de compte par exemple).
-
cc-exp
-
La date d'expiration de la méthode de paiement telle qu'indiquée sur une carte bancaire (généralement sous la forme MM/YY ou sous la forme MM/YYYYY où MM correspond aux deux chiffres du mois et où YY ou YYYY correspondent aux chiffres de l'année).
-
cc-exp-month
-
Le mois d'expiration du moyen de paiement tel qu'indiqué sur une carte bancaire.
-
cc-exp-year
-
L'année d'expiration du moyen de paiement tel qu'indiqué sur une carte bancaire.
-
cc-csc
-
Le cryptogramme du moyen de paiement tel qu'indiqué sur une carte bancaire. il s'agit généralement du code à trois chiffres de vérification situé au dos de la carte bancaire.
-
cc-type
-
Le type de moyen de paiement ("Visa" ou "Master Card").
-
transaction-currency
-
La devise utilisée pour la transaction courante.
-
transaction-amount
-
Le montant de la transaction, pour un formulaire de paiement, exprimé dans la devise fournie par transaction-currency.
-
language
-
La langue préférée, indiquée sous la forme d'une balise de langue valide selon BCP 47.
-
bday
-
Une date de naissance complète.
-
bday-day
-
Le jour du mois de la date de naissance.
-
bday-month
-
Le mois de l'année de la date de naissance.
-
bday-year
-
L'année de la date de naissance.
-
sex
-
Un genre (tel que « femme », « homme », « Fa'afafine » etc.) sous la forme d'un texte libre sans passage à la ligne.
-
tel
-
Un numéro de téléphone complet qui inclut l'identifiant du pays. Si le numéro de téléphone doit être décomposé en composants, on pourra utiliser les valeurs suivantes : -
-
tel-country-code
-
L'indicateur du pays pour le numéro de téléphone (33 pour la France ou 1 pour les États-Unis par exemple).
-
tel-national
-
Le numéro de téléphone complet sans l'indicateur du pays.
-
tel-area-code
-
La code de la zone pour le numéro de téléphone avec un préfixe interne au pays si nécessaire.
-
tel-local
-
Le numéro de téléphone sans l'indicateur de pays ni l'indicateur de zone.
-
-
-
tel-extension
-
Une extension au numéro de téléphone qui permet par exemple d'indiquer le numéro de chambre dans un hôtel ou le numéro d'un bureau au sein d'une entreprise.
-
impp
-
Une URL pour un protocole de messagerie instantannée (par exemple "xmpp:username@example.net").
-
url
-
Une URL, pertinente dans le contexte du formulaire.
-
photo
-
L'URL d'une image représentant la personne, l'entreprise ou l'information de contact pour ce formulaire.
-
- -

Voir la spécification WHATWG pour plus de détails.

- -
-

Note : À la différence des autres navigateurs, pour Firefox, l'attribut autocomplete contrôlera également si l'état de désactivation ou de coche dynamique persiste lors d'un rechargement de la page pour un champ <input>. Par défaut, un élément reste désactivé ou coché/décoché lors des rechargements. En utilisant l'attribut autocomplete avec la valeur off, on désactive cette fonctionnalité. Cela fonctionne, y compris lorsque l'attribut autocomplete ne devrait pas s'appliquer à l'élément <input> d'après son type. Voir {{bug(654072)}}.

-
- -

Les niveaux administratifs pour les adresses

- -

Les quatre niveaux administratifs pour les adresses (address-level1 jusqu'à address-level4) décrivent l'adresse avec un niveau de précision croissant au sein du pays dans lequel l'adresse est situé. Chaque pays possède son propre système de division administrative et peut donc organiser les niveaux selon un ordre différent pour l'écriture des adresses.

- -

address-level1 représente toujours le niveau le plus large : c'est la composante la moins spécifique de l'adresse après la maille du pays.

- -

Disposition du formulaire

- -

Étant donné qu'une adresse s'écrit différemment selon le pays, il peut être utile, si possible, de fournir différentes dispositions de formulaires pour les utilisateurs (éventuellement en fonction de leur locale) pour faciliter la saisie de leur adresse pour leur pays.

- -

Variations

- -

La façon d'utiliser les niveaux administratifs varie d'un pays à l'autre. Voici quelques exemples non exhaustifs.

- -

États-Unis

- -

Aux États-Unis, une adresse s'écrit généralement comme suit :

- -

432 Anywhere St
- Exampleville CA 95555

- -

Dans ce cas, la portion la moins précise est le code "CA" (qui correspond au code postal pour l'état de Californie) et on a donc address-level1 qui correspond à ce niveau (ici l'état et plus particulièrement : "CA").

- -

La deuxième partie de l'adresse la moins précise est le nom de la ville et c'est donc cette information (ici "Exampleville") qui sera utilisée pour address-level2.

- -

Les niveaux 3 et 4 ne sont pas utilisés aux États-Unis.

- -

Royaume-Uni

- -

Le Royaume-Uni utilise un ou deux niveaux d'adresse selon l'adresse. Il s'agit de la ville postale et, dans certains cas, de la localité.

- -

Chine

- -

La Chine utilise jusqu'à trois niveaux administratifs : la province, la ville et le district.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('HTML5.2', "sec-forms.html#autofilling-form-controls-the-autocomplete-attribute", "autocomplete")}}{{Spec2('HTML5.2')}}
{{SpecName('HTML WHATWG', "form-control-infrastructure.html#autofilling-form-controls:-the-autocomplete-attribute", "autocomplete")}}{{Spec2('HTML WHATWG')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("html.global_attributes.autocomplete")}}

- -

Voir aussi

- - diff --git a/files/fr/web/html/attributs/index.html b/files/fr/web/html/attributs/index.html deleted file mode 100644 index 1b1c140c4e..0000000000 --- a/files/fr/web/html/attributs/index.html +++ /dev/null @@ -1,767 +0,0 @@ ---- -title: Liste des attributs HTML -slug: Web/HTML/Attributs -tags: - - Attribut - - HTML - - Reference - - Web -translation_of: Web/HTML/Attributes ---- -
{{HTMLSidebar}}
- -

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.

- -

Liste des attributs

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Nom de l'attributÉléments auxquels il s'appliqueDescription
accept{{HTMLElement("form")}}, {{HTMLElement("input")}}La liste des types acceptés par le serveur. Généralement, il s'agit de types de fichier.
accept-charset{{HTMLElement("form")}}La liste des jeux de caractères pris en charge.
accesskeyAttribut universelCet attribut permet de définir un raccourci clavier pour activer un élément ou lui passer le focus.
action{{HTMLElement("form")}}L'URI d'un programme qui traite les informations envoyées par le formulaire.
align{{HTMLElement("applet")}}, {{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("hr")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("td")}}, {{HTMLElement("tfoot")}} , {{HTMLElement("th")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}}Cet attribut définit l'alignement horizontal de l'élément.
allow{{HTMLElement("iframe")}}Cet attribut définit les règles des fonctionnalités pour cette iframe.
alt{{HTMLElement("applet")}}, {{HTMLElement("area")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}Un texte alternatif à afficher lorsque l'élément ne peut pas être affiché.
async{{HTMLElement("script")}}Cet attribut indique que le script devrait être exécuté de façon asynchrone.
autocapitalizeAttribut universelCet attribut contrôle la façon dont un champ texte est saisi en majuscules de façon automatique.
autocomplete -

{{HTMLElement("form")}}, {{HTMLElement("input")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}

- 		Cet attribut indique que ces contrôles ou que ce formulaire peuvent être remplis automatiquement par le navigateur.
autofocus{{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}Cet attribut indique que l'élément doit recevoir le focus automatiquement une fois que la page est chargée.
autoplay{{HTMLElement("audio")}}, {{HTMLElement("video")}}Cet attribut indique que l'élément audio ou vidéo doit être lancé dès que possible.
background{{HTMLElement("body")}}, {{HTMLElement("table")}}, {{HTMLElement("td")}}, {{HTMLElement("th")}} -

Définit l'URL vers un fichier qui est une image.

- -

Note : Bien que les navigateurs et les clients emails prennent en charge cet attribut, cet attribut est obsolète. On utilisera plutôt la propriété {{cssxref("background-image")}}.

-
bgcolor{{HTMLElement("body")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("marquee")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("td")}}, {{HTMLElement("th")}}, {{HTMLElement("tr")}} -

Cet attribut indique la couleur d'arrière-plan pour l'élément.

- -
-

Note : Cet attribut est un attribut historique. Veuillez utiliser la propriété CSS standard {{cssxref("background-color")}}.

-
-
border{{HTMLElement("img")}}, {{HTMLElement("object")}}, {{HTMLElement("table")}} -

Cet attribut indique la largeur de la bordure.

- -
-

Note : Cet attribut est un attribut historique. Veuillez utiliser la propriété CSS standard {{cssxref("border")}}.

-
-
buffered{{HTMLElement("audio")}}, {{HTMLElement("video")}}Cet attribut contient la valeur de l'intervalle de temps d'ores et déjà mis en mémoire tampon pour le média de l'élément.
challenge{{HTMLElement("keygen")}}Une chaîne de challenge qui est envoyée avec la clef publique.
charset{{HTMLElement("meta")}}, {{HTMLElement("script")}}Cet attribut déclare l'encodage de caractères utilisé pour la page ou le script.
checked{{HTMLElement("command")}}, {{HTMLElement("input")}}Cet attribut indique si l'élément doit être vérifié au chargement de la page.
cite{{HTMLElement("blockquote")}}, {{HTMLElement("del")}}, {{HTMLElement("ins")}}, {{HTMLElement("q")}}Cet attribut est une URI qui pointe vers la source de la citation ou de la modification.
classAttribut universelCet attribut permet de définir la ou les classes auxquelles appartient un élément afin de le manipuler en script ou de le mettre en forme avec CSS.
code{{HTMLElement("applet")}}Cet attribut définit l'URL du fichier de classe qui doit être utilisé pour le chargement et l'exécution de l'applet.
codebase{{HTMLElement("applet")}}Cet attribut fournit une URL absolue ou relative du dossier contenant les fichiers .class de l'applet.
color{{HTMLElement("basefont")}}, {{HTMLElement("font")}}, {{HTMLElement("hr")}} -

Cet attribut définit la couleur du texte grâce à un nom de couleur ou grâce à un code hexadécimal dans le format #RRGGBB.

- -
-

Note : Cet attribut est un attribut historique. Veuillez utiliser la propriété CSS standard {{cssxref("color")}}.

-
-
cols{{HTMLElement("textarea")}}Cet attribut définit le nombre de colonnes pour le texte contenu dans un textarea.
colspan{{HTMLElement("td")}}, {{HTMLElement("th")}}Cet attribut définit le nombre de colonnes sur lequel une cellule doit s'étendre.
content{{HTMLElement("meta")}}Une valeur associée avec http-equiv ou name selon le contexte.
contenteditableAttribut universelCet attribut indique si le contenu de l'élément peut être édité.
contextmenuAttribut universelCet attribut fait référence à l'identifiant d'un élément {{HTMLElement("menu")}} qui sera utilisé comme menu contextuel pour l'élément.
controls{{HTMLElement("audio")}}, {{HTMLElement("video")}}Cet attribut indique si le navigateur doit afficher les contrôles de lecture du média pour l'utilisateur.
coords{{HTMLElement("area")}}Un ensemble de valeurs qui définit les coordonnées de la zone d'intérêt.
crossorigin{{HTMLElement("audio")}}, {{HTMLElement("img")}}, {{HTMLElement("link")}}, {{HTMLElement("script")}}, {{HTMLElement("video")}}Cet attribut gère les requêtes de différentes origines.
csp {{experimental_inline}}{{HTMLElement("iframe")}}Cet attribut définit la politique de sécurité de contenu que le document intégré doit respecter.
data{{HTMLElement("object")}}Cet attribut définit l'URL de la ressource.
data-*Attribut universelGrâce aux attributs de donnée, on peut associer des attributs personnalisés afin de transporter des informations spécifiques.
datetime{{HTMLElement("del")}}, {{HTMLElement("ins")}}, {{HTMLElement("time")}}Cet attribut indique la date et l'heure associées à l'élément.
decoding{{HTMLElement("img")}}Cet attribut indique la méthode préférée pour décoder l'image.
default{{HTMLElement("track")}}Cet attribut indique que la piste devrait être activée sauf si les préférences de l'utilisateur indique un autre choix.
defer{{HTMLElement("script")}}Cet attribut indique que le script doit être exécuté une fois que la page a été analysée.
dirAttribut universelCet attribut définit la direction du texte (gauche à droite ou droite à gauche).
dirname{{HTMLElement("input")}}, {{HTMLElement("textarea")}}
disabled{{HTMLElement("button")}}, {{HTMLElement("command")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("option")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}Cet attribut indique si l'utilisateur peut interagir avec l'élément.
download{{HTMLElement("a")}}, {{HTMLElement("area")}}Cet attribut indique si l'hyperlien est utilisé afin de télécharger une ressource.
draggableAttribut universelCet attribut indique si l'élément peut être déplacé/glissé.
dropzoneAttribut universelCet attribut indique si l'élément peut recevoir du contenu suite à un glisser/déposer.
enctype{{HTMLElement("form")}}Cet attribut définit le type de contenu des données de formulaire envoyées lorsque la méthode utilisée est POST.
enterkeyhint {{experimental_inline}}{{HTMLElement("textarea")}}, contenteditableCet attribut indique le libellé ou l'icône à afficher sur la touche entrée des clavier virtuels. Cet attribut peut être utilisé sur les contrôles de formulaires ou sur les éléments qui sont éditables (par exemple avec l'attribut contenteditable).
for{{HTMLElement("label")}}, {{HTMLElement("output")}}Cet attribut décrit l'élément auquel se rapporte l'élément courant.
form{{HTMLElement("button")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("meter")}}, {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}Cet attribut indique le formulaire auquel l'élément se rapporte.
formaction{{HTMLElement("input")}}, {{HTMLElement("button")}}Cet attribut est l'URI du programme qui traite les données pour ces champs du formulaire. Il prend le pas sur l'attribut action défini pour {{HTMLElement("form")}}.
formenctype{{HTMLElement("input")}}, {{HTMLElement("button")}}Si le bouton ou le champ sert à l'envoi (type="submit"), cet attribut indique l'encodage utilisé pour l'envoi des données. Si cet attribut est indiqué, il surcharge l'attribut enctype du formulaire auquel est rattaché le bouton/champ.
formmethod{{HTMLElement("input")}}, {{HTMLElement("button")}}Si le bouton ou le champ sert à l'envoi (type="submit"), cet attribut indique la méthode HTTP pour envoyer les données (GET, POST, etc.). Si cet attribut est indiqué, il surcharge l'attribut method du formulaire auquel est rattaché le bouton/champ.
formnovalidate{{HTMLElement("input")}}, {{HTMLElement("button")}}Si le bouton ou le champ sert à l'envoi (type="submit"), cet attribut booléen indique que le formulaire ne doit pas être validé à l'envoi. Si cet attribut est indiqué, il surcharge l'attribut novalidate du formulaire auquel est rattaché le bouton/champ.
formtarget{{HTMLElement("input")}}, {{HTMLElement("button")}}Si le bouton ou le champ sert à l'envoi (type="submit"), cet attribut indique le contexte de navigation (onglet, fenêtre ou iframe) dans lequel afficher la réponse après l'envoi du formulaire. Si cet attribut est indiqué, il surcharge l'attribut target du formulaire auquel est rattaché le bouton/champ.
headers{{HTMLElement("td")}}, {{HTMLElement("th")}}Les identifiants des éléments <th> qui s'appliquent à cet élément.
height{{HTMLElement("canvas")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("object")}}, {{HTMLElement("video")}} -

Pour ces éléments, cet attribut définit la hauteur occupée par l'élément. Pour les autres éléments, on utilisera {{cssxref("height")}} property.

- -
-

Note : Pour certains éléments comme {{HTMLElement("div")}},cet attribut est un reliquat et ne devrait plus être utilisé. C'est la propriété CSS {{cssxref("height")}} qui est la méthode standard pour définir la hauteur d'un élément.

-
-
hiddenAttribut universelCet attribut empêche le rendu d'un élément sur une page tout en conservant les éléments fils actifs.
high{{HTMLElement("meter")}}Cet attribut indique la borne inférieure de l'intervalle haut.
href{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("base")}}, {{HTMLElement("link")}}L'URL de la ressource liée.
hreflang{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}Cet attribut indique la langue utilisé pour la ressource liée.
http-equiv{{HTMLElement("meta")}}
icon{{HTMLElement("command")}}Cet attribut indique une image qui représente la commande.
idAttribut universelCet attribut permet d'identifier un élément d'un document de façon unique. Il est généralement utilisé pour manipuler l'élément avec des scripts ou pour le mettre en forme avec CSS.
importance {{experimental_inline}}{{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("link")}}, {{HTMLElement("script")}}Cet attribut indique la priorité relative pour la récupération (fetch) des ressources.
integrity{{HTMLElement("link")}}, {{HTMLElement("script")}} -

Une fonctionnalité relative à la sécurité qui permet aux navigateurs de vérifier les fichiers qu'ils récupèrent.

-
intrinsicsize {{experimental_inline}}{{HTMLElement("img")}}Cet attribut indique au navigateur qu'il faut ignorer la taille intrinsèque de l'image et qu'il faut utiliser la taille indiquée avec les attributs.
inputmode{{HTMLElement("textarea")}}, contenteditableCet attribut fournit une indication sur le type de donnée qui pourrait être saisi par l'utilisateur lors de l'édition du formulaire ou de l'élément. Cet attribut peut être utilisé sur les contrôles de formulaires ou sur les éléments qui sont éditables (par exemple avec l'attribut contenteditable).
ismap{{HTMLElement("img")}}Cet attribut indique que l'image contribue à une mosaïque d'images interactive côté serveur.
itempropAttribut universel
keytype{{HTMLElement("keygen")}}Cet attribut définit le type de clé qui est généré.
kind{{HTMLElement("track")}}Cet attribut définit le type de piste textuelle.
label{{HTMLElement("optgroup")}}, {{HTMLElement("option")}}, {{HTMLElement("track")}}Cet attribut définit un titre, lisible par un utilisateur, pour l'élément.
langAttribut universelCet attribut définit la langue utilisée dans l'élément.
language{{HTMLElement("script")}}Cet attribut définit le langage de script utilisé dans l'élément.
loading {{experimental_inline}}{{HTMLElement("img")}}, {{HTMLElement("iframe")}}Cet attribut indique que l'élément doit être chargé à la demande.
list{{HTMLElement("input")}}Cet attribut constitue une liste d'options prédéfinie qui est suggérée à l'utilisateur.
loop{{HTMLElement("audio")}}, {{HTMLElement("bgsound")}}, {{HTMLElement("marquee")}}, {{HTMLElement("video")}}Cet attribut indique si le média courant doit recommencer au début une fois que sa lecture est terminée.
low{{HTMLElement("meter")}}Cet attribut indique la borne supérieure de l'intervalle bas.
manifest{{HTMLElement("html")}} -

Cet attribut définit l'URL du manifeste du document pour la gestion du cache.

- -

Cet attribut est obsolète, on utilisera plutôt <link rel="manifest">.

-
max{{HTMLElement("input")}}, {{HTMLElement("meter")}}, {{HTMLElement("progress")}}Cet attribut indique la valeur maximale autorisée.
maxlength{{HTMLElement("input")}}, {{HTMLElement("textarea")}}Cet attribut définit le nombre maximal de caractères autorisé dans l'élément.
minlength{{HTMLElement("input")}}, {{HTMLElement("textarea")}}Cet attribut définit le nombre minimal de caractères qui doivent être saisis dans l'élément.
media{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}, {{HTMLElement("source")}}, {{HTMLElement("style")}}Cet attribut est indication à propos du type de média pour la ressource liée.
method{{HTMLElement("form")}}Cet attribut définit la méthode HTTP à utiliser pour l'envoi des données du formulaire (GET par défaut ou POST)
min{{HTMLElement("input")}}, {{HTMLElement("meter")}}Cet attribut indique la valeur minimale autorisée.
multiple{{HTMLElement("input")}}, {{HTMLElement("select")}}Cet attribut indique si plusieurs valeurs peuvent être saisies pour des entrées de type email ou file.
muted{{HTMLElement("audio")}},{{HTMLElement("video")}}Cet attribut indique si le son de la vidéo doit être coupé lorsque la page est chargée initialement.
name{{HTMLElement("button")}}, {{HTMLElement("form")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}, {{HTMLElement("map")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}Le nom de l'élément qui peut être utilisé par le serveur pour identifier le champ d'un formulaire.
novalidate{{HTMLElement("form")}}Cet attribut indique que les données du formulaire ne doivent pas être validées lors de l'envoi.
open{{HTMLElement("details")}}Cet attribut indique si les détails seront affichés lors du chargement de la page.
optimum{{HTMLElement("meter")}}Cet attribut indique la valeur numérique optimale.
pattern{{HTMLElement("input")}}Cet attribut définit une expression rationnelle contre laquelle valider la valeur de l'élément.
ping{{HTMLElement("a")}}, {{HTMLElement("area")}}
placeholder{{HTMLElement("input")}}, {{HTMLElement("textarea")}}Cet attribut fournit une indication à l'utilisateur sur ce qu'il peut saisir dans le champ.
poster{{HTMLElement("video")}}Cet attribut est une URL qui indique l'image à afficher tant que l'utilisateur n'a pas lancé la vidéo ou déplacé le curseur.
preload{{HTMLElement("audio")}}, {{HTMLElement("video")}}Cet attribut indique si toute ou partie, voire aucune partie de la ressource doit être téléchargée en avance.
radiogroup{{HTMLElement("command")}}
readonly{{HTMLElement("input")}}, {{HTMLElement("textarea")}}Cet attribut indique si l'élément peut être édité.
referrerpolicy{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("link")}}, {{HTMLElement("script")}}Définit le référent (referrer) envoyé lors de la récupération de la ressource.
rel{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}Cet attribut définit la relation entre l'objet cible et l'objet du lien.
required{{HTMLElement("input")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}Cet attribut indique si l'élément doit obligatoirement être renseigné dans le formulaire.
reversed{{HTMLElement("ol")}}Cet attribut indique si la liste doit être affichée dans un ordre décroissant plutôt que dans un ordre croissant.
rows{{HTMLElement("textarea")}}Cet attribut définit le nombre de lignes pour la zone de texte.
rowspan{{HTMLElement("td")}}, {{HTMLElement("th")}}Cet attribut définit le nombre de lignes sur lesquelles une cellule doit s'étendre.
sandbox{{HTMLElement("iframe")}}Empêche un élément chargé dans une iframe d'utiliser certaines fonctionnalités (envoyer des formulaires ou ouvrir de nouvelles fenêtres par exemples).
scope{{HTMLElement("th")}}Définit les cellules sur lesquelles porte la cellule d'en-tête.
scoped{{HTMLElement("style")}}
selected{{HTMLElement("option")}}Cet attribut définit la valeur qui sera sélectionnée au chargement de la page.
shape{{HTMLElement("a")}}, {{HTMLElement("area")}}
size{{HTMLElement("input")}}, {{HTMLElement("select")}}Cet attribut définit la largeur de l'élément en pixels, si l'attribut type de l'élément vaut text ou password, cela correspond au nombre de caractères du champ.
sizes{{HTMLElement("link")}}, {{HTMLElement("img")}}, {{HTMLElement("source")}}
slotAttribut universelCet attribut affecte un créneau pour un élément dans le shadow DOM.
span{{HTMLElement("col")}}, {{HTMLElement("colgroup")}}
spellcheckAttribut universelCet attribut indique si la vérification orthographique est activée pour l'élément courant.
src{{HTMLElement("audio")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("script")}}, {{HTMLElement("source")}}, {{HTMLElement("track")}}, {{HTMLElement("video")}}Cet attribut indique l'URL du contenu embarqué.
srcdoc{{HTMLElement("iframe")}}
srclang{{HTMLElement("track")}}
srcset{{HTMLElement("img")}}
start{{HTMLElement("ol")}}Cet attribut définit le première nombre de la liste si celui-ci est différent de 1.
step{{HTMLElement("input")}}
styleAttribut universelCet attribut définit des styles CSS qui auront la priorité sur ceux définis précédemment. Il ne devrait être utilisé qu'à des fins de tests car il est conseillé d'utiliser un/des fichier(s) à part pour gérer la mise en forme.
summary{{HTMLElement("table")}}
tabindexAttribut universelCet attribut permet de modifier l'ordre dans la navigation à la tabulation.
target{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("base")}}, {{HTMLElement("form")}}
titleAttribut universelCet attribut définit un texte expliquant le contenu de l'élément et qui est généralement affiché sous la forme d'une bulle d'information au survol de l'élément.
translateAttribut universelCet attribut indique si le contenu textuel de l'élément doit être traduit ou non.
type{{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("command")}}, {{HTMLElement("embed")}}, {{HTMLElement("object")}}, {{HTMLElement("script")}}, {{HTMLElement("source")}}, {{HTMLElement("style")}}, {{HTMLElement("menu")}}Cet attribut définit le type de l'élément.
usemap{{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("object")}}
value{{HTMLElement("button")}}, {{HTMLElement("option")}}, {{HTMLElement("input")}}, {{HTMLElement("li")}}, {{HTMLElement("meter")}}, {{HTMLElement("progress")}}, {{HTMLElement("param")}}Cet attribut définit la valeur par défaut qui sera affichée dans l'élément au chargement de la page.
width{{HTMLElement("canvas")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("object")}}, {{HTMLElement("video")}} -

Pour ces éléments, cet attribut définit la largeur occupée sur l'écran.

- -
-

Note : Pour tous les autres éléments, comme {{HTMLElement("div")}}, il faut utiliser la propriété CSS standard {{cssxref("width")}} afin de définir la largeur.

-
-
wrap{{HTMLElement("textarea")}}Cet attribut indique l'utilisation du retour automatique à la ligne pour le texte de l'élément.
- -

Attribut de contenu ou attribut IDL ?

- -

En HTML, la plupart des attributs ont deux aspects : l'attribut de contenu et l'attribut IDL (pour Interface Definition Language ou langage de définition des interfaces).

- -

L'attribut de contenu est l'attribut qu'on définit via le contenu (le code HTML) et qu'on obtenir et/ou définir via les méthodes {{domxref("element.setAttribute()")}} et {{domxref("element.getAttribute()")}}. L'attribut de contenu sera toujours une chaîne de caractères, y compris lorsque la valeur attendue est un entier. Ainsi, pour indiquer une maxlength d'un élément {{HTMLElement("input")}} à 42, on utilisera setAttribute("maxlength", "42") sur cet élément.

- -

L'attribut IDL est également connu sous la forme d'une propriété JavaScript. Ce sont les attributs qu'on peut obtenir ou modifier via JavaScript sous la forme élément.toto. L'attribut IDL utilisera toujours la valeur de l'attribut de contenu sous-jacent, éventuellement en la modifiant pour renvoyer une valeur ou pour la modifier. Autrement dit, les attributs IDL, reflètent les attributs de contenu.

- -

La plupart du temps, les attributs IDL renverront leurs valeurs, telles qu'elles sont utilisées. Par exemple, le type (l'attribut type) par défaut des éléments {{HTMLElement("input")}} vaut "text", et si on définit input.type="tototruc", l'élément <input> se comportera comme un élément de type text (en termes d'apparence et de comportement) mais le contenu de l'attribut type sera "tototruc". Cependant, l'attribut de type IDL renverra la chaîne "text".

- -

Les attributs IDL ne sont pas toujours des chaînes de caractères. input.maxlength est un nombre par exemple (un entier long signé pour être précis). Lorsqu'on manipule des attributs IDL on utilisera toujours le type défini pour l'interface. Ainsi, input.maxlength renverra toujours un nombre et si on souhaite le définir, il faudra le faire avec un nombre, si on passe une valeur d'un autre type, cette valeur sera convertie grâce aux mécanismes de conversion habituels de JavaScript.

- -

Les attributs IDL peuvent avoir d'autres types : entiers longs non-signés, URL, booléens, etc. Cependant, il n'existe pas de règle claire qui définisse le comportement des attributs IDL en fonction de l'attribut de contenu. La plupart du temps, les règles de cette spécification seront suivies.

- -

Attributs booléens

- -

Certains attributs de contenu (ex. required, readonly, disabled) sont des attributs booléens. Si un attribut booléen est présent, sa valeur correspondra à vrai (true), s'il est absent, sa valeur correspondra à faux (false).

- -

HTML5 définit certaines restrictions quant aux valeurs autorisées pour les attributs booléens. Si un attribut est présent, sa valeur doit être :

- - - -

Voici quelques exemples valides pour utiliser un attribut booléen :

- -
<div itemscope>Ce fragment est du HTML valide mais du XML invalide.</div>
-<div itemscope=itemscope>Ce fragment est du HTML valide mais du XML invalide.</div>
-<div itemscope="">Ce fragment est du HTML valide et du XML valide.</div>
-<div itemscope="itemscope">Ce fragment est du HTML et du XML valide mais est plus verbeux.</div>
- -

Pour être tout à fait explicite, les valeurs "true" et "false" ne sont pas autorisées pour les attributs booléens. Pour représenter une valeur fausse, il faudra ne pas écrire l'attribut du tout.

- -

Cette règle peut entraîner quelques incompréhensions : si on écrit checked="false" l'attribut checked sera présent et donc considéré comme vrai (true).

- -

Voir aussi

- - diff --git a/files/fr/web/html/attributs/pattern/index.html b/files/fr/web/html/attributs/pattern/index.html deleted file mode 100644 index 556f50aca9..0000000000 --- a/files/fr/web/html/attributs/pattern/index.html +++ /dev/null @@ -1,161 +0,0 @@ ---- -title: 'HTML attribute: pattern' -slug: Web/HTML/Attributs/pattern -tags: - - Attribut - - HTML - - Reference -translation_of: Web/HTML/Attributes/pattern ---- -
{{HTMLSidebar}}
- -

L'attribut pattern indique une expression rationnelle que doit respecter la valeur du contrôle du formulaire. Si une valeur non nulle (qui n'est pas null) ne respecte pas les contraintes portées par pattern, la propriété {{domxref('ValidityState.patternMismatch','patternMismatch')}} en lecture seule, rattachée à l'objet {{domxref('ValidityState')}}, vaudra true.

- -

L'attribut pattern peut être utilisé pour les champs de type {{HTMLElement("input/text", "text")}}, {{HTMLElement("input/tel", "tel")}}, {{HTMLElement("input/email", "email")}}, {{HTMLElement("input/url", "url")}}, {{HTMLElement("input/password", "password")}}, {{HTMLElement("input/search", "search")}}.

- -
-

La valeur de cet attribut doit être une expression rationnelle JavaScript valide (voir la documentation de {{jsxref("RegExp")}} et le guide sur les expressions rationnelles). Le marqueur (flag) 'u' pour être utilisé afin d'indiquer que l'expression rationnelle est une séquence de codets Unicode et non ASCII. On n'utilisera pas de barres obliques (slashes) autour du texte du motif de l'expression rationnelle.

- -

Si le motif n'est pas indiqué ou est invalide, aucune expression rationnelle ne sera appliquée et l'attribut sera ignoré.

- -
-

Note : On pourra utiliser l'attribut {{htmlattrxref("title", "input")}} afin de fournir aux utilisateurs des explications quant aux règles à respecter pour que la valeur soit valide. Attention, on ne doit pas utiliser uniquement cet attribut pour fournir ces explications. Voir ci-après quant à l'utilisabilité.

-
-
- -

Certains types d'<input> qui prennent en charge l'attribut pattern (notamment {{HTMLElement("input/email", "email")}} et {{HTMLElement("input/url", "url")}}) ont des contraintes particulières qui doivent également être respectées. Si l'attribut pattern n'est pas présent et que la valeur saisie ne respecte pas la syntaxe attendue pour ce type de champ, la propriété en lecture seule {{domxref('ValidityState.typeMismatch','typeMismatch')}} vaudra true.

- -

Utilisabilité

- -

Lorsqu'on utilise l'attribut pattern, il est nécessaire de fournir une description du format attendu avec un texte visible près du contrôle. On pourra en plus utiliser l'attribut title afin de fournir une description. Les agents utilisateur peuvent utiliser la valeur de title lors de la validation des contraintes afin d'indiquer à l'utilisateur que le motif n'est pas respecté. Certains navigateurs pourront afficher une bulle d'information et certains outils d'assistance pourront énoncer le contenu de title à voix haute lorsque le focus arrive sur le contrôle. Toutefois, l'utilisation seule de cet attribut ne suffit pas pour fournir une accessibilité suffisante.

- -

Validation des contraintes

- -

Si la valeur du champ n'est pas la chaîne vide et que la valeur ne respecte pas l'expression rationnelle, on aura une incohérence, portée par {{domxref('ValidityState.patternMismatch','patternMismatch')}}.
- L'expression rationnelle indiquée doit correspondre pour toute la chaîne (depuis son début jusqu'à la fin. Autrement dit, c'est comme si on enveloppait l'expression entre ^(?: et )$ afin d'indiquer que c'est toute la chaîne qui est considérée (et pas une de ses sous-partie).

- -

Exemples

- -

Avec le fragment de code HTML suivant :

- -
-
<p>
- <label>Veuillez saisir votre numéro de téléphone au format (123)456-7890
-  (<input name="tel1" type="tel" pattern="[0-9]{3}" placeholder="###" aria-label="3-digit area code" size="2"/>)-
-   <input name="tel2" type="tel" pattern="[0-9]{3}" placeholder="###" aria-label="3-digit prefix" size="2"/> -
-   <input name="tel3" type="tel" pattern="[0-9]{4}" placeholder="####" aria-label="4-digit number" size="3"/>
- </label>
-</p>
- -

Ici on a les trois sections d'un numéro de téléphone nord-américain avec les deux premières contenant 3 chiffres et la dernière contenant 4 chiffres.

- -

Si les valeurs saisies sont trop longues ou trop courtes ou si elles contiennent des caractères qui ne sont pas des chiffres, la valeur de l'attribut patternMismatch sera true. On aura également l'activation de la pseudo-classe CSS {{cssxref(":invalid")}}.

- -
input:invalid {
-  border: red solid 3px;
-}
- -

{{EmbedLiveSample("exemple1", 300, 40)}}

-
- -

En utilisant les attributs minlength et maxlength à la place, on aurait eu les propriétés {{domxref('validityState.tooLong')}} ou {{domxref('validityState.tooShort')}} qui auraient valu true.

- -

Indiquer un motif

- -

On pourra utiliser l'attribut {{htmlattrxref("pattern","input")}} afin d'indiquer une expression rationnelle qui devra être respectée par la valeur saisie pour que celle-ci soit considérée comme valide (voir ce guide sur la validation avec les expressions rationnelles pour une introduction).

- -

L'exemple qui suit permet de restreindre les valeurs saisies entre 4 et 8 caractères qui doivent également être des lettres minuscules.

- -
<form>
-  <div>
-    <label for="uname">Veuillez choisir un nom d'utilisateur : </label>
-    <input type="text" id="uname" name="name" required size="45"
-           pattern="[a-z]{4,8}" title="4 à 8 lettres en minuscules">
-    <span class="validity"></span>
-    <p>Les noms d'utilisateurs doivent être en minuscules et contenir 4 à 8 caractères.</p>
-  </div>
-  <div>
-    <button>Envoyer</button>
-  </div>
-</form>
- - - -

Résultat

- -

{{EmbedLiveSample('Indiquer_un_motif', 600, 110)}}

- -

Accessibilité

- -

Lorsqu'un contrôle dispose de l'attribut pattern, l'attribut title, s'il est utilisé, doit décrire le motif souhaité. Attention, reposer uniquement sur l'attribut title pour fournir une aide visuelle n'est pas souhaitable car la plupart des agents utilisateur n'exposent pas cet attribut de façon accessible. Certains navigateurs affichent une bulle d'information lorsqu'on survole l'élément avec un pointeur mais cela laisse de côté les utilisateurs qui naviguent avec le clavier ou ceux qui utilisent une interface tactile. Il faut donc inclure au moins autrement des informations sur la façon de saisir des valeurs qui respectent les contraintes.

- -

L'attribut title est utilisé par certains navigateurs pour écrire les messages d'erreur. Attention toutefois car les navigateurs affichent également le contenu de cet attribut au survol de l'élément y compris lorsqu'il n'y a pas d'erreur. La formulation doit être choisie avec précaution pour ne pas induire l'utilisateur en erreur.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', 'forms.html#attr-input-pattern', 'pattern')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5.1', 'forms.html#attr-input-pattern', 'pattern')}}{{Spec2('HTML5.1')}}
{{SpecName('HTML5 W3C', 'forms.html#attr-input-pattern', 'pattern')}}{{Spec2('HTML5 W3C')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("html.elements.attributes.pattern")}}

- -

Voir aussi

- - diff --git a/files/fr/web/html/attributs_universels/accesskey/index.html b/files/fr/web/html/attributs_universels/accesskey/index.html deleted file mode 100644 index e53f876ed8..0000000000 --- a/files/fr/web/html/attributs_universels/accesskey/index.html +++ /dev/null @@ -1,143 +0,0 @@ ---- -title: accesskey -slug: Web/HTML/Attributs_universels/accesskey -tags: - - Attribut - - Attribut universel - - HTML - - Reference -translation_of: Web/HTML/Global_attributes/accesskey ---- -
{{HTMLSidebar("Global_attributes")}}
- -
L'attribut universel accesskey fournit une indication afin de générer un raccourci clavier pour l'élément courant. La valeur de cet attribut est une liste de caractères (un caractère étant ici un seul point de code Unicode) séparés par des espaces. Le navigateur utilisera le premier caractère qui est disponible selon la disposition du clavier utilisée.
- -
{{EmbedInteractiveExample("pages/tabbed/attribute-accesskey.html","tabbed-shorter")}}
- - - -

La combinaison de touches utilisée pour le raccourci clavier dépend du navigateur et du système d'exploitation utilisés.

- -
-

Note : La spécification WHATWG indique qu'il est possible d'indiquer des caractères séparés par plusieurs espaces, auquel cas le navigateur considèrera le premier qu'il prend en charge. Toutefois, cela ne fonctionne pas dans la plupart des navigateurs. Pour IE/Edge, c'est la première valeur prise en charge qui sera utilisée si celle-ci n'entre pas en conflit avec d'autres commandes.

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
WindowsLinuxMac
FirefoxAlt + Shift + touche -

Pour Firefox 57 et les versions ultérieures : Control + Option + touche ou Control + Alt + touche
- Pour Firefox 14 et les versions ultérieures : Control + Alt + touche
- Pour Firefox 13 et les versions antérieures : Control + touche

-
EdgeAlt + toucheN/A
Internet ExplorerAlt + toucheN/A
Google ChromeAlt + toucheControl + Alt + touche
SafariAlt + toucheN/AControl + Alt + touche
Opera 15+Alt + keyControl + Alt + key
Opera 12Shift + Esc ouvre une liste de contenu accessible via la touche accesskey, on peut alors ensuite choisir l'élément voulu grâce la touche touche
- -

Accessibilité

- -

Au-delà de la prise en charge limitée des navigateurs, accesskey pose plusieurs problèmes :

- - - -

Étant donné ces raisons, il est généralement conseillé de ne pas utiliser accesskey pour les sites web et applications généralistes.

- - - -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('HTML5.2', "editing.html#the-accesskey-attribute", "accesskey")}}{{Spec2('HTML5.2')}}Un comportement plus réaliste est défini et correspond à ce qui est réellement implémenté.
{{SpecName('HTML WHATWG', "interaction.html#the-accesskey-attribute", "accesskey")}}{{Spec2('HTML WHATWG')}}Aucune modification depuis {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "editing.html#the-accesskey-attribute", "accesskey")}}{{Spec2('HTML5.1')}}Aucune modification depuis {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "editing.html#the-accesskey-attribute", "accesskey")}}{{Spec2('HTML5 W3C')}}Plusieurs caractères peuvent être définis via cet attribut depuis {{SpecName('HTML4.01')}}. Cet attribut peut désormais être défini sur n'importe quel élément.
{{SpecName('HTML4.01', "interact/forms.html#h-17.11.2", "accesskey")}}{{Spec2('HTML4.01')}}L'attribut est uniquement pris en charge par {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("label")}}, {{HTMLElement("legend")}} et {{HTMLElement("textarea")}}.
- -

Compatibilité des navigateurs

- - - -

{{Compat("html.global_attributes.accesskey")}}

- -

Voir aussi

- - diff --git a/files/fr/web/html/attributs_universels/autocapitalize/index.html b/files/fr/web/html/attributs_universels/autocapitalize/index.html deleted file mode 100644 index 206412edde..0000000000 --- a/files/fr/web/html/attributs_universels/autocapitalize/index.html +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: autocapitalize -slug: Web/HTML/Attributs_universels/autocapitalize -tags: - - Attribut - - Attribut universel - - HTML - - Reference -translation_of: Web/HTML/Global_attributes/autocapitalize ---- -
{{HTMLSidebar("Global_attributes")}}
- -

L'attribut universel autocapitalize est un attribut à valeurs contraintes qui contrôle la façon dont le texte saisi est automatiquement converti en majuscules ou non. Voici les valeurs autorisées pour cet attribut :

- - - -

L'attribut autocapitalize n'a aucun impact lorsqu'on utilise un clavier physique. Il modifie la saisie pour les autres moyens de saisie tels que les claviers virtuels ou les moyens de saisie orale. Le but de cet attribut est d'aider de tels moyens à faciliter la saisie de l'utilisateur. Par défaut, un tel moyen de saisie utilisera une majuscule pour chaque début de phrase, modifier l'attribut autocapitalize permet aux auteurs de modifier ce comportement selon les différents éléments.

- -

L'attribut autocapitalize n'entraînera pas de mise en majuscule automatique pour un élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type", "input")}} vaut url, email ou password.

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', "interaction.html#autocapitalization", "autocapitalize")}}{{Spec2('HTML WHATWG')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("html.global_attributes.autocapitalize")}}

diff --git a/files/fr/web/html/attributs_universels/class/index.html b/files/fr/web/html/attributs_universels/class/index.html deleted file mode 100644 index 6204b6a173..0000000000 --- a/files/fr/web/html/attributs_universels/class/index.html +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: class -slug: Web/HTML/Attributs_universels/class -tags: - - Attribut - - Attribut universel - - HTML - - Reference -translation_of: Web/HTML/Global_attributes/class ---- -
{{HTMLSidebar("Global_attributes")}}
- -

L'attribut universel class indique une liste de classes associées à l'élément courant. Les classes permettent de manipuler les éléments, via CSS ou JavaScript en utilisant les sélecteurs de classe ou des fonctions telles que {{domxref("document.getElementsByClassName")}}.

- -
{{EmbedInteractiveExample("pages/tabbed/attribute-class.html","tabbed-standard")}}
- - - -

Bien que la spécification ne précise aucune contrainte quant aux noms utilisés pour les classes, une bonne pratique consiste à utiliser des noms qui traduisent la sémantique de l'élément plutôt que la mise en forme. Ainsi, les noms sémantiques restent pertinents même lorsque la présentation de la page évolue.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', "dom.html#classes", "class")}}{{Spec2('HTML WHATWG')}}Aucune modification depuis {{SpecName('HTML5.1')}}.
{{SpecName('HTML5.1', "dom.html#element-attrdef-global-class", "class")}}{{Spec2('HTML5.1')}}État selon {{SpecName('HTML WHATWG')}}. Aucune modification depuis {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "dom.html#classes", "class")}}{{Spec2('HTML5 W3C')}}État selon {{SpecName('HTML WHATWG')}}. class est désormas sun attribut universel depuis {{SpecName('HTML4.01')}},.
{{SpecName('HTML4.01', "struct/global.html#h-7.5.2", "class")}}{{Spec2('HTML4.01')}}Cet attribut est pris en charge sur tous les éléments à l'exception de {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}} et {{HTMLElement("title")}}.
- -

Compatibilité des navigateurs

- - - -

{{Compat("html.global_attributes.class")}}

- -

Voir aussi

- - diff --git a/files/fr/web/html/attributs_universels/contenteditable/index.html b/files/fr/web/html/attributs_universels/contenteditable/index.html deleted file mode 100644 index 1f805fc490..0000000000 --- a/files/fr/web/html/attributs_universels/contenteditable/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: contenteditable -slug: Web/HTML/Attributs_universels/contenteditable -tags: - - Attribut - - Attribut universel - - HTML - - Reference -translation_of: Web/HTML/Global_attributes/contenteditable ---- -
{{HTMLSidebar("Global_attributes")}}
- -

L'attribut universel contenteditable est un attribut à valeur contrainte qui indique si l'élément courant doit pouvoir être édité par l'utilisateur ou non. Lorsque c'est le cas, des éléments de l'interface du navigateur (ou de l'agent utilisateur) sont modifiés afin de permettre l'édition.

- -
{{EmbedInteractiveExample("pages/tabbed/attribute-contenteditable.html","tabbed-shorter")}}
- - - -

Les valeurs autorisées pour cet attribut sont :

- - - -

Si cet attribut n'est pas défini, sa valeur est héritée depuis son élément parent.

- -

Cet attribut n'est pas un attribut booléen ! Cela signifie qu'une valeur explicite est nécessaire pour son fonctionnement. Toute forme telle que <label contenteditable>Exemple</label> n'est pas autorisée. La version correcte sera <label contenteditable="true">Exemple</label>.

- -

Il est possible de modifier la couleur du symbole d'insertion grâce à la propriété CSS {{cssxref("caret-color")}}.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("HTML Editing", "contentEditable.html#contenteditable", "contenteditable")}}{{Spec2("HTML Editing")}}Ajout de "events", "caret", "typing", "plaintext-only".
{{SpecName("HTML WHATWG", "editing.html#attr-contenteditable", "contenteditable")}}{{Spec2("HTML WHATWG")}}Aucune modification depuis la dernière dérivation, {{SpecName("HTML5.2")}}
{{SpecName("HTML5.2", "editing.html#making-document-regions-editable-the-contenteditable-content-attribute", "contenteditable")}}{{Spec2("HTML5.2")}}Dérivation de {{SpecName("HTML WHATWG")}}, aucune modification depuis {{SpecName("HTML5.1")}}
{{SpecName("HTML5.1", "editing.html#making-document-regions-editable-the-contenteditable-content-attribute", "contenteditable")}}{{Spec2("HTML5.1")}}Dérivation de {{SpecName("HTML WHATWG")}}, aucune modification depuis {{SpecName("HTML5 W3C")}}
{{SpecName("HTML5 W3C", "editing.html#attr-contenteditable", "contenteditable")}}{{Spec2("HTML5 W3C")}}Dérivation de {{SpecName("HTML WHATWG")}}, définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("html.global_attributes.contenteditable")}}

- -

Voir aussi

- - diff --git a/files/fr/web/html/attributs_universels/contextmenu/index.html b/files/fr/web/html/attributs_universels/contextmenu/index.html deleted file mode 100644 index 187be1f1cc..0000000000 --- a/files/fr/web/html/attributs_universels/contextmenu/index.html +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: contextmenu -slug: Web/HTML/Attributs_universels/contextmenu -tags: - - Attribut - - Attribut universel - - HTML - - Reference -translation_of: Web/HTML/Global_attributes/contextmenu ---- -
{{HTMLSidebar("Global_attributes")}}{{obsolete_header}}
- -
-

Attention ! Cet attribut est obsolète et sera retiré de l'ensemble des navigateurs.

-
- -

L'attribut universel contextmenu correspond à l'{{htmlattrxref("id","","identifiant",1)}} d'un élément {{HTMLElement("menu")}} qu'on souhaite utiliser comme menu contextuel pour l'élément courant.

- -

Un menu contextuel est un menu qui apparaît suite à une action utilisateur (par exemple un clic-droit). HTML5 permet désormais de personnaliser ce menu.

- -
-

Exemples

- -

Voici quelques exemples de personnalisations de menus. Le code HTML pourra être :

- -

HTML

- -
<body contextmenu="share">
-  <menu type="context" id="share">
-    <menu label="Partager">
-      <menuitem label="Twitter" onclick="shareViaTwitter()"></menuitem>
-      <menuitem label="Facebook" onclick="shareViaFacebook()"></menuitem>
-    </menu>
-  </menu>
-  <ol>
-    <li>
-      Dans cet exemple, vous pouvez partager un lien vers
-      cette page sur Facebook et/ou Twitter via le groupe Partager
-      du menu contextuel
-    </li>
-    <li>Sur cette ligne : on peut partager la page sur Twitter ou Facebook grâce au menu Partager du menu contextuel.</li>
-    <li><pre contextmenu="changeFont" id="fontSizing">Sur cette ligne : on peut changer la taille de la police en utilisant les options "Augmenter/Réduire la taille de la police" du menu contextuel</pre></li>
-    <menu type="context" id="changeFont">
-      <menuitem label="Augmenter la taille de la police" onclick="incFont()"></menuitem>
-      <menuitem label="Réduire la taille de la police" onclick="decFont()"></menuitem>
-    </menu>
-    <li contextmenu="ChangeImage" id="changeImage">Sur cette ligne : on peut  utiliser l'option "Changer l'image" du menu.</li><br />
-    <img src="https://developer.mozilla.org/media/img/promote/promobutton_mdn5.png" contextmenu="ChangeImage" id="promoButton" />
-    <menu type="context" id="ChangeImage">
-      <menuitem label="Changer l'image" onclick="changeImage()"></menuitem>
-    </menu>
-  </ol>
-</body>
-
- -

JavaScript

- -
function shareViaTwitter() {
-  window.open("https://twitter.com/intent/tweet?text=" +
-      "Je découvre ContextMenu avec MDN.");
-}
-
-function shareViaFacebook() {
-  window.open("https://facebook.com/sharer/sharer.php?u=" +
-      "https://developer.mozilla.org/fr/docs/Web/HTML/Attributs_universels/contextmenu");
-}
-function incFont(){
-  document.getElementById("fontSizing").style.fontSize="larger";
-}
-
-function decFont(){
-  document.getElementById("fontSizing").style.fontSize="smaller";
-}
-
-function changeImage(){
-  var j = Math.ceil((Math.random()*39)+1);
-  document.images[0].src="https://developer.mozilla.org/media/img/promote/promobutton_mdn" + j + ".png";
-}
- -

Résultat

- -
{{EmbedLiveSample("Exemples",600,500)}}
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("HTML WHATWG", "obsolete.html#attr-contextmenu", "contextmenu")}}{{Spec2('HTML WHATWG')}}Rendu obsolète
{{SpecName('HTML5.1', "interactive-elements.html#context-menus", "contextmenu")}}{{Spec2('HTML5.1')}}Dérivation de {{SpecName('HTML WHATWG')}}, définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("html.global_attributes.contextmenu")}}

- -

Voir aussi

- - diff --git a/files/fr/web/html/attributs_universels/data-_star_/index.html b/files/fr/web/html/attributs_universels/data-_star_/index.html deleted file mode 100644 index d8befa7a2f..0000000000 --- a/files/fr/web/html/attributs_universels/data-_star_/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: data-* -slug: Web/HTML/Attributs_universels/data-* -tags: - - Attribut - - Attribut universel - - HTML - - Reference -translation_of: Web/HTML/Global_attributes/data-* ---- -
{{HTMLSidebar("Global_attributes")}}
- -

Les attributs universels data-* forment une classe d'attributs, appelés attributs de données (data attributes). Ils permettent d'échanger des données propriétaire entre le HTML et la représentation du DOM, qu'on peut manipuler avec des scripts.

- -
{{EmbedInteractiveExample("pages/tabbed/attribute-data.html","tabbed-standard")}}
- - - -

De tels attributs sont disponibles via l'interface {{domxref("HTMLElement")}} de l'élément pour lequel l'attribut est utilisé. La propriété {{domxref("HTMLElement.dataset")}} permet d'accéder à l'attribut.
- Ici, l'astérisque (*) peut être remplacée par n'importe quel nom valide selon les règles appliquées aux noms XML et en respectant les contraintes suivantes :

- - - -

La propriété {{domxref("HTMLElement.dataset")}} est un objet {{domxref("StringMap")}} et la valeur d'un attribut de donnée nommé data-test-valeur sera accessible via HTMLElement.dataset.testValeur car les tirets (U+002D) sont remplacés par la majuscule de la lettre suivante (CamelCase).

- -

Utilisation

- -

Lorsqu'on ajoute des attributs de données data-*, on peut utiliser les éléments HTML classiques afin d'en faire des objets complexes et puissants. Ainsi, un sprite d'un vaisseau spatial dans un jeu peut être modélisé via un élément {{HTMLElement("img")}} auquel on associe un attribut class et plusieurs attributs de données sous la forme data-*.

- -
<img class="spaceship cruiserX3" src="shipX3.png"
-     data-ship-id="324" data-weapons="laserI laserII"
-     data-x="414354" data-y="85160" data-z="31940"
-     onclick="spaceships[this.dataset.shipId].blasted()">
-</img>
-
- -

Pour un tutoriel plus avancé à propos des attributs de données HTML, lire l'article Manipuler les attributs de données.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', "dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes", "data-*")}}{{Spec2('HTML WHATWG')}}Pas de modification depuis la dernière dérivation, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes", "data-*")}}{{Spec2('HTML5.1')}}Dérivée de {{SpecName('HTML WHATWG')}}, pas de changement depuis {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes", "data-*")}}{{Spec2('HTML5 W3C')}}Dérivée de {{SpecName('HTML WHATWG')}}, définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("html.global_attributes.data_attributes")}}

- -

Voir aussi

- - diff --git a/files/fr/web/html/attributs_universels/dir/index.html b/files/fr/web/html/attributs_universels/dir/index.html deleted file mode 100644 index 5cf187f35e..0000000000 --- a/files/fr/web/html/attributs_universels/dir/index.html +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: dir -slug: Web/HTML/Attributs_universels/dir -tags: - - Attribut - - Attribut universel - - HTML - - Reference -translation_of: Web/HTML/Global_attributes/dir ---- -
{{HTMLSidebar("Global_attributes")}}
- -

L'attribut universel dir est un attribut à valeur contrainte qui indique la direction du texte contenu dans l'élément.

- -
{{EmbedInteractiveExample("pages/tabbed/attribute-dir.html","tabbed-standard")}}
- - - -

Les valeurs autorisées pour cet attribut sont :

- - - -
-

Notes d'utilisation :
- Cet attribut est obligatoire pour l'élément {{HTMLElement("bdo")}}, pour lequel l'attribut a une sémantique différente.

- - -
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', "dom.html#the-dir-attribute", "dir")}}{{Spec2('HTML WHATWG')}}Aucun changement depuis la dernière dérivation, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "dom.html#the-dir-attribute", "dir")}}{{Spec2('HTML5.1')}}Dérivée de {{SpecName('HTML WHATWG')}}, aucun changement de {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "dom.html#the-dir-attribute", "dir")}}{{Spec2('HTML5 W3C')}}Dérivée de {{SpecName('HTML WHATWG')}}, à partir de {{SpecName('HTML4.01')}} la valeur auto a été ajoutée et l'attribut est un attribut global à part entière.
{{SpecName('HTML4.01', "dirlang.html#h-8.2", "dir")}}{{Spec2('HTML4.01')}}Attribut pris en charge pour tous les éléments à l'exception {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}, et {{HTMLElement("script")}}.
- -

Compatibilité des navigateurs

- - - -

{{Compat("html.global_attributes.dir")}}

- -

Voir aussi

- - diff --git a/files/fr/web/html/attributs_universels/draggable/index.html b/files/fr/web/html/attributs_universels/draggable/index.html deleted file mode 100644 index fe5d5cf514..0000000000 --- a/files/fr/web/html/attributs_universels/draggable/index.html +++ /dev/null @@ -1,71 +0,0 @@ ---- -title: draggable -slug: Web/HTML/Attributs_universels/draggable -tags: - - Attribut - - Attribut universel - - HTML - - Reference -translation_of: Web/HTML/Global_attributes/draggable ---- -
{{HTMLSidebar("Global_attributes")}}
- -

L'attribut universel draggable est un attribut à valeur contrainte qui indique si l'élément peut être déplacé avec la souris dans un geste de glisser-déposer lorsqu'on utilise l'API Drag & Drop ou les fonctionnalités natives du navigateur. Les valeurs autorisées pour cet attribut sont les suivantes :

- - - -

Si l'attribut n'est pas défini, la valeur par défaut sera auto : le comportement de l'élément sera celui spécifié par défaut par le navigateur.

- -

Cet attribut est un attribut à valeur contrainte, ce n'est pas un attribut booléen. Il faut donc utiliser une valeur explicite true ou false. La notation raccourcie <img draggable>(utilisant uniquement le nom de l'attribut) ne fonctionnera pas :

- -
<label draggable>Label exemple</label>
- -

En revanche, on pourra correctement utiliser :

- -
<label draggable="true">Label exemple</label>
- -

Par défaut, seules les sélections de texte, les images et les liens peuvent être déplacés à la souris. Pour les autres éléments, il faudra définir le gestionnaire d'événements pour {{domxref('GlobalEventHandlers.ondragstart','ondragstart')}} afin de faire fonctionner le glisser-déposer. Cela est illustré dans cet exemple.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("HTML WHATWG", "interaction.html#the-draggable-attribute", "draggable")}}{{Spec2("HTML WHATWG")}}Aucune modification depuis la dernière dérivation de {{SpecName('HTML5.1')}}
{{SpecName("HTML5.2", "interaction.html#the-draggable-attribute", "draggable")}}{{Spec2("HTML5.2")}}Aucune modification
{{SpecName("HTML5.1", "editing.html#the-draggable-attribute", "draggable")}}{{Spec2("HTML5.1")}}Dérivation de {{SpecName('HTML WHATWG')}}, définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("html.global_attributes.draggable")}}

- -

Voir aussi

- - diff --git a/files/fr/web/html/attributs_universels/dropzone/index.html b/files/fr/web/html/attributs_universels/dropzone/index.html deleted file mode 100644 index e645e30973..0000000000 --- a/files/fr/web/html/attributs_universels/dropzone/index.html +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: dropzone -slug: Web/HTML/Attributs_universels/dropzone -tags: - - Attribut universel - - HTML - - Obsolete - - Reference -translation_of: Web/HTML/Global_attributes/dropzone ---- -
{{HTMLSidebar("Global_attributes")}} {{deprecated_header}}
- -

L'attribut universel dropzone est un attribut à valeur contrainte qui indique le type de contenu qui peut être déposé sur un élément, il est utilisé avec l'API Drag & Drop. Les valeurs autorisées pour cet attribut sont :

- - - -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('HTML5.1', "editing.html#the-dropzone-attribute", "dropzone")}}{{Spec2('HTML5.1')}}Dérivée de {{SpecName('HTML WHATWG')}}, définition initiale
- -

Compatibilité des navigateurs

- - - -

{{Compat("html.global_attributes.dropzone")}}

- -

Voir aussi

- - diff --git a/files/fr/web/html/attributs_universels/hidden/index.html b/files/fr/web/html/attributs_universels/hidden/index.html deleted file mode 100644 index c14d208620..0000000000 --- a/files/fr/web/html/attributs_universels/hidden/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: hidden -slug: Web/HTML/Attributs_universels/hidden -tags: - - Attribut - - Attribut universel - - HTML - - Reference -translation_of: Web/HTML/Global_attributes/hidden ---- -
{{HTMLSidebar("Global_attributes")}}
- -

L'attribut universel hidden est un attribut booléen qui indique s'il n'est pas encore ou s'il n'est plus pertinent d'afficher l'élément courant. Cet attribut peut, par exemple, être utilisé afin de masquer des éléments tant que l'utilisateur ne s'est pas connecté. Le navigateur n'affichera pas les éléments masqués via cet attribut.

- -
{{EmbedInteractiveExample("pages/tabbed/attribute-hidden.html","tabbed-shorter")}}
- - - -

Cet attribut ne doit pas être utilisé pour masquer du contenu qui devrait pouvoir être vu sous une autre présentation. Si un contenu est marqué comme masqué, il sera masqué pour l'ensemble des présentations, y compris pour les lecteurs d'écran et autres outils d'assistance.

- -

Les éléments cachés avec hidden ne devraient pas avoir de lien qui pointent vers eux depuis des éléments visibles. De plus, les éléments fils de l'élément caché sont toujours actifs : cela signifie qu'ils peuvent être utilisés par les scripts et que les formulaires peuvent envoyer des données. Dans certains autres contextes, il est possible d'avoir des relations avec les éléments cachés via hidden.

- -

Par exemple, on peut utiliser l'attribut ARIA aria-describedby pour faire référence à une description qui serait cachée (si cette dernière n'est pas pertinente seule). De même un élément {{HTMLElement("canvas")}} caché peut être utilisé comme un buffer hors champ par moteur graphique scripté.

- -
-

Note : Cet attribut sera surchargé par la propriété CSS {{cssxref("display")}}. Ainsi, un élément dont le style a display: flex sera affiché à l'écran, même si l'attribut hidden est présent.

-
- - - -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', "interaction.html#the-hidden-attribute", "hidden")}}{{Spec2('HTML WHATWG')}}Aucune modification depuis {{SpecName('HTML5.1')}}
{{SpecName('HTML WHATWG', "rendering.html#hiddenCSS", "Hidden elements")}}{{Spec2('HTML WHATWG')}}Définit le rendu par défaut suggéré en CSS lorsque l'attribut hidden est utilisé.
{{SpecName('HTML5.1', "editing.html#the-hidden-attribute", "hidden")}}{{Spec2('HTML5.1')}}Dérivée de {{SpecName('HTML WHATWG')}}. La définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("html.global_attributes.hidden")}}

- -

Voir aussi

- - diff --git a/files/fr/web/html/attributs_universels/id/index.html b/files/fr/web/html/attributs_universels/id/index.html deleted file mode 100644 index a08d5e0dce..0000000000 --- a/files/fr/web/html/attributs_universels/id/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: id -slug: Web/HTML/Attributs_universels/id -tags: - - Attribut - - Attribut universel - - HTML - - Reference -translation_of: Web/HTML/Global_attributes/id ---- -
{{HTMLSidebar("Global_attributes")}}
- -

L'attribut universel id définit un identifiant qui doit être unique pour l'ensemble du document. Le but de cet attribut est de pouvoir identifier un élément lorsqu'on crée un lien, avec un fragment et qu'on souhaite le manipuler avec un script ou qu'on le met en forme avec CSS.

- -
{{EmbedInteractiveExample("pages/tabbed/attribute-id.html","tabbed-shorter")}}
- - - -
-

Note : La valeur de cet attribut est une chaîne de caractère « opaque ». Cela signifie que cet attribut ne doit pas être utilisé pour transporter de l'information. Les informations sur la signification de l'élément dans le document ne doivent pas être portées par la valeur de cet attribut.

-
- -

La valeur de cet attribut ne doit pas contenir de blancs (espaces, tabulation, etc.). Les navigateurs interprèteront les identifiants avec des espaces comme si l'espace faisait partie de l'identifiant. Ce comportement est différent de celui de l'attribut {{htmlattrxref("class")}} qui permet d'avoir des valeurs séparées par des espaces. Les éléments ne peuvent avoir qu'un seul identifiant défini via l'attribut id.

- -
-

Note : L'utilisation de caractères non-ASCII ou qui ne sont pas des chiffres latins ou'_', '-' et '.' peut entraîner des problèmes de compatibilité car ils n'étaient pas autorisé avec HTML 4. Bien que cette restriction n'existe plus avec HTML 5, un identifiant devrait toujours commencer par une lettre pour une meilleure compatibilité.

-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', "dom.html#the-id-attribute", "id")}}{{Spec2('HTML WHATWG')}}Aucun changement depuis la dernière dérivation, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "dom.html#the-id-attribute", "id")}}{{Spec2('HTML5.1')}}Dérivée de {{SpecName('HTML WHATWG')}}, aucun changement depuis {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "dom.html#the-id-attribute", "id")}}{{Spec2('HTML5 W3C')}}Dérivée de {{SpecName('HTML WHATWG')}}, les caractères '_', '-' et '.' sont désormais acceptés s'ils ne sont pas utilisés au début de l'identifiant. Cet attribut devient un attribut global à part entière.
{{SpecName('HTML4.01', 'struct/global.html#adef-id', 'id')}}{{Spec2('HTML4.01')}}Pris en charge par tous les éléments sauf {{HTMLElement("base")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, et {{HTMLElement("title")}}.
- -

Compatibilité des navigateurs

- - - -

{{Compat("html.global_attributes.id")}}

- -

Voir aussi

- - diff --git a/files/fr/web/html/attributs_universels/index.html b/files/fr/web/html/attributs_universels/index.html deleted file mode 100644 index 779e617a3d..0000000000 --- a/files/fr/web/html/attributs_universels/index.html +++ /dev/null @@ -1,196 +0,0 @@ ---- -title: Les attributs universels -slug: Web/HTML/Attributs_universels -tags: - - Attribut - - Attribut universel - - HTML - - Reference - - Web -translation_of: Web/HTML/Global_attributes ---- -
{{HTMLSidebar("Global_attributes")}}
- -

Les attributs universels sont des attributs communs à l'ensemble des éléments HTML. Ces attributs peuvent donc être ajoutés sur tous les éléments (dans certains cas, les attributs n'auront aucun effet).

- -

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.

- -

En plus des attributs universels HTML, il existe également les attributs universels suivants :

- - - -

Liste des attributs universels

- -
-
{{htmlattrdef("accesskey")}}
-
Cet attribut fournit une indication permettant de générer un raccourci clavier pour l'élément courant. Cet attribut se compose d'une liste de caractères séparés par des espaces. Le navigateur doit utiliser le premier caractère qui existe selon la disposition du clavier utilisée.
-
{{htmlattrdef("autocapitalize")}}
-
Cet attribut contrôle la façon dont le texte saisi est automatiquement converti en majuscules. Les valeurs autorisées pour cet attribut sont : -
    -
  • off ou none : il n'y pas de convertion en majuscules réalisée.
    • -
  • on ou sentences : la première lettre de chaque phrase est écrite en majuscule par défaut. Les autres lettres sont en minuscules par défaut.
    • -
  • words : la première lettre de chaque mot est écrite en majuscule par défaut, les autres lettres sont en minuscules par défaut.
    • -
  • characters : toutes les lettres sont écrites en majuscules par défaut
    • -
-
-
{{htmlattrdef("class")}}
-
Une liste de classes, séparées par des espaces, qui permettent de catégoriser l'élément. Les classes permettent au CSS et à JavaScript de manipuler des éléments spécifiques grâce à des sélecteurs de classe (pour CSS) ou grâce à des fonctions telles que {{domxref("Document.getElementsByClassName()")}} (pour JavaScript).
-
{{htmlattrdef("contenteditable")}}
-
Un attribut à valeur contrainte qui indique si l'élément peut être édité par l'utilisateur. Si c'est le cas, le navigateur modifie l'interface utilisateur afin de permettre l'édition. Les valeur autorisées pour cet attribut sont : -
    -
  • true ou la chaîne vide : ces valeurs indiquent que l'élément doit pouvoir être édité
    • -
  • false qui indique que l'élément ne doit pas pouvoir être édité.
    • -
-
-
{{htmlattrdef("contextmenu")}}{{obsolete_inline}}
-
La valeur de cet attribut correspond à la valeur de l'attribut {{htmlattrxref("id","menu")}} d'un élément {{HTMLElement("menu")}} qui doit être utilisé comme menu contextuel par cet élément.
-
{{htmlattrdef("data-*")}}
-
Cette classe d'attribut, appelée « attributs de données personnalisés », permet d'échanger des informations dans un format propriétaire entre le HTML et le DOM afin de pouvoir les manipuler via des langage de scripts. La propriété {{domxref("HTMLElement.dataset")}} permet d'accéder à l'ensemble des attribut définis de cette façon.
-
{{htmlattrdef("dir")}}
-
Un attribut à valeur contrainte qui indique la directionnalité du texte de l'élément. Les valeurs autorisées pour cet attribut sont : -
    -
  • ltr (l'abbréviation anglaise pour Left To Right) indique que le contenu est écrit de gauche à droite (comme le français par exemple)
    • -
  • rtl (l'abbréviation anglaise pour Right To Left) indique que le contenu est écrit de droite à gauche (comme l'arabe par exemple)
    • -
  • auto : c'est l'agent utilisateur qui décide. Il utilise un algortihme qui analyse les caractères du contenu de l'élément jusqu'à trouver un caractère avec une forte directionnalité qu'il applique alors à l'ensemble de l'élément.
    • -
-
-
{{htmlattrdef("draggable")}}
-
Un attribut à valeur contrainte qui indique qu'un élément peut être glissé/déposé grâce à l'API Drag & Drop. Les valeurs autorisées pour cet attribut sont : -
    -
  • true : l'élément peut être glissé/déposé
    • -
  • false : l'élément ne peut pas être glissé/déposé.
    • -
-
-
{{htmlattrdef("dropzone")}} {{experimental_inline}}
-
Un attribut à valeur contrainte qui indique le type de contenu qui peut être déposé sur un élément grâce à l'API Drag & Drop. Les valeurs autorisées pour cet attribut sont : -
    -
  • copy : lorsque l'élément est déposé, une copie de l'élément est créée
    • -
  • move : lorsque l'élément est déposé, il est déplacé vers ce nouvel emplacement
    • -
  • link : un lien est créé vers les données qui sont déplacée.
    • -
-
-
{{htmlattrdef("exportparts")}} {{experimental_inline}}
-
Utilisé pour exporter de façon transitive certaines parties d'un arbre shadow sur un arbre réel.
-
{{htmlattrdef("hidden")}}
-
Un attribut booléen dont la valeur indique que l'élément n'est pas encore, ou n'est plus pertinent. Cet attribut peut ainsi être utilisé pour masquer les éléments d'une page qui ne peuvent pas être utilisés tant que la procédure de connexion n'est pas terminée. Le navigateur n'affichera pas les éléments pour lesquels cet attribut est utilisé. Cet attribut ne doit pas être utilisé afin de masquer du contenu qui aurait pu être affiché de façon pertinente.
-
{{htmlattrdef("id")}}
-
Cet attribut définit un identifiant, unique au sein de tout le document, ,pour un élément. Il doit permettre d'identifier un élément lorsqu'on crée un lien vers lui et/ou lorsque le manipule avec des scripts ou avec CSS.
-
{{htmlattrdef("inputmode")}}
-
Cet attribut fournit une indication au navigateur quant au type de contenu qui sera saisi dans le champ et qui aide à déterminer la configuration du clavier virtuel qui peut être affiché pour la saisie. Ce type est principalement utilisé pour les éléments {{HTMLElement("input")}} mais peut tout à fait être utilisé sur n'importe quel élément avec le mode {{htmlattrxref("contenteditable")}}.
-
{{htmlattrdef("is")}}
-
Cet attribut indique qu'un élément HTML standard devrait se comporter comme un élément personnalisé natif (voir Manipuler les custom elements pour plus d'informations).
-
{{htmlattrdef("itemid")}}
-
L'identifiant unique, global, d'un objet. Cet attribut est lié aux microdonnées.
-
{{htmlattrdef("itemprop")}}
-
Cet attribut permet d'ajouter des propriétés à un objet. Cet attribut est une paire entre un nom et une valeur. Cet attribut est lié aux microdonnées.
-
{{htmlattrdef("itemref")}}
-
Les propriétés d'un objet qui ne sont pas les éléments descendants de l'élément courant peuvent être associée via l'attribut itemscope contenant une référence vers un itemref. itemref fournit une liste d'identifiants d'éléments qui correspondent aux propriétés supplémentaires définies autre part dans le document. Cet attribut est lié aux microdonnées.
-
{{htmlattrdef("itemscope")}}
-
itemscope fonctionne généralement avec itemtype afin d'indiquer que le coded HTML contenu dans un bloc donné concerne un objet en particulier. itemscope crée l'objet et définit la portée de l'itemtype associée. itemtype est une URL valide construite à partir d'un vocabulaire (par exemple schema.org) qui décrit les objets et leurs propriétés. Cet attribut est lié aux microdonnées.
-
{{htmlattrdef("itemtype")}}
-
Cet attribut indique l'URL du vocabulaire utilisé pour définir les propriétés d'un objet. Cet attribut est lié aux microdonnées.
-
{{htmlattrdef("lang")}}
-
Cet attribut aide à définir la langue utilisée pour l'élément. Pour les éléments non-éditables, c'est la langue dans laquelle ils sont écrits et pour les éléments éditables, c'est la langue dans laquelle ils devraient être écrits. Cet attribut contient une seule valeur telle que définie dans le document IETF Tags for Identifying Languages (BCP47). L'attribut xml:lang est prioritaire par rapport à cet attribut lorsqu'il s'agit de déterminer la langue d'un élément.
-
{{htmlattrdef("part")}} {{experimental_inline}}
-
Une liste séparée par des espaces avec les noms des parties (parts) de l'élément. Les noms des parties permettent au CSS de cibler et de mettre en forme certains éléments d'un arbre shadow via le pseudo-élément {{cssxref("::part")}}.
-
{{htmlattrdef("slot")}}
-
Cet attribut affecte un créneau de l'arbre du shadow DOM pour un élément. L'élément ayant l'attribut slot est affecté au créneau créé par l'élément {{HTMLElement("slot")}} pour lequel l'attribut {{htmlattrxref("name", "slot")}} correspond à la valeur de l'attribut slot.
-
{{htmlattrdef("spellcheck")}} {{experimental_inline}}
-
Un attribut à valeur contrainte qui définit s'il faut détecter les fautes d'orthographe/grammaire dans le texte de l'élément. Les valeurs autorisées pour cet attribut sont : -
    -
  • true qui indique que, si possible, il faut vérifier les erreurs d'orthographe
    • -
  • false qui indique qu'il ne faut pas vérifier les erreurs.
    • -
-
-
{{htmlattrdef("style")}}
-
Cet attribut contient les déclarations CSS utilisées pour mettre en forme l'élément. Note : il est recommandé d'utiliser un ou plusieurs fichiers séparés, plutôt que cet attribut, pour définir les règles de mise en forme. Le rôle de l'élément {{HTMLElement("style")}} consiste à permettre une mise en forme rapide, notamment pour des tests.
-
{{htmlattrdef("tabindex")}}
-
Cet attribut à valeur entière indique l'ordre dans lequel l'élément participe à la navigation au clavier via la tabulation. Il peut prendre différente valeur : -
    -
  • une valeur négative indiquera que l'élément peut recevoir le focus mais n'est pas accessible via la navigation séquentielle au clavier
    • -
  • 0 indiquera que l'élément peut recevoir le focus et être accessible via la navigation au clavier mais l'ordre est relatif et déterminé par l'agent utilisateur
    • -
  • une valeur positive indiquera que l'élément peut recevoir le focus et qu'il est accessible via la navigation au clavier. La valeur utilisée indique l'ordre relatif de l'élément dans la navigation. Autrement dit, la navigation au clavier ira dans le sens croissant des éléments selon leurs valeurs respectives de tabindex. Si plusieurs éléments ont la même valeur, ce sera leur ordre relatif dans le document qui sera utilisé.
    • -
-
-
{{htmlattrdef("title")}}
-
Cet attribut contient une représentation textuelle de l'information auquel il est lié. Une telle information est généralement, mais pas nécessairement, affichée sous la forme d'une bulle d'informations.
-
{{htmlattrdef("translate")}} {{experimental_inline}}
-
Un attribut à valeur contrainte qui est utilisé pour définir si les valeurs des attributs et des éléments fils de type {{domxref("Text")}} doivent être traduits lorsque la page est localisée. Les valeurs autorisées pour cet attribut sont : -
    -
  • La chaîne vide ou yes qui indiquent que l'élément doit être traduit
    • -
  • no qui indique que l'élément ne sera pas traduit.
    • -
-
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("HTML WHATWG", "dom.html#global-attributes", "Global attributes")}}{{Spec2("HTML WHATWG")}}
{{SpecName("CSS Shadow Parts", "#exposing")}}{{Spec2("CSS Shadow parts")}}Ajout des attributs universels part et exportparts.
{{SpecName("HTML5.3", "dom.html#global-attributes", "Global attributes")}}{{Spec2("HTML5.3")}}
{{SpecName("HTML5.2", "dom.html#global-attributes", "Global attributes")}}{{Spec2("HTML5.2")}}Dérivation de {{SpecName("HTML WHATWG")}}. Depuis, {{SpecName("HTML5.1")}}, les attributs itemid, itemprop, itemref, itemscope et itemtype ont été ajoutés.
{{SpecName('HTML5.1', "dom.html#global-attributes", "Global attributes")}}{{Spec2('HTML5.1')}}Les attributs contextmenu, spellcheck, draggable, et dropzone ont été ajoutés depuis {{SpecName('HTML5 W3C')}}.
{{SpecName('HTML5 W3C', "dom.html#global-attributes", "Global attributes")}}{{Spec2('HTML5 W3C')}}Le concept d'attribut universel est introduit et les attributs dir, lang, style, id, class, tabindex, accesskey, title sont désormais des attributs universels.
- xml:lang qui faisait initialement partie de XHTML est inclus dans HTML. Les attributs
- hidden, data-*, contenteditable et translate sont ajoutés.
{{SpecName('HTML4.01')}}{{Spec2('HTML4.01')}}Aucun attribut universel n'est défini. Plusieurs attributs, devenus universels par la suite, sont définis sur un sous-ensemble d'élément.
- class et style sont pris en charge pour tous les éléments à l'exception de {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}} et {{HTMLElement("title")}}.
- dir est pris en charge pour tous les éléments à l'exception de {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}} et {{HTMLElement("script")}}.
- id est pris en charge pour tous les éléments à l'exception de {{HTMLElement("base")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}} et {{HTMLElement("title")}}.
- lang est pris en charge pour tous les éléments à l'exception de {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}} et {{HTMLElement("script")}}.
- tabindex est uniquement pris en charge pour les éléments {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}} et {{HTMLElement("textarea")}}.
- accesskey est uniquement pris en charge pour {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("label")}}, {{HTMLElement("legend")}} et {{HTMLElement("textarea")}}.
- title est pris en charge pour tous les éléments à l'exception de {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}} et {{HTMLElement("title")}}.
- -

Compatibilité des navigateurs

- - - -

{{Compat("html.global_attributes")}}

- -

Voir aussi

- - diff --git a/files/fr/web/html/attributs_universels/inputmode/index.html b/files/fr/web/html/attributs_universels/inputmode/index.html deleted file mode 100644 index 2babf82909..0000000000 --- a/files/fr/web/html/attributs_universels/inputmode/index.html +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: inputmode -slug: Web/HTML/Attributs_universels/inputmode -tags: - - Attribut - - Attribut universel - - HTML - - Reference -translation_of: Web/HTML/Global_attributes/inputmode ---- -
{{HTMLSidebar("Global_attributes")}}
- -

L'attribut universel inputmode est un attribut à valeur contrainte qui fournit une indication au navigateur quant au type de donnée qui peut être saisi par l'utilisateur lors de l'édition de l'élément ou de son contenu. Les valeurs autorisées sont les suivantes :

- -
-
none
-
Aucun clavier virtuel ne doit être affiché. Cette valeur s'avère utile lorsque l'application ou le site web implémente son propre outil de saisie.
-
text
-
C'est du texte qui sera saisi et un clavier dans la locale de l'utilisateur pourra être affiché.
-
decimal
-
C'est un nombre décimal qui sera saisi. Le clavier affiché peut contenir des chiffres et le séparateur décimal de la locale de l'utilisateur. Attention, selon les appareils, le signe moins (-) peut ne pas être présent.
-
numeric
-
C'est un nombre entier qui sera saisi. Le clavier affiché peut contenir les chiffres de 0 à 9. Attention, selon les appareils, le signe moins (-) peut ne pas être présent.
-
tel
-
C'est un numéro de téléphone qui sera saisi. Le clavier affiché pourra être celui d'un téléphone avec les chiffres allant de 0 à 9, l'astérisque et le dièse. Pour les champs de formulaire où il faut saisir un numéro de téléphone, on utilisera plutôt <input type="tel">.
-
search
-
L'élément éditable sert à la recherche. Le clavier affiché sera optimisé pour une recherche (par exemple, la touche Entrée pourra être indiquée avec le mot-clé « Rechercher »).
-
email
-
C'est une adresse électronique qui sera saisie. Le clavier affiché pourra être optimisé pour la saisie d'adresses email (généralement, on aura le caractère @ et d'autres éléments). Pour les champs de formulaire où il faut saisir une adresse électronique, on utilisera plutôt <input type="email">.
-
url
-
C'est une URL qui sera saisie. Le clavier affiché pourra être optimisé pour la saisie d'URL. Ainsi, la touche pour la barre oblique pourra être plus accessible, le clavier pourra proposer un accès à l'historique des URL utilisées, etc. Pour les champs de formulaire où il faut saisir une URL, on utilisera plutôt <input type="url">.
-
- -

Lorsque cet attribut n'est pas explicitement défini, sa valeur par défaut est "text", ce qui indique que c'est du texte qui sera saisi et qu'un clavier standard devrait être utilisé.

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("HTML WHATWG", "interaction.html#input-modalities:-the-inputmode-attribute", "inputmode")}}{{Spec2("HTML WHATWG")}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("html.global_attributes.inputmode")}}

- -

Voir aussi

- - diff --git a/files/fr/web/html/attributs_universels/is/index.html b/files/fr/web/html/attributs_universels/is/index.html deleted file mode 100644 index e460ffc4a3..0000000000 --- a/files/fr/web/html/attributs_universels/is/index.html +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: is -slug: Web/HTML/Attributs_universels/is -tags: - - Attribut universel - - HTML - - Reference -translation_of: Web/HTML/Global_attributes/is ---- -
{{HTMLSidebar("Global_attributes")}}
- -

L'attribut is est un attribut universel qui indique qu'un élément HTML standard devrait se comporter comme un élément natif personnalisé (custom element) défini (voir Manipuler les custom elements pour plus de détails).

- -

Cet attribut peut uniquement être utilisé si l'élément personnalisé indiqué a été correctement défini dans le document courant et qu'il étend le type d'élément sur lequel il est appliqué.

- -

Exemples

- -

Cet exemple est tiré de l'exemple word-count-web-component (voir le résultat en live).

- -
// On crée une classe pour l'élément
-class WordCount extends HTMLParagraphElement {
-  constructor() {
-    // On appelle super() pour récupérer l'initialisation
-    // des classes parentes
-    super();
-
-    // Le contenu du constructeur, etc.
-    ...
-
-  }
-}
-
-// On définit le nouvel élément.
-customElements.define('word-count', WordCount, { extends: 'p' });
- -
<p is="word-count"></p>
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', "custom-elements.html#attr-is", "is")}}{{Spec2('HTML WHATWG')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("html.global_attributes.is")}}

- -

Voir aussi

- - diff --git a/files/fr/web/html/attributs_universels/itemid/index.html b/files/fr/web/html/attributs_universels/itemid/index.html deleted file mode 100644 index c592936a5d..0000000000 --- a/files/fr/web/html/attributs_universels/itemid/index.html +++ /dev/null @@ -1,116 +0,0 @@ ---- -title: itemid -slug: Web/HTML/Attributs_universels/itemid -tags: - - Attribut - - Attribut universel - - HTML - - Micro-données - - Reference - - itemid -translation_of: Web/HTML/Global_attributes/itemid ---- -
{{HTMLSidebar("Global_attributes")}}
- -

L'attribut universel itemid permet d'identifier un objet, au sens des microdonnées, de façon unique et globale. L'attribut itemid peut uniquement être défini sur les éléments qui ont un attribut {{htmlattrxref("itemscope")}} et un attribut {{htmlattrxref("itemtype")}}. De plus, un itemid ne peut pas être défini sur des éléments dont l'attribut itemscope possède un attribut itemtype qui définit un vocabulaire qui ne prend pas en charge les identifiants globaux tels que défini dans la spécification du vocabulaire.

- -

La signification exacte d'un identifiant global est déterminée par la spécification du vocabulaire. C'est le rôle de cette spécification d'autoriser ou non la présence de plusieurs éléments avec le même identifiant (sur une ou plusieurs pages) et de définir les règles de gestion associées.

- -

Syntaxe

- -

Syntaxe formelle

- -
itemid="URN"
- -

Note : Selon la définition du WHATWG, un itemid doit être une URL. Dans l'exemple qui suit, on utilise plutôt une URN, plus appropriée pour définir un identifiant unique comme itemid. Cette incohérence reflète l'état actuellement incomplet de la spécification sur les microdonnées.

- -

Exemple

- -

HTML

- -

Un élément qui décrit un livre :

- -
<dl itemscope
-    itemtype="http://vocab.example.net/book"
-    itemid="urn:isbn:0-330-34032-8">
- <dt>Title <dd itemprop="title">The Reality Dysfunction
- <dt>Author <dd itemprop="author">Peter F. Hamilton
- <dt>Publication date
- <dd><time itemprop="pubdate" datetime="1996-01-26">26 January 1996</time> </dl>
-
- -

Données structurées correspondantes

- - - - - - - - - - - - - - - - - - - - - - - - -
itemscopeitemtype: itemid -
http://vocab.example.net/book: urn:isbn:0-330-34032-8
-
itemproptitleThe Reality Dysfunction
itempropauthor -
Peter F. Hamilton
-
itemproppubdate1996-01-26
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('HTML Microdata', "#items", "itemid")}}{{Spec2('HTML Microdata')}} 
{{SpecName('HTML WHATWG', "microdata.html#attr-itemid", "itemid")}}{{Spec2('HTML WHATWG')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("html.global_attributes.itemid")}}

- -

Voir aussi

- - diff --git a/files/fr/web/html/attributs_universels/itemprop/index.html b/files/fr/web/html/attributs_universels/itemprop/index.html deleted file mode 100644 index 956054bb32..0000000000 --- a/files/fr/web/html/attributs_universels/itemprop/index.html +++ /dev/null @@ -1,436 +0,0 @@ ---- -title: itemprop -slug: Web/HTML/Attributs_universels/itemprop -tags: - - Attribut - - Attribut universel - - HTML - - Micro-données - - Microdata -translation_of: Web/HTML/Global_attributes/itemprop ---- -
{{HTMLSidebar("Global_attributes")}}
- -

L'attribut universel itemprop est utilisé afin d'ajouter des propriétés à un objet. C'est un attribut universel et chaque élément HTML peut donc avoir un attribut itemprop qui permettra de former un couple de nom (la valeur de l'attribut) et de valeur (la valeur de l'élément). Chacune de ces paires constitue une propriété et un groupe de propriété forme un objet (item). Les valeurs des propriétés sont généralement des chaînes de caractères ou des URL et peuvent être associées à de nombreux éléments comme {{HTMLElement("audio")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("link")}}, {{HTMLElement("object")}}, {{HTMLElement("source")}} , {{HTMLElement("track")}} et {{HTMLElement("video")}}.

- -

Un exemple simple

- -

HTML

- -
<div itemscope itemtype="http://schema.org/Movie">
-  <h1 itemprop="name">Avatar</h1>
-  <span>Director:
-    <span itemprop="director">James Cameron</span>
-    (born August 16, 1954)
-  </span>
-  <span itemprop="genre">Science fiction</span>
-  <a href="../movies/avatar-theatrical-trailer.html"
-    itemprop="trailer">Trailer</a>
-</div>
- -

Structure de données

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 Objet
Nom pour itempropValeur pour itemprop
itempropnameAvatar
itempropdirectorJames Cameron
itempropgenreScience fiction
itemproptrailer../movies/avatar-theatrical-trailer.html
- -

Propriétés

- -

Les valeurs des propriétés sont généralement des chaînes de caractères ou des URL. Lorsque c'est une URL, on l'exprime grâce à l'élément {{HTMLElement("a")}} et avec son attribut href. Pour un élément {{HTMLElement("img")}}, on lira son attribut src, de même pour les autres éléments HTML qui font appel à d'autres ressources.

- -

Trois propriétés dont les valeurs sont des chaînes simples

- -
<div itemscope>
- <p>My name is
-   <span itemprop="name">Neil</span>.
- </p>
- <p>My band is called
-   <span itemprop="band">Four Parts Water</span>.
- </p>
- <p>I am
-   <span itemprop="nationality">British</span>.
- </p>
-</div>
- -

Une propriété « image » dont la valeur est une URL

- -
<div itemscope>
- <img itemprop="image"
-  src="google-logo.png" alt="Google">
-</div>
-
- -

Une propriété dont la valeur est un identifiant « machine »

- -
<h1 itemscope>
- <data itemprop="product-id"
-  value="9678AOU879">The Instigator 2000</data>
-</h1>
- -

Lorsqu'une chaîne est décrite avec un format machine plutôt qu'un format « humain », on la propriété est exprimée avec la valeur de l'attribut value de l'élément {{HTMLElement("data")}} et c'est le contenu de l'élément qui fournira la valeur humainement compréhensible.

- -

Un exemple de mesure

- -
<div itemscope itemtype="http://schema.org/Product">
- <span itemprop="name">
-   Panasonic White 60L Refrigerator
- </span>
- <img src="panasonic-fridge-60l-white.jpg" alt="">
-  <div itemprop="aggregateRating"
-       itemscope
-       itemtype="http://schema.org/AggregateRating">
-   <meter itemprop="ratingValue" min=0 value=3.5 max=5>
-     Rated 3.5/5
-   </meter>
-   (based on <span itemprop="reviewCount">11</span>
-   customer reviews)
-  </div>
-</div>
- -

Pour les données numériques, on peut utiliser l'élément {{HTMLElement("meter")}} et la valeur de son attribut value.

- -

Une propriété de date

- -
<div itemscope>
- I was born on
- <time itemprop="birthday" datetime="2009-05-10">
-   May 10th 2009
- </time>.
-</div>
- -

Pour les valeurs temporelles, on utilisera les éléments {{HTMLElement("time")}} et son attribut datetime.

- -

Imbrication de propriétés

- -
<div itemscope>
- <p>Name:
-   <span itemprop="name">Amanda</span>
- </p>
- <p>Band:
-   <span itemprop="band" itemscope>
-     <span itemprop="name">Jazz Band</span>
-    (<span itemprop="size">12</span> players)
-   </span>
- </p>
-</div>
- -

On peut avoir des imbrications de propriétés et utiliser l'attribut itemscope sur l'élément qui porte le groupe.

- -

L'élément de plus haut niveau possède deux propriétés name et band. La valeur de name est Amanda et la valeur de band est un objet à part entière, composé de deux propriétés name et size. Le valeur pour name est Jazz Band et la valeur de size est 12. L'objet de plus haut niveau est un objet qui ne fait pas partie d'un autre objet.

- -

Séparation des objets

- -
<div itemscope id="amanda" itemref="a b"></div>
-<p id="a">Name: <span itemprop="name">Amanda</span></p>
-<div id="b" itemprop="band" itemscope itemref="c"></div>
-<div id="c">
- <p>Band: <span itemprop="name">Jazz Band</span></p>
- <p>Size: <span itemprop="size">12</span> players</p>
-</div>
- -

On obtient le même résultat qu'avec l'exemple précédent. Le premier objet possède deux propriétés name (qui vaut Amanda) et band qui est défini avec un autre objet. Le deuxième objet possède deux propriétés name (qui vaut Jazz Band) et size (qui vaut 12).

- -

Un objet avec plusieurs occurrences d'une propriété

- -
<div itemscope>
- <p>Flavors in my favorite ice cream:</p>
- <ul>
-  <li itemprop="flavor">Lemon sorbet</li>
-  <li itemprop="flavor">Apricot sorbet</li>
- </ul>
-</div>
- -

Cet objet possède deux fois la même propriété flavor, qui prend deux valeurs Lemon sorbet et Apricot sorbet.

- -

Deux propriétés avec la même valeur

- -
<div itemscope>
- <span itemprop="favorite-color favorite-fruit">
-  orange
- </span>
-</div>
- -

On peut définir deux propriétés au même endroit si elles prennent la même valeur.

- -

Équivalence sémantique

- -
<figure>
- <img src="castle.jpeg">
- <figcaption>
-  <span itemscope>
-    <span itemprop="name">The Castle</span>
-  </span>
-  (1986)
- </figcaption>
-</figure>
- -
<span itemscope>
-  <meta itemprop="name" content="The Castle">
-</span>
-<figure>
- <img src="castle.jpeg">
- <figcaption>The Castle (1986)</figcaption>
-</figure>
- -

Ces deux exemples sont équivalents d'un point de vue sémantique. Tous les deux se composent d'un schéma et d'une légende et tous les deux possèdent un objet avec une propriété name qui vaut The Castle. Une différence subsiste : si l'utilisateur glisse-dépose l'élément, l'objet sera inclus dans les données. Dans les deux cas, l'image n'est pas associée à l'objet.

- -

Les noms et les valeurs

- -

Une propriété est un ensemble non-ordonné de composants uniques sensibles à la casse qui représentent les paires de noms/valeurs. Les valeur doit avoir au moins composant pour se rattacher à l'objet. Dans le tableau ci-après, chaque cellule correspond à un composant.

- -

Exemples de noms

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 Objet
nom pour itempropvaleur pour itemprop
itempropcountryIreland
itempropOption2
itemprophttps://www.flickr.com/photos/nlireland/6992065114/Ring of Kerry
itempropimghttps://www.flickr.com/photos/nlireland/6992065114/
itempropwebsiteflickr
itemprop(token)(token)
- -

Les composants sont des chaînes de caractères ou des URL. Un objet est appelé un objet typé si c'est une URL. Les chaînes ne peuvent pas contenir de point ou de deux points.

- -
    -
  1. Si un objet est un objet typé, il doit être : -
      -
    1. Un nom de propriété autorisé par la spécification qui définit les types pertinents pour un objet ou
      2. -
    2. Une URL valide qui est une URL absolue qui définit un nom faisant partie de la spécification du vocabulaire ou
      3. -
    3. Une URL valide qui est une URL absolue utilisée comme un nom propriétaire ou
      4. -
    -
    2. -
  2. Si un objet n'est pas un objet typé, le nom doit être : -
      -
    1. Une chaîne qui ne contient pas de caractères "." (U+002E FULL STOP) ou ":" (U+003A COLON) et qui est utilisée comme un nom « propriétaire » pour la propriété (c'est-à-dire avec un nom qui n'est pas défini dans une spécification publique).
      2. -
    -
    3. -
- -

Note :  Les caractères « : » sont interdits pour les valeurs qui ne sont pas des URL afin de pouvoir distinguer les URL du reste. Les valeurs avec les caractères « . » sont réservés pour de futurs ajouts et les blancs ne sont pas autorisés car les valeurs seraient analysées comme plusieurs valeurs distinctes.

- -

Valeurs

- -

La valeur d'une propriété est définie comme le premier cas qui correspond dans cette liste :

- - - -

Sinon :

- - - -

Les éléments qui permettent d'utiliser des attributs URL pour des URL absolues sont : a, area, audio, embed, iframe, img, link, object, source, track et video.

- -

Ordre des noms

- -

L'ordre des noms n'a pas d'importance mais si une propriété possède plusieurs valeurs, l'ordre sera relatif pour cette propriété.

- -

Exemples équivalents

- -
<div itemscope>
- <p itemprop="a">1</p>
- <p itemprop="a">2</p>
- <p itemprop="b">test</p>
-</div>
- -
<div itemscope>
- <p itemprop="b">test</p>
- <p itemprop="a">1</p>
- <p itemprop="a">2</p>
-</div>
- -
<div itemscope>
- <p itemprop="a">1</p>
- <p itemprop="b">test</p>
- <p itemprop="a">2</p>
-</div>
- -
<div id="x">
- <p itemprop="a">1</p>
-</div>
-<div itemscope itemref="x">
- <p itemprop="b">test</p>
- <p itemprop="a">2</p>
-</div>
-
- -

Syntaxe

- -

Syntaxe formelle

- -
itemprop = "name", value
- -

Exemples

- -

HTML

- -

Un exemple sur un livre qu'on décrit avec les différents attributs.

- -
<dl itemscope
-    itemtype="http://vocab.example.net/book"
-    itemid="urn:isbn:0-330-34032-8">
- <dt>Title <dd itemprop="title">The Reality Dysfunction
- <dt>Author <dd itemprop="author">Peter F. Hamilton
- <dt>Publication date
- <dd>
-  <time itemprop="pubdate" datetime="1996-01-26">
-    26 January 1996
-  </time>
-</dl>
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('HTML Microdata', "#dfn-attr-itemprop", "itemprop")}}{{Spec2('HTML Microdata')}} 
{{SpecName('HTML WHATWG', "microdata.html#names:-the-itemprop-attribute", "itemprop")}}{{Spec2('HTML WHATWG')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("html.global_attributes.itemprop")}}

- -

Voir aussi

- - diff --git a/files/fr/web/html/attributs_universels/itemref/index.html b/files/fr/web/html/attributs_universels/itemref/index.html deleted file mode 100644 index 894df9c87c..0000000000 --- a/files/fr/web/html/attributs_universels/itemref/index.html +++ /dev/null @@ -1,97 +0,0 @@ ---- -title: itemref -slug: Web/HTML/Attributs_universels/itemref -tags: - - Attribut - - Attribut universel - - HTML - - Micro-données - - Microdata - - Reference -translation_of: Web/HTML/Global_attributes/itemref ---- -
{{HTMLSidebar("Global_attributes")}}
- -

L'attribut universel itemref permet d'associer des propriétés à un objet via itemscope lorsque l'élement courant n'est pas un élément descendant. itemref fournit une liste d'identifiants d'éléments (à ne pas confondre avec itemid) dont des propriétés sont définies plus loin dans le document.

- -

L'attribut itemref peut uniquement être défini sur des éléments pour lesquels un attribut itemscope a été défini.

- -

Note : L'attribut itemref ne fait pas partie du modèle de données des micro-données. Il s'agit purement d'une construction syntaxique pour aider les auteurs à annoter une page où les données ne suivent pas une structure arborescente claire.

- -

Syntaxe

- -

Syntaxe formelle

- -
itemref
- -

Exemple

- -

HTML

- -
<div itemscope id="amanda" itemref="a b"></div>
-<p id="a">Name: <span itemprop="name">Amanda</span> </p>
-<div id="b" itemprop="band" itemscope itemref="c"></div>
-<div id="c">
-    <p>Band: <span itemprop="name">Jazz Band</span> </p>
-    <p>Size: <span itemprop="size">12</span> players</p>
-</div>
- -

Structure de données correspondante

- -

Au format JSON-LD :

- -
{
-  "@id": "amanda",
-  "name": "Amanda",
-  "band": {
-    "@id": "b",
-    "name": "Jazz Band",
-    "size": 12
-  }
-}
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('HTML Microdata', "#dfn-itemref", "itemref")}}{{Spec2('HTML Microdata')}} 
{{SpecName('HTML WHATWG', "microdata.html#attr-itemref", "itemref")}}{{Spec2('HTML WHATWG')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("html.global_attributes.itemref")}}

- -

Voir aussi

- - diff --git a/files/fr/web/html/attributs_universels/itemscope/index.html b/files/fr/web/html/attributs_universels/itemscope/index.html deleted file mode 100644 index 5e76969620..0000000000 --- a/files/fr/web/html/attributs_universels/itemscope/index.html +++ /dev/null @@ -1,228 +0,0 @@ ---- -title: itemscope -slug: Web/HTML/Attributs_universels/itemscope -tags: - - Attribut - - Attribut universel - - HTML - - Micro-données - - Microdata - - Reference -translation_of: Web/HTML/Global_attributes/itemscope ---- -
{{HTMLSidebar("Global_attributes")}}
- -

L'attribut universel itemscope fonctionne généralement avec l'attribut itemtype afin d' indiquer qu'un bloc HTML contient un objet donné. itemscope crée l'objet et définit la portée de l'itemtype associé. Il est possible d'associer un attribut itemscope à n'importe quel élément HTML.

- -

Les identifiants rattachés à itemscope

- -

Un élément qui possède un attribut itemscope permet de définir un nouvel élément qui sera un groupe de paires de noms/valeurs. Les éléments qui ont un attribut itemscope et un attribut itemtype peuvent également définir un attribut id (à ne pas confondre avec itemid) pour identifier de façon unique l'élément sur le Web.

- -

Syntaxe

- -

Syntaxe formelle

- -
itemscope
- -

Exemple

- -

Dans cet exemple, on a trois attributs itemscopes. Ces trois itemscopes définissent les portées respectives des itemtypes correspondants qui sont : Recipe, AggregateRating et NutritionInformation.

- -

HTML

- -
<div itemscope itemtype="https://schema.org/Recipe">
-<h2 itemprop="name">Grandma's Holiday Apple Pie</h2>
-<img itemprop="image" src="https://c1.staticflickr.com/1/30/42759561_8631e2f905_n.jpg" width="50" height="50"/>
-<p>By <span itemprop="author" itemscope itemtype="https://schema.org/Person">
-<span itemprop="name">Carol Smith</p></span>
-</span>
-<p>Published: <time datetime="2009-11-05" itemprop="datePublished">
-November 5, 2009</p></time>
-<span itemprop="description">This is my grandmother's apple pie recipe. I like to add a dash of nutmeg.<br></span>
- <span itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating">
- <span itemprop="ratingValue">4.0</span> stars based on <span itemprop="reviewCount">35</span> reviews<br></span>
-Prep time: <time datetime="PT30M" itemprop="prepTime">30 min<br></time>
- Cook time: <time datetime="PT1H" itemprop="cookTime">1 hour<br></time>
- Total time: <time datetime="PT1H30M" itemprop="totalTime">1 hour 30 min<br></time>
- Yield: <span itemprop="recipeYield">1 9" pie (8 servings)<br></span>
- <span itemprop="nutrition" itemscope itemtype="https://schema.org/NutritionInformation">
- Serving size: <span itemprop="servingSize">1 medium slice<br></span>
- Calories per serving: <span itemprop="calories">250 cal<br></span>
- Fat per serving: <span itemprop="fatContent">12 g<br></span>
-</span>
-<p>Ingredients:<br>
-  <span itemprop="recipeIngredient">Thinly-sliced apples: 6 cups<br></span>
-  <span itemprop="recipeIngredient">White sugar: 3/4 cup<br></span>
- ... </p>
-
-Directions: <br>
-  <div itemprop="recipeInstructions">
-    1. Cut and peel apples<br>
-    2. Mix sugar and cinnamon. Use additional sugar for tart apples. <br>
-    ...
-  </div>
-</div>
- -

Structure des données

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
itemscopeitemtypeRecipe
itempropname:Grandma's Holiday Apple Pie
itempropimage: -
https://c1.staticflickr.com/1/30/42759561_8631e2f905_n.jpg
-
itempropdatePublished:2009-11-05
itempropdescription:This is my grandmother's apple pie recipe. I like to add a dash of nutmeg.
itempropprepTime:PT30M
itempropcookTime:PT1H
itemproptotalTime:PT1H30M
itemproprecipeYield:1 9" pie (8 servings)
itemproprecipeIngredient:Thinly-sliced apples: 6 cups
itemproprecipeIngredient:White sugar: 3/4 cup
itemproprecipeInstructions: -
1. Cut and peel apples 2. Mix sugar and cinnamon. Use additional sugar for tart apples .
-
itempropauthor [Person]:
itempropname:Carol Smith
itemscopeitemprop[itemtype]aggregateRating [AggregateRating]:
itempropratingValue:4.0
itempropreviewCount:35
itemscopeitemprop[itemtype]nutrition [NutritionInformation]:
itempropservingSize:1 medium slice
itempropcalories:250 cal
itempropfatContent:12 g
- -
-

Note : Pour extraire des micro-données d'un document HTML, vous pouvez utiliser l'outil d'extraction de Google pour les micro-données. Vous pouvez par exemple utiliser le document HTML précédent.

-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('HTML Microdata', "#dfn-itemscope", "itemscope")}}{{Spec2('HTML Microdata')}} 
{{SpecName('HTML WHATWG', "microdata.html#attr-itemscope", "itemscope")}}{{Spec2('HTML WHATWG')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("html.global_attributes.itemscope")}}

- -

Voir aussi

- - diff --git a/files/fr/web/html/attributs_universels/itemtype/index.html b/files/fr/web/html/attributs_universels/itemtype/index.html deleted file mode 100644 index 5d3ce08694..0000000000 --- a/files/fr/web/html/attributs_universels/itemtype/index.html +++ /dev/null @@ -1,113 +0,0 @@ ---- -title: itemtype -slug: Web/HTML/Attributs_universels/itemtype -tags: - - Attribut - - Attribut universel - - HTML - - Micro-données - - Microdata - - Référence(2) -translation_of: Web/HTML/Global_attributes/itemtype ---- -
{{HTMLSidebar("Global_attributes")}}
- -

L'attribut universel itemtype définit l'URL du vocabulaire qui sera utilisé pour définir les propriétés des objets dans la structure de données. itemscope est utilisé afin de définir la portée, dans le document, où le vocabulaire défini sera actif.

- -

L'attribut itemtype doit avoir une valeur qui est un ensemble non ordonné de fragments uniques, sensible à la casse. Chaque fragment doit être une URL absolue valide et tous les fragments participent à la définition du même vocabulaire. La valeur de l'attribut doit avoir au moins un fragment.

- -

Les types d'objet doivent tous être définis dans des spécifications de vocabulaire (comme schema.org) et doivent tous être définis avec le même vocabulaire.

- -

L'attribut itemtype peut uniquement être défini pour les éléments qui ont un attribut itemscope.

- -

Google et les autres moteurs de recherche participent au vocabulaire défini par schema.org pour structurer les données. Ce vocabulaire définit un ensemble standard de types et de noms de propriétés. Par exemple MusicEvent indique un événement musical dont les propriétés startDate et location utilisées pour définir les détails du concert. Dans ce cas, l'URL http://schema.org/MusicEvent sera l'URL utilisée pour l'attribut itemtype et les propriétés startDate et location seront les propriétés utilisées, définies par http://schema.org/MusicEvent.

- -
-

Note : Vous pourrez trouver plus d'informations sur l'attribut itemtype sur http://schema.org/Thing

-
- -

Syntaxe

- -

Syntaxe formelle

- -
itemtype = URL
- -

Exemple simple

- -

HTML

- -
<div itemscope itemtype="http://schema.org/Product">
-  <span itemprop="brand">ACME</span>
-  <span itemprop="name">Executive Anvil</span>
-</div>
- -

Structure de données

- - - - - - - - - - - - - - - - - - - - - - - -
itemscopeitemtypehttp://schema.org/Product
itempropnameExecutive Anvil
itempropbrand [Thing]
itempropnameACME
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('HTML Microdata', "#dfn-itemtype", "itemtype")}}{{Spec2('HTML Microdata')}} 
{{SpecName('HTML WHATWG', "microdata.html#attr-itemtype", "itemprop")}}{{Spec2('HTML WHATWG')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("html.global_attributes.itemtype")}}

- -

Voir aussi

- - diff --git a/files/fr/web/html/attributs_universels/lang/index.html b/files/fr/web/html/attributs_universels/lang/index.html deleted file mode 100644 index 6a45c3ed2a..0000000000 --- a/files/fr/web/html/attributs_universels/lang/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: lang -slug: Web/HTML/Attributs_universels/lang -tags: - - Attribut - - Attribut universel - - HTML - - Reference -translation_of: Web/HTML/Global_attributes/lang ---- -
{{HTMLSidebar("Global_attributes")}}
- -

L'attribut universel lang permet de définir la langue utilisée pour l'élément. Pour les éléments non-éditables, c'est la langue dans laquelle ils sont écrits. Pour les éléments éditables, c'est la langue dans laquelle devrait écrire l'utilisateur. La valeur de cet attribut est une « balise de langue » dont le format est défini par le document de l'IETF : Les balises d'identification de langues (BCP47). Si cette balise est la chaîne vide, la langue sera définie comme inconnue. Si la balise de langue n'est pas valide selon BCP47, la langue sera définie comme invalide.

- -
{{EmbedInteractiveExample("pages/tabbed/attribute-lang.html","tabbed-shorter")}}
- - - -

Même lorsque l'attribut lang est défini, il peut ne pas être pris en compte. En effet, l'attribut {{htmlattrxref("xml:lang")}} aura la priorité sur celui-ci.

- -

Pour la pseudo-classe CSS {{cssxref(":lang")}}, deux noms de langues invalides sont considérés différents si les noms utilisés sont différents. Par exemple, alors que :lang(fr) permet l'appariement avec les déclarations (valides) lang="fr-BE" ou lang="fr-CH", un encodage (invalide) comme :lang(xyzzy) ne permet pas l'appariement avec une déclaration (invalide) comme lang="xyzzy-Zorp!".

- -

Syntaxe des balises de langue

- -

La syntaxe complète décrite par la BCP 47 est suffisamment développée pour désigner certains dialectes spécifiques. Toutefois, dans la plupart des cas, l'utilisation sera assez simple.

- -

Voici un aperçu de la syntaxe simplifiée. Une balise de langue est composées de trois « sous-balises » séparées par des tirets. Chacune de ces sous-balises indique une certaine propriété de la langue. Les trois sous-balises communément utilisées sont :

- -
-
Sous-balise de langue
-
Ce fragment est obligatoire. C'est un code sur deux ou trois caractères (généralement en minuscules) qui définit la langue de base. Pour l'anglais, cette sous-balise est en et pour le Badeshi, cette balise est bdz.
-
Sous-balise de script
-
Ce fragment est optionnel. Il décrit le système d'écriture utilisé par la langue. Cette sous-balise contient toujours quatre caractères. Pour le braille français, la balise complète sera donc fr-Brail ; pour le japonais écrit avec l'alphabet Katakana, le code sera ja-Kana. Si la langue est utilisée avec le script le plus fréquemment utilisé (par exemple de l'espagnol écrit avec l'alphabet latin), il n'est pas nécessaire d'indiquer cette sous-balise.
-
Sous-balise régionale
-
Ce fragment est optionnel. Il définit un dialecte de la langue de base pour une région donnée. Cette sous-balise est composée de deux lettres en majuscules pour indiquer un pays ou de trois chiffres pour une indiquer une région qui n'est pas un pays. Ainsi, es-ES représente l'espagnol parlé en Espagne et es-013 représente l'espagnol parlé en Amérique centrale ; l'espagnol international serait simplement es.
-
- -

La sous-balise de script doit précéder la sous-balise régionale si les deux sont présentes. Voici un exemple avec les trois fragments : ru-Cyrl-BY qui correspond au russe, écrit avec l'alphabet cyrillique, tel que parlé en Biélorussie.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', "dom.html#the-lang-and-xml:lang-attributes", "lang")}}{{Spec2('HTML WHATWG')}}Aucun changement depuis la dernière dérivation, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "dom.html#the-lang-and-xml:lang-attributes", "lang")}}{{Spec2('HTML5.1')}}Dérivée de {{SpecName('HTML WHATWG')}}, aucun changement de {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "dom.html#the-lang-and-xml:lang-attributes", "lang")}}{{Spec2('HTML5 W3C')}}Dérivée de {{SpecName('HTML WHATWG')}}. Définition du comportement de l'attribut xml:lang et de l'algorithme à utiliser pour déterminer la langue utilisée. Cet attribut devient également un attribut global à part entière.
{{SpecName('HTML4.01', 'struct/dirlang.html#h-8.1', 'lang')}}{{Spec2('HTML4.01')}}Attribut supporté pour tous les éléments {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}, et {{HTMLElement("script")}}.
- -

Compatibilité des navigateurs

- - - -

{{Compat("html.global_attributes.lang")}}

- -

Voir aussi

- - diff --git a/files/fr/web/html/attributs_universels/slot/index.html b/files/fr/web/html/attributs_universels/slot/index.html deleted file mode 100644 index c6b96098a0..0000000000 --- a/files/fr/web/html/attributs_universels/slot/index.html +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: slot -slug: Web/HTML/Attributs_universels/slot -tags: - - Attribut - - Attribut universel - - HTML - - Reference -translation_of: Web/HTML/Global_attributes/slot ---- -
{{HTMLSidebar("Global_attributes")}}{{SeeCompatTable}}
- -

L'attribut HTML universel slot permet d'affecter un créneau d'un shadow DOM à un élément. Un élément avec un attribut slot est affecté au créneau créé par l'élément {{HTMLElement("slot")}} dont la valeur de l'attribut {{htmlattrxref("name", "slot")}} correspond à celle de l'attribut slot.

- -

Pour des exemples d'application, consulter le guide Utiliser les modèles (templates) et les emplacements (slots).

- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', "dom.html#attr-slot", "slot attribute")}}{{Spec2('HTML WHATWG')}} 
{{SpecName('DOM WHATWG', "#dom-element-slot", "slot attribute")}}{{Spec2('DOM WHATWG')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("html.global_attributes.slot")}}

- -

Voir aussi

- - diff --git a/files/fr/web/html/attributs_universels/spellcheck/index.html b/files/fr/web/html/attributs_universels/spellcheck/index.html deleted file mode 100644 index efc982d646..0000000000 --- a/files/fr/web/html/attributs_universels/spellcheck/index.html +++ /dev/null @@ -1,153 +0,0 @@ ---- -title: spellcheck -slug: Web/HTML/Attributs_universels/spellcheck -tags: - - Attribut - - Attribut universel - - HTML - - Reference -translation_of: Web/HTML/Global_attributes/spellcheck ---- -
{{HTMLSidebar("Global_attributes")}}
- -

L'attribut universel spellcheck est un attribut à valeur contrainte qui définit si l'orthographe du contenu de l'élément doit être vérifiée.

- -
{{EmbedInteractiveExample("pages/tabbed/attribute-spellcheck.html","tabbed-shorter")}}
- - - -

Les valeurs autorisées pour cet attribut sont :

- - - -

La valeur par défaut de l'attribut (utilisée si elle n'est pas définie explicitement) sera fonction du navigateur et du type d'élément. Cette valeur par défaut peut également être héritée (autrement dit, la valeur utilisée pour l'élément courant sera la valeur explicite définie pour son plus proche ancêtre dans l'arbre des éléments).

- -

Cet attribut est un attribut à valeur contrainte, ce n'est pas un attribut booléen. Il faut donc utiliser explicitement les valeurs true ou false. Ainsi :

- -
<label spellcheck>Label exemple</label>
- -

sera invalide, la formulation correcte étant :

- -
<label spellcheck="true">Label exemple</label>
- -

Cet attribut n'est qu'une indication à destination du navigateur : il n'est pas obligatoire qu'un navigateur puisse vérifier l'orthographe. Les éléments non-éditables ne sont généralement pas vérifiés, même lorsque spellcheck vaut true et que le navigateur possède une fonctionnalité de vérification orthographique.

- -

La valeur par défaut sera différente selon l'élément et le navigateur :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Navigateur{{HTMLElement("html")}}{{HTMLElement("textarea")}}{{HTMLElement("input")}}AutresCommentaires
Firefox / GeckofalsefalsefalsehéritéLorsque layout.spellcheckDefault vaut 0
falsetruehéritéhéritéLorsque layout.spellcheckDefault vaut 1 (valeur par défaut)
falsetruetruehéritéLorsque layout.spellcheckDefault vaut 2
Chromefalsetrue?hérité
Internet Explorerfalsetrue?hérité
Operafalsetrue?hérité
Safarifalsetrue?hérité
- -

Exemples

- -

HTML

- -
<!-- La valeur par défaut -->
-<textarea>Saisissay un texte issy</textarea>
-
-<!-- Les valeurs explicites -->
-<textarea spellcheck="true">Saisissay un texte issy</textarea>
-<textarea spellcheck="false">Saisissay un texte issy</textarea>
-
- -

Résultat

- -

{{EmbedLiveSample("Exemples","200","300")}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', "interaction.html#spelling-and-grammar-checking", "spellcheck")}}{{Spec2('HTML WHATWG')}}Pas de changement depuis la dernière dérivation, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "editing.html#spelling-and-grammar-checking", "spellcheck")}}{{Spec2('HTML5.1')}}Dérivée de {{SpecName('HTML WHATWG')}}, définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("html.global_attributes.spellcheck")}}

- -

Voir aussi

- - diff --git a/files/fr/web/html/attributs_universels/style/index.html b/files/fr/web/html/attributs_universels/style/index.html deleted file mode 100644 index 3da865a0e9..0000000000 --- a/files/fr/web/html/attributs_universels/style/index.html +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: style -slug: Web/HTML/Attributs_universels/style -tags: - - Attribut - - Attribut universel - - HTML - - Reference -translation_of: Web/HTML/Global_attributes/style ---- -
{{HTMLSidebar("Global_attributes")}}
- -

L'attribut universel style contient des déclarations CSS afin de mettre en forme l'élément. Attention, il est recommandé de définir les règles de mise en forme dans un ou plusieurs fichiers séparés. Cet attribut, ainsi que l'élément {{HTMLElement("style")}} ont simplement pour but de permettre une mise en forme rapide, notamment pour tester.

- -
{{EmbedInteractiveExample("pages/tabbed/attribute-style.html","tabbed-shorter")}}
- - - -
-

Note : Cet attribut ne doit pas être utilisé à des fins sémantiques. En effet, si toute mise en forme est retirée, toute page doit rester correcte d'un point de vue sémantique. On ne devrait pas, notamment, utiliser cet attribut afin de cacher des informations qui ne seraient pas pertinentes (cela devrait être réalisé avec l'attribut {{htmlattrxref("hidden")}}.

-
- -

Exemples

- -

HTML

- -
<p style="color: rgb(255, 0, 0)">
-  Cette méthode n'est pas vraiment recommandée
-</p>
-
-<p class="toto">
-  Alors que ça, c'est mieux.
-</p>
- -

CSS

- -
.toto {
-  color: rgb(0, 255, 0);
-}
- -

Résultat

- -

{{EmbedLiveSample("Exemples","300","300")}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', "dom.html#the-style-attribute", "style")}}{{Spec2('HTML WHATWG')}}Aucune modification depuis la dernière dérivation de {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "dom.html#the-style-attribute", "style")}}{{Spec2('HTML5.1')}}Dérivée de {{SpecName('HTML WHATWG')}}, aucune modification depuis {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "dom.html#the-style-attribute", "style")}}{{Spec2('HTML5 W3C')}}Dérivée de {{SpecName('HTML WHATWG')}}. Depuis {{SpecName("HTML4.01")}}, cet attribut est désormais un attribut universel.
{{SpecName('HTML4.01', 'present/styles.html#h-14.2.2', 'style')}}{{Spec2('HTML4.01')}}Cet attribut est pris en charge par tous les éléments à l'exception de {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, et {{HTMLElement("title")}}.
{{SpecName("CSS3 Style", "", "")}}{{Spec2("CSS3 Style")}}Définition du contenu pour l'attribut style.
- -

Compatibilité des navigateurs

- - - -

{{Compat("html.global_attributes.style")}}

- -

Voir aussi

- - diff --git a/files/fr/web/html/attributs_universels/tabindex/index.html b/files/fr/web/html/attributs_universels/tabindex/index.html deleted file mode 100644 index 87aa27e5cc..0000000000 --- a/files/fr/web/html/attributs_universels/tabindex/index.html +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: tabindex -slug: Web/HTML/Attributs_universels/tabindex -tags: - - Attribut - - Attribut universel - - HTML - - Reference -translation_of: Web/HTML/Global_attributes/tabindex ---- -
{{HTMLSidebar("Global_attributes")}}
- -

L'attribut universel tabindex est un entier indiquant si l'élément peut capturer le focus et si c'est le cas, dans quel ordre il le capture lors de la navigation au clavier (généralement à l'aide de la touche Tab). Si plusieurs éléments partagent la même valeur d'attribut tabindex, leur ordre sera calculé en fonction de leur position dans le document.

- -
{{EmbedInteractiveExample("pages/tabbed/attribute-tabindex.html","tabbed-standard")}}
- - - -

Cet attribut peut prendre l'une des valeurs suivantes :

- - - -

Si on utilise l'attribut tabindex sur un élément {{HTMLElement("div")}}, on ne pourra pas naviguer dans le contenu de cet élément avec les flèches du clavier, sauf si tabindex est également utilisé sur le contenu. Pour observer ce comportement, vous pouvez utiliser cet exemple JSFiddle.

- -
-

Note : La valeur maximale pour tabindex est fixée à 32767 par HTML4. Sa valeur par défaut est 0 pour les éléments qui peuvent recevoir le focus et -1 pour les autres.

-
- -

Exemples

- -

HTML

- -
<button tabindex="1">Un bouton</button>
-<textarea>Saisir un texte</textarea>
-<button tabindex="0">Un autre bouton</button>
-<button tabindex="1">Et un troisième</button>
- -

Résultat

- -

{{EmbedLiveSample("Exemples","200","300")}}

- -

Accessibilité

- -

Il faut éviter d'utiliser l'attribut tabindex avec du contenu non-interactif si on souhaite uniquement rendre cet élément accessible au clavier (par exemple en voulant utiliser un élément {{HTMLElement("div")}} plutôt qu'un élément {{HTMLElement("button")}}).

- -

Les composants rendus interactifs par cette méthode ne feront pas partie de l'arbre d'accessibilité et ne pourront pas être analysés par les technologies d'assistance. Le contenu devrait être décrit sémantiquement avec des éléments interactifs ({{HTMLElement("a")}}, {{HTMLElement("button")}}, {{HTMLElement("details")}}, {{HTMLElement("input")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}, etc.). En effet, ces éléments disposent nativement de rôles et d'états qui peuvent être utilisées par les API d'accessibilité (il faut sinon les gérer via ARIA).

- - - -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', "interaction.html#attr-tabindex", "tabindex")}}{{Spec2('HTML WHATWG')}}Aucune modification depuis la dernière dérivation, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "editing.html#the-tabindex-attribute", "tabindex")}}{{Spec2('HTML5.1')}}Dérivée de {{SpecName('HTML WHATWG')}}, aucune modification depuis {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "editing.html#attr-tabindex", "tabindex")}}{{Spec2('HTML5 W3C')}}Dérivée de {{SpecName('HTML WHATWG')}}. À partir de {{SpecName("HTML4.01")}}, l'attribut est désormais supporté sur tous les éléments, c'est un attribut global à part entière.
{{SpecName('HTML4.01', 'interact/forms.html#adef-tabindex', 'tabindex')}}{{Spec2('HTML4.01')}}Attribut uniquement supporté sur {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}}, et {{HTMLElement("textarea")}}.
- -

Compatibilité des navigateurs

- - - -

{{Compat("html.global_attributes.tabindex")}}

- -

Voir aussi

- - diff --git a/files/fr/web/html/attributs_universels/title/index.html b/files/fr/web/html/attributs_universels/title/index.html deleted file mode 100644 index 06f0feee8d..0000000000 --- a/files/fr/web/html/attributs_universels/title/index.html +++ /dev/null @@ -1,129 +0,0 @@ ---- -title: title -slug: Web/HTML/Attributs_universels/title -tags: - - Attribut - - Attribut universel - - HTML - - Reference -translation_of: Web/HTML/Global_attributes/title ---- -
{{HTMLSidebar("Global_attributes")}}
- -

L'attribut universel title contient un texte d'information relatif à l'élément auquel il est rattaché.

- -
{{EmbedInteractiveExample("pages/tabbed/attribute-title.html","tabbed-shorter")}}
- - - -

On le trouve généralement utilisé pour :

- - - -

Si cet attribut est absent, cela signifie que le titre de l'élément ancêtre le plus proche est toujours pertinent (et pourrait être utilisé comme bulle d'information pour l'élément courant). Si cet attribut vaut la chaîne vide, cela signifie explicitement que la valeur du titre de l'ancêtre le plus proche n'est pas pertinent (et ne devrait pas être utilisé comme bulle d'information).

- -

Une sémantique différente est définie pour cet attribut lorsqu'il est utilisé avec les éléments {{HTMLElement("link")}}, {{HTMLElement("abbr")}}, {{HTMLElement("input")}} et {{HTMLElement("menuitem")}}.

- -

Titre sur plusieurs lignes

- -

Un attribut title peut contenir plusieurs lignes. Chaque caractère U+000A LINE FEED (LF) représentera un saut de ligne. Le fragment de code suivant représente donc un élément dont le titre est écrit sur deux lignes.

- -

HTML

- -
<p>
-  Les sauts de ligne au sein d'un attribut title doivent être pris en compte :
-  <abbr title="Ceci est un
-  titre sur plusieurs lignes">Exemple</abbr>.
-</p>
-
- -

Résultat

- -

{{EmbedLiveSample("Titre_sur_plusieurs_lignes")}}

- -

Héritage de title

- -

Lorsqu'un élément ne possède pas d'attribut title, il hérite de la valeur de l'attribut pour l'élément parent (qui peut également l'hériter de son parent, etc.).

- -

Si cet attribut est défini avec la chaîne vide, cela signifie que le titre provenant d'un élément parent n'est pas pertinent et qu'il ne devrait pas être utilisé.

- -

HTML

- -
<div title="Une bubulle">
-  <p>Si vous survolez cet élément, il y aura une bulle d'information "Une bubulle".</p>
-  <p title="">Et au-dessus de celui-ci, aucune info.</p>
-</div>
- -

Résultat

- -

{{EmbedLiveSample("Héritage_de_title")}}

- -

Accessibilité

- -

L'attribut title est très problématique pour :

- - - -

Cela est dû à une prise en charge hétérogène de la part des navigateurs. Si on souhaite avoir une bulle d'information, mieux vaudra utiliser une technique plus accessible.

- - - -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', "elements.html#the-title-attribute", "title")}}{{Spec2('HTML WHATWG')}}Aucune modification depuis {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "dom.html#the-title-attribute", "title")}}{{Spec2('HTML5.1')}}Dérivation de {{SpecName('HTML WHATWG')}}, aucune modification de {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "dom.html#the-title-attribute", "title")}}{{Spec2('HTML5 W3C')}}Dérivation de {{SpecName('HTML WHATWG')}}. À partir de {{SpecName("HTML4.01")}}, title est désormais un attribut universel.
{{SpecName('HTML4.01', 'struct/global.html#adef-title', 'title')}}{{Spec2('HTML4.01')}}Pris en charge par l'ensemble des éléments sauf {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}} et {{HTMLElement("title")}}.
- -

Compatibilité des navigateurs

- - - -

{{Compat("html.global_attributes.title")}}

- -

Voir aussi

- - diff --git a/files/fr/web/html/attributs_universels/translate/index.html b/files/fr/web/html/attributs_universels/translate/index.html deleted file mode 100644 index 215800e5ff..0000000000 --- a/files/fr/web/html/attributs_universels/translate/index.html +++ /dev/null @@ -1,71 +0,0 @@ ---- -title: translate -slug: Web/HTML/Attributs_universels/translate -tags: - - Attribut - - Attribut universel - - Experimental - - HTML - - Reference -translation_of: Web/HTML/Global_attributes/translate ---- -
{{HTMLSidebar("Global_attributes")}}
- -

L'attribut universel translate est un attribut à valeur contrainte qui peut être utilisé afin d'indiquer si les valeurs d'attribut d'un élément et si les valeurs de ses nœuds {{domxref("Text")}} descendants doivent être traduits lorsque la page est localisée ou s'il faut les laisser inchangés. Les valeurs autorisées pour cet attribut sont :

- - - -
-

Note : Bien que la prise en charge de cet attribut ne soit pas homogène pour les navigateurs, celui-ci est pris en compte par les outils de traduction automatique (Google Translate par exemple) et les outils de traduction utilisés par les traducteurs. Aussi, cet attribut doit être utilisé par les auteurs web afin d'indiquer correctement le contenu qui ne devrait pas être traduit.

-
- -

Exemples

- -

HTML

- -
<label for="postcode" translate="no">
-   <span translate="yes">Enter your postcode to find the nearest store</span>
-</label>
-<input id="postcode" type="text">
- -

Résultat

- -

{{EmbedLiveSample("Exemples","250","250")}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', "dom.html#attr-translate", "translate")}}{{Spec2('HTML WHATWG')}}Aucun changement depuis la dernière dérivation {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "dom.html#the-translate-attribute", "translate")}}{{Spec2('HTML5.1')}}Dérivée de {{SpecName('HTML WHATWG')}}, définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("html.global_attributes.translate")}}

- -

Voir aussi

- - diff --git a/files/fr/web/html/attributs_universels/x-ms-acceleratorkey/index.html b/files/fr/web/html/attributs_universels/x-ms-acceleratorkey/index.html deleted file mode 100644 index f03780b703..0000000000 --- a/files/fr/web/html/attributs_universels/x-ms-acceleratorkey/index.html +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: x-ms-acceleratorkey -slug: Web/HTML/Attributs_universels/x-ms-acceleratorkey -tags: - - Attribut - - HTML - - Non-standard - - Reference -translation_of: Web/HTML/Global_attributes/x-ms-acceleratorkey ---- -
{{HTMLSidebar("Global_attributes")}}{{Non-standard_Header}}
- -

La propriété x-ms-acceleratorkey fournit une méthode pour déclarer si une touche d'accélération a été affectée à un élément.

- -
-

Note : Pour fournir un raccourci clavier pour un élément qui n'utilise pas JavaScript, on utilisera l'attribut accesskey.

-
- -

{{Non-standard_Inline}} Cette propriété non-standard est spécifique à Internet Explorer et à Microsoft Edge.

- -

La propriété x-ms-acceleratorkey permet d'indiquer sur l'arbre d'accessibilité (utilisé par les outils d'assistance tels que les lecteurs d'écran) qu'une touche d'accélération existe. Cet attribut ne fournit pas le comportement déclenché par cette touche. Il est nécessaire de fournir les gestionnaires d'évènements associés tels que onkeypress, onkeydown ou onkeyup afin de traiter l'utilisation de la touche dans l'application.

- - - -

Syntaxe

- -
<button x-ms-acceleratorkey="string">...</button>
- -

Valeur

- -

Cette propriété peut être une chaîne de caractères avec le nom de la touche accélératrice :

- - - -

Voir aussi

- - diff --git a/files/fr/web/html/attributs_universels/x-ms-format-detection/index.html b/files/fr/web/html/attributs_universels/x-ms-format-detection/index.html deleted file mode 100644 index f11309e1b5..0000000000 --- a/files/fr/web/html/attributs_universels/x-ms-format-detection/index.html +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: x-ms-format-detection -slug: Web/HTML/Attributs_universels/x-ms-format-detection -tags: - - Attribut - - HTML - - Non-standard - - Reference -translation_of: Web/HTML/Global_attributes/x-ms-format-detection ---- -
{{HTMLSidebar("Global_attributes")}}{{Non-standard_Header}}
- -

L'attribut x-ms-format-detection détermine si le format de la donnée dans le contenu est détectée automatiquement et, lorsqu'elle est trouvée, est convertie en un lien sur lequel on peut cliquer.

- -
-

Note : Les liens créés grâce à la détection de format n'apparaissent pas dans le DOM.

-
- -

{{Non-standard_inline}}Cette propriété est spécifique à Internet Explorer et à Microsoft Edge.

- -

Syntaxe

- -
<html x-ms-format-detection="none">
-
- -

Valeurs

- -

Cet attribut peut prendre une chaîne de caractères parmi les suivantes comme valeur :

- -
-
all
-
Tous les formats de donnée pris en charge sont détectés.
-
none
-
La détection de format est désactivée.
-
phone
-
Seuls les numéros de téléphone sont détectés.
-
- -
-

Note : Les liens créés via la détection de format n'auront pas d'impact sur le contenu ou sur la disposition du DOM.

-
- -

Exemples

- -

Pour désactiver la détection automatique sous certaines conditions, on pourra par exemple utiliser JavaScript afin d'ajouter x-ms-format-detection sur les éléments qu'on soit sur un mobile (détection activée) ou sur un ordinateur de bureau (détection désactivée) :

- -
if (window.matchMedia('(min-width: 1024px)').matches) {
-    var e = document.getElementsByClassName("phone");
-    for (i = 0; i < e.length; i++)
-        e[i].setAttribute("x-ms-format-detection", "none");
-}
-
- -

Dans cet exemple, les numéros de téléphone conservent la mise en forme tant que la zone d'affichage (viewport) est moins large que 1024 pixels.

- -

Voir aussi

- - diff --git a/files/fr/web/html/block-level_elements/index.html b/files/fr/web/html/block-level_elements/index.html new file mode 100644 index 0000000000..c099de574f --- /dev/null +++ b/files/fr/web/html/block-level_elements/index.html @@ -0,0 +1,126 @@ +--- +title: Éléments de bloc +slug: Web/HTML/Éléments_en_bloc +tags: + - Débutant + - HTML + - Web +translation_of: Web/HTML/Block-level_elements +--- +
{{HTMLSidebar}}
+ +

Les éléments de bloc forment une catégorie d'éléments HTML (HyperText Markup Language) en opposition 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 (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.

+ +
+

Note : Un élément de bloc commence toujours sur une nouvelle ligne et prend toute la largeur disponible (autrement dit, il s'étend le plus possible vers la droite et vers la gauche).

+
+ +

Exemples

+ +

HTML

+ +
<p>Ce paragraphe est un élément de bloc. Son fond a été coloré pour illustrer son conteneur.</p>
+ +

CSS

+ +
p {
+  background-color: #8ABB55;
+}
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples')}}

+ +

Contrainte

+ + + +

Élément de bloc ou élément en ligne ?

+ +

Les éléments de bloc diffèrent des éléments en ligne par :

+ +
+
La mise en forme
+
Par défaut, les éléments de bloc commencent sur des nouvelles lignes.
+
Le modèle de contenu
+
De façon générale, les éléments de bloc peuvent contenir des éléments en ligne et d'autres éléments de bloc. L'idée structurelle sous-jacente est que les éléments de bloc créent de plus grandes structures que les éléments en ligne.
+
+ +

La distinction entre bloc et ligne est utilisée dans les spécifications HTML jusqu'à la version 4.01. En HTML5, cette distinction binaire est remplacée par un ensemble plus complexe de catégories de contenu. La catégorie des éléments en bloc correspond approximativement à la catégorie de contenu de flux en HTML5, celle des éléments en ligne correspond à la catégorie de contenu phrasé. Il y a également d'autres catégories (le contenu interactif par exemple).

+ +

Éléments

+ +

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).

+ +
+
+
{{HTMLElement("address")}}
+
Information de contact.
+
{{HTMLElement("article")}}
+
Contenu d'un article.
+
{{HTMLElement("aside")}}
+
Contenu tangentiel.
+
{{HTMLElement("blockquote")}}
+
Long bloc de citation.
+
{{HTMLElement("details")}}
+
Outil permettant de révéler des informations sur la page.
+
{{HTMLElement("dialog")}}
+
Boîte de dialogue.
+
{{HTMLElement("dd")}}
+
Description d'une définition.
+
{{HTMLElement("div")}}
+
Division d'un document.
+
{{HTMLElement("dl")}}
+
Liste de définitions.
+
{{HTMLElement("dt")}}
+
Définition/description d'un terme.
+
{{HTMLElement("fieldset")}}
+
Ensemble de champs.
+
{{HTMLElement("figcaption")}}
+
Légende d'une image.
+
{{HTMLElement("figure")}}
+
Permet de grouper des média avec une légende (voir {{HTMLElement("figcaption")}}).
+
{{HTMLElement("footer")}}
+
Bas de page ou de section.
+
{{HTMLElement("form")}}
+
Formulaire.
+
{{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}
+
Éléments de titre de niveau 1 à 6.
+
{{HTMLElement("header")}}
+
En-tête de page ou de section.
+
{{HTMLElement("hgroup")}}
+
Information d'en-tête de groupe.
+
{{HTMLElement("hr")}}
+
Ligne de division horizontale.
+
{{HTMLElement("li")}}
+
Élément d'une liste.
+
{{HTMLElement("main")}}
+
Contient le contenu central unique au document.
+
{{HTMLElement("nav")}}
+
Contient des liens de navigation.
+
{{HTMLElement("ol")}}
+
Liste ordonnée.
+
{{HTMLElement("p")}}
+
Paragraphe.
+
{{HTMLElement("pre")}}
+
Texte pré-formaté.
+
{{HTMLElement("section")}}
+
Section d'une page web.
+
{{HTMLElement("table")}}
+
Tableau.
+
{{HTMLElement("ul")}}
+
Liste non-ordonnée.
+
+
+ +

Voir aussi

+ + diff --git a/files/fr/web/html/contenu_editable/index.html b/files/fr/web/html/contenu_editable/index.html deleted file mode 100644 index 01e1691ed1..0000000000 --- a/files/fr/web/html/contenu_editable/index.html +++ /dev/null @@ -1,36 +0,0 @@ ---- -title: Contenu éditable -slug: Web/HTML/Contenu_editable -translation_of: Web/Guide/HTML/Editable_content ---- -

Introduction

-

Chaque élément du HTML5 peut être éditable. Cette fonctionnalité a été introduite longtemps auparavant mais a maintenant été standarisée avec WHATWG (voir la spécification HTML actuelle). Avec des gestionnaires d'événements JavaScript, vous pouvez transformer votre page Web en un éditeur de texte, complet et rapide.

-

Compatibilité

-

Le contenu éditable est entièrement compatible avec les navigateurs actuels :

- -

Ce n'est pas encore supporté par Opera Mini et Opera Mobile.

-

Comment ça marche ?

-

Fixez l'attribut contenteditable à true dans votre élément HTML. Ça peut être fait dans quasiment tous les éléments HTML.

-

Exemples

-

Un exemple simple :

-
<!DOCTYPE html>
-<html>
-  <body>
-    <div contenteditable="true">
-      Ce texte peut être édité par l'utilisateur.
-    </div>
-  </body>
-</html>
-

Vous pouvez observer un exemple concret intégrant JavaScript utilisant LocalStorage ici. Le code source est disponible ici.

-

Voir aussi

-

Comment interagir avec le contenu (style proche de l'ancienne API Internet Explorer) ou encore ici.

-
- {{ languages({ "ja": "ja/HTML/Content_Editable", "zh-cn": "zh-cn/HTML/Content_Editable" }) }}
diff --git a/files/fr/web/html/cors_enabled_image/index.html b/files/fr/web/html/cors_enabled_image/index.html new file mode 100644 index 0000000000..e0f92b24c7 --- /dev/null +++ b/files/fr/web/html/cors_enabled_image/index.html @@ -0,0 +1,117 @@ +--- +title: Images avec le contrôle d'accès HTTP +slug: Web/HTML/Images_avec_le_contrôle_d_accès_HTTP +tags: + - Avancé + - CORS + - Canvas + - HTML + - Reference +translation_of: Web/HTML/CORS_enabled_image +--- +
{{QuickLinksWithSubpages("/fr/docs/Web/HTML/")}}
+ +

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.

+ +

Pour plus de détails sur l'attribut crossorigin, voir les attributs de paramétrage du CORS.

+ +

Canevas corrompu et sécurité

+ +

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é.

+ +

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 corrompu (tainted). 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.

+ +

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.

+ +

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.

+ +

Appeler l'une des méthodes suivantes sur un canevas corrompu déclenchera une erreur :

+ + + +

L'exception levée par de tels appels sera une exception SecurityError. Cette mesure protège les utilisateurs contre l'exposition de données privées via des images provenant de sites tiers sans permission.

+ +

Stocker une image provenant d'une origine tierce

+ +

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.

+ +

Configuration serveur

+ +

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.

+ +

Dans la suite de cet exemple, on prendra le cas d'un site est servi via Apache. On pourra utiliser le fragment de configuration serveur Apache pour les images CORS :

+ +
<IfModule mod_setenvif.c>
+  <IfModule mod_headers.c>
+    <FilesMatch "\.(bmp|cur|gif|ico|jpe?g|png|svgz?|webp)$">
+      SetEnvIf Origin ":" IS_CORS
+      Header set Access-Control-Allow-Origin "*" env=IS_CORS
+    </FilesMatch>
+  </IfModule>
+</IfModule>
+ +

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.

+ +

Implémenter l'enregistrement

+ +

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 en stockage local comme si elles étaient servies depuis le même domaine que le code.

+ +

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.

+ +

Démarrer le téléchargement

+ +

Voici le code qui démarre le téléchargement (déclenché par exemple lorsque l'utilisateur clique sur un bouton « Télécharger ») :

+ +
function startDownload() {
+  let imageURL = "https://cdn.glitch.com/4c9ebeb9-8b9a-4adc-ad0a-238d9ae00bb5%2Fmdn_logo-only_color.svg?1535749917189";
+
+  downloadedImg = new Image;
+  downloadedImg.crossOrigin = "Anonymous";
+  downloadedImg.addEventListener("load", imageReceived, false);
+  downloadedImg.src = imageURL;
+}
+ +

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 crossOrigin paramétré avec "Anonymous" (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.

+ +

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.

+ +

Recevoir et enregistrer l'image

+ +

Voici le fragment de code exécuté lorsque l'image a été téléchargée :

+ +
function imageReceived() {
+  let canvas = document.createElement("canvas");
+  let context = canvas.getContext("2d");
+
+  canvas.width = downloadedImg.width;
+  canvas.height = downloadedImg.height;
+
+  context.drawImage(downloadedImg, 0, 0);
+  imageBox.appendChild(canvas);
+
+  try {
+    localStorage.setItem("saved-image-example", canvas.toDataURL("image/png"));
+  }
+  catch(err) {
+    console.log("Error: " + err);
+  }
+}
+ +

imageReceived() est invoquée lorsque l'évènement "load" est déclenché sur l'élément HTMLImageElement 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 context.

+ +

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.

+ +

Enfin, on enregistre l'image dans le stockage local. Pour cela, on utilise les méthodes de l'API Web Storage 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()")}}.

+ +

Vous pouvez essayer ou adapter cet exemple sur Glitch.

+ +

Voir aussi

+ + diff --git a/files/fr/web/html/date_and_time_formats/index.html b/files/fr/web/html/date_and_time_formats/index.html new file mode 100644 index 0000000000..f9da6c5f01 --- /dev/null +++ b/files/fr/web/html/date_and_time_formats/index.html @@ -0,0 +1,457 @@ +--- +title: Formats de date et d'heure utilisés en HTML +slug: Web/HTML/Formats_date_heure_HTML +tags: + - Date + - Guide + - HTML + - Time +translation_of: Web/HTML/Date_and_time_formats +--- +
{{HTMLRef}}
+ +

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 {{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.

+ +

Pour les éléments <input>, 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 :

+ +
+ +
+ +

Exemples

+ +

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.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Exemple de chaînes de caractères utilisées en HTML pour représenter des dates et des heures
Chaîne de caractèresDate/heure
2005-06-077 juin 2005[détails]
08:4508h45m (le matin)[détails]
08:45:2508h45m25s[détails]
0033-08-04T03:4003h40 (du matin), le 04 août 33[détails]
1977-04-01T14:00:3030 secondes après 14h00, le premier avril 1977[détails]
1901-01-01T00:00ZMinuit, UTC, le 1er janvier 1901[détails]
1901-01-01T00:00:01-04:00Minuit passé d'une seconde sur l'heure de l'Est (EST), le 1er janvier 1901[détails]
+ +

Notions essentielles

+ +

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).

+ +

Jeu de caractères

+ +

En HTML, les chaînes qui représentent des dates et des heures manipulent uniquement des caractères {{interwiki("wikipedia", "ASCII")}}.

+ +

Numérotation des années

+ +

La spécification HTML indique que les années doivent être exprimées selon le calendrier grégorien. 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.

+ +

Bien que le calendrier grégorien ait été créé en 1582 afin de remplacer le calendrier julien, la notation grégorienne est « étendue » en HTML jusqu'à 1 après J.C. Aussi, si vous manipulez des dates antérieures à 1582, assurez-vous qu'elles soient bien exprimées selon le calendrier grégorien.

+ +

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 0072. Les années antérieures à l'an 1 ne sont pas prises en charge par HTML.

+ +

Une année est normalement constituée de 365 jours, sauf pendant les {{anch("Années bissextiles", "années bissextiles")}}.

+ +

Années bissextiles

+ +

Une année bissextile est une année dont le numéro est:

+ + + +

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.

+ +

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.

+ +

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.

+ +

Mois de l'année

+ +

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 01 et 12. Voir le tableau ci-après pour les numéros des mois et le nombre de jours correspondant.

+ +

Jours du mois

+ +

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.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Les mois de l'année et leur durée en jours
Numéro du moisNom (en français))Durée du mois (en nombre de jours)
01Janvier31
02Février28 (29 pour les années bissextiles)
03Mars31
04Avril30
05Mai31
06Juin30
07Juillet31
o8Août31
09Septembre30
10Octobre31
11Novembre30
12Décembre31
+ +

Représentation des semaines

+ +

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 valide pour représenter une semaine se compose de 4 chiffres représentant l'année, suivis d'un tiret ("-" ou U+002D), suivi de la lettre majuscule "W" (U+0057), suivie d'un numéro de semaine sur deux chiffres.

+ +

Le numéro de la semaine est une chaîne de caractères, avec deux chiffres, entre 01 et 53. Chaque semaine commence un lundi et se termine un dimanche. Il est ainsi possible que les premiers jours de janvier fassent partie de la dernière semaine de l'année précédente et que les derniers jours fassent partie de la première semaine de l'année suivante. La première semaine de l'année est celle qui contient le premier jeudi de l'année. Ainsi, le premier jeudi de 1953 était le 1er janvier et la semaine contenant ce jour est donc considérée la première semaine de l'année. Ainsi, le 30 décembre 1952 appartient à la semaine 1953-W01.

+ +

Une année aura 53 semaines si :

+ + + +

Les autres années contiennent 52 semaines.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Exemples de chaînes de caractères valides pour représenter des semaines
Chaîne de caractèresSemaine et année (intervalle de dates)
2001-W37Semaine 37 de l'année 2001 (entre le 10 et le 16 septembre 2001)
1953-W01Semaine 1 de l'année 1953 (entre le 29 décembre 1952 et le 4 janvier 1953)
1948-W53Semaine 53 de l'année 1948 (entre le 27 décembre 1948 et le 2 janvier 1949)
1949-W01Semaine 1 de l'année 1949 (entre le 3 janvier et le 9 janvier 1949)
0531-W16Semaine 16 de l'année 531 (entre le 13 avril et le 19 avril 531)
0042-W04Semaine 4 de l'année 42 (entre le 21 et le 27 janvier 42)
+ +

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.

+ +

Représentation des mois

+ +

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.

+ +

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 ("-", ou U+002D), suivi d'un nombre sur deux chiffres où 01 représente janvier et où 12 représente décembre.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Exemples de chaînes de caractères valides pour la représentation d'un mois
Chaîne de caractèresLe mois et l'année
17310-09Le mois de septembre de l'année 17310
2019-01Le mois de janvier de l'année 2019
1993-11Le mois de novembre de l'année 1993
0571-04Le mois d'avril de l'année 571
0001-07Le mois de juillet de l'an 1
+ +

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.

+ +

Représentation des dates

+ +

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 ("-" ou U+002D) suivi du numéro du jour dans le mois sur deux chiffres.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
Exemples de chaînes de caractères valides pour représenter des dates
Chaîne de caractèresDate complète
1993-11-011er novembre 1993
1066-10-1414 octobre 1066
0571-04-2222 avril 571
0062-02-055 février 62
+ +

Représentation des heures

+ +

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 a minima d'une valeur sur deux chiffres représentant une heure, suivi de deux-points (":", 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 (".", U+002E) après les secondes, suivi d'une valeur sur un, deux ou trois chiffres.

+ +

Voici quelques règles supplémentaires :

+ + + + + + + + + + + + + + + + + + + + + + + + + +
Exemples de chaînes de caractères valides pour exprimer une heure
Chaîne de caractèresHeure
00:00:30.75Minuit passé de 30 secondes et 750 millisecondes
12:15Midi passé de quinze minutes
13:44:2513 heures 44 et 25 secondes
+ +

Représentation des dates et heures locales

+ +

Une chaîne de caractères datetime-local se compose d'une chaîne de caractères représentant une date, suivie de la lettre "T" 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.

+ +

Lorsqu'on définit la valeur de l'attribut {{htmlattrxref("value", "input")}} d'un champ datetime-local, 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 :00).

+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
Exemples de chaînes de caractères valides pour l'expression de dates/heures
Chaîne de caractèresVersion normaliséeDate et heure correspondantes
1986-01-28T11:38:00.011986-01-28T11:38:00.0128 janvier 1986 à 11 heures et 38 minutes passées de 10 millisecondes
1986-01-28 11:38:00.0101986-01-28T11:38:00.01128 janvier 1986 à 11 heures et 38 minutes passées de 10 millisecondes
0170-07-31T22:00:000170-07-31T22:00231 juillet 170 à 22 heures
+ +
    +
  1. 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 "T" et le zéro de terminaison a été supprimé pour raccourcir la chaîne de l'heure.
    2. +
  2. On notera que la forme normalisée de cette date ne contient pas l'expression des secondes.
    3. +
+ +

Représentation des dates et heures universelles

+ +

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.

+ +

Chaîne de caractères exprimant le décalage horaire

+ +

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 :

+ + + +

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 "Z", sinon, on construira le complément de la façon suivante :

+ +
    +
  1. Un caractère indiquant le signe du décalage : le plus ("+" ou U+002B) pour les fuseaux situés à l'est du méridien ou le moins ("-" ou U+002D) pour les fuseaux situés à l'ouest.
    2. +
  2. Deux chiffres indiquant le nombre d'heures de décalage par rapport au méridien. Cette valeur doit être comprise entre 00 et 23.
    3. +
  3. Deux-points (":") (nécessaires uniquement si le décalage contient des minutes)
    4. +
  4. Deux chiffres indiquant les minutes de décalage. Cette valeur doit être comprise entre 00 et 59.
    5. +
+ +

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 00, 30 ou 45. Cela peut en théorie évoluer à tout moment car les pays sont libres de modifier leur fuseau horaire quand ils le souhaitent.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
Exemples de chaînes de caractères valides pour l'expression de dates/heures universelles
Chaîne de caractèresDate/heure universelleDate/heure sur le méridien solaire
2005-06-07T00:00Z7 juin 2005 à minuit UTC7 juin 2005 à minuit
1789-08-22T12:30:00.1-04:0022 août 1789 à midi trente (passé d'un dixième de seconde) selon l'heure avancée de l'Est (Eastern Daylight Time (EDT))22 août 1789 à 16 heures trente passées d'un dixième de seconde
3755-01-01 00:00+10:001er janvier 3755 à minuit pour le fuseau AEST (Australian Eastern Standard Time)31 décembre 3754 à 14h
+ +

Voir aussi

+ + diff --git a/files/fr/web/html/element/command/index.html b/files/fr/web/html/element/command/index.html deleted file mode 100644 index d5bdf50924..0000000000 --- a/files/fr/web/html/element/command/index.html +++ /dev/null @@ -1,117 +0,0 @@ ---- -title: ' : l''élément de commande' -slug: Web/HTML/Element/command -tags: - - Element - - HTML - - Obsolete - - Reference -translation_of: Web/HTML/Element/command ---- -
{{obsolete_header}}{{HTMLRef}}
- -

L'élément HTML <command> représente une commande qui peut être lancée par l'utilisateur. Ces commandes font généralement partie d'un menu contextuel ou d'une barre d'outils mais on peut les exécuter n'importe où sur la page.

- -
-

Note : L'élément <command> est inclus dans la spécification du W3C mais pas dans celle du WHATWG. Par ailleurs, à l'heure actuelle, aucun navigateur ne prend en charge cet élément.

-
- -

Attributes

- -

Comme pour tous les éléments, on peut utiliser les attributs universels sur cet élément.

- -
-
{{htmlattrdef("checked")}}
-
Cet attribut indique que la commande est sélectionnée. Il ne doit pas être utilisé si l'attribut type ne vaut pas checkbox ou radio.
-
{{htmlattrdef("disabled")}}
-
Cet attribut indique que la commande n'est pas disponible.
-
{{htmlattrdef("icon")}}
-
Cet attribut fournit une image qui représente la commande.
-
{{htmlattrdef("label")}}
-
Cet attribut indique le nom de la commande telle qu'elle est affichée à l'utilisateur.
-
{{htmlattrdef("radiogroup")}}
-
Cet attribut indique le nom du groupe de commandes auquel appartient la commande lorsque l'attribut type vaut radio le groupe sera activé lorsque la commande sera activée. Cet attribut ne doit pas être utilisé lorsque l'attribut type ne vaut pas radio.
-
{{htmlattrdef("type")}}
-
Cet attribut à valeur contrainte indique le type de commande. On peut utiliser une des trois valeurs . -
    -
  • -

    command (le type par défaut) indique une commande normale.

    -
    • -
  • -

    checkbox indique que la commande peut être activée grâce à une case à cocher.

    -
    • -
  • -

    radio indique que la commande peut être activée grâce à un bouton radio.

    -
    • -
-
-
- -

Examples

- -

HTML

- -
<command type="command" label="Save"
-  icon="icons/save.png" onclick="save()">
-
- -

Résultat

- -

{{EmbedLiveSample("Exemples","200","100")}}

- -

Résumé technique

- - - - - - - - - - - - - - - - - - - - - - - - -
Catégories de contenuContenu de flux, contenu phrasé, contenu de méta-données.
Contenu autoriséAucun, cet élément est un élément vide.
Omission de balisesLa balise de début est obligatoire et la balise de fin est interdite car c'est un élément vide.
Éléments parents autorisés{{HTMLElement("colgroup")}} uniquement bien que celui-ci puisse être défini implicitement car sa balise de début n'est pas obligatoire. L'élément {{HTMLElement("colgroup")}} ne doit pas avoir d'élément fils {{HTMLElement("span")}}.
Interface DOM{{domxref("HTMLCommandElement")}}
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', '#commands')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'semantics.html#the-command-element', '<command>')}}{{Spec2('HTML5 W3C')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("html.elements.command")}}

diff --git a/files/fr/web/html/element/element/index.html b/files/fr/web/html/element/element/index.html deleted file mode 100644 index 7b2a731677..0000000000 --- a/files/fr/web/html/element/element/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: ' : l''élément pour les éléments personnalisés (obsolète)' -slug: Web/HTML/Element/element -tags: - - Element - - HTML - - Obsolete - - Reference - - Web -translation_of: Web/HTML/Element/element ---- -
{{HTMLRef}}{{obsolete_header}}
- -

L'élément HTML <element> était conçu pour être utilisé afin de définir des éléments DOM personnalisés, il a été retiré de la spécification. Il a été retiré en faveur d'outils JavaScript qui permettront de créer de nouveaux éléments personnalisés, par exemple avec les Web Components.

- -
-

Attention ! Cet élément a été retiré de la spécification. Pour plus d'informations, se référer à cette note.

-
- -

Attributs

- -

On peut employer les attributs universels sur cet élément.

- -

Résumé technique

- - - - - - - - - - - - - - - - - - - - - - - - -
Catégories de contenuContenu transparent.
Contenu autoriséIndéfini.
Omission de balises{{no_tag_omission}}
Éléments parents autorisésIndéfini.
Interface DOM{{domxref("HTMLElement")}}
- -

Spécifications

- -

Cet élément faisait actuellement partie d'un brouillon de spécification, Custom Elements mais a été retiré.

- -

Compatibilité des navigateurs

- - - -

{{Compat("html.elements.element")}}

- -

Voir aussi

- -
    -
  • Les éléments HTML liés aux composants web (web components) : - -
      -
    • {{HTMLElement("content")}}
      • -
    • {{HTMLElement("decorator")}}
      • -
    • {{HTMLElement("shadow")}}
      • -
    • {{HTMLElement("template")}}
      • -
    -
    • -
diff --git a/files/fr/web/html/formats_date_heure_html/index.html b/files/fr/web/html/formats_date_heure_html/index.html deleted file mode 100644 index f9da6c5f01..0000000000 --- a/files/fr/web/html/formats_date_heure_html/index.html +++ /dev/null @@ -1,457 +0,0 @@ ---- -title: Formats de date et d'heure utilisés en HTML -slug: Web/HTML/Formats_date_heure_HTML -tags: - - Date - - Guide - - HTML - - Time -translation_of: Web/HTML/Date_and_time_formats ---- -
{{HTMLRef}}
- -

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 {{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.

- -

Pour les éléments <input>, 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 :

- -
- -
- -

Exemples

- -

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.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Exemple de chaînes de caractères utilisées en HTML pour représenter des dates et des heures
Chaîne de caractèresDate/heure
2005-06-077 juin 2005[détails]
08:4508h45m (le matin)[détails]
08:45:2508h45m25s[détails]
0033-08-04T03:4003h40 (du matin), le 04 août 33[détails]
1977-04-01T14:00:3030 secondes après 14h00, le premier avril 1977[détails]
1901-01-01T00:00ZMinuit, UTC, le 1er janvier 1901[détails]
1901-01-01T00:00:01-04:00Minuit passé d'une seconde sur l'heure de l'Est (EST), le 1er janvier 1901[détails]
- -

Notions essentielles

- -

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).

- -

Jeu de caractères

- -

En HTML, les chaînes qui représentent des dates et des heures manipulent uniquement des caractères {{interwiki("wikipedia", "ASCII")}}.

- -

Numérotation des années

- -

La spécification HTML indique que les années doivent être exprimées selon le calendrier grégorien. 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.

- -

Bien que le calendrier grégorien ait été créé en 1582 afin de remplacer le calendrier julien, la notation grégorienne est « étendue » en HTML jusqu'à 1 après J.C. Aussi, si vous manipulez des dates antérieures à 1582, assurez-vous qu'elles soient bien exprimées selon le calendrier grégorien.

- -

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 0072. Les années antérieures à l'an 1 ne sont pas prises en charge par HTML.

- -

Une année est normalement constituée de 365 jours, sauf pendant les {{anch("Années bissextiles", "années bissextiles")}}.

- -

Années bissextiles

- -

Une année bissextile est une année dont le numéro est:

- -
    -
  • Divisible par 400 ou,
    • -
  • Divisible par 4 mais pas par 100
    • -
- -

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.

- -

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.

- -

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.

- -

Mois de l'année

- -

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 01 et 12. Voir le tableau ci-après pour les numéros des mois et le nombre de jours correspondant.

- -

Jours du mois

- -

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.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Les mois de l'année et leur durée en jours
Numéro du moisNom (en français))Durée du mois (en nombre de jours)
01Janvier31
02Février28 (29 pour les années bissextiles)
03Mars31
04Avril30
05Mai31
06Juin30
07Juillet31
o8Août31
09Septembre30
10Octobre31
11Novembre30
12Décembre31
- -

Représentation des semaines

- -

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 valide pour représenter une semaine se compose de 4 chiffres représentant l'année, suivis d'un tiret ("-" ou U+002D), suivi de la lettre majuscule "W" (U+0057), suivie d'un numéro de semaine sur deux chiffres.

- -

Le numéro de la semaine est une chaîne de caractères, avec deux chiffres, entre 01 et 53. Chaque semaine commence un lundi et se termine un dimanche. Il est ainsi possible que les premiers jours de janvier fassent partie de la dernière semaine de l'année précédente et que les derniers jours fassent partie de la première semaine de l'année suivante. La première semaine de l'année est celle qui contient le premier jeudi de l'année. Ainsi, le premier jeudi de 1953 était le 1er janvier et la semaine contenant ce jour est donc considérée la première semaine de l'année. Ainsi, le 30 décembre 1952 appartient à la semaine 1953-W01.

- -

Une année aura 53 semaines si :

- -
    -
  • Le premier jour de l'année calendaire (le premier janvier) est un jeudi ou
    • -
  • 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")}}.
    • -
- -

Les autres années contiennent 52 semaines.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Exemples de chaînes de caractères valides pour représenter des semaines
Chaîne de caractèresSemaine et année (intervalle de dates)
2001-W37Semaine 37 de l'année 2001 (entre le 10 et le 16 septembre 2001)
1953-W01Semaine 1 de l'année 1953 (entre le 29 décembre 1952 et le 4 janvier 1953)
1948-W53Semaine 53 de l'année 1948 (entre le 27 décembre 1948 et le 2 janvier 1949)
1949-W01Semaine 1 de l'année 1949 (entre le 3 janvier et le 9 janvier 1949)
0531-W16Semaine 16 de l'année 531 (entre le 13 avril et le 19 avril 531)
0042-W04Semaine 4 de l'année 42 (entre le 21 et le 27 janvier 42)
- -

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.

- -

Représentation des mois

- -

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.

- -

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 ("-", ou U+002D), suivi d'un nombre sur deux chiffres où 01 représente janvier et où 12 représente décembre.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Exemples de chaînes de caractères valides pour la représentation d'un mois
Chaîne de caractèresLe mois et l'année
17310-09Le mois de septembre de l'année 17310
2019-01Le mois de janvier de l'année 2019
1993-11Le mois de novembre de l'année 1993
0571-04Le mois d'avril de l'année 571
0001-07Le mois de juillet de l'an 1
- -

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.

- -

Représentation des dates

- -

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 ("-" ou U+002D) suivi du numéro du jour dans le mois sur deux chiffres.

- - - - - - - - - - - - - - - - - - - - - - - - - - - -
Exemples de chaînes de caractères valides pour représenter des dates
Chaîne de caractèresDate complète
1993-11-011er novembre 1993
1066-10-1414 octobre 1066
0571-04-2222 avril 571
0062-02-055 février 62
- -

Représentation des heures

- -

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 a minima d'une valeur sur deux chiffres représentant une heure, suivi de deux-points (":", 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 (".", U+002E) après les secondes, suivi d'une valeur sur un, deux ou trois chiffres.

- -

Voici quelques règles supplémentaires :

- -
    -
  • L'heure est toujours exprimée selon une horloge sur 24 heures où 00 correspond à minuit et où 23 correspond à onze heures du soir. Aucune valeur en dehors de l'intervalle 00–23 n'est autorisée.
    • -
  • La valeur représentant les minutes doit être composée de deux chiffres et être située entre 00 et 59. Les valeurs en dehors de cet intervalle ne sont pas autorisées.
    • -
  • 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).
    • -
  • Si les secondes sont exprimées, leur nombre doit être entre 00 et 59. Il n'est pas possible d'indiquer des secondes intercalaires à l'aide de valeurs telles que 60 ou 61.
    • -
  • Si le nombre de secondes est indiqué et que c'est un entier, il ne doit pas être suivi d'un point.
    • -
  • Si les millisecondes sont indiquées, la valeur correspondante peut être composée d'un à trois chiffres.
    • -
- - - - - - - - - - - - - - - - - - - - - - - -
Exemples de chaînes de caractères valides pour exprimer une heure
Chaîne de caractèresHeure
00:00:30.75Minuit passé de 30 secondes et 750 millisecondes
12:15Midi passé de quinze minutes
13:44:2513 heures 44 et 25 secondes
- -

Représentation des dates et heures locales

- -

Une chaîne de caractères datetime-local se compose d'une chaîne de caractères représentant une date, suivie de la lettre "T" 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.

- -

Lorsqu'on définit la valeur de l'attribut {{htmlattrxref("value", "input")}} d'un champ datetime-local, 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 :00).

- - - - - - - - - - - - - - - - - - - - - - - - - - - -
Exemples de chaînes de caractères valides pour l'expression de dates/heures
Chaîne de caractèresVersion normaliséeDate et heure correspondantes
1986-01-28T11:38:00.011986-01-28T11:38:00.0128 janvier 1986 à 11 heures et 38 minutes passées de 10 millisecondes
1986-01-28 11:38:00.0101986-01-28T11:38:00.01128 janvier 1986 à 11 heures et 38 minutes passées de 10 millisecondes
0170-07-31T22:00:000170-07-31T22:00231 juillet 170 à 22 heures
- -
    -
  1. 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 "T" et le zéro de terminaison a été supprimé pour raccourcir la chaîne de l'heure.
    2. -
  2. On notera que la forme normalisée de cette date ne contient pas l'expression des secondes.
    3. -
- -

Représentation des dates et heures universelles

- -

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.

- -

Chaîne de caractères exprimant le décalage horaire

- -

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 :

- -
    -
  • 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 Z 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).
    • -
  • 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°.
    • -
- -

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 "Z", sinon, on construira le complément de la façon suivante :

- -
    -
  1. Un caractère indiquant le signe du décalage : le plus ("+" ou U+002B) pour les fuseaux situés à l'est du méridien ou le moins ("-" ou U+002D) pour les fuseaux situés à l'ouest.
    2. -
  2. Deux chiffres indiquant le nombre d'heures de décalage par rapport au méridien. Cette valeur doit être comprise entre 00 et 23.
    3. -
  3. Deux-points (":") (nécessaires uniquement si le décalage contient des minutes)
    4. -
  4. Deux chiffres indiquant les minutes de décalage. Cette valeur doit être comprise entre 00 et 59.
    5. -
- -

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 00, 30 ou 45. Cela peut en théorie évoluer à tout moment car les pays sont libres de modifier leur fuseau horaire quand ils le souhaitent.

- - - - - - - - - - - - - - - - - - - - - - - - - - - -
Exemples de chaînes de caractères valides pour l'expression de dates/heures universelles
Chaîne de caractèresDate/heure universelleDate/heure sur le méridien solaire
2005-06-07T00:00Z7 juin 2005 à minuit UTC7 juin 2005 à minuit
1789-08-22T12:30:00.1-04:0022 août 1789 à midi trente (passé d'un dixième de seconde) selon l'heure avancée de l'Est (Eastern Daylight Time (EDT))22 août 1789 à 16 heures trente passées d'un dixième de seconde
3755-01-01 00:00+10:001er janvier 3755 à minuit pour le fuseau AEST (Australian Eastern Standard Time)31 décembre 3754 à 14h
- -

Voir aussi

- - diff --git a/files/fr/web/html/global_attributes/accesskey/index.html b/files/fr/web/html/global_attributes/accesskey/index.html new file mode 100644 index 0000000000..e53f876ed8 --- /dev/null +++ b/files/fr/web/html/global_attributes/accesskey/index.html @@ -0,0 +1,143 @@ +--- +title: accesskey +slug: Web/HTML/Attributs_universels/accesskey +tags: + - Attribut + - Attribut universel + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/accesskey +--- +
{{HTMLSidebar("Global_attributes")}}
+ +
L'attribut universel accesskey fournit une indication afin de générer un raccourci clavier pour l'élément courant. La valeur de cet attribut est une liste de caractères (un caractère étant ici un seul point de code Unicode) séparés par des espaces. Le navigateur utilisera le premier caractère qui est disponible selon la disposition du clavier utilisée.
+ +
{{EmbedInteractiveExample("pages/tabbed/attribute-accesskey.html","tabbed-shorter")}}
+ + + +

La combinaison de touches utilisée pour le raccourci clavier dépend du navigateur et du système d'exploitation utilisés.

+ +
+

Note : La spécification WHATWG indique qu'il est possible d'indiquer des caractères séparés par plusieurs espaces, auquel cas le navigateur considèrera le premier qu'il prend en charge. Toutefois, cela ne fonctionne pas dans la plupart des navigateurs. Pour IE/Edge, c'est la première valeur prise en charge qui sera utilisée si celle-ci n'entre pas en conflit avec d'autres commandes.

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
WindowsLinuxMac
FirefoxAlt + Shift + touche +

Pour Firefox 57 et les versions ultérieures : Control + Option + touche ou Control + Alt + touche
+ Pour Firefox 14 et les versions ultérieures : Control + Alt + touche
+ Pour Firefox 13 et les versions antérieures : Control + touche

+
EdgeAlt + toucheN/A
Internet ExplorerAlt + toucheN/A
Google ChromeAlt + toucheControl + Alt + touche
SafariAlt + toucheN/AControl + Alt + touche
Opera 15+Alt + keyControl + Alt + key
Opera 12Shift + Esc ouvre une liste de contenu accessible via la touche accesskey, on peut alors ensuite choisir l'élément voulu grâce la touche touche
+ +

Accessibilité

+ +

Au-delà de la prise en charge limitée des navigateurs, accesskey pose plusieurs problèmes :

+ +
    +
  • Un raccourci défini avec accesskey peut rentrer en conflit avec un raccourci du système ou du navigateur, voire avec un raccourci d'un outil d'assistance. Les raccourcis pouvant être différents entre les navigateurs, systèmes d'exploitation et les outils, il n'est pas certain qu'une combinaison qui fonctionne dans un cas puisse fonctionner partout.
    • +
  • Certains raccourcis définis avec accesskey peuvent ne pas être utilisés avec certains claviers, notamment lorsqu'on doit prendre en compte l'internationalisation.
    • +
  • Les raccourcis définis avec accesskey qui utilisent un nombre peuvent être source de confusion pour les personnes souffrant de problèmes cognitifs si le nombre n'a pas d'association logique avec la fonctionnalité déclenchée par le raccourci.
    • +
  • Il est nécessaire d'informer l'utilisateur qu'un raccourci est présent afin que celui-ci puisse être conscient de cette fonctionnalité. Sans méthode d'information, l'utilisateur pourra accidentellement déclencher les raccourcis définis avec accesskey.
    • +
+ +

Étant donné ces raisons, il est généralement conseillé de ne pas utiliser accesskey pour les sites web et applications généralistes.

+ + + +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('HTML5.2', "editing.html#the-accesskey-attribute", "accesskey")}}{{Spec2('HTML5.2')}}Un comportement plus réaliste est défini et correspond à ce qui est réellement implémenté.
{{SpecName('HTML WHATWG', "interaction.html#the-accesskey-attribute", "accesskey")}}{{Spec2('HTML WHATWG')}}Aucune modification depuis {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "editing.html#the-accesskey-attribute", "accesskey")}}{{Spec2('HTML5.1')}}Aucune modification depuis {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "editing.html#the-accesskey-attribute", "accesskey")}}{{Spec2('HTML5 W3C')}}Plusieurs caractères peuvent être définis via cet attribut depuis {{SpecName('HTML4.01')}}. Cet attribut peut désormais être défini sur n'importe quel élément.
{{SpecName('HTML4.01', "interact/forms.html#h-17.11.2", "accesskey")}}{{Spec2('HTML4.01')}}L'attribut est uniquement pris en charge par {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("label")}}, {{HTMLElement("legend")}} et {{HTMLElement("textarea")}}.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("html.global_attributes.accesskey")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/html/global_attributes/autocapitalize/index.html b/files/fr/web/html/global_attributes/autocapitalize/index.html new file mode 100644 index 0000000000..206412edde --- /dev/null +++ b/files/fr/web/html/global_attributes/autocapitalize/index.html @@ -0,0 +1,49 @@ +--- +title: autocapitalize +slug: Web/HTML/Attributs_universels/autocapitalize +tags: + - Attribut + - Attribut universel + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/autocapitalize +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

L'attribut universel autocapitalize est un attribut à valeurs contraintes qui contrôle la façon dont le texte saisi est automatiquement converti en majuscules ou non. Voici les valeurs autorisées pour cet attribut :

+ +
    +
  • off ou none : aucune transformation automatique n'est appliquée (par défaut, les lettres sont écrites en minuscules)
    • +
  • on ou sentences : la première lettre de chaque phrase est automatiquement écrite en majuscule, les autres lettres ne sont pas transformées (elles sont par défaut en minuscules)
    • +
  • words : la première lettre de chaque mot est automatiquement écrite en majuscule, les autres lettres ne sont pas transformées (elles sont par défaut en minuscules)
    • +
  • characters : toutes les lettres sont converties en majuscules.
    • +
+ +

L'attribut autocapitalize n'a aucun impact lorsqu'on utilise un clavier physique. Il modifie la saisie pour les autres moyens de saisie tels que les claviers virtuels ou les moyens de saisie orale. Le but de cet attribut est d'aider de tels moyens à faciliter la saisie de l'utilisateur. Par défaut, un tel moyen de saisie utilisera une majuscule pour chaque début de phrase, modifier l'attribut autocapitalize permet aux auteurs de modifier ce comportement selon les différents éléments.

+ +

L'attribut autocapitalize n'entraînera pas de mise en majuscule automatique pour un élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type", "input")}} vaut url, email ou password.

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', "interaction.html#autocapitalization", "autocapitalize")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("html.global_attributes.autocapitalize")}}

diff --git a/files/fr/web/html/global_attributes/class/index.html b/files/fr/web/html/global_attributes/class/index.html new file mode 100644 index 0000000000..6204b6a173 --- /dev/null +++ b/files/fr/web/html/global_attributes/class/index.html @@ -0,0 +1,63 @@ +--- +title: class +slug: Web/HTML/Attributs_universels/class +tags: + - Attribut + - Attribut universel + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/class +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

L'attribut universel class indique une liste de classes associées à l'élément courant. Les classes permettent de manipuler les éléments, via CSS ou JavaScript en utilisant les sélecteurs de classe ou des fonctions telles que {{domxref("document.getElementsByClassName")}}.

+ +
{{EmbedInteractiveExample("pages/tabbed/attribute-class.html","tabbed-standard")}}
+ + + +

Bien que la spécification ne précise aucune contrainte quant aux noms utilisés pour les classes, une bonne pratique consiste à utiliser des noms qui traduisent la sémantique de l'élément plutôt que la mise en forme. Ainsi, les noms sémantiques restent pertinents même lorsque la présentation de la page évolue.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', "dom.html#classes", "class")}}{{Spec2('HTML WHATWG')}}Aucune modification depuis {{SpecName('HTML5.1')}}.
{{SpecName('HTML5.1', "dom.html#element-attrdef-global-class", "class")}}{{Spec2('HTML5.1')}}État selon {{SpecName('HTML WHATWG')}}. Aucune modification depuis {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "dom.html#classes", "class")}}{{Spec2('HTML5 W3C')}}État selon {{SpecName('HTML WHATWG')}}. class est désormas sun attribut universel depuis {{SpecName('HTML4.01')}},.
{{SpecName('HTML4.01', "struct/global.html#h-7.5.2", "class")}}{{Spec2('HTML4.01')}}Cet attribut est pris en charge sur tous les éléments à l'exception de {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}} et {{HTMLElement("title")}}.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("html.global_attributes.class")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/html/global_attributes/contenteditable/index.html b/files/fr/web/html/global_attributes/contenteditable/index.html new file mode 100644 index 0000000000..1f805fc490 --- /dev/null +++ b/files/fr/web/html/global_attributes/contenteditable/index.html @@ -0,0 +1,85 @@ +--- +title: contenteditable +slug: Web/HTML/Attributs_universels/contenteditable +tags: + - Attribut + - Attribut universel + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/contenteditable +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

L'attribut universel contenteditable est un attribut à valeur contrainte qui indique si l'élément courant doit pouvoir être édité par l'utilisateur ou non. Lorsque c'est le cas, des éléments de l'interface du navigateur (ou de l'agent utilisateur) sont modifiés afin de permettre l'édition.

+ +
{{EmbedInteractiveExample("pages/tabbed/attribute-contenteditable.html","tabbed-shorter")}}
+ + + +

Les valeurs autorisées pour cet attribut sont :

+ +
    +
  • true ou la chaîne de caractères vide qui indiquent que l'élément est éditable
    • +
  • false qui indique que l'élément ne peut pas être édité.
    • +
+ +

Si cet attribut n'est pas défini, sa valeur est héritée depuis son élément parent.

+ +

Cet attribut n'est pas un attribut booléen ! Cela signifie qu'une valeur explicite est nécessaire pour son fonctionnement. Toute forme telle que <label contenteditable>Exemple</label> n'est pas autorisée. La version correcte sera <label contenteditable="true">Exemple</label>.

+ +

Il est possible de modifier la couleur du symbole d'insertion grâce à la propriété CSS {{cssxref("caret-color")}}.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("HTML Editing", "contentEditable.html#contenteditable", "contenteditable")}}{{Spec2("HTML Editing")}}Ajout de "events", "caret", "typing", "plaintext-only".
{{SpecName("HTML WHATWG", "editing.html#attr-contenteditable", "contenteditable")}}{{Spec2("HTML WHATWG")}}Aucune modification depuis la dernière dérivation, {{SpecName("HTML5.2")}}
{{SpecName("HTML5.2", "editing.html#making-document-regions-editable-the-contenteditable-content-attribute", "contenteditable")}}{{Spec2("HTML5.2")}}Dérivation de {{SpecName("HTML WHATWG")}}, aucune modification depuis {{SpecName("HTML5.1")}}
{{SpecName("HTML5.1", "editing.html#making-document-regions-editable-the-contenteditable-content-attribute", "contenteditable")}}{{Spec2("HTML5.1")}}Dérivation de {{SpecName("HTML WHATWG")}}, aucune modification depuis {{SpecName("HTML5 W3C")}}
{{SpecName("HTML5 W3C", "editing.html#attr-contenteditable", "contenteditable")}}{{Spec2("HTML5 W3C")}}Dérivation de {{SpecName("HTML WHATWG")}}, définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("html.global_attributes.contenteditable")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/html/global_attributes/contextmenu/index.html b/files/fr/web/html/global_attributes/contextmenu/index.html new file mode 100644 index 0000000000..187be1f1cc --- /dev/null +++ b/files/fr/web/html/global_attributes/contextmenu/index.html @@ -0,0 +1,118 @@ +--- +title: contextmenu +slug: Web/HTML/Attributs_universels/contextmenu +tags: + - Attribut + - Attribut universel + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/contextmenu +--- +
{{HTMLSidebar("Global_attributes")}}{{obsolete_header}}
+ +
+

Attention ! Cet attribut est obsolète et sera retiré de l'ensemble des navigateurs.

+
+ +

L'attribut universel contextmenu correspond à l'{{htmlattrxref("id","","identifiant",1)}} d'un élément {{HTMLElement("menu")}} qu'on souhaite utiliser comme menu contextuel pour l'élément courant.

+ +

Un menu contextuel est un menu qui apparaît suite à une action utilisateur (par exemple un clic-droit). HTML5 permet désormais de personnaliser ce menu.

+ +
+

Exemples

+ +

Voici quelques exemples de personnalisations de menus. Le code HTML pourra être :

+ +

HTML

+ +
<body contextmenu="share">
+  <menu type="context" id="share">
+    <menu label="Partager">
+      <menuitem label="Twitter" onclick="shareViaTwitter()"></menuitem>
+      <menuitem label="Facebook" onclick="shareViaFacebook()"></menuitem>
+    </menu>
+  </menu>
+  <ol>
+    <li>
+      Dans cet exemple, vous pouvez partager un lien vers
+      cette page sur Facebook et/ou Twitter via le groupe Partager
+      du menu contextuel
+    </li>
+    <li>Sur cette ligne : on peut partager la page sur Twitter ou Facebook grâce au menu Partager du menu contextuel.</li>
+    <li><pre contextmenu="changeFont" id="fontSizing">Sur cette ligne : on peut changer la taille de la police en utilisant les options "Augmenter/Réduire la taille de la police" du menu contextuel</pre></li>
+    <menu type="context" id="changeFont">
+      <menuitem label="Augmenter la taille de la police" onclick="incFont()"></menuitem>
+      <menuitem label="Réduire la taille de la police" onclick="decFont()"></menuitem>
+    </menu>
+    <li contextmenu="ChangeImage" id="changeImage">Sur cette ligne : on peut  utiliser l'option "Changer l'image" du menu.</li><br />
+    <img src="https://developer.mozilla.org/media/img/promote/promobutton_mdn5.png" contextmenu="ChangeImage" id="promoButton" />
+    <menu type="context" id="ChangeImage">
+      <menuitem label="Changer l'image" onclick="changeImage()"></menuitem>
+    </menu>
+  </ol>
+</body>
+
+ +

JavaScript

+ +
function shareViaTwitter() {
+  window.open("https://twitter.com/intent/tweet?text=" +
+      "Je découvre ContextMenu avec MDN.");
+}
+
+function shareViaFacebook() {
+  window.open("https://facebook.com/sharer/sharer.php?u=" +
+      "https://developer.mozilla.org/fr/docs/Web/HTML/Attributs_universels/contextmenu");
+}
+function incFont(){
+  document.getElementById("fontSizing").style.fontSize="larger";
+}
+
+function decFont(){
+  document.getElementById("fontSizing").style.fontSize="smaller";
+}
+
+function changeImage(){
+  var j = Math.ceil((Math.random()*39)+1);
+  document.images[0].src="https://developer.mozilla.org/media/img/promote/promobutton_mdn" + j + ".png";
+}
+ +

Résultat

+ +
{{EmbedLiveSample("Exemples",600,500)}}
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("HTML WHATWG", "obsolete.html#attr-contextmenu", "contextmenu")}}{{Spec2('HTML WHATWG')}}Rendu obsolète
{{SpecName('HTML5.1', "interactive-elements.html#context-menus", "contextmenu")}}{{Spec2('HTML5.1')}}Dérivation de {{SpecName('HTML WHATWG')}}, définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("html.global_attributes.contextmenu")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/html/global_attributes/data-_star_/index.html b/files/fr/web/html/global_attributes/data-_star_/index.html new file mode 100644 index 0000000000..d8befa7a2f --- /dev/null +++ b/files/fr/web/html/global_attributes/data-_star_/index.html @@ -0,0 +1,83 @@ +--- +title: data-* +slug: Web/HTML/Attributs_universels/data-* +tags: + - Attribut + - Attribut universel + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/data-* +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

Les attributs universels data-* forment une classe d'attributs, appelés attributs de données (data attributes). Ils permettent d'échanger des données propriétaire entre le HTML et la représentation du DOM, qu'on peut manipuler avec des scripts.

+ +
{{EmbedInteractiveExample("pages/tabbed/attribute-data.html","tabbed-standard")}}
+ + + +

De tels attributs sont disponibles via l'interface {{domxref("HTMLElement")}} de l'élément pour lequel l'attribut est utilisé. La propriété {{domxref("HTMLElement.dataset")}} permet d'accéder à l'attribut.
+ Ici, l'astérisque (*) peut être remplacée par n'importe quel nom valide selon les règles appliquées aux noms XML et en respectant les contraintes suivantes :

+ +
    +
  • Le nom ne peut pas commencer par xml, quelle que soit la casse utilisée pour les différentes lettres
    • +
  • Le nom ne doit pas contenir de point-virgule (U+003A)
    • +
  • Le nom ne doit pas contenir de lettres majuscules de l'alphabet latin (A à Z).
    • +
+ +

La propriété {{domxref("HTMLElement.dataset")}} est un objet {{domxref("StringMap")}} et la valeur d'un attribut de donnée nommé data-test-valeur sera accessible via HTMLElement.dataset.testValeur car les tirets (U+002D) sont remplacés par la majuscule de la lettre suivante (CamelCase).

+ +

Utilisation

+ +

Lorsqu'on ajoute des attributs de données data-*, on peut utiliser les éléments HTML classiques afin d'en faire des objets complexes et puissants. Ainsi, un sprite d'un vaisseau spatial dans un jeu peut être modélisé via un élément {{HTMLElement("img")}} auquel on associe un attribut class et plusieurs attributs de données sous la forme data-*.

+ +
<img class="spaceship cruiserX3" src="shipX3.png"
+     data-ship-id="324" data-weapons="laserI laserII"
+     data-x="414354" data-y="85160" data-z="31940"
+     onclick="spaceships[this.dataset.shipId].blasted()">
+</img>
+
+ +

Pour un tutoriel plus avancé à propos des attributs de données HTML, lire l'article Manipuler les attributs de données.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', "dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes", "data-*")}}{{Spec2('HTML WHATWG')}}Pas de modification depuis la dernière dérivation, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes", "data-*")}}{{Spec2('HTML5.1')}}Dérivée de {{SpecName('HTML WHATWG')}}, pas de changement depuis {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes", "data-*")}}{{Spec2('HTML5 W3C')}}Dérivée de {{SpecName('HTML WHATWG')}}, définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("html.global_attributes.data_attributes")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/html/global_attributes/dir/index.html b/files/fr/web/html/global_attributes/dir/index.html new file mode 100644 index 0000000000..5cf187f35e --- /dev/null +++ b/files/fr/web/html/global_attributes/dir/index.html @@ -0,0 +1,90 @@ +--- +title: dir +slug: Web/HTML/Attributs_universels/dir +tags: + - Attribut + - Attribut universel + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/dir +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

L'attribut universel dir est un attribut à valeur contrainte qui indique la direction du texte contenu dans l'élément.

+ +
{{EmbedInteractiveExample("pages/tabbed/attribute-dir.html","tabbed-standard")}}
+ + + +

Les valeurs autorisées pour cet attribut sont :

+ +
    +
  • ltr : qui signifie left to right (gauche à droite), utilisé pour les langages écrits de gauche à droite (comme le français ou l'anglais par exemple)
    • +
  • rtl : qui signifie right to left (droite à gauche), utilisé pour les langages écrits de droite à gauche (comme l'arabe par exemple)
    • +
  • auto : qui délègue la décision à l'agent utilisateur. L'algorithme utilisé est relativement simple : le contenu textuel est analysé et lorsque le premier caractère possédant une direction « forte » est rencontré, cette direction est prise pour l'ensemble de l'élément.
    • +
+ +
+

Notes d'utilisation :
+ Cet attribut est obligatoire pour l'élément {{HTMLElement("bdo")}}, pour lequel l'attribut a une sémantique différente.

+ +
    +
  • +

    La valeur de l'attribut n'est pas héritée par l'élément {{HTMLElement("bdi")}}. S'il n'est pas défini, la valeur par défaut sera auto.

    +
    • +
  • +

    Cet attribut peut être surchargé par les propriétés CSS {{cssxref("direction")}} et {{cssxref("unicode-bidi")}}, (qui sont appliquées si une page CSS est active et que l'élément courant prend en charge ces propriétés).

    +
    • +
  • +

    La direction du texte est généralement liée à la sémantique du contenu et non à sa présentation. Il est donc recommandé d'utiliser cet attribut plutôt que des propriétés CSS quand la direction n'est pas lié à une quelconque mise en forme. Ainsi, le texte sera affiché correctement, y compris si le navigateur ne supporte pas ces propriétés CSS ou si CSS est désactivé.

    +
    • +
  • +

    La valeur auto doit être utilisée pour des données dont la direction est inconnue (comme par exemple des données provenant d'une saisie utilisateur).

    +
    • +
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', "dom.html#the-dir-attribute", "dir")}}{{Spec2('HTML WHATWG')}}Aucun changement depuis la dernière dérivation, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "dom.html#the-dir-attribute", "dir")}}{{Spec2('HTML5.1')}}Dérivée de {{SpecName('HTML WHATWG')}}, aucun changement de {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "dom.html#the-dir-attribute", "dir")}}{{Spec2('HTML5 W3C')}}Dérivée de {{SpecName('HTML WHATWG')}}, à partir de {{SpecName('HTML4.01')}} la valeur auto a été ajoutée et l'attribut est un attribut global à part entière.
{{SpecName('HTML4.01', "dirlang.html#h-8.2", "dir")}}{{Spec2('HTML4.01')}}Attribut pris en charge pour tous les éléments à l'exception {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}, et {{HTMLElement("script")}}.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("html.global_attributes.dir")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/html/global_attributes/draggable/index.html b/files/fr/web/html/global_attributes/draggable/index.html new file mode 100644 index 0000000000..fe5d5cf514 --- /dev/null +++ b/files/fr/web/html/global_attributes/draggable/index.html @@ -0,0 +1,71 @@ +--- +title: draggable +slug: Web/HTML/Attributs_universels/draggable +tags: + - Attribut + - Attribut universel + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/draggable +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

L'attribut universel draggable est un attribut à valeur contrainte qui indique si l'élément peut être déplacé avec la souris dans un geste de glisser-déposer lorsqu'on utilise l'API Drag & Drop ou les fonctionnalités natives du navigateur. Les valeurs autorisées pour cet attribut sont les suivantes :

+ +
    +
  • true : qui indique que l'élément peut être déplacé à la souris
    • +
  • false : qui indique que l'élément ne peut pas être déplacé à la souris
    • +
+ +

Si l'attribut n'est pas défini, la valeur par défaut sera auto : le comportement de l'élément sera celui spécifié par défaut par le navigateur.

+ +

Cet attribut est un attribut à valeur contrainte, ce n'est pas un attribut booléen. Il faut donc utiliser une valeur explicite true ou false. La notation raccourcie <img draggable>(utilisant uniquement le nom de l'attribut) ne fonctionnera pas :

+ +
<label draggable>Label exemple</label>
+ +

En revanche, on pourra correctement utiliser :

+ +
<label draggable="true">Label exemple</label>
+ +

Par défaut, seules les sélections de texte, les images et les liens peuvent être déplacés à la souris. Pour les autres éléments, il faudra définir le gestionnaire d'événements pour {{domxref('GlobalEventHandlers.ondragstart','ondragstart')}} afin de faire fonctionner le glisser-déposer. Cela est illustré dans cet exemple.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("HTML WHATWG", "interaction.html#the-draggable-attribute", "draggable")}}{{Spec2("HTML WHATWG")}}Aucune modification depuis la dernière dérivation de {{SpecName('HTML5.1')}}
{{SpecName("HTML5.2", "interaction.html#the-draggable-attribute", "draggable")}}{{Spec2("HTML5.2")}}Aucune modification
{{SpecName("HTML5.1", "editing.html#the-draggable-attribute", "draggable")}}{{Spec2("HTML5.1")}}Dérivation de {{SpecName('HTML WHATWG')}}, définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("html.global_attributes.draggable")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/html/global_attributes/hidden/index.html b/files/fr/web/html/global_attributes/hidden/index.html new file mode 100644 index 0000000000..c14d208620 --- /dev/null +++ b/files/fr/web/html/global_attributes/hidden/index.html @@ -0,0 +1,69 @@ +--- +title: hidden +slug: Web/HTML/Attributs_universels/hidden +tags: + - Attribut + - Attribut universel + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/hidden +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

L'attribut universel hidden est un attribut booléen qui indique s'il n'est pas encore ou s'il n'est plus pertinent d'afficher l'élément courant. Cet attribut peut, par exemple, être utilisé afin de masquer des éléments tant que l'utilisateur ne s'est pas connecté. Le navigateur n'affichera pas les éléments masqués via cet attribut.

+ +
{{EmbedInteractiveExample("pages/tabbed/attribute-hidden.html","tabbed-shorter")}}
+ + + +

Cet attribut ne doit pas être utilisé pour masquer du contenu qui devrait pouvoir être vu sous une autre présentation. Si un contenu est marqué comme masqué, il sera masqué pour l'ensemble des présentations, y compris pour les lecteurs d'écran et autres outils d'assistance.

+ +

Les éléments cachés avec hidden ne devraient pas avoir de lien qui pointent vers eux depuis des éléments visibles. De plus, les éléments fils de l'élément caché sont toujours actifs : cela signifie qu'ils peuvent être utilisés par les scripts et que les formulaires peuvent envoyer des données. Dans certains autres contextes, il est possible d'avoir des relations avec les éléments cachés via hidden.

+ +

Par exemple, on peut utiliser l'attribut ARIA aria-describedby pour faire référence à une description qui serait cachée (si cette dernière n'est pas pertinente seule). De même un élément {{HTMLElement("canvas")}} caché peut être utilisé comme un buffer hors champ par moteur graphique scripté.

+ +
+

Note : Cet attribut sera surchargé par la propriété CSS {{cssxref("display")}}. Ainsi, un élément dont le style a display: flex sera affiché à l'écran, même si l'attribut hidden est présent.

+
+ + + +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', "interaction.html#the-hidden-attribute", "hidden")}}{{Spec2('HTML WHATWG')}}Aucune modification depuis {{SpecName('HTML5.1')}}
{{SpecName('HTML WHATWG', "rendering.html#hiddenCSS", "Hidden elements")}}{{Spec2('HTML WHATWG')}}Définit le rendu par défaut suggéré en CSS lorsque l'attribut hidden est utilisé.
{{SpecName('HTML5.1', "editing.html#the-hidden-attribute", "hidden")}}{{Spec2('HTML5.1')}}Dérivée de {{SpecName('HTML WHATWG')}}. La définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("html.global_attributes.hidden")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/html/global_attributes/id/index.html b/files/fr/web/html/global_attributes/id/index.html new file mode 100644 index 0000000000..a08d5e0dce --- /dev/null +++ b/files/fr/web/html/global_attributes/id/index.html @@ -0,0 +1,72 @@ +--- +title: id +slug: Web/HTML/Attributs_universels/id +tags: + - Attribut + - Attribut universel + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/id +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

L'attribut universel id définit un identifiant qui doit être unique pour l'ensemble du document. Le but de cet attribut est de pouvoir identifier un élément lorsqu'on crée un lien, avec un fragment et qu'on souhaite le manipuler avec un script ou qu'on le met en forme avec CSS.

+ +
{{EmbedInteractiveExample("pages/tabbed/attribute-id.html","tabbed-shorter")}}
+ + + +
+

Note : La valeur de cet attribut est une chaîne de caractère « opaque ». Cela signifie que cet attribut ne doit pas être utilisé pour transporter de l'information. Les informations sur la signification de l'élément dans le document ne doivent pas être portées par la valeur de cet attribut.

+
+ +

La valeur de cet attribut ne doit pas contenir de blancs (espaces, tabulation, etc.). Les navigateurs interprèteront les identifiants avec des espaces comme si l'espace faisait partie de l'identifiant. Ce comportement est différent de celui de l'attribut {{htmlattrxref("class")}} qui permet d'avoir des valeurs séparées par des espaces. Les éléments ne peuvent avoir qu'un seul identifiant défini via l'attribut id.

+ +
+

Note : L'utilisation de caractères non-ASCII ou qui ne sont pas des chiffres latins ou'_', '-' et '.' peut entraîner des problèmes de compatibilité car ils n'étaient pas autorisé avec HTML 4. Bien que cette restriction n'existe plus avec HTML 5, un identifiant devrait toujours commencer par une lettre pour une meilleure compatibilité.

+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', "dom.html#the-id-attribute", "id")}}{{Spec2('HTML WHATWG')}}Aucun changement depuis la dernière dérivation, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "dom.html#the-id-attribute", "id")}}{{Spec2('HTML5.1')}}Dérivée de {{SpecName('HTML WHATWG')}}, aucun changement depuis {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "dom.html#the-id-attribute", "id")}}{{Spec2('HTML5 W3C')}}Dérivée de {{SpecName('HTML WHATWG')}}, les caractères '_', '-' et '.' sont désormais acceptés s'ils ne sont pas utilisés au début de l'identifiant. Cet attribut devient un attribut global à part entière.
{{SpecName('HTML4.01', 'struct/global.html#adef-id', 'id')}}{{Spec2('HTML4.01')}}Pris en charge par tous les éléments sauf {{HTMLElement("base")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, et {{HTMLElement("title")}}.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("html.global_attributes.id")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/html/global_attributes/index.html b/files/fr/web/html/global_attributes/index.html new file mode 100644 index 0000000000..779e617a3d --- /dev/null +++ b/files/fr/web/html/global_attributes/index.html @@ -0,0 +1,196 @@ +--- +title: Les attributs universels +slug: Web/HTML/Attributs_universels +tags: + - Attribut + - Attribut universel + - HTML + - Reference + - Web +translation_of: Web/HTML/Global_attributes +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

Les attributs universels sont des attributs communs à l'ensemble des éléments HTML. Ces attributs peuvent donc être ajoutés sur tous les éléments (dans certains cas, les attributs n'auront aucun effet).

+ +

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.

+ +

En plus des attributs universels HTML, il existe également les attributs universels suivants :

+ +
    +
  • {{htmlattrdef("xml:lang")}} et {{htmlattrdef("xml:base")}} : ces attributs proviennent des spécifications XHTML. Ils sont désormais dépréciés mais conservés pour des raisons de compatibilité.
    • +
  • Les nombreux attributs aria-* utilisés afin d'améliorer l'accessibilité.
    • +
  • Les attributs utilisés pour les gestionnaires d'événements déclarés directement sur les éléments : onabort, onautocomplete, onautocompleteerror, onblur, oncancel, oncanplay, oncanplaythrough, onchange, onclick, onclose, oncontextmenu, oncuechange, ondblclick, ondrag, ondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, onerror, onfocus, oninput, oninvalid, onkeydown, onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onpause, onplay, onplaying, onprogress, onratechange, onreset, onresize, onscroll, onseeked, onseeking, onselect, onshow, onsort, onstalled, onsubmit, onsuspend, ontimeupdate, ontoggle, onvolumechange, onwaiting.
    • +
+ +

Liste des attributs universels

+ +
+
{{htmlattrdef("accesskey")}}
+
Cet attribut fournit une indication permettant de générer un raccourci clavier pour l'élément courant. Cet attribut se compose d'une liste de caractères séparés par des espaces. Le navigateur doit utiliser le premier caractère qui existe selon la disposition du clavier utilisée.
+
{{htmlattrdef("autocapitalize")}}
+
Cet attribut contrôle la façon dont le texte saisi est automatiquement converti en majuscules. Les valeurs autorisées pour cet attribut sont : +
    +
  • off ou none : il n'y pas de convertion en majuscules réalisée.
    • +
  • on ou sentences : la première lettre de chaque phrase est écrite en majuscule par défaut. Les autres lettres sont en minuscules par défaut.
    • +
  • words : la première lettre de chaque mot est écrite en majuscule par défaut, les autres lettres sont en minuscules par défaut.
    • +
  • characters : toutes les lettres sont écrites en majuscules par défaut
    • +
+
+
{{htmlattrdef("class")}}
+
Une liste de classes, séparées par des espaces, qui permettent de catégoriser l'élément. Les classes permettent au CSS et à JavaScript de manipuler des éléments spécifiques grâce à des sélecteurs de classe (pour CSS) ou grâce à des fonctions telles que {{domxref("Document.getElementsByClassName()")}} (pour JavaScript).
+
{{htmlattrdef("contenteditable")}}
+
Un attribut à valeur contrainte qui indique si l'élément peut être édité par l'utilisateur. Si c'est le cas, le navigateur modifie l'interface utilisateur afin de permettre l'édition. Les valeur autorisées pour cet attribut sont : +
    +
  • true ou la chaîne vide : ces valeurs indiquent que l'élément doit pouvoir être édité
    • +
  • false qui indique que l'élément ne doit pas pouvoir être édité.
    • +
+
+
{{htmlattrdef("contextmenu")}}{{obsolete_inline}}
+
La valeur de cet attribut correspond à la valeur de l'attribut {{htmlattrxref("id","menu")}} d'un élément {{HTMLElement("menu")}} qui doit être utilisé comme menu contextuel par cet élément.
+
{{htmlattrdef("data-*")}}
+
Cette classe d'attribut, appelée « attributs de données personnalisés », permet d'échanger des informations dans un format propriétaire entre le HTML et le DOM afin de pouvoir les manipuler via des langage de scripts. La propriété {{domxref("HTMLElement.dataset")}} permet d'accéder à l'ensemble des attribut définis de cette façon.
+
{{htmlattrdef("dir")}}
+
Un attribut à valeur contrainte qui indique la directionnalité du texte de l'élément. Les valeurs autorisées pour cet attribut sont : +
    +
  • ltr (l'abbréviation anglaise pour Left To Right) indique que le contenu est écrit de gauche à droite (comme le français par exemple)
    • +
  • rtl (l'abbréviation anglaise pour Right To Left) indique que le contenu est écrit de droite à gauche (comme l'arabe par exemple)
    • +
  • auto : c'est l'agent utilisateur qui décide. Il utilise un algortihme qui analyse les caractères du contenu de l'élément jusqu'à trouver un caractère avec une forte directionnalité qu'il applique alors à l'ensemble de l'élément.
    • +
+
+
{{htmlattrdef("draggable")}}
+
Un attribut à valeur contrainte qui indique qu'un élément peut être glissé/déposé grâce à l'API Drag & Drop. Les valeurs autorisées pour cet attribut sont : +
    +
  • true : l'élément peut être glissé/déposé
    • +
  • false : l'élément ne peut pas être glissé/déposé.
    • +
+
+
{{htmlattrdef("dropzone")}} {{experimental_inline}}
+
Un attribut à valeur contrainte qui indique le type de contenu qui peut être déposé sur un élément grâce à l'API Drag & Drop. Les valeurs autorisées pour cet attribut sont : +
    +
  • copy : lorsque l'élément est déposé, une copie de l'élément est créée
    • +
  • move : lorsque l'élément est déposé, il est déplacé vers ce nouvel emplacement
    • +
  • link : un lien est créé vers les données qui sont déplacée.
    • +
+
+
{{htmlattrdef("exportparts")}} {{experimental_inline}}
+
Utilisé pour exporter de façon transitive certaines parties d'un arbre shadow sur un arbre réel.
+
{{htmlattrdef("hidden")}}
+
Un attribut booléen dont la valeur indique que l'élément n'est pas encore, ou n'est plus pertinent. Cet attribut peut ainsi être utilisé pour masquer les éléments d'une page qui ne peuvent pas être utilisés tant que la procédure de connexion n'est pas terminée. Le navigateur n'affichera pas les éléments pour lesquels cet attribut est utilisé. Cet attribut ne doit pas être utilisé afin de masquer du contenu qui aurait pu être affiché de façon pertinente.
+
{{htmlattrdef("id")}}
+
Cet attribut définit un identifiant, unique au sein de tout le document, ,pour un élément. Il doit permettre d'identifier un élément lorsqu'on crée un lien vers lui et/ou lorsque le manipule avec des scripts ou avec CSS.
+
{{htmlattrdef("inputmode")}}
+
Cet attribut fournit une indication au navigateur quant au type de contenu qui sera saisi dans le champ et qui aide à déterminer la configuration du clavier virtuel qui peut être affiché pour la saisie. Ce type est principalement utilisé pour les éléments {{HTMLElement("input")}} mais peut tout à fait être utilisé sur n'importe quel élément avec le mode {{htmlattrxref("contenteditable")}}.
+
{{htmlattrdef("is")}}
+
Cet attribut indique qu'un élément HTML standard devrait se comporter comme un élément personnalisé natif (voir Manipuler les custom elements pour plus d'informations).
+
{{htmlattrdef("itemid")}}
+
L'identifiant unique, global, d'un objet. Cet attribut est lié aux microdonnées.
+
{{htmlattrdef("itemprop")}}
+
Cet attribut permet d'ajouter des propriétés à un objet. Cet attribut est une paire entre un nom et une valeur. Cet attribut est lié aux microdonnées.
+
{{htmlattrdef("itemref")}}
+
Les propriétés d'un objet qui ne sont pas les éléments descendants de l'élément courant peuvent être associée via l'attribut itemscope contenant une référence vers un itemref. itemref fournit une liste d'identifiants d'éléments qui correspondent aux propriétés supplémentaires définies autre part dans le document. Cet attribut est lié aux microdonnées.
+
{{htmlattrdef("itemscope")}}
+
itemscope fonctionne généralement avec itemtype afin d'indiquer que le coded HTML contenu dans un bloc donné concerne un objet en particulier. itemscope crée l'objet et définit la portée de l'itemtype associée. itemtype est une URL valide construite à partir d'un vocabulaire (par exemple schema.org) qui décrit les objets et leurs propriétés. Cet attribut est lié aux microdonnées.
+
{{htmlattrdef("itemtype")}}
+
Cet attribut indique l'URL du vocabulaire utilisé pour définir les propriétés d'un objet. Cet attribut est lié aux microdonnées.
+
{{htmlattrdef("lang")}}
+
Cet attribut aide à définir la langue utilisée pour l'élément. Pour les éléments non-éditables, c'est la langue dans laquelle ils sont écrits et pour les éléments éditables, c'est la langue dans laquelle ils devraient être écrits. Cet attribut contient une seule valeur telle que définie dans le document IETF Tags for Identifying Languages (BCP47). L'attribut xml:lang est prioritaire par rapport à cet attribut lorsqu'il s'agit de déterminer la langue d'un élément.
+
{{htmlattrdef("part")}} {{experimental_inline}}
+
Une liste séparée par des espaces avec les noms des parties (parts) de l'élément. Les noms des parties permettent au CSS de cibler et de mettre en forme certains éléments d'un arbre shadow via le pseudo-élément {{cssxref("::part")}}.
+
{{htmlattrdef("slot")}}
+
Cet attribut affecte un créneau de l'arbre du shadow DOM pour un élément. L'élément ayant l'attribut slot est affecté au créneau créé par l'élément {{HTMLElement("slot")}} pour lequel l'attribut {{htmlattrxref("name", "slot")}} correspond à la valeur de l'attribut slot.
+
{{htmlattrdef("spellcheck")}} {{experimental_inline}}
+
Un attribut à valeur contrainte qui définit s'il faut détecter les fautes d'orthographe/grammaire dans le texte de l'élément. Les valeurs autorisées pour cet attribut sont : +
    +
  • true qui indique que, si possible, il faut vérifier les erreurs d'orthographe
    • +
  • false qui indique qu'il ne faut pas vérifier les erreurs.
    • +
+
+
{{htmlattrdef("style")}}
+
Cet attribut contient les déclarations CSS utilisées pour mettre en forme l'élément. Note : il est recommandé d'utiliser un ou plusieurs fichiers séparés, plutôt que cet attribut, pour définir les règles de mise en forme. Le rôle de l'élément {{HTMLElement("style")}} consiste à permettre une mise en forme rapide, notamment pour des tests.
+
{{htmlattrdef("tabindex")}}
+
Cet attribut à valeur entière indique l'ordre dans lequel l'élément participe à la navigation au clavier via la tabulation. Il peut prendre différente valeur : +
    +
  • une valeur négative indiquera que l'élément peut recevoir le focus mais n'est pas accessible via la navigation séquentielle au clavier
    • +
  • 0 indiquera que l'élément peut recevoir le focus et être accessible via la navigation au clavier mais l'ordre est relatif et déterminé par l'agent utilisateur
    • +
  • une valeur positive indiquera que l'élément peut recevoir le focus et qu'il est accessible via la navigation au clavier. La valeur utilisée indique l'ordre relatif de l'élément dans la navigation. Autrement dit, la navigation au clavier ira dans le sens croissant des éléments selon leurs valeurs respectives de tabindex. Si plusieurs éléments ont la même valeur, ce sera leur ordre relatif dans le document qui sera utilisé.
    • +
+
+
{{htmlattrdef("title")}}
+
Cet attribut contient une représentation textuelle de l'information auquel il est lié. Une telle information est généralement, mais pas nécessairement, affichée sous la forme d'une bulle d'informations.
+
{{htmlattrdef("translate")}} {{experimental_inline}}
+
Un attribut à valeur contrainte qui est utilisé pour définir si les valeurs des attributs et des éléments fils de type {{domxref("Text")}} doivent être traduits lorsque la page est localisée. Les valeurs autorisées pour cet attribut sont : +
    +
  • La chaîne vide ou yes qui indiquent que l'élément doit être traduit
    • +
  • no qui indique que l'élément ne sera pas traduit.
    • +
+
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("HTML WHATWG", "dom.html#global-attributes", "Global attributes")}}{{Spec2("HTML WHATWG")}}
{{SpecName("CSS Shadow Parts", "#exposing")}}{{Spec2("CSS Shadow parts")}}Ajout des attributs universels part et exportparts.
{{SpecName("HTML5.3", "dom.html#global-attributes", "Global attributes")}}{{Spec2("HTML5.3")}}
{{SpecName("HTML5.2", "dom.html#global-attributes", "Global attributes")}}{{Spec2("HTML5.2")}}Dérivation de {{SpecName("HTML WHATWG")}}. Depuis, {{SpecName("HTML5.1")}}, les attributs itemid, itemprop, itemref, itemscope et itemtype ont été ajoutés.
{{SpecName('HTML5.1', "dom.html#global-attributes", "Global attributes")}}{{Spec2('HTML5.1')}}Les attributs contextmenu, spellcheck, draggable, et dropzone ont été ajoutés depuis {{SpecName('HTML5 W3C')}}.
{{SpecName('HTML5 W3C', "dom.html#global-attributes", "Global attributes")}}{{Spec2('HTML5 W3C')}}Le concept d'attribut universel est introduit et les attributs dir, lang, style, id, class, tabindex, accesskey, title sont désormais des attributs universels.
+ xml:lang qui faisait initialement partie de XHTML est inclus dans HTML. Les attributs
+ hidden, data-*, contenteditable et translate sont ajoutés.
{{SpecName('HTML4.01')}}{{Spec2('HTML4.01')}}Aucun attribut universel n'est défini. Plusieurs attributs, devenus universels par la suite, sont définis sur un sous-ensemble d'élément.
+ class et style sont pris en charge pour tous les éléments à l'exception de {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}} et {{HTMLElement("title")}}.
+ dir est pris en charge pour tous les éléments à l'exception de {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}} et {{HTMLElement("script")}}.
+ id est pris en charge pour tous les éléments à l'exception de {{HTMLElement("base")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}} et {{HTMLElement("title")}}.
+ lang est pris en charge pour tous les éléments à l'exception de {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}} et {{HTMLElement("script")}}.
+ tabindex est uniquement pris en charge pour les éléments {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}} et {{HTMLElement("textarea")}}.
+ accesskey est uniquement pris en charge pour {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("label")}}, {{HTMLElement("legend")}} et {{HTMLElement("textarea")}}.
+ title est pris en charge pour tous les éléments à l'exception de {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}} et {{HTMLElement("title")}}.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("html.global_attributes")}}

+ +

Voir aussi

+ +
    +
  • Les interfaces {{domxref("Element")}} et {{domxref("GlobalEventHandlers")}} qui permettent de manipuler la plupart des attributs globaux.
    • +
diff --git a/files/fr/web/html/global_attributes/inputmode/index.html b/files/fr/web/html/global_attributes/inputmode/index.html new file mode 100644 index 0000000000..2babf82909 --- /dev/null +++ b/files/fr/web/html/global_attributes/inputmode/index.html @@ -0,0 +1,65 @@ +--- +title: inputmode +slug: Web/HTML/Attributs_universels/inputmode +tags: + - Attribut + - Attribut universel + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/inputmode +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

L'attribut universel inputmode est un attribut à valeur contrainte qui fournit une indication au navigateur quant au type de donnée qui peut être saisi par l'utilisateur lors de l'édition de l'élément ou de son contenu. Les valeurs autorisées sont les suivantes :

+ +
+
none
+
Aucun clavier virtuel ne doit être affiché. Cette valeur s'avère utile lorsque l'application ou le site web implémente son propre outil de saisie.
+
text
+
C'est du texte qui sera saisi et un clavier dans la locale de l'utilisateur pourra être affiché.
+
decimal
+
C'est un nombre décimal qui sera saisi. Le clavier affiché peut contenir des chiffres et le séparateur décimal de la locale de l'utilisateur. Attention, selon les appareils, le signe moins (-) peut ne pas être présent.
+
numeric
+
C'est un nombre entier qui sera saisi. Le clavier affiché peut contenir les chiffres de 0 à 9. Attention, selon les appareils, le signe moins (-) peut ne pas être présent.
+
tel
+
C'est un numéro de téléphone qui sera saisi. Le clavier affiché pourra être celui d'un téléphone avec les chiffres allant de 0 à 9, l'astérisque et le dièse. Pour les champs de formulaire où il faut saisir un numéro de téléphone, on utilisera plutôt <input type="tel">.
+
search
+
L'élément éditable sert à la recherche. Le clavier affiché sera optimisé pour une recherche (par exemple, la touche Entrée pourra être indiquée avec le mot-clé « Rechercher »).
+
email
+
C'est une adresse électronique qui sera saisie. Le clavier affiché pourra être optimisé pour la saisie d'adresses email (généralement, on aura le caractère @ et d'autres éléments). Pour les champs de formulaire où il faut saisir une adresse électronique, on utilisera plutôt <input type="email">.
+
url
+
C'est une URL qui sera saisie. Le clavier affiché pourra être optimisé pour la saisie d'URL. Ainsi, la touche pour la barre oblique pourra être plus accessible, le clavier pourra proposer un accès à l'historique des URL utilisées, etc. Pour les champs de formulaire où il faut saisir une URL, on utilisera plutôt <input type="url">.
+
+ +

Lorsque cet attribut n'est pas explicitement défini, sa valeur par défaut est "text", ce qui indique que c'est du texte qui sera saisi et qu'un clavier standard devrait être utilisé.

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("HTML WHATWG", "interaction.html#input-modalities:-the-inputmode-attribute", "inputmode")}}{{Spec2("HTML WHATWG")}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("html.global_attributes.inputmode")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/html/global_attributes/is/index.html b/files/fr/web/html/global_attributes/is/index.html new file mode 100644 index 0000000000..e460ffc4a3 --- /dev/null +++ b/files/fr/web/html/global_attributes/is/index.html @@ -0,0 +1,67 @@ +--- +title: is +slug: Web/HTML/Attributs_universels/is +tags: + - Attribut universel + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/is +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

L'attribut is est un attribut universel qui indique qu'un élément HTML standard devrait se comporter comme un élément natif personnalisé (custom element) défini (voir Manipuler les custom elements pour plus de détails).

+ +

Cet attribut peut uniquement être utilisé si l'élément personnalisé indiqué a été correctement défini dans le document courant et qu'il étend le type d'élément sur lequel il est appliqué.

+ +

Exemples

+ +

Cet exemple est tiré de l'exemple word-count-web-component (voir le résultat en live).

+ +
// On crée une classe pour l'élément
+class WordCount extends HTMLParagraphElement {
+  constructor() {
+    // On appelle super() pour récupérer l'initialisation
+    // des classes parentes
+    super();
+
+    // Le contenu du constructeur, etc.
+    ...
+
+  }
+}
+
+// On définit le nouvel élément.
+customElements.define('word-count', WordCount, { extends: 'p' });
+ +
<p is="word-count"></p>
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', "custom-elements.html#attr-is", "is")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("html.global_attributes.is")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/html/global_attributes/itemid/index.html b/files/fr/web/html/global_attributes/itemid/index.html new file mode 100644 index 0000000000..c592936a5d --- /dev/null +++ b/files/fr/web/html/global_attributes/itemid/index.html @@ -0,0 +1,116 @@ +--- +title: itemid +slug: Web/HTML/Attributs_universels/itemid +tags: + - Attribut + - Attribut universel + - HTML + - Micro-données + - Reference + - itemid +translation_of: Web/HTML/Global_attributes/itemid +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

L'attribut universel itemid permet d'identifier un objet, au sens des microdonnées, de façon unique et globale. L'attribut itemid peut uniquement être défini sur les éléments qui ont un attribut {{htmlattrxref("itemscope")}} et un attribut {{htmlattrxref("itemtype")}}. De plus, un itemid ne peut pas être défini sur des éléments dont l'attribut itemscope possède un attribut itemtype qui définit un vocabulaire qui ne prend pas en charge les identifiants globaux tels que défini dans la spécification du vocabulaire.

+ +

La signification exacte d'un identifiant global est déterminée par la spécification du vocabulaire. C'est le rôle de cette spécification d'autoriser ou non la présence de plusieurs éléments avec le même identifiant (sur une ou plusieurs pages) et de définir les règles de gestion associées.

+ +

Syntaxe

+ +

Syntaxe formelle

+ +
itemid="URN"
+ +

Note : Selon la définition du WHATWG, un itemid doit être une URL. Dans l'exemple qui suit, on utilise plutôt une URN, plus appropriée pour définir un identifiant unique comme itemid. Cette incohérence reflète l'état actuellement incomplet de la spécification sur les microdonnées.

+ +

Exemple

+ +

HTML

+ +

Un élément qui décrit un livre :

+ +
<dl itemscope
+    itemtype="http://vocab.example.net/book"
+    itemid="urn:isbn:0-330-34032-8">
+ <dt>Title <dd itemprop="title">The Reality Dysfunction
+ <dt>Author <dd itemprop="author">Peter F. Hamilton
+ <dt>Publication date
+ <dd><time itemprop="pubdate" datetime="1996-01-26">26 January 1996</time> </dl>
+
+ +

Données structurées correspondantes

+ + + + + + + + + + + + + + + + + + + + + + + + +
itemscopeitemtype: itemid +
http://vocab.example.net/book: urn:isbn:0-330-34032-8
+
itemproptitleThe Reality Dysfunction
itempropauthor +
Peter F. Hamilton
+
itemproppubdate1996-01-26
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('HTML Microdata', "#items", "itemid")}}{{Spec2('HTML Microdata')}} 
{{SpecName('HTML WHATWG', "microdata.html#attr-itemid", "itemid")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("html.global_attributes.itemid")}}

+ +

Voir aussi

+ +
    +
  • Les différents attributs universels
    • +
  • Les autres attributs universels relatifs aux microdonnées : +
      +
    • {{htmlattrxref("itemid")}}
      • +
    • {{htmlattrxref("itemprop")}}
      • +
    • {{htmlattrxref("itemref")}}
      • +
    • {{htmlattrxref("itemscope")}}
      • +
    • {{htmlattrxref("itemtype")}}
      • +
    +
    • +
diff --git a/files/fr/web/html/global_attributes/itemprop/index.html b/files/fr/web/html/global_attributes/itemprop/index.html new file mode 100644 index 0000000000..956054bb32 --- /dev/null +++ b/files/fr/web/html/global_attributes/itemprop/index.html @@ -0,0 +1,436 @@ +--- +title: itemprop +slug: Web/HTML/Attributs_universels/itemprop +tags: + - Attribut + - Attribut universel + - HTML + - Micro-données + - Microdata +translation_of: Web/HTML/Global_attributes/itemprop +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

L'attribut universel itemprop est utilisé afin d'ajouter des propriétés à un objet. C'est un attribut universel et chaque élément HTML peut donc avoir un attribut itemprop qui permettra de former un couple de nom (la valeur de l'attribut) et de valeur (la valeur de l'élément). Chacune de ces paires constitue une propriété et un groupe de propriété forme un objet (item). Les valeurs des propriétés sont généralement des chaînes de caractères ou des URL et peuvent être associées à de nombreux éléments comme {{HTMLElement("audio")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("link")}}, {{HTMLElement("object")}}, {{HTMLElement("source")}} , {{HTMLElement("track")}} et {{HTMLElement("video")}}.

+ +

Un exemple simple

+ +

HTML

+ +
<div itemscope itemtype="http://schema.org/Movie">
+  <h1 itemprop="name">Avatar</h1>
+  <span>Director:
+    <span itemprop="director">James Cameron</span>
+    (born August 16, 1954)
+  </span>
+  <span itemprop="genre">Science fiction</span>
+  <a href="../movies/avatar-theatrical-trailer.html"
+    itemprop="trailer">Trailer</a>
+</div>
+ +

Structure de données

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
 Objet
Nom pour itempropValeur pour itemprop
itempropnameAvatar
itempropdirectorJames Cameron
itempropgenreScience fiction
itemproptrailer../movies/avatar-theatrical-trailer.html
+ +

Propriétés

+ +

Les valeurs des propriétés sont généralement des chaînes de caractères ou des URL. Lorsque c'est une URL, on l'exprime grâce à l'élément {{HTMLElement("a")}} et avec son attribut href. Pour un élément {{HTMLElement("img")}}, on lira son attribut src, de même pour les autres éléments HTML qui font appel à d'autres ressources.

+ +

Trois propriétés dont les valeurs sont des chaînes simples

+ +
<div itemscope>
+ <p>My name is
+   <span itemprop="name">Neil</span>.
+ </p>
+ <p>My band is called
+   <span itemprop="band">Four Parts Water</span>.
+ </p>
+ <p>I am
+   <span itemprop="nationality">British</span>.
+ </p>
+</div>
+ +

Une propriété « image » dont la valeur est une URL

+ +
<div itemscope>
+ <img itemprop="image"
+  src="google-logo.png" alt="Google">
+</div>
+
+ +

Une propriété dont la valeur est un identifiant « machine »

+ +
<h1 itemscope>
+ <data itemprop="product-id"
+  value="9678AOU879">The Instigator 2000</data>
+</h1>
+ +

Lorsqu'une chaîne est décrite avec un format machine plutôt qu'un format « humain », on la propriété est exprimée avec la valeur de l'attribut value de l'élément {{HTMLElement("data")}} et c'est le contenu de l'élément qui fournira la valeur humainement compréhensible.

+ +

Un exemple de mesure

+ +
<div itemscope itemtype="http://schema.org/Product">
+ <span itemprop="name">
+   Panasonic White 60L Refrigerator
+ </span>
+ <img src="panasonic-fridge-60l-white.jpg" alt="">
+  <div itemprop="aggregateRating"
+       itemscope
+       itemtype="http://schema.org/AggregateRating">
+   <meter itemprop="ratingValue" min=0 value=3.5 max=5>
+     Rated 3.5/5
+   </meter>
+   (based on <span itemprop="reviewCount">11</span>
+   customer reviews)
+  </div>
+</div>
+ +

Pour les données numériques, on peut utiliser l'élément {{HTMLElement("meter")}} et la valeur de son attribut value.

+ +

Une propriété de date

+ +
<div itemscope>
+ I was born on
+ <time itemprop="birthday" datetime="2009-05-10">
+   May 10th 2009
+ </time>.
+</div>
+ +

Pour les valeurs temporelles, on utilisera les éléments {{HTMLElement("time")}} et son attribut datetime.

+ +

Imbrication de propriétés

+ +
<div itemscope>
+ <p>Name:
+   <span itemprop="name">Amanda</span>
+ </p>
+ <p>Band:
+   <span itemprop="band" itemscope>
+     <span itemprop="name">Jazz Band</span>
+    (<span itemprop="size">12</span> players)
+   </span>
+ </p>
+</div>
+ +

On peut avoir des imbrications de propriétés et utiliser l'attribut itemscope sur l'élément qui porte le groupe.

+ +

L'élément de plus haut niveau possède deux propriétés name et band. La valeur de name est Amanda et la valeur de band est un objet à part entière, composé de deux propriétés name et size. Le valeur pour name est Jazz Band et la valeur de size est 12. L'objet de plus haut niveau est un objet qui ne fait pas partie d'un autre objet.

+ +

Séparation des objets

+ +
<div itemscope id="amanda" itemref="a b"></div>
+<p id="a">Name: <span itemprop="name">Amanda</span></p>
+<div id="b" itemprop="band" itemscope itemref="c"></div>
+<div id="c">
+ <p>Band: <span itemprop="name">Jazz Band</span></p>
+ <p>Size: <span itemprop="size">12</span> players</p>
+</div>
+ +

On obtient le même résultat qu'avec l'exemple précédent. Le premier objet possède deux propriétés name (qui vaut Amanda) et band qui est défini avec un autre objet. Le deuxième objet possède deux propriétés name (qui vaut Jazz Band) et size (qui vaut 12).

+ +

Un objet avec plusieurs occurrences d'une propriété

+ +
<div itemscope>
+ <p>Flavors in my favorite ice cream:</p>
+ <ul>
+  <li itemprop="flavor">Lemon sorbet</li>
+  <li itemprop="flavor">Apricot sorbet</li>
+ </ul>
+</div>
+ +

Cet objet possède deux fois la même propriété flavor, qui prend deux valeurs Lemon sorbet et Apricot sorbet.

+ +

Deux propriétés avec la même valeur

+ +
<div itemscope>
+ <span itemprop="favorite-color favorite-fruit">
+  orange
+ </span>
+</div>
+ +

On peut définir deux propriétés au même endroit si elles prennent la même valeur.

+ +

Équivalence sémantique

+ +
<figure>
+ <img src="castle.jpeg">
+ <figcaption>
+  <span itemscope>
+    <span itemprop="name">The Castle</span>
+  </span>
+  (1986)
+ </figcaption>
+</figure>
+ +
<span itemscope>
+  <meta itemprop="name" content="The Castle">
+</span>
+<figure>
+ <img src="castle.jpeg">
+ <figcaption>The Castle (1986)</figcaption>
+</figure>
+ +

Ces deux exemples sont équivalents d'un point de vue sémantique. Tous les deux se composent d'un schéma et d'une légende et tous les deux possèdent un objet avec une propriété name qui vaut The Castle. Une différence subsiste : si l'utilisateur glisse-dépose l'élément, l'objet sera inclus dans les données. Dans les deux cas, l'image n'est pas associée à l'objet.

+ +

Les noms et les valeurs

+ +

Une propriété est un ensemble non-ordonné de composants uniques sensibles à la casse qui représentent les paires de noms/valeurs. Les valeur doit avoir au moins composant pour se rattacher à l'objet. Dans le tableau ci-après, chaque cellule correspond à un composant.

+ +

Exemples de noms

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
 Objet
nom pour itempropvaleur pour itemprop
itempropcountryIreland
itempropOption2
itemprophttps://www.flickr.com/photos/nlireland/6992065114/Ring of Kerry
itempropimghttps://www.flickr.com/photos/nlireland/6992065114/
itempropwebsiteflickr
itemprop(token)(token)
+ +

Les composants sont des chaînes de caractères ou des URL. Un objet est appelé un objet typé si c'est une URL. Les chaînes ne peuvent pas contenir de point ou de deux points.

+ +
    +
  1. Si un objet est un objet typé, il doit être : +
      +
    1. Un nom de propriété autorisé par la spécification qui définit les types pertinents pour un objet ou
      2. +
    2. Une URL valide qui est une URL absolue qui définit un nom faisant partie de la spécification du vocabulaire ou
      3. +
    3. Une URL valide qui est une URL absolue utilisée comme un nom propriétaire ou
      4. +
    +
    2. +
  2. Si un objet n'est pas un objet typé, le nom doit être : +
      +
    1. Une chaîne qui ne contient pas de caractères "." (U+002E FULL STOP) ou ":" (U+003A COLON) et qui est utilisée comme un nom « propriétaire » pour la propriété (c'est-à-dire avec un nom qui n'est pas défini dans une spécification publique).
      2. +
    +
    3. +
+ +

Note :  Les caractères « : » sont interdits pour les valeurs qui ne sont pas des URL afin de pouvoir distinguer les URL du reste. Les valeurs avec les caractères « . » sont réservés pour de futurs ajouts et les blancs ne sont pas autorisés car les valeurs seraient analysées comme plusieurs valeurs distinctes.

+ +

Valeurs

+ +

La valeur d'une propriété est définie comme le premier cas qui correspond dans cette liste :

+ +
    +
  • Si l'élément possède un attribut itemscope : + +
      +
    • La valeur est l'objet créé par l'élément.
      • +
    +
    • +
  • Si l'élément est un élément meta : +
      +
    • La valeur est celle de l'attribut content s'il existe, la chaîne vide sinon.
      • +
    +
    • +
  • Si l'élément est audio, embed, iframe, img, source, track ou video : +
      +
    • La valeur est l'URL correspondant à l'analyse de l'attribut src relatif au nœeud du document ou la chaîne vide s'il n'y pas de tel attribut ou que la recomposition de l'URL échoue.
      • +
    +
    • +
  • Si l'élément est un élément a, area ou link : +
      +
    • La valeur est l'URL qui correspond à l'analyse de la valeur de l'attribut href relatif au nœud du document ou la chaîne vide s'il n'y pas de tel attribut ou que la recomposition de l'URL échoue.
      • +
    +
    • +
  • Si l'élément est un élément object : +
      +
    • La valeur est l'URL qui correspond à l'analyse de la valeur de l'attribut data relatif au nœud du document ou la chaîne vide s'il n'y pas de tel attribut ou que la recomposition de l'URL échoue.
      • +
    +
    • +
  • Si l'élément est un élément data : +
      +
    • La valeur est la valeur l'attribut value s'il est présent ou la chaîne vide sinon.
      • +
    +
    • +
  • Si l'élément est un élément meter : +
      +
    • La valeur est la valeur l'attribut value s'il est présent ou la chaîne vide sinon. +
        +
      +
      • +
    +
    • +
  • Si l'élément est un élément time : +
      +
    • La valeur de l'élément est la valeur de l'attribut datetime.
      • +
    +
    • +
+ +

Sinon :

+ +
    +
  • La valeur de l'élément est le contenu textuel de l'élément HTML (textContent).
    • +
+ +

Les éléments qui permettent d'utiliser des attributs URL pour des URL absolues sont : a, area, audio, embed, iframe, img, link, object, source, track et video.

+ +

Ordre des noms

+ +

L'ordre des noms n'a pas d'importance mais si une propriété possède plusieurs valeurs, l'ordre sera relatif pour cette propriété.

+ +

Exemples équivalents

+ +
<div itemscope>
+ <p itemprop="a">1</p>
+ <p itemprop="a">2</p>
+ <p itemprop="b">test</p>
+</div>
+ +
<div itemscope>
+ <p itemprop="b">test</p>
+ <p itemprop="a">1</p>
+ <p itemprop="a">2</p>
+</div>
+ +
<div itemscope>
+ <p itemprop="a">1</p>
+ <p itemprop="b">test</p>
+ <p itemprop="a">2</p>
+</div>
+ +
<div id="x">
+ <p itemprop="a">1</p>
+</div>
+<div itemscope itemref="x">
+ <p itemprop="b">test</p>
+ <p itemprop="a">2</p>
+</div>
+
+ +

Syntaxe

+ +

Syntaxe formelle

+ +
itemprop = "name", value
+ +

Exemples

+ +

HTML

+ +

Un exemple sur un livre qu'on décrit avec les différents attributs.

+ +
<dl itemscope
+    itemtype="http://vocab.example.net/book"
+    itemid="urn:isbn:0-330-34032-8">
+ <dt>Title <dd itemprop="title">The Reality Dysfunction
+ <dt>Author <dd itemprop="author">Peter F. Hamilton
+ <dt>Publication date
+ <dd>
+  <time itemprop="pubdate" datetime="1996-01-26">
+    26 January 1996
+  </time>
+</dl>
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('HTML Microdata', "#dfn-attr-itemprop", "itemprop")}}{{Spec2('HTML Microdata')}} 
{{SpecName('HTML WHATWG', "microdata.html#names:-the-itemprop-attribute", "itemprop")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("html.global_attributes.itemprop")}}

+ +

Voir aussi

+ +
    +
  • Les différents attributs universels
    • +
  • Les autres attributs universels relatifs aux microdonnées : +
      +
    • {{htmlattrxref("itemid")}}
      • +
    • {{htmlattrxref("itemprop")}}
      • +
    • {{htmlattrxref("itemref")}}
      • +
    • {{htmlattrxref("itemscope")}}
      • +
    • {{htmlattrxref("itemtype")}}
      • +
    +
    • +
diff --git a/files/fr/web/html/global_attributes/itemref/index.html b/files/fr/web/html/global_attributes/itemref/index.html new file mode 100644 index 0000000000..894df9c87c --- /dev/null +++ b/files/fr/web/html/global_attributes/itemref/index.html @@ -0,0 +1,97 @@ +--- +title: itemref +slug: Web/HTML/Attributs_universels/itemref +tags: + - Attribut + - Attribut universel + - HTML + - Micro-données + - Microdata + - Reference +translation_of: Web/HTML/Global_attributes/itemref +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

L'attribut universel itemref permet d'associer des propriétés à un objet via itemscope lorsque l'élement courant n'est pas un élément descendant. itemref fournit une liste d'identifiants d'éléments (à ne pas confondre avec itemid) dont des propriétés sont définies plus loin dans le document.

+ +

L'attribut itemref peut uniquement être défini sur des éléments pour lesquels un attribut itemscope a été défini.

+ +

Note : L'attribut itemref ne fait pas partie du modèle de données des micro-données. Il s'agit purement d'une construction syntaxique pour aider les auteurs à annoter une page où les données ne suivent pas une structure arborescente claire.

+ +

Syntaxe

+ +

Syntaxe formelle

+ +
itemref
+ +

Exemple

+ +

HTML

+ +
<div itemscope id="amanda" itemref="a b"></div>
+<p id="a">Name: <span itemprop="name">Amanda</span> </p>
+<div id="b" itemprop="band" itemscope itemref="c"></div>
+<div id="c">
+    <p>Band: <span itemprop="name">Jazz Band</span> </p>
+    <p>Size: <span itemprop="size">12</span> players</p>
+</div>
+ +

Structure de données correspondante

+ +

Au format JSON-LD :

+ +
{
+  "@id": "amanda",
+  "name": "Amanda",
+  "band": {
+    "@id": "b",
+    "name": "Jazz Band",
+    "size": 12
+  }
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('HTML Microdata', "#dfn-itemref", "itemref")}}{{Spec2('HTML Microdata')}} 
{{SpecName('HTML WHATWG', "microdata.html#attr-itemref", "itemref")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("html.global_attributes.itemref")}}

+ +

Voir aussi

+ +
    +
  • Les différents attributs universels
    • +
  • Les autres attributs universels relatifs aux microdonnées : +
      +
    • {{htmlattrxref("itemid")}}
      • +
    • {{htmlattrxref("itemprop")}}
      • +
    • {{htmlattrxref("itemref")}}
      • +
    • {{htmlattrxref("itemscope")}}
      • +
    • {{htmlattrxref("itemtype")}}
      • +
    +
    • +
diff --git a/files/fr/web/html/global_attributes/itemscope/index.html b/files/fr/web/html/global_attributes/itemscope/index.html new file mode 100644 index 0000000000..5e76969620 --- /dev/null +++ b/files/fr/web/html/global_attributes/itemscope/index.html @@ -0,0 +1,228 @@ +--- +title: itemscope +slug: Web/HTML/Attributs_universels/itemscope +tags: + - Attribut + - Attribut universel + - HTML + - Micro-données + - Microdata + - Reference +translation_of: Web/HTML/Global_attributes/itemscope +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

L'attribut universel itemscope fonctionne généralement avec l'attribut itemtype afin d' indiquer qu'un bloc HTML contient un objet donné. itemscope crée l'objet et définit la portée de l'itemtype associé. Il est possible d'associer un attribut itemscope à n'importe quel élément HTML.

+ +

Les identifiants rattachés à itemscope

+ +

Un élément qui possède un attribut itemscope permet de définir un nouvel élément qui sera un groupe de paires de noms/valeurs. Les éléments qui ont un attribut itemscope et un attribut itemtype peuvent également définir un attribut id (à ne pas confondre avec itemid) pour identifier de façon unique l'élément sur le Web.

+ +

Syntaxe

+ +

Syntaxe formelle

+ +
itemscope
+ +

Exemple

+ +

Dans cet exemple, on a trois attributs itemscopes. Ces trois itemscopes définissent les portées respectives des itemtypes correspondants qui sont : Recipe, AggregateRating et NutritionInformation.

+ +

HTML

+ +
<div itemscope itemtype="https://schema.org/Recipe">
+<h2 itemprop="name">Grandma's Holiday Apple Pie</h2>
+<img itemprop="image" src="https://c1.staticflickr.com/1/30/42759561_8631e2f905_n.jpg" width="50" height="50"/>
+<p>By <span itemprop="author" itemscope itemtype="https://schema.org/Person">
+<span itemprop="name">Carol Smith</p></span>
+</span>
+<p>Published: <time datetime="2009-11-05" itemprop="datePublished">
+November 5, 2009</p></time>
+<span itemprop="description">This is my grandmother's apple pie recipe. I like to add a dash of nutmeg.<br></span>
+ <span itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating">
+ <span itemprop="ratingValue">4.0</span> stars based on <span itemprop="reviewCount">35</span> reviews<br></span>
+Prep time: <time datetime="PT30M" itemprop="prepTime">30 min<br></time>
+ Cook time: <time datetime="PT1H" itemprop="cookTime">1 hour<br></time>
+ Total time: <time datetime="PT1H30M" itemprop="totalTime">1 hour 30 min<br></time>
+ Yield: <span itemprop="recipeYield">1 9" pie (8 servings)<br></span>
+ <span itemprop="nutrition" itemscope itemtype="https://schema.org/NutritionInformation">
+ Serving size: <span itemprop="servingSize">1 medium slice<br></span>
+ Calories per serving: <span itemprop="calories">250 cal<br></span>
+ Fat per serving: <span itemprop="fatContent">12 g<br></span>
+</span>
+<p>Ingredients:<br>
+  <span itemprop="recipeIngredient">Thinly-sliced apples: 6 cups<br></span>
+  <span itemprop="recipeIngredient">White sugar: 3/4 cup<br></span>
+ ... </p>
+
+Directions: <br>
+  <div itemprop="recipeInstructions">
+    1. Cut and peel apples<br>
+    2. Mix sugar and cinnamon. Use additional sugar for tart apples. <br>
+    ...
+  </div>
+</div>
+ +

Structure des données

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
itemscopeitemtypeRecipe
itempropname:Grandma's Holiday Apple Pie
itempropimage: +
https://c1.staticflickr.com/1/30/42759561_8631e2f905_n.jpg
+
itempropdatePublished:2009-11-05
itempropdescription:This is my grandmother's apple pie recipe. I like to add a dash of nutmeg.
itempropprepTime:PT30M
itempropcookTime:PT1H
itemproptotalTime:PT1H30M
itemproprecipeYield:1 9" pie (8 servings)
itemproprecipeIngredient:Thinly-sliced apples: 6 cups
itemproprecipeIngredient:White sugar: 3/4 cup
itemproprecipeInstructions: +
1. Cut and peel apples 2. Mix sugar and cinnamon. Use additional sugar for tart apples .
+
itempropauthor [Person]:
itempropname:Carol Smith
itemscopeitemprop[itemtype]aggregateRating [AggregateRating]:
itempropratingValue:4.0
itempropreviewCount:35
itemscopeitemprop[itemtype]nutrition [NutritionInformation]:
itempropservingSize:1 medium slice
itempropcalories:250 cal
itempropfatContent:12 g
+ +
+

Note : Pour extraire des micro-données d'un document HTML, vous pouvez utiliser l'outil d'extraction de Google pour les micro-données. Vous pouvez par exemple utiliser le document HTML précédent.

+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('HTML Microdata', "#dfn-itemscope", "itemscope")}}{{Spec2('HTML Microdata')}} 
{{SpecName('HTML WHATWG', "microdata.html#attr-itemscope", "itemscope")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("html.global_attributes.itemscope")}}

+ +

Voir aussi

+ +
    +
  • Les différents attributs universels
    • +
  • Les autres attributs universels relatifs aux microdonnées : +
      +
    • {{htmlattrxref("itemid")}}
      • +
    • {{htmlattrxref("itemprop")}}
      • +
    • {{htmlattrxref("itemref")}}
      • +
    • {{htmlattrxref("itemscope")}}
      • +
    • {{htmlattrxref("itemtype")}}
      • +
    +
    • +
diff --git a/files/fr/web/html/global_attributes/itemtype/index.html b/files/fr/web/html/global_attributes/itemtype/index.html new file mode 100644 index 0000000000..5d3ce08694 --- /dev/null +++ b/files/fr/web/html/global_attributes/itemtype/index.html @@ -0,0 +1,113 @@ +--- +title: itemtype +slug: Web/HTML/Attributs_universels/itemtype +tags: + - Attribut + - Attribut universel + - HTML + - Micro-données + - Microdata + - Référence(2) +translation_of: Web/HTML/Global_attributes/itemtype +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

L'attribut universel itemtype définit l'URL du vocabulaire qui sera utilisé pour définir les propriétés des objets dans la structure de données. itemscope est utilisé afin de définir la portée, dans le document, où le vocabulaire défini sera actif.

+ +

L'attribut itemtype doit avoir une valeur qui est un ensemble non ordonné de fragments uniques, sensible à la casse. Chaque fragment doit être une URL absolue valide et tous les fragments participent à la définition du même vocabulaire. La valeur de l'attribut doit avoir au moins un fragment.

+ +

Les types d'objet doivent tous être définis dans des spécifications de vocabulaire (comme schema.org) et doivent tous être définis avec le même vocabulaire.

+ +

L'attribut itemtype peut uniquement être défini pour les éléments qui ont un attribut itemscope.

+ +

Google et les autres moteurs de recherche participent au vocabulaire défini par schema.org pour structurer les données. Ce vocabulaire définit un ensemble standard de types et de noms de propriétés. Par exemple MusicEvent indique un événement musical dont les propriétés startDate et location utilisées pour définir les détails du concert. Dans ce cas, l'URL http://schema.org/MusicEvent sera l'URL utilisée pour l'attribut itemtype et les propriétés startDate et location seront les propriétés utilisées, définies par http://schema.org/MusicEvent.

+ +
+

Note : Vous pourrez trouver plus d'informations sur l'attribut itemtype sur http://schema.org/Thing

+
+ +

Syntaxe

+ +

Syntaxe formelle

+ +
itemtype = URL
+ +

Exemple simple

+ +

HTML

+ +
<div itemscope itemtype="http://schema.org/Product">
+  <span itemprop="brand">ACME</span>
+  <span itemprop="name">Executive Anvil</span>
+</div>
+ +

Structure de données

+ + + + + + + + + + + + + + + + + + + + + + + +
itemscopeitemtypehttp://schema.org/Product
itempropnameExecutive Anvil
itempropbrand [Thing]
itempropnameACME
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('HTML Microdata', "#dfn-itemtype", "itemtype")}}{{Spec2('HTML Microdata')}} 
{{SpecName('HTML WHATWG', "microdata.html#attr-itemtype", "itemprop")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("html.global_attributes.itemtype")}}

+ +

Voir aussi

+ +
    +
  • Les différents attributs universels
    • +
  • Les autres attributs universels relatifs aux microdonnées : +
      +
    • {{htmlattrxref("itemid")}}
      • +
    • {{htmlattrxref("itemprop")}}
      • +
    • {{htmlattrxref("itemref")}}
      • +
    • {{htmlattrxref("itemscope")}}
      • +
    • {{htmlattrxref("itemtype")}}
      • +
    +
    • +
diff --git a/files/fr/web/html/global_attributes/lang/index.html b/files/fr/web/html/global_attributes/lang/index.html new file mode 100644 index 0000000000..6a45c3ed2a --- /dev/null +++ b/files/fr/web/html/global_attributes/lang/index.html @@ -0,0 +1,86 @@ +--- +title: lang +slug: Web/HTML/Attributs_universels/lang +tags: + - Attribut + - Attribut universel + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/lang +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

L'attribut universel lang permet de définir la langue utilisée pour l'élément. Pour les éléments non-éditables, c'est la langue dans laquelle ils sont écrits. Pour les éléments éditables, c'est la langue dans laquelle devrait écrire l'utilisateur. La valeur de cet attribut est une « balise de langue » dont le format est défini par le document de l'IETF : Les balises d'identification de langues (BCP47). Si cette balise est la chaîne vide, la langue sera définie comme inconnue. Si la balise de langue n'est pas valide selon BCP47, la langue sera définie comme invalide.

+ +
{{EmbedInteractiveExample("pages/tabbed/attribute-lang.html","tabbed-shorter")}}
+ + + +

Même lorsque l'attribut lang est défini, il peut ne pas être pris en compte. En effet, l'attribut {{htmlattrxref("xml:lang")}} aura la priorité sur celui-ci.

+ +

Pour la pseudo-classe CSS {{cssxref(":lang")}}, deux noms de langues invalides sont considérés différents si les noms utilisés sont différents. Par exemple, alors que :lang(fr) permet l'appariement avec les déclarations (valides) lang="fr-BE" ou lang="fr-CH", un encodage (invalide) comme :lang(xyzzy) ne permet pas l'appariement avec une déclaration (invalide) comme lang="xyzzy-Zorp!".

+ +

Syntaxe des balises de langue

+ +

La syntaxe complète décrite par la BCP 47 est suffisamment développée pour désigner certains dialectes spécifiques. Toutefois, dans la plupart des cas, l'utilisation sera assez simple.

+ +

Voici un aperçu de la syntaxe simplifiée. Une balise de langue est composées de trois « sous-balises » séparées par des tirets. Chacune de ces sous-balises indique une certaine propriété de la langue. Les trois sous-balises communément utilisées sont :

+ +
+
Sous-balise de langue
+
Ce fragment est obligatoire. C'est un code sur deux ou trois caractères (généralement en minuscules) qui définit la langue de base. Pour l'anglais, cette sous-balise est en et pour le Badeshi, cette balise est bdz.
+
Sous-balise de script
+
Ce fragment est optionnel. Il décrit le système d'écriture utilisé par la langue. Cette sous-balise contient toujours quatre caractères. Pour le braille français, la balise complète sera donc fr-Brail ; pour le japonais écrit avec l'alphabet Katakana, le code sera ja-Kana. Si la langue est utilisée avec le script le plus fréquemment utilisé (par exemple de l'espagnol écrit avec l'alphabet latin), il n'est pas nécessaire d'indiquer cette sous-balise.
+
Sous-balise régionale
+
Ce fragment est optionnel. Il définit un dialecte de la langue de base pour une région donnée. Cette sous-balise est composée de deux lettres en majuscules pour indiquer un pays ou de trois chiffres pour une indiquer une région qui n'est pas un pays. Ainsi, es-ES représente l'espagnol parlé en Espagne et es-013 représente l'espagnol parlé en Amérique centrale ; l'espagnol international serait simplement es.
+
+ +

La sous-balise de script doit précéder la sous-balise régionale si les deux sont présentes. Voici un exemple avec les trois fragments : ru-Cyrl-BY qui correspond au russe, écrit avec l'alphabet cyrillique, tel que parlé en Biélorussie.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', "dom.html#the-lang-and-xml:lang-attributes", "lang")}}{{Spec2('HTML WHATWG')}}Aucun changement depuis la dernière dérivation, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "dom.html#the-lang-and-xml:lang-attributes", "lang")}}{{Spec2('HTML5.1')}}Dérivée de {{SpecName('HTML WHATWG')}}, aucun changement de {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "dom.html#the-lang-and-xml:lang-attributes", "lang")}}{{Spec2('HTML5 W3C')}}Dérivée de {{SpecName('HTML WHATWG')}}. Définition du comportement de l'attribut xml:lang et de l'algorithme à utiliser pour déterminer la langue utilisée. Cet attribut devient également un attribut global à part entière.
{{SpecName('HTML4.01', 'struct/dirlang.html#h-8.1', 'lang')}}{{Spec2('HTML4.01')}}Attribut supporté pour tous les éléments {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}, et {{HTMLElement("script")}}.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("html.global_attributes.lang")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/html/global_attributes/slot/index.html b/files/fr/web/html/global_attributes/slot/index.html new file mode 100644 index 0000000000..c6b96098a0 --- /dev/null +++ b/files/fr/web/html/global_attributes/slot/index.html @@ -0,0 +1,49 @@ +--- +title: slot +slug: Web/HTML/Attributs_universels/slot +tags: + - Attribut + - Attribut universel + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/slot +--- +
{{HTMLSidebar("Global_attributes")}}{{SeeCompatTable}}
+ +

L'attribut HTML universel slot permet d'affecter un créneau d'un shadow DOM à un élément. Un élément avec un attribut slot est affecté au créneau créé par l'élément {{HTMLElement("slot")}} dont la valeur de l'attribut {{htmlattrxref("name", "slot")}} correspond à celle de l'attribut slot.

+ +

Pour des exemples d'application, consulter le guide Utiliser les modèles (templates) et les emplacements (slots).

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', "dom.html#attr-slot", "slot attribute")}}{{Spec2('HTML WHATWG')}} 
{{SpecName('DOM WHATWG', "#dom-element-slot", "slot attribute")}}{{Spec2('DOM WHATWG')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("html.global_attributes.slot")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/html/global_attributes/spellcheck/index.html b/files/fr/web/html/global_attributes/spellcheck/index.html new file mode 100644 index 0000000000..efc982d646 --- /dev/null +++ b/files/fr/web/html/global_attributes/spellcheck/index.html @@ -0,0 +1,153 @@ +--- +title: spellcheck +slug: Web/HTML/Attributs_universels/spellcheck +tags: + - Attribut + - Attribut universel + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/spellcheck +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

L'attribut universel spellcheck est un attribut à valeur contrainte qui définit si l'orthographe du contenu de l'élément doit être vérifiée.

+ +
{{EmbedInteractiveExample("pages/tabbed/attribute-spellcheck.html","tabbed-shorter")}}
+ + + +

Les valeurs autorisées pour cet attribut sont :

+ +
    +
  • true : cette valeur indique que, si possible, l'orthographe de l'élément doit être vérifiée avec le correcteur orthographique.
    • +
  • false : cette valeur indique que l'orthographe de l'élément ne doit pas être vérifié.
    • +
+ +

La valeur par défaut de l'attribut (utilisée si elle n'est pas définie explicitement) sera fonction du navigateur et du type d'élément. Cette valeur par défaut peut également être héritée (autrement dit, la valeur utilisée pour l'élément courant sera la valeur explicite définie pour son plus proche ancêtre dans l'arbre des éléments).

+ +

Cet attribut est un attribut à valeur contrainte, ce n'est pas un attribut booléen. Il faut donc utiliser explicitement les valeurs true ou false. Ainsi :

+ +
<label spellcheck>Label exemple</label>
+ +

sera invalide, la formulation correcte étant :

+ +
<label spellcheck="true">Label exemple</label>
+ +

Cet attribut n'est qu'une indication à destination du navigateur : il n'est pas obligatoire qu'un navigateur puisse vérifier l'orthographe. Les éléments non-éditables ne sont généralement pas vérifiés, même lorsque spellcheck vaut true et que le navigateur possède une fonctionnalité de vérification orthographique.

+ +

La valeur par défaut sera différente selon l'élément et le navigateur :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Navigateur{{HTMLElement("html")}}{{HTMLElement("textarea")}}{{HTMLElement("input")}}AutresCommentaires
Firefox / GeckofalsefalsefalsehéritéLorsque layout.spellcheckDefault vaut 0
falsetruehéritéhéritéLorsque layout.spellcheckDefault vaut 1 (valeur par défaut)
falsetruetruehéritéLorsque layout.spellcheckDefault vaut 2
Chromefalsetrue?hérité
Internet Explorerfalsetrue?hérité
Operafalsetrue?hérité
Safarifalsetrue?hérité
+ +

Exemples

+ +

HTML

+ +
<!-- La valeur par défaut -->
+<textarea>Saisissay un texte issy</textarea>
+
+<!-- Les valeurs explicites -->
+<textarea spellcheck="true">Saisissay un texte issy</textarea>
+<textarea spellcheck="false">Saisissay un texte issy</textarea>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples","200","300")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', "interaction.html#spelling-and-grammar-checking", "spellcheck")}}{{Spec2('HTML WHATWG')}}Pas de changement depuis la dernière dérivation, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "editing.html#spelling-and-grammar-checking", "spellcheck")}}{{Spec2('HTML5.1')}}Dérivée de {{SpecName('HTML WHATWG')}}, définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("html.global_attributes.spellcheck")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/html/global_attributes/style/index.html b/files/fr/web/html/global_attributes/style/index.html new file mode 100644 index 0000000000..3da865a0e9 --- /dev/null +++ b/files/fr/web/html/global_attributes/style/index.html @@ -0,0 +1,92 @@ +--- +title: style +slug: Web/HTML/Attributs_universels/style +tags: + - Attribut + - Attribut universel + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/style +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

L'attribut universel style contient des déclarations CSS afin de mettre en forme l'élément. Attention, il est recommandé de définir les règles de mise en forme dans un ou plusieurs fichiers séparés. Cet attribut, ainsi que l'élément {{HTMLElement("style")}} ont simplement pour but de permettre une mise en forme rapide, notamment pour tester.

+ +
{{EmbedInteractiveExample("pages/tabbed/attribute-style.html","tabbed-shorter")}}
+ + + +
+

Note : Cet attribut ne doit pas être utilisé à des fins sémantiques. En effet, si toute mise en forme est retirée, toute page doit rester correcte d'un point de vue sémantique. On ne devrait pas, notamment, utiliser cet attribut afin de cacher des informations qui ne seraient pas pertinentes (cela devrait être réalisé avec l'attribut {{htmlattrxref("hidden")}}.

+
+ +

Exemples

+ +

HTML

+ +
<p style="color: rgb(255, 0, 0)">
+  Cette méthode n'est pas vraiment recommandée
+</p>
+
+<p class="toto">
+  Alors que ça, c'est mieux.
+</p>
+ +

CSS

+ +
.toto {
+  color: rgb(0, 255, 0);
+}
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples","300","300")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', "dom.html#the-style-attribute", "style")}}{{Spec2('HTML WHATWG')}}Aucune modification depuis la dernière dérivation de {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "dom.html#the-style-attribute", "style")}}{{Spec2('HTML5.1')}}Dérivée de {{SpecName('HTML WHATWG')}}, aucune modification depuis {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "dom.html#the-style-attribute", "style")}}{{Spec2('HTML5 W3C')}}Dérivée de {{SpecName('HTML WHATWG')}}. Depuis {{SpecName("HTML4.01")}}, cet attribut est désormais un attribut universel.
{{SpecName('HTML4.01', 'present/styles.html#h-14.2.2', 'style')}}{{Spec2('HTML4.01')}}Cet attribut est pris en charge par tous les éléments à l'exception de {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, et {{HTMLElement("title")}}.
{{SpecName("CSS3 Style", "", "")}}{{Spec2("CSS3 Style")}}Définition du contenu pour l'attribut style.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("html.global_attributes.style")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/html/global_attributes/tabindex/index.html b/files/fr/web/html/global_attributes/tabindex/index.html new file mode 100644 index 0000000000..87aa27e5cc --- /dev/null +++ b/files/fr/web/html/global_attributes/tabindex/index.html @@ -0,0 +1,115 @@ +--- +title: tabindex +slug: Web/HTML/Attributs_universels/tabindex +tags: + - Attribut + - Attribut universel + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/tabindex +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

L'attribut universel tabindex est un entier indiquant si l'élément peut capturer le focus et si c'est le cas, dans quel ordre il le capture lors de la navigation au clavier (généralement à l'aide de la touche Tab). Si plusieurs éléments partagent la même valeur d'attribut tabindex, leur ordre sera calculé en fonction de leur position dans le document.

+ +
{{EmbedInteractiveExample("pages/tabbed/attribute-tabindex.html","tabbed-standard")}}
+ + + +

Cet attribut peut prendre l'une des valeurs suivantes :

+ +
    +
  • Une valeur négative : l'élément peut capturer le focus mais ne peut pas être atteint via la navigation au clavier ; +
    +

    Note : Cette valeur peut être utile lorsqu'on a un contenu situé en dehors de l'écran qui doit apparaître lors d'un évènement donné. Il ne sera pas possible d'y passer le focus au clavier mais on pourra le faire avec la méthode focus().

    +
    +
    • +
  • 0 : l'élément peut capturer le focus et être atteint via la navigation au clavier, cependant son ordre relatif est défini par la plateforme, généralement selon l'ordre des éléments du DOM ; +
    +

    Attention ! Le positionnement CSS n'aura pas d'impact sur le taborder. Le positionnement n'a qu'un impact visuel, l'ordre des tabulations correspond à l'ordre du DOM.

    +
    +
    • +
  • Une valeur positive : l'élément peut capturer le focus et peut être atteint via la navigation au clavier, l'ordre relatif dans la navigation est défini par la valeur de l'attribut. Les navigations seront parcourues dans l'ordre croissant. +
    +

    Attention ! Il n'est pas recommandé de fournir des valeurs positives pour les éléments car cela peut être source de confusion, notamment pour les personnes qui utilisent des technologies d'assistance. Il est préférable d'organiser les éléments dans un ordre correct au niveau du DOM.

    +
    +
    • +
+ +

Si on utilise l'attribut tabindex sur un élément {{HTMLElement("div")}}, on ne pourra pas naviguer dans le contenu de cet élément avec les flèches du clavier, sauf si tabindex est également utilisé sur le contenu. Pour observer ce comportement, vous pouvez utiliser cet exemple JSFiddle.

+ +
+

Note : La valeur maximale pour tabindex est fixée à 32767 par HTML4. Sa valeur par défaut est 0 pour les éléments qui peuvent recevoir le focus et -1 pour les autres.

+
+ +

Exemples

+ +

HTML

+ +
<button tabindex="1">Un bouton</button>
+<textarea>Saisir un texte</textarea>
+<button tabindex="0">Un autre bouton</button>
+<button tabindex="1">Et un troisième</button>
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples","200","300")}}

+ +

Accessibilité

+ +

Il faut éviter d'utiliser l'attribut tabindex avec du contenu non-interactif si on souhaite uniquement rendre cet élément accessible au clavier (par exemple en voulant utiliser un élément {{HTMLElement("div")}} plutôt qu'un élément {{HTMLElement("button")}}).

+ +

Les composants rendus interactifs par cette méthode ne feront pas partie de l'arbre d'accessibilité et ne pourront pas être analysés par les technologies d'assistance. Le contenu devrait être décrit sémantiquement avec des éléments interactifs ({{HTMLElement("a")}}, {{HTMLElement("button")}}, {{HTMLElement("details")}}, {{HTMLElement("input")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}, etc.). En effet, ces éléments disposent nativement de rôles et d'états qui peuvent être utilisées par les API d'accessibilité (il faut sinon les gérer via ARIA).

+ + + +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', "interaction.html#attr-tabindex", "tabindex")}}{{Spec2('HTML WHATWG')}}Aucune modification depuis la dernière dérivation, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "editing.html#the-tabindex-attribute", "tabindex")}}{{Spec2('HTML5.1')}}Dérivée de {{SpecName('HTML WHATWG')}}, aucune modification depuis {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "editing.html#attr-tabindex", "tabindex")}}{{Spec2('HTML5 W3C')}}Dérivée de {{SpecName('HTML WHATWG')}}. À partir de {{SpecName("HTML4.01")}}, l'attribut est désormais supporté sur tous les éléments, c'est un attribut global à part entière.
{{SpecName('HTML4.01', 'interact/forms.html#adef-tabindex', 'tabindex')}}{{Spec2('HTML4.01')}}Attribut uniquement supporté sur {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}}, et {{HTMLElement("textarea")}}.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("html.global_attributes.tabindex")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/html/global_attributes/title/index.html b/files/fr/web/html/global_attributes/title/index.html new file mode 100644 index 0000000000..06f0feee8d --- /dev/null +++ b/files/fr/web/html/global_attributes/title/index.html @@ -0,0 +1,129 @@ +--- +title: title +slug: Web/HTML/Attributs_universels/title +tags: + - Attribut + - Attribut universel + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/title +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

L'attribut universel title contient un texte d'information relatif à l'élément auquel il est rattaché.

+ +
{{EmbedInteractiveExample("pages/tabbed/attribute-title.html","tabbed-shorter")}}
+ + + +

On le trouve généralement utilisé pour :

+ +
    +
  • Fournir un libellé pour les éléments {{HTMLElement("iframe")}}
    • +
  • Fournir un libellé associé automatiquement à un élément {{HTMLElement("input")}}
    • +
  • Fournir un libellé pour les contrôles des tableaux de données
    • +
+ +

Si cet attribut est absent, cela signifie que le titre de l'élément ancêtre le plus proche est toujours pertinent (et pourrait être utilisé comme bulle d'information pour l'élément courant). Si cet attribut vaut la chaîne vide, cela signifie explicitement que la valeur du titre de l'ancêtre le plus proche n'est pas pertinent (et ne devrait pas être utilisé comme bulle d'information).

+ +

Une sémantique différente est définie pour cet attribut lorsqu'il est utilisé avec les éléments {{HTMLElement("link")}}, {{HTMLElement("abbr")}}, {{HTMLElement("input")}} et {{HTMLElement("menuitem")}}.

+ +

Titre sur plusieurs lignes

+ +

Un attribut title peut contenir plusieurs lignes. Chaque caractère U+000A LINE FEED (LF) représentera un saut de ligne. Le fragment de code suivant représente donc un élément dont le titre est écrit sur deux lignes.

+ +

HTML

+ +
<p>
+  Les sauts de ligne au sein d'un attribut title doivent être pris en compte :
+  <abbr title="Ceci est un
+  titre sur plusieurs lignes">Exemple</abbr>.
+</p>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Titre_sur_plusieurs_lignes")}}

+ +

Héritage de title

+ +

Lorsqu'un élément ne possède pas d'attribut title, il hérite de la valeur de l'attribut pour l'élément parent (qui peut également l'hériter de son parent, etc.).

+ +

Si cet attribut est défini avec la chaîne vide, cela signifie que le titre provenant d'un élément parent n'est pas pertinent et qu'il ne devrait pas être utilisé.

+ +

HTML

+ +
<div title="Une bubulle">
+  <p>Si vous survolez cet élément, il y aura une bulle d'information "Une bubulle".</p>
+  <p title="">Et au-dessus de celui-ci, aucune info.</p>
+</div>
+ +

Résultat

+ +

{{EmbedLiveSample("Héritage_de_title")}}

+ +

Accessibilité

+ +

L'attribut title est très problématique pour :

+ +
    +
  • Les personnes qui utilisent des appareils à interface tactile
    • +
  • Les personnes qui naviguent au clavier
    • +
  • Les personnes qui naviguent en utilisant des outils d'assistance comme des lecteurs d'écran ou des loupes logicielles
    • +
  • Les personnes souffrant de troubles musculaires ou cognitifs.
    • +
+ +

Cela est dû à une prise en charge hétérogène de la part des navigateurs. Si on souhaite avoir une bulle d'information, mieux vaudra utiliser une technique plus accessible.

+ + + +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', "elements.html#the-title-attribute", "title")}}{{Spec2('HTML WHATWG')}}Aucune modification depuis {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "dom.html#the-title-attribute", "title")}}{{Spec2('HTML5.1')}}Dérivation de {{SpecName('HTML WHATWG')}}, aucune modification de {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "dom.html#the-title-attribute", "title")}}{{Spec2('HTML5 W3C')}}Dérivation de {{SpecName('HTML WHATWG')}}. À partir de {{SpecName("HTML4.01")}}, title est désormais un attribut universel.
{{SpecName('HTML4.01', 'struct/global.html#adef-title', 'title')}}{{Spec2('HTML4.01')}}Pris en charge par l'ensemble des éléments sauf {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}} et {{HTMLElement("title")}}.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("html.global_attributes.title")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/html/global_attributes/translate/index.html b/files/fr/web/html/global_attributes/translate/index.html new file mode 100644 index 0000000000..215800e5ff --- /dev/null +++ b/files/fr/web/html/global_attributes/translate/index.html @@ -0,0 +1,71 @@ +--- +title: translate +slug: Web/HTML/Attributs_universels/translate +tags: + - Attribut + - Attribut universel + - Experimental + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/translate +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

L'attribut universel translate est un attribut à valeur contrainte qui peut être utilisé afin d'indiquer si les valeurs d'attribut d'un élément et si les valeurs de ses nœuds {{domxref("Text")}} descendants doivent être traduits lorsque la page est localisée ou s'il faut les laisser inchangés. Les valeurs autorisées pour cet attribut sont :

+ +
    +
  • "yes" (ou une chaîne vide), qui indique que l'élément devrait être traduit lorsque la page est localisée ;
    • +
  • "no", qui indique que l'élément ne doit pas être traduit.
    • +
+ +
+

Note : Bien que la prise en charge de cet attribut ne soit pas homogène pour les navigateurs, celui-ci est pris en compte par les outils de traduction automatique (Google Translate par exemple) et les outils de traduction utilisés par les traducteurs. Aussi, cet attribut doit être utilisé par les auteurs web afin d'indiquer correctement le contenu qui ne devrait pas être traduit.

+
+ +

Exemples

+ +

HTML

+ +
<label for="postcode" translate="no">
+   <span translate="yes">Enter your postcode to find the nearest store</span>
+</label>
+<input id="postcode" type="text">
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples","250","250")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', "dom.html#attr-translate", "translate")}}{{Spec2('HTML WHATWG')}}Aucun changement depuis la dernière dérivation {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "dom.html#the-translate-attribute", "translate")}}{{Spec2('HTML5.1')}}Dérivée de {{SpecName('HTML WHATWG')}}, définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("html.global_attributes.translate")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/html/global_attributes/x-ms-acceleratorkey/index.html b/files/fr/web/html/global_attributes/x-ms-acceleratorkey/index.html new file mode 100644 index 0000000000..f03780b703 --- /dev/null +++ b/files/fr/web/html/global_attributes/x-ms-acceleratorkey/index.html @@ -0,0 +1,45 @@ +--- +title: x-ms-acceleratorkey +slug: Web/HTML/Attributs_universels/x-ms-acceleratorkey +tags: + - Attribut + - HTML + - Non-standard + - Reference +translation_of: Web/HTML/Global_attributes/x-ms-acceleratorkey +--- +
{{HTMLSidebar("Global_attributes")}}{{Non-standard_Header}}
+ +

La propriété x-ms-acceleratorkey fournit une méthode pour déclarer si une touche d'accélération a été affectée à un élément.

+ +
+

Note : Pour fournir un raccourci clavier pour un élément qui n'utilise pas JavaScript, on utilisera l'attribut accesskey.

+
+ +

{{Non-standard_Inline}} Cette propriété non-standard est spécifique à Internet Explorer et à Microsoft Edge.

+ +

La propriété x-ms-acceleratorkey permet d'indiquer sur l'arbre d'accessibilité (utilisé par les outils d'assistance tels que les lecteurs d'écran) qu'une touche d'accélération existe. Cet attribut ne fournit pas le comportement déclenché par cette touche. Il est nécessaire de fournir les gestionnaires d'évènements associés tels que onkeypress, onkeydown ou onkeyup afin de traiter l'utilisation de la touche dans l'application.

+ + + +

Syntaxe

+ +
<button x-ms-acceleratorkey="string">...</button>
+ +

Valeur

+ +

Cette propriété peut être une chaîne de caractères avec le nom de la touche accélératrice :

+ +
    +
  • "Ctrl+B" pour indiquer la combinaison des touches Ctrl et B.
    • +
  • "J" pour indiquer la touche J uniquement.
    • +
  • "Ctrl+; then K" (cf. FogBugz’s old keyboard mode). Une approche plus compliquée mais qui ne remplace pas les raccourcis clavier fournis par le navigateur ou le système d'exploitation.
    • +
+ +

Voir aussi

+ + diff --git a/files/fr/web/html/global_attributes/x-ms-format-detection/index.html b/files/fr/web/html/global_attributes/x-ms-format-detection/index.html new file mode 100644 index 0000000000..f11309e1b5 --- /dev/null +++ b/files/fr/web/html/global_attributes/x-ms-format-detection/index.html @@ -0,0 +1,60 @@ +--- +title: x-ms-format-detection +slug: Web/HTML/Attributs_universels/x-ms-format-detection +tags: + - Attribut + - HTML + - Non-standard + - Reference +translation_of: Web/HTML/Global_attributes/x-ms-format-detection +--- +
{{HTMLSidebar("Global_attributes")}}{{Non-standard_Header}}
+ +

L'attribut x-ms-format-detection détermine si le format de la donnée dans le contenu est détectée automatiquement et, lorsqu'elle est trouvée, est convertie en un lien sur lequel on peut cliquer.

+ +
+

Note : Les liens créés grâce à la détection de format n'apparaissent pas dans le DOM.

+
+ +

{{Non-standard_inline}}Cette propriété est spécifique à Internet Explorer et à Microsoft Edge.

+ +

Syntaxe

+ +
<html x-ms-format-detection="none">
+
+ +

Valeurs

+ +

Cet attribut peut prendre une chaîne de caractères parmi les suivantes comme valeur :

+ +
+
all
+
Tous les formats de donnée pris en charge sont détectés.
+
none
+
La détection de format est désactivée.
+
phone
+
Seuls les numéros de téléphone sont détectés.
+
+ +
+

Note : Les liens créés via la détection de format n'auront pas d'impact sur le contenu ou sur la disposition du DOM.

+
+ +

Exemples

+ +

Pour désactiver la détection automatique sous certaines conditions, on pourra par exemple utiliser JavaScript afin d'ajouter x-ms-format-detection sur les éléments qu'on soit sur un mobile (détection activée) ou sur un ordinateur de bureau (détection désactivée) :

+ +
if (window.matchMedia('(min-width: 1024px)').matches) {
+    var e = document.getElementsByClassName("phone");
+    for (i = 0; i < e.length; i++)
+        e[i].setAttribute("x-ms-format-detection", "none");
+}
+
+ +

Dans cet exemple, les numéros de téléphone conservent la mise en forme tant que la zone d'affichage (viewport) est moins large que 1024 pixels.

+ +

Voir aussi

+ + diff --git "a/files/fr/web/html/images_avec_le_contr\303\264le_d_acc\303\250s_http/index.html" "b/files/fr/web/html/images_avec_le_contr\303\264le_d_acc\303\250s_http/index.html" deleted file mode 100644 index e0f92b24c7..0000000000 --- "a/files/fr/web/html/images_avec_le_contr\303\264le_d_acc\303\250s_http/index.html" +++ /dev/null @@ -1,117 +0,0 @@ ---- -title: Images avec le contrôle d'accès HTTP -slug: Web/HTML/Images_avec_le_contrôle_d_accès_HTTP -tags: - - Avancé - - CORS - - Canvas - - HTML - - Reference -translation_of: Web/HTML/CORS_enabled_image ---- -
{{QuickLinksWithSubpages("/fr/docs/Web/HTML/")}}
- -

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.

- -

Pour plus de détails sur l'attribut crossorigin, voir les attributs de paramétrage du CORS.

- -

Canevas corrompu et sécurité

- -

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é.

- -

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 corrompu (tainted). 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.

- -

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.

- -

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.

- -

Appeler l'une des méthodes suivantes sur un canevas corrompu déclenchera une erreur :

- -
    -
  • {{domxref("CanvasRenderingContext2D.getImageData", "getImageData()")}} sur le contexte du canevas
    • -
  • {{domxref("HTMLCanvasElement.toBlob", "toBlob()")}} sur l'élément {{HTMLElement("canvas")}}
    • -
  • {{domxref("HTMLCanvasElement.toDataURL", "toDataURL()")}} sur le canevas
    • -
- -

L'exception levée par de tels appels sera une exception SecurityError. Cette mesure protège les utilisateurs contre l'exposition de données privées via des images provenant de sites tiers sans permission.

- -

Stocker une image provenant d'une origine tierce

- -

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.

- -

Configuration serveur

- -

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.

- -

Dans la suite de cet exemple, on prendra le cas d'un site est servi via Apache. On pourra utiliser le fragment de configuration serveur Apache pour les images CORS :

- -
<IfModule mod_setenvif.c>
-  <IfModule mod_headers.c>
-    <FilesMatch "\.(bmp|cur|gif|ico|jpe?g|png|svgz?|webp)$">
-      SetEnvIf Origin ":" IS_CORS
-      Header set Access-Control-Allow-Origin "*" env=IS_CORS
-    </FilesMatch>
-  </IfModule>
-</IfModule>
- -

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.

- -

Implémenter l'enregistrement

- -

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 en stockage local comme si elles étaient servies depuis le même domaine que le code.

- -

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.

- -

Démarrer le téléchargement

- -

Voici le code qui démarre le téléchargement (déclenché par exemple lorsque l'utilisateur clique sur un bouton « Télécharger ») :

- -
function startDownload() {
-  let imageURL = "https://cdn.glitch.com/4c9ebeb9-8b9a-4adc-ad0a-238d9ae00bb5%2Fmdn_logo-only_color.svg?1535749917189";
-
-  downloadedImg = new Image;
-  downloadedImg.crossOrigin = "Anonymous";
-  downloadedImg.addEventListener("load", imageReceived, false);
-  downloadedImg.src = imageURL;
-}
- -

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 crossOrigin paramétré avec "Anonymous" (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.

- -

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.

- -

Recevoir et enregistrer l'image

- -

Voici le fragment de code exécuté lorsque l'image a été téléchargée :

- -
function imageReceived() {
-  let canvas = document.createElement("canvas");
-  let context = canvas.getContext("2d");
-
-  canvas.width = downloadedImg.width;
-  canvas.height = downloadedImg.height;
-
-  context.drawImage(downloadedImg, 0, 0);
-  imageBox.appendChild(canvas);
-
-  try {
-    localStorage.setItem("saved-image-example", canvas.toDataURL("image/png"));
-  }
-  catch(err) {
-    console.log("Error: " + err);
-  }
-}
- -

imageReceived() est invoquée lorsque l'évènement "load" est déclenché sur l'élément HTMLImageElement 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 context.

- -

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.

- -

Enfin, on enregistre l'image dans le stockage local. Pour cela, on utilise les méthodes de l'API Web Storage 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()")}}.

- -

Vous pouvez essayer ou adapter cet exemple sur Glitch.

- -

Voir aussi

- - diff --git a/files/fr/web/html/inline_elements/index.html b/files/fr/web/html/inline_elements/index.html new file mode 100644 index 0000000000..fb9207dd72 --- /dev/null +++ b/files/fr/web/html/inline_elements/index.html @@ -0,0 +1,169 @@ +--- +title: Éléments en-ligne +slug: Web/HTML/Éléments_en_ligne +tags: + - Débutant + - Elements en ligne + - Guide + - HTML + - Reference +translation_of: Web/HTML/Inline_elements +--- +
{{HTMLSidebar}}
+ +

En HTML, les éléments en ligne (inline elements en anglais) sont ceux qui occupent l'espace délimités par leurs balises plutôt que d'interrompre le flux du contenu. Dans cet article, nous étudierons ces éléments en ligne et également leurs différences quant aux éléments de bloc (block-level elements).

+ +
+

Note : Un élément en ligne ne commence pas sur une nouvelle ligne et prend uniquement la largeur qui lui est nécessaire.

+
+ +

Éléments en ligne et éléments de bloc : un exemple

+ +

Un exemple vaut mieux qu'une longue explication. Voici pour commencer la feuille de style CSS que nous utiliserons :

+ +
.highlight {
+  background-color:#ee3;
+}
+ +

Élément en ligne

+ +

Le fragment de code HTML qui suit utilise un élément en ligne avec la classe highlight :

+ +
<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>
+ +

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 <span> étant un élément en ligne, le paragraphe est bien affiché sous la forme d'un flux de texte sans rupture :

+ +

{{EmbedLiveSample("Élément_en_ligne", 600, 80)}}

+ + + +

Élément de bloc

+ +

Transformons l'exemple précédent pour passer d'un élément <span> à un élément {{HTMLElement("div")}} qui est un élément de bloc :

+ +
<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>
+ + + +

Et voici le résultat qu'on obtient :

+ +

{{EmbedLiveSample("Élément_de_bloc", 600, 150)}}

+ +

On voit ici que l'élément <div> modifie complètement la disposition du texte et le découpe en trois partie : une partie avant le <div>, une partie constituée avec le texte de l'élément <div> et une dernière partie ensuite.

+ +

Modifier le type d'un d'élément

+ +

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 display de "inline" à "block", 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 display:block sur un élément {{HTMLElement("span")}} ne permettra toujours pas de lui imbriquer un élément {{HTMLElement("div")}} à l'intérieur.

+ +

Différences conceptuelles

+ +

Voici, en résumé, les différences conceptuelles entre les éléments en ligne et les éléments de bloc :

+ +
+
Modèle de contenu
+
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.
+
Formatage
+
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).
+
+ +

Liste des éléments en ligne

+ +

Les éléments HTML suivants sont, par défaut, des éléments en ligne :

+ +
+
+
{{HTMLElement("a")}}
+
{{HTMLElement("abbr")}}
+
{{HTMLElement("acronym")}}
+
{{HTMLElement("audio")}} (if has visible controls)
+
{{HTMLElement("b")}}
+
{{HTMLElement("bdi")}}
+
{{HTMLElement("bdo")}}
+
{{HTMLElement("big")}}
+
{{HTMLElement("br")}}
+
{{HTMLElement("button")}}
+
{{HTMLElement("canvas")}}
+
{{HTMLElement("cite")}}
+
{{HTMLElement("code")}}
+
{{HTMLElement("data")}}
+
{{HTMLElement("datalist")}}
+
{{HTMLElement("del")}}
+
{{HTMLElement("dfn")}}
+
{{HTMLElement("em")}}
+
{{HTMLElement("embed")}}
+
{{HTMLElement("i")}}
+
{{HTMLElement("iframe")}}
+
{{HTMLElement("img")}}
+
{{HTMLElement("input")}}
+
{{HTMLElement("ins")}}
+
{{HTMLElement("kbd")}}
+
{{HTMLElement("label")}}
+
{{HTMLElement("map")}}
+
{{HTMLElement("mark")}}
+
{{HTMLElement("meter")}}
+
{{HTMLElement("noscript")}}
+
{{HTMLElement("object")}}
+
{{HTMLElement("output")}}
+
{{HTMLElement("picture")}}
+
{{HTMLElement("progress")}}
+
{{HTMLElement("q")}}
+
{{HTMLElement("ruby")}}
+
{{HTMLElement("s")}}
+
{{HTMLElement("samp")}}
+
{{HTMLElement("script")}}
+
{{HTMLElement("select")}}
+
{{HTMLElement("slot")}}
+
{{HTMLElement("small")}}
+
{{HTMLElement("span")}}
+
{{HTMLElement("strong")}}
+
{{HTMLElement("sub")}}
+
{{HTMLElement("sup")}}
+
{{HTMLElement("svg")}}
+
{{HTMLElement("template")}}
+
{{HTMLElement("textarea")}}
+
{{HTMLElement("time")}}
+
{{HTMLElement("u")}}
+
{{HTMLElement("tt")}}
+
{{HTMLElement("var")}}
+
{{HTMLElement("video")}}
+
{{HTMLElement("wbr")}}
+
+
+ +

Voir aussi

+ + diff --git a/files/fr/web/html/introduction_to_html5/index.html b/files/fr/web/html/introduction_to_html5/index.html deleted file mode 100644 index 51eaf4850e..0000000000 --- a/files/fr/web/html/introduction_to_html5/index.html +++ /dev/null @@ -1,40 +0,0 @@ ---- -title: Introduction à HTML5 -slug: Web/HTML/Introduction_to_HTML5 -tags: - - HTML - - HTML5 -translation_of: Web/Guide/HTML/HTML5/Introduction_to_HTML5 ---- -

HTML5 est la nouvelle version du standard HTML. Il apporte non seulement l'utilisation de média riches (vidéo, audio, SVG, etc.) mais aussi des fonctionnalités permettant le développement d'applications web bien plus attractives et interactives.

- -

Étant donné que HTML5 est encore en cours d'évolution, certains navigateurs ne supportent pas encore toutes les fonctionnalités offertes par ce nouveau standard. Ceci dit Gecko (et donc Firefox) supporte déjà dans sa version 1.8.1 une majorité des possibilités de HTML5. Vous trouverez ce que Gecko supporte déjà en visitant cette page : HTML5. Pour obtenir davantage d'informations sur le support de HTML5 par de multiples navigateurs, jetez un coup d'œil sur le site CanIUse .

- -

Indiquer que le document contient du HTML5 grâce au doctype HTML5

- -

La doctype HTML5 est très simple, il s'agit simplement de ceci :

- -
<!DOCTYPE html>
-
- -

Cela permet au navigateur ne supportant pas encore le HTML5 de passer en mode standard et ainsi d'ignorer les balises inconnues.

- -

Il est beaucoup plus simple que les précédents doctypes, et plus court. Il est ainsi plus facile à retenir et réduit le nombre d'octets devant être téléchargés.

- -

Déclarer l'encodage de caractères avec <meta charset>

- -

La première chose que l'on fait d'habitude sur une page web c'est déclarer l'encodage de caractère utilisé. Dans les versions précédentes de HTML, ceci était fait en utilisant le très complexe élément {{HTMLElement("meta")}}. Avec HTML5, c'est beaucoup plus simple :

- -
<meta charset="UTF-8">
- -

Placez ceci au tout début de votre élément {{HTMLElement("head") }}, car certains navigateurs recommencent leur interprétation des documents HTML, si l'encodage de caractère déclaré est différent de ce qu'ils avaient anticipé. De plus, il est recommandé d'utiliser UTF-8, car il simplifie la gestion des caractères dans les documents utilisant plusieurs graphies.

- -

Notez que HTML5 limite les encodages autorisés à ceux qui sont compatibles avec ASCII et utilisant au moins 8 bits. Ceci pour améliorer la sécurité et éviter certains types d'attaques.

- -

Utiliser le nouveau parser HTML5

- -

Les nouvelles règles d'analyse du HTML5, celles qui s'occupent de la sémantique du code, ont été renforcées. Jusqu'à l'arrivée du HTML5, seules les règles pour un code valide avaient été définies. À la moindre erreur dans le code (la plupart des sites Web en comportent au moins une), le comportement à adopter était laissé à la libre interprétation des navigateurs, qui ne choisissaient pas toujours le même. Maintenant, lorsque des erreurs sont rencontrées dans le code, tous les navigateurs implémentant HTML5 doivent se comporter de la même façon.

- -

Cette obligation aide les développeurs Web. Bien que tous les nouveaux navigateurs utilisent maintenant les règles d'analyse d'HTML5, des navigateurs ne respectant pas HTML5 sont encore utilisés. Il est toujours fortement recommandé d'écrire un code valide, car il est plus facile à lire et à maintenir, et diminue les risques d'incompatibilité avec les vieux navigateurs.

- -

Ne vous inquiétez pas, vous n'avez rien à changer sur votre site Web, les développeurs des navigateurs ont déjà fait le nécessaire !

diff --git a/files/fr/web/html/link_types/index.html b/files/fr/web/html/link_types/index.html new file mode 100644 index 0000000000..f8134a8fe7 --- /dev/null +++ b/files/fr/web/html/link_types/index.html @@ -0,0 +1,368 @@ +--- +title: Types de lien +slug: Web/HTML/Types_de_lien +tags: + - HTML + - Reference + - Types de lien + - Web +translation_of: Web/HTML/Link_types +--- +
{{HTMLSidebar}}
+ +

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")}}.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Liste des types de lien HTML et leur signification
Type de lienDescriptionUtilisable dans ces élémentsInterdit dans ces éléments
alternate +
    +
  • Si l'élément est un élément {{HTMLElement("link")}} et que l'attribut {{htmlattrxref("rel", "link")}} contient le type stylesheet, ce lien définit une feuille de style alternative. Dans ce cas, l'attribut {{htmlattrxref("title", "link")}} doit être présent et ne doit pas être la chaîne de caractères vide.
    • +
  • Si l'attribut {{htmlattrxref("type","link")}} vaut application/rss+xml ou application/atom+xml, le lien définit un flux de syndication. Le premier flux définit sur la page est le flux par défaut.
    • +
  • Sinon, le lien définit une page alternative, il peut s'agir : +
      +
    • Si l'attribut {{htmlattrxref("media","link")}} est défini, d'une page destinée à un autre support (par exemple une tablette)
      • +
    • D'une page dans une autre langue si l'attribut {{htmlattrxref("hreflang","link")}} est défini,
      • +
    • D'une page dans un autre format (par exemple PDF) si l'attribut {{htmlattrxref("type","link")}} est défini,
      • +
    • D'une combinaison de ces documents.
      • +
    +
    • +
+ 		{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}{{HTMLElement("form")}}
archives {{obsolete_inline}}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.
+
+ Note : Bien que la forme archive (au singulier) soit reconnue, elle est incorrecte et doit être évitée.		{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}{{HTMLElement("form")}}
authorCe type définit un hyperlien vers une page qui décrit l'auteur ou qui fournit un moyen de contacter l'auteur du document.
+
+ Note : Ce lien peut être un lien mailto: bien que ce ne soit pas recommandé afin d'éviter la collecte de l'adresse électronique (mieux vaut avoir un formulaire de contact).
+
+ 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 « made » mais plutôt utiliser {{htmlattrxref("rel", "link")}} avec ce type de lien (« author »).		{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}{{HTMLElement("form")}}
bookmarkCe type de lien indique l'hyperlien est un permalien 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 la section la plus proche de l'élément courant.
+
+ 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).		{{HTMLElement("a")}}, {{HTMLElement("area")}}{{HTMLElement("link")}}, {{HTMLElement("form")}}
canonicalUn lien canonique est un élément HTML qui aide les webmasters à ne pas dupliquer du contenu en indiquant la version canonique ou préférée de la page pour l'optimisation à destination des moteurs de recherche.{{HTMLElement("link")}}{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}
dns-prefetch {{experimental_inline}}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.{{HTMLElement("link")}}{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}
externalCe 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.{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}{{HTMLElement("link")}}
first {{obsolete_inline}}Ce type indique que l'hyperlien mène à la première ressource dans la série de ressources à laquelle appartient la page actuelle.
+
+ Note : les autres types de lien permettant une navigation séquentielle sont : last, prev, next (pour respectivement la dernière, la précédente et la suivante).
+
+ Bien que les synonymems begin et start puissent être reconnus, ils sont incorrects et devraient être évités.		{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}{{HTMLElement("form")}}
help +
    +
  • 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.
    • +
  • 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.
    • +
+ 		{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}, {{HTMLElement("link")}}Aucun.
iconCe 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).
+
+ 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.
+
+ Note : sur iOS, ce type de lien n'est pas utilisé, à la place, ce sont les relations ({{htmlattrxref("rel","link")}}) apple-touch-icon et apple-touch-startup-image qui sont utilisées.
+
+ Le type de lien shortcut est souvent vu avant icon mais il n'est pas conforme et les navigateurs l'ignorent, c'est pourquoi il ne doit plus être utilisé.		{{HTMLElement("link")}}{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}
import{{experimental_inline}}Imports de ressource en HTML{{HTMLElement("link")}}{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}
index {{obsolete_inline}}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.
+
+ Si un ou plusieurs liens de type up sont présent, la quantité de ces liens indique la profondeur de la page courante au sein de la hiérarchie.		{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}{{HTMLElement("form")}}
last {{obsolete_inline}} +

Ce type indique que l'hyperlien mène à la dernière ressource dans la série de ressources à laquelle appartient la page actuelle.
+
+ Note : les autres types de lien permettant une navigation séquentielle sont : first, prev, next (pour respectivement la première, la précédente et la suivante).

+ +

Bien que le synonyme end puisse être reconnu, il est incorrect et doit être évité.

+ 		{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}Aucun.
licenseCe 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.
+
+ Note : bien qu'il puisse être reconnu, le synonyme copyright est incorrect et doit être évité.		{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}, {{HTMLElement("link")}}Aucun.
manifestCe type de lien indique que la ressource liée est un manifeste d'application web.{{HTMLElement("link")}}{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}
modulepreloadInitialise le chargement anticipé (et prioritaire) des modules de scripts{{HTMLElement("link")}}{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}
nextCe type indique que l'hyperlien mène à la prochaine ressource dans la série de ressources à laquelle appartient la page actuelle.
+
+ Note : les autres types de lien permettant une navigation séquentielle sont : first, prev, last (pour respectivement la première, la précédente et la dernière).		{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}, {{HTMLElement("link")}}Aucun.
nofollowCe 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.{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}{{HTMLElement("link")}}
noopener +

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 null).
+
+ 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 About rel=noopener pour plus de détails) tout en fournissant un référent via l'en-tête HTTP (à moins que noreferrer n'y soit également utilisé).

+ +

Lorsque noopener est utilisé, les noms utilisés pour l'attribut target, qui ne sont pas vides et qui ne sont pas _top, _self ou _parent sont alors traités comme s'ils étaient synonymes de _blank lorsqu'il s'agit de décider d'ouvrir une nouvelle fenêtre ou un nouvel onglet.

+ 		{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}{{HTMLElement("link")}}
noreferrer +

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")}}.
+ (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é.

+ 		{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}{{HTMLElement("link")}}
opener {{experimental_inline}} {{non-standard_inline}}Annule l'effet de l'ajout implicite de  rel="noopener" sur les liens qui possèdent explicitement target="_blank" (voir la discussion sur les spécifications HTML, la modification WebKit change et la discussion sur le bug Firefox correspondant).{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}{{HTMLElement("link")}}
pingbackCe 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 Pingback 1.0.
+
+ Note : 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.		{{HTMLElement("link")}}{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}
preconnect {{experimental_inline}}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.{{HTMLElement("link")}}{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}
prefetchCe 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.
+
+ Note : la FAQ sur prefetch explique quels liens peuvent être récupérés de façon anticipée et quelles peuvent être les méthodes alternatives.		{{HTMLElement("a")}} {{unimplemented_inline}},
+ {{HTMLElement("area")}} {{unimplemented_inline}},
+ {{HTMLElement("link")}}		{{HTMLElement("form")}}
preload +

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.

+ +

Voir l'article Précharger du contenu grâce à rel="preload" pour plus d'informations.

+ 		{{HTMLElement("link")}}{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}
prerender {{experimental_inline}}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.{{HTMLElement("link")}}{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}
prevCe type indique que l'hyperlien mène à la ressource précédente dans la série de ressources à laquelle appartient la page actuelle.
+
+ Note : les autres types de lien permettant une navigation séquentielle sont : first, next, last (pour respectivement la première, la suivante et la dernière).
+
+ Bien que la valeur previous soit reconnue comme synonyme, elle est incorrecte et ne doit pas être utilisée.		{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}, {{HTMLElement("form")}}Aucun.
searchCe 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.
+
+ Si l'attribut {{htmlattrxref("type","link")}} vaut application/opensearchdescription+xml, la ressource est un plugin OpenSearch qui peut facilement être ajouté à l'interface de certains navigateurs comme Firefox ou Internet Explorer.		{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}, {{HTMLElement("form")}}Aucun.
sidebar {{non-standard_inline}}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é.
+
+ 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.		{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}{{HTMLElement("form")}}
stylesheetCe 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 text/css.
+
+ Utilisé avec le mot-clé alternate, il permet de définir une feuille de style alternative auquel cas l'atttribut {{htmlattrxref("title", "link")}} doit être présent et ne doit pas être la chaîne vide.		{{HTMLElement("link")}}{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}
tagCe type indique que l'hyperlien fait référence à un document qui décrit l'étiquette (le tag) appliquée à ce document.
+
+ Note : ce type de lien ne doit pas être utilisé pour renvoyer vers un nuage de tags car ce dernier concerne un ensemble de pages et pas uniquement le document courant.		{{HTMLElement("a")}}, {{HTMLElement("area")}}{{HTMLElement("link")}}, {{HTMLElement("form")}}
up {{obsolete_inline}}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.
+
+ Le nombre de up indique la différence de profondeur dans la hiérarchie entre la page courante et la page associée.		{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}{{HTMLElement("form")}}
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('Preload','#x2.link-type-preload','preload')}}{{Spec2('Preload')}}Ajout du type preload.
{{SpecName('Resource Hints', '#dfn-preconnect', 'preconnect')}}{{Spec2('Resource Hints')}}Ajout des types dns-prefetch, preconnect et prerender.
{{SpecName("HTML WHATWG", "links.html#linkTypes", "link types")}}{{Spec2('HTML WHATWG')}}Ajout de opener. noopener devient le comportement par défaut pour les liens avec target="_blank".
{{SpecName("HTML5 W3C", "links.html#linkTypes", "link types")}}{{Spec2('HTML5 W3C')}}Ajout de tag, search, prefetch, noreferrer, nofollow, icon et author.
+ Renommage de copyright en license.
+ Suppression de start, chapter, section, subsection et appendix
{{SpecName("HTML4.01", "types.html#type-links", "link types")}}{{Spec2('HTML4.01')}}Ajout de alternate, stylesheet, start, chapter, section, subsection, appendix et bookmark.
+ Renomme previous en prev.
+ Suppression de top et search.
{{SpecName("HTML3.2", "#link", "<link>")}}ObsolèteAjout de top, contents, index, glossary, copyright, next, previous, help et search.
{{RFC(1866, "HTML 2.0")}}ObsolèteDéfinition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("html.elements.link.rel")}}

+ +

Voir aussi

+ +
    +
  • {{HTMLElement("link")}}
    • +
  • {{HTMLElement("a")}}
    • +
  • {{HTMLElement("area")}}
    • +
diff --git a/files/fr/web/html/microdata/index.html b/files/fr/web/html/microdata/index.html new file mode 100644 index 0000000000..66230edd72 --- /dev/null +++ b/files/fr/web/html/microdata/index.html @@ -0,0 +1,140 @@ +--- +title: Microdonnées +slug: Web/HTML/Microdonnées +tags: + - HTML + - Microdata + - Microdonnées +translation_of: Web/HTML/Microdata +--- +
{{QuickLinksWithSubpages("/en-US/docs/Web/HTML")}}
+ +

Les microdonnées (microdata) sont une partie de la spécification HTML du WHATWG qui est utilisée afin de fournir des métadonnées sur le contenu des pages web. Les moteurs de recherche, les robots (crawlers) 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.

+ +

Les microdonnées sont des groupes de paires nom-valeur. Ces groupes sont appelés des objets (items) et chaque paire nom-valeur est une propriété. Les objets et les propriétés s'inscrivent dans des éléments HTML classiques :

+ +
    +
  • Pour créer un objet, on utilise l'attribut itemscope
    • +
  • Pour ajouter une propriété, on utilise l'attribut itemprop sur l'un des descendants.
    • +
+ +

Vocabulaires

+ +

Google et les autres moteurs de recherches participent au vocabulaire défini par schema.org pour structurer les données. Ce vocabulaire définit un ensemble standard de types et de noms de propriétés. Par exemple MusicEvent indique un événement musical dont les propriétés startDate et location utilisées pour définir les détails du concert. Dans ce cas, l'URL https://schema.org/MusicEvent sera l'URL utilisée pour l'attribut itemtype et les propriétés startDate et location seront les propriétés utilisées, définies par https://schema.org/MusicEvent.

+ +

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 schema.org.

+ +

Plusieurs moteurs de recherche (Google, Bing et Yahoo!) s'appuient sur schema.org pour améliorer les résultats de recherche.

+ +

Localisation

+ +

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, Yandex qui est un moteur de recherche très présent en Russie supporte des microformats comme hCard, hRecipe, hReview et hProduct 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.

+ +

Attributs globaux liés aux microdonnées

+ +

Certains attributs globaux concernent directement les microdonnées :

+ +
+
itemid
+
Cet attribut est l'identifiant unique d'un objet.
+
itemprop
+
Cet attribut est utilisé afin d'ajouter des propriétés à un élément.
+
itemref
+
Cet attribut permet de faire référence à d'autres éléments HTML décrivant le même objet.
+
itemscope
+
Cet attribut définit la portée du vocabulaire déclaré par itemtype et englobe généralement un objet.
+
itemtype
+
Cet attribut définit le vocabulaire qui spécifie le modèle de données utilisé pour décrire les objets.
+
+ +

Exemple

+ +

HTML

+ +
<div itemscope itemtype="https://schema.org/SoftwareApplication">
+  <span itemprop="name">Angry Birds</span> -
+
+  REQUIRES <span itemprop="operatingSystem">ANDROID</span><br>
+  <link itemprop="applicationCategory" href="https://schema.org/GameApplication"/>
+
+  <div itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating">
+    RATING:
+    <span itemprop="ratingValue">4.6</span> (
+    <span itemprop="ratingCount">8864</span> ratings )
+  </div>
+
+  <div itemprop="offers" itemscope itemtype="https://schema.org/Offer">
+    Price: $<span itemprop="price">1.00</span>
+    <meta itemprop="priceCurrency" content="USD" />
+  </div>
+</div>
+ +

Structure de donnée

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
itemscopeitemtypeSoftwareApplication (https://schema.org/SoftwareApplication)
itempropnameAngry Birds
itempropoperatingSystemANDROID
itempropapplicationCategoryGameApplication (https://schema.org/GameApplication)
itemscopeitemprop[itemtype]aggregateRating [AggregateRating]
itempropratingValue4.6
itempropratingCount8864
itemscopeitemprop[itemtype]offers [Offer]
itempropprice1.00
itemproppriceCurrencyUSD
+ +

Compatibilité des navigateurs

+ +

Fonctionnalité ajoutée dans Firefox 16 et retirée dans Firefox 49.

+ +

Voir aussi

+ + diff --git "a/files/fr/web/html/microdonn\303\251es/index.html" "b/files/fr/web/html/microdonn\303\251es/index.html" deleted file mode 100644 index 66230edd72..0000000000 --- "a/files/fr/web/html/microdonn\303\251es/index.html" +++ /dev/null @@ -1,140 +0,0 @@ ---- -title: Microdonnées -slug: Web/HTML/Microdonnées -tags: - - HTML - - Microdata - - Microdonnées -translation_of: Web/HTML/Microdata ---- -
{{QuickLinksWithSubpages("/en-US/docs/Web/HTML")}}
- -

Les microdonnées (microdata) sont une partie de la spécification HTML du WHATWG qui est utilisée afin de fournir des métadonnées sur le contenu des pages web. Les moteurs de recherche, les robots (crawlers) 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.

- -

Les microdonnées sont des groupes de paires nom-valeur. Ces groupes sont appelés des objets (items) et chaque paire nom-valeur est une propriété. Les objets et les propriétés s'inscrivent dans des éléments HTML classiques :

- -
    -
  • Pour créer un objet, on utilise l'attribut itemscope
    • -
  • Pour ajouter une propriété, on utilise l'attribut itemprop sur l'un des descendants.
    • -
- -

Vocabulaires

- -

Google et les autres moteurs de recherches participent au vocabulaire défini par schema.org pour structurer les données. Ce vocabulaire définit un ensemble standard de types et de noms de propriétés. Par exemple MusicEvent indique un événement musical dont les propriétés startDate et location utilisées pour définir les détails du concert. Dans ce cas, l'URL https://schema.org/MusicEvent sera l'URL utilisée pour l'attribut itemtype et les propriétés startDate et location seront les propriétés utilisées, définies par https://schema.org/MusicEvent.

- -

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 schema.org.

- -

Plusieurs moteurs de recherche (Google, Bing et Yahoo!) s'appuient sur schema.org pour améliorer les résultats de recherche.

- -

Localisation

- -

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, Yandex qui est un moteur de recherche très présent en Russie supporte des microformats comme hCard, hRecipe, hReview et hProduct 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.

- -

Attributs globaux liés aux microdonnées

- -

Certains attributs globaux concernent directement les microdonnées :

- -
-
itemid
-
Cet attribut est l'identifiant unique d'un objet.
-
itemprop
-
Cet attribut est utilisé afin d'ajouter des propriétés à un élément.
-
itemref
-
Cet attribut permet de faire référence à d'autres éléments HTML décrivant le même objet.
-
itemscope
-
Cet attribut définit la portée du vocabulaire déclaré par itemtype et englobe généralement un objet.
-
itemtype
-
Cet attribut définit le vocabulaire qui spécifie le modèle de données utilisé pour décrire les objets.
-
- -

Exemple

- -

HTML

- -
<div itemscope itemtype="https://schema.org/SoftwareApplication">
-  <span itemprop="name">Angry Birds</span> -
-
-  REQUIRES <span itemprop="operatingSystem">ANDROID</span><br>
-  <link itemprop="applicationCategory" href="https://schema.org/GameApplication"/>
-
-  <div itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating">
-    RATING:
-    <span itemprop="ratingValue">4.6</span> (
-    <span itemprop="ratingCount">8864</span> ratings )
-  </div>
-
-  <div itemprop="offers" itemscope itemtype="https://schema.org/Offer">
-    Price: $<span itemprop="price">1.00</span>
-    <meta itemprop="priceCurrency" content="USD" />
-  </div>
-</div>
- -

Structure de donnée

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
itemscopeitemtypeSoftwareApplication (https://schema.org/SoftwareApplication)
itempropnameAngry Birds
itempropoperatingSystemANDROID
itempropapplicationCategoryGameApplication (https://schema.org/GameApplication)
itemscopeitemprop[itemtype]aggregateRating [AggregateRating]
itempropratingValue4.6
itempropratingCount8864
itemscopeitemprop[itemtype]offers [Offer]
itempropprice1.00
itemproppriceCurrencyUSD
- -

Compatibilité des navigateurs

- -

Fonctionnalité ajoutée dans Firefox 16 et retirée dans Firefox 49.

- -

Voir aussi

- - diff --git a/files/fr/web/html/optimizing_your_pages_for_speculative_parsing/index.html b/files/fr/web/html/optimizing_your_pages_for_speculative_parsing/index.html deleted file mode 100644 index 15342d7577..0000000000 --- a/files/fr/web/html/optimizing_your_pages_for_speculative_parsing/index.html +++ /dev/null @@ -1,36 +0,0 @@ ---- -title: Optimisation des pages pour l'analyse spéculative -slug: Web/HTML/Optimizing_your_pages_for_speculative_parsing -tags: - - Avancé - - Cookies - - Développement Web - - HTML - - HTML5 - - NeedsUpdate -translation_of: Glossary/speculative_parsing ---- -

Traditionnellement dans les navigateurs, l'analyseur HTML a été exécuté sur le fil principal et a été bloqué après une balise </script> jusqu'à ce que le script ait été extrait du réseau et exécuté. L'analyseur HTML dans Firefox 4 et versions ultérieures prend en charge l'analyse spéculative sur le fil principal. Il analyse "en avant" pendant que les scripts sont téléchargés et exécutés. Comme dans Firefox 3.5 et 3.6, l'analyseur HTML lance des chargements spéculatifs pour les scripts, les feuilles de style et les images qu'il trouve à l'avance dans le flux. Toutefois, dans Firefox 4 et versions ultérieures, l'analyseur HTML exécute également l'algorithme de construction de l'arborescence HTML de manière spéculative. L'avantage est que lorsqu'une spéculation réussit, il n'est pas nécessaire d'analyser la partie du fichier entrant qui a déjà été analysée pour les scripts, les feuilles de style et les images. L'inconvénient est qu'il y a plus de travail perdu quand la spéculation échoue.
-
- Ce document vous aide à éviter le genre de choses qui font échouer la spéculation et ralentir le chargement de votre page.

- -

Réussir les chargements spéculatifs

- -

Il n'y a qu'une seule règle pour réussir les chargements spéculatifs de scripts liés, de feuilles de style et d'images :

- -
    -
  • Si vous utilisez un élément <base> pour remplacer l'URI de base de votre page, placez l'élément dans la partie non-scriptée du document. Ne l'ajoutez pas par document.write() ou document.createElement().
    • -
- -

Éviter de perdre la sortie du constructeur d'arborescence

- -

L'analyse spéculative du constructeur d'arborescence échoue quand document.write() change l'état du constructeur d'arborescence, au point que l'état spéculatif après la balise </script> ne tient plus lorsque tout le contenu inséré par document.write() a été analysé. Cependant, seules les utilisations inhabituelles de document.write() entraînent ce genre de problèmes. Ici, les choses à éviter :

- -
    -
  • n'écrivez pas d'arborescences déséquilibrées. <script>document.write("<div>");</script> est mauvais. <script>document.write("<div></div>");</script> est valide.
    • -
  • n'écrivez pas de balisage infini. <script>document.write("<div></div");</script> est mauvais.
    • -
  • ne terminez pas votre écriture avec un retour chariot . <script>document.write("Hello World!\r");</script> est mauvais. <script>document.write("Hello World!\n");</script> est valide.
    • -
  • notez que l'écriture de balises équilibrées peut entraîner la déduction d'autres balises de telle manière que l'écriture est finalement déséquilibrée. Par exemple, <script>document.write("<div></div>");</script> à l'intérieur de l'élément d'en-tête sera interprété comme <script>document.write("</head><body><div></div>");</script> qui est déséquilibré.
    • -
  • ne pas formater une partie de tableau. <table><script>document.write("<tr><td>Hello World!</td></tr>");</script></table> est mauvais. Par contre, <script>document.write("<table><tr><td>Hello World!</td></tr></table>");</script> est valide.
    • -
  • À FAIRE : document.write inclus dans d'autres éléments de formatage.
    • -
diff --git a/files/fr/web/html/preloading_content/index.html b/files/fr/web/html/preloading_content/index.html new file mode 100644 index 0000000000..2519577b6c --- /dev/null +++ b/files/fr/web/html/preloading_content/index.html @@ -0,0 +1,237 @@ +--- +title: Précharger du contenu avec rel="preload" +slug: Web/HTML/Précharger_du_contenu +tags: + - Guide + - HTML + - JavaScript + - Performance + - preload +translation_of: Web/HTML/Preloading_content +--- +
{{QuickLinksWithSubpages("/fr/docs/Web/HTML")}}
+ +

La valeur preload 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 preload.

+ +

Les bases

+ +

On utilise généralement l'élément <link> de façon assez simple afin de charger une feuille de style CSS pour la page :

+ +
<link rel="stylesheet" href="styles/main.css">
+ +

Dans le cas qui va nous intéresser, on utilisera l'attribut rel avec la valeur preload. Cela va permettre d'utiliser l'élément <link> 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")}}.

+ +

Voici un exemple d'application simple (vous pouvez consulter le code source de cet exemple JS et CSS et visualiser la démo live) :

+ +
<head>
+  <meta charset="utf-8">
+  <title>Exemple de preload avec JS et CSS</title>
+
+  <link rel="preload" href="style.css" as="style">
+  <link rel="preload" href="main.js" as="script">
+
+  <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+  <h1>Balles rebondissantes</h1>
+  <canvas></canvas>
+
+  <script src="main.js"></script>
+</body>
+ +

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 tard, 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.

+ +

preload possède d'autres avantages. On pourra utiliser l'attribut as afin d'indiquer le type de contenu à précharger afin que le navigateur puisse :

+ +
    +
  • Prioriser le chargement des ressources plus précisément.
    • +
  • Identifier les requêtes utilisées ensuite afin de réutiliser la même ressource si c'est possible.
    • +
  • Appliquer la bonne politique de sécurité du contenu pour la ressource en question
    • +
  • Utiliser le bon {{HTTPHeader("Accept")}} pour les requêtes associées.
    • +
+ +

Quels sont les types de contenu qu'on peut précharger ?

+ +

Il est possible de précharger de nombreux types de contenu, voici les valeurs principales qu'on peut utiliser avec l'attribut as :

+ +
    +
  • audio : un fichier audio.
    • +
  • document : un document HTML destiné à être intégré dans un élément {{htmlelement("frame")}} ou dans un élément {{htmlelement("iframe")}}.
    • +
  • embed : une ressource destinée à être intégrée dans un élément {{htmlelement("embed")}}.
    • +
  • fetch : une ressource à laquelle on accèdera via une requête fetch ou via une requête XHR (par exemple un ArrayBuffer ou un fichier JSON).
    • +
  • font : un fichier de police de caractère.
    • +
  • image : un fichier contenant une image .
    • +
  • object : une ressource à intégrer dans un élément {{htmlelement("embed")}}.
    • +
  • script : un fichier JavaScript.
    • +
  • style : une feuille de style.
    • +
  • track : un fichier WebVTT.
    • +
  • worker : un web worker ou un worker partagé JavaScript.
    • +
  • video : un fichier vidéo.
    • +
+ +
+

Note : 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 les extensions à l'élément <link>. On notera également que la liste complète des valeurs acceptables pour l'attribut as est définie dans la spécification Fetch (cf. les destinations de requête).

+
+ +

Ajouter un type MIME

+ +

Les éléments <link> permettent d'utiliser un attribut {{htmlattrxref("type", "link")}} qui contient le type MIME 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 type 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é.

+ +

Vous pouvez voir un exemple de ce fonctionnement avec une vidéo (voir le code source complet et la version live) :

+ +
<head>
+  <meta charset="utf-8">
+  <title>Exemple de préchargement d'une vidéo</title>
+
+  <link rel="preload" href="sintel-short.mp4" as="video" type="video/mp4">
+</head>
+<body>
+  <video controls>
+    <source src="sintel-short.mp4" type="video/mp4">
+    <source src="sintel-short.webm" type="video/webm">
+    <p>Votre navigateur ne prend pas en charge les vidéos HTML5.
+       Voici <a href="sintel-short.mp4">un lien pour télécharger la vidéo</a>.</p>
+  </video>
+</body>
+ +

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.

+ +

Récupérer des ressources de différentes origines

+ +

Si le paramétrage CORS 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 <link>.

+ +

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. les spécifications pour la récupération des polices si vous êtes intéressé par les détails).

+ +

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 le code source complet de l'exemple sur GitHub (et voir le résultat live ici) :

+ +
<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">
+
+  <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 href="style.css" rel="stylesheet" type="text/css">
+</head>
+<body>
+  ...
+</body>
+ +

Vous pouvez ici voir qu'on fournit l'indication sur le type de ressource via l'attribut as, le type MIME grâce à l'attribut type mais aussi et surtout l'attribut crossorigin qui permet de gérer le CORS.

+ +

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 FOUT pour Flash Of Unstyled Text).

+ +

Gérer les différents médias

+ +

Une qualité des éléments <link> est qu'ils gèrent l'attribut {{htmlattrxref("media", "link")}}. Ce dernier peut être utilisé afin de conditionner le chargement de la ressource selon le type de média voire selon des requêtes de média (media queries). En bref, il est possible de faire du chargement de ressources qui soit responsive !

+ +

Prenons un exemple simple (le code source est disponible sur GitHub, avec une démonstration live) :

+ +
<head>
+  <meta charset="utf-8">
+  <title>Exemple de préchargement responsive</title>
+
+  <link rel="preload" href="bg-image-narrow.png" as="image" media="(max-width: 600px)">
+  <link rel="preload" href="bg-image-wide.png" as="image" media="(min-width: 601px)">
+
+  <link rel="stylesheet" href="main.css">
+</head>
+<body>
+  <header>
+    <h1>Mon site</h1>
+  </header>
+
+  <script>
+    var mediaQueryList = window.matchMedia("(max-width: 600px)");
+    var header = document.querySelector('header');
+
+    if(mediaQueryList.matches) {
+      header.style.backgroundImage = 'url(bg-image-narrow.png)';
+    } else {
+      header.style.backgroundImage = 'url(bg-image-wide.png)';
+    }
+  </script>
+</body>
+ +

Vous pouvez ici voir qu'on a ajouté les attributs media sur les éléments <link> 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 Tester les requêtes média pour plus d'informations sur ce point).

+ +

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.

+ +

Utiliser des scripts et des préchargements différés

+ +

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 :

+ +
var preloadLink = document.createElement("link");
+preloadLink.href = "myscript.js";
+preloadLink.rel = "preload";
+preloadLink.as = "script";
+document.head.appendChild(preloadLink);
+
+ +

Cela signifie que le navigateur préchargera le fichier JavaScript sans pour autant l'utiliser immédiatement.

+ +

Pour utiliser le script en question, quand on en a besoin, on pourrait écrire :

+ +
var preloadedScript = document.createElement("script");
+preloadedScript.src = "myscript.js";
+document.body.appendChild(preloadedScript);
+
+ +

Cela permet de précharger un script et de différer son exécution jusqu'au moment où on en a besoin.

+ +

Les autres mécanismes de préchargement

+ +

Il existe d'autres fonctionnalités qui permettent de précharger des ressources mais aucune n'est aussi flexible que <link rel="preload"> :

+ +
    +
  • <link rel="prefetch"> 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 prefetch que pour celles utilisant preload (la page actuelle est considérée comme plus importante que la suivante). Pour plus de détails, lire la FAQ sur le préchargement des liens.
    • +
  • <link rel="prerender"> 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 prerender comme un préchargement NoState.
    • +
  • <link rel="subresource">{{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 as n'existait pas) et l'ensemble des ressources recevait donc une priorité assez basse.
    • +
  • 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.
    • +
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('Preload','#x2.link-type-preload','preload')}}{{Spec2('Preload')}}Détails complémentaires sur preload.
{{SpecName('HTML WHATWG', 'link-type-preload', 'rel=preload')}}{{Spec2('HTML WHATWG')}}Définition simple de preload.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("html.elements.link.rel.preload")}}

+ +

Voir aussi

+ + diff --git "a/files/fr/web/html/pr\303\251charger_du_contenu/index.html" "b/files/fr/web/html/pr\303\251charger_du_contenu/index.html" deleted file mode 100644 index 2519577b6c..0000000000 --- "a/files/fr/web/html/pr\303\251charger_du_contenu/index.html" +++ /dev/null @@ -1,237 +0,0 @@ ---- -title: Précharger du contenu avec rel="preload" -slug: Web/HTML/Précharger_du_contenu -tags: - - Guide - - HTML - - JavaScript - - Performance - - preload -translation_of: Web/HTML/Preloading_content ---- -
{{QuickLinksWithSubpages("/fr/docs/Web/HTML")}}
- -

La valeur preload 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 preload.

- -

Les bases

- -

On utilise généralement l'élément <link> de façon assez simple afin de charger une feuille de style CSS pour la page :

- -
<link rel="stylesheet" href="styles/main.css">
- -

Dans le cas qui va nous intéresser, on utilisera l'attribut rel avec la valeur preload. Cela va permettre d'utiliser l'élément <link> 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")}}.

- -

Voici un exemple d'application simple (vous pouvez consulter le code source de cet exemple JS et CSS et visualiser la démo live) :

- -
<head>
-  <meta charset="utf-8">
-  <title>Exemple de preload avec JS et CSS</title>
-
-  <link rel="preload" href="style.css" as="style">
-  <link rel="preload" href="main.js" as="script">
-
-  <link rel="stylesheet" href="style.css">
-</head>
-
-<body>
-  <h1>Balles rebondissantes</h1>
-  <canvas></canvas>
-
-  <script src="main.js"></script>
-</body>
- -

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 tard, 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.

- -

preload possède d'autres avantages. On pourra utiliser l'attribut as afin d'indiquer le type de contenu à précharger afin que le navigateur puisse :

- -
    -
  • Prioriser le chargement des ressources plus précisément.
    • -
  • Identifier les requêtes utilisées ensuite afin de réutiliser la même ressource si c'est possible.
    • -
  • Appliquer la bonne politique de sécurité du contenu pour la ressource en question
    • -
  • Utiliser le bon {{HTTPHeader("Accept")}} pour les requêtes associées.
    • -
- -

Quels sont les types de contenu qu'on peut précharger ?

- -

Il est possible de précharger de nombreux types de contenu, voici les valeurs principales qu'on peut utiliser avec l'attribut as :

- -
    -
  • audio : un fichier audio.
    • -
  • document : un document HTML destiné à être intégré dans un élément {{htmlelement("frame")}} ou dans un élément {{htmlelement("iframe")}}.
    • -
  • embed : une ressource destinée à être intégrée dans un élément {{htmlelement("embed")}}.
    • -
  • fetch : une ressource à laquelle on accèdera via une requête fetch ou via une requête XHR (par exemple un ArrayBuffer ou un fichier JSON).
    • -
  • font : un fichier de police de caractère.
    • -
  • image : un fichier contenant une image .
    • -
  • object : une ressource à intégrer dans un élément {{htmlelement("embed")}}.
    • -
  • script : un fichier JavaScript.
    • -
  • style : une feuille de style.
    • -
  • track : un fichier WebVTT.
    • -
  • worker : un web worker ou un worker partagé JavaScript.
    • -
  • video : un fichier vidéo.
    • -
- -
-

Note : 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 les extensions à l'élément <link>. On notera également que la liste complète des valeurs acceptables pour l'attribut as est définie dans la spécification Fetch (cf. les destinations de requête).

-
- -

Ajouter un type MIME

- -

Les éléments <link> permettent d'utiliser un attribut {{htmlattrxref("type", "link")}} qui contient le type MIME 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 type 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é.

- -

Vous pouvez voir un exemple de ce fonctionnement avec une vidéo (voir le code source complet et la version live) :

- -
<head>
-  <meta charset="utf-8">
-  <title>Exemple de préchargement d'une vidéo</title>
-
-  <link rel="preload" href="sintel-short.mp4" as="video" type="video/mp4">
-</head>
-<body>
-  <video controls>
-    <source src="sintel-short.mp4" type="video/mp4">
-    <source src="sintel-short.webm" type="video/webm">
-    <p>Votre navigateur ne prend pas en charge les vidéos HTML5.
-       Voici <a href="sintel-short.mp4">un lien pour télécharger la vidéo</a>.</p>
-  </video>
-</body>
- -

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.

- -

Récupérer des ressources de différentes origines

- -

Si le paramétrage CORS 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 <link>.

- -

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. les spécifications pour la récupération des polices si vous êtes intéressé par les détails).

- -

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 le code source complet de l'exemple sur GitHub (et voir le résultat live ici) :

- -
<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">
-
-  <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 href="style.css" rel="stylesheet" type="text/css">
-</head>
-<body>
-  ...
-</body>
- -

Vous pouvez ici voir qu'on fournit l'indication sur le type de ressource via l'attribut as, le type MIME grâce à l'attribut type mais aussi et surtout l'attribut crossorigin qui permet de gérer le CORS.

- -

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 FOUT pour Flash Of Unstyled Text).

- -

Gérer les différents médias

- -

Une qualité des éléments <link> est qu'ils gèrent l'attribut {{htmlattrxref("media", "link")}}. Ce dernier peut être utilisé afin de conditionner le chargement de la ressource selon le type de média voire selon des requêtes de média (media queries). En bref, il est possible de faire du chargement de ressources qui soit responsive !

- -

Prenons un exemple simple (le code source est disponible sur GitHub, avec une démonstration live) :

- -
<head>
-  <meta charset="utf-8">
-  <title>Exemple de préchargement responsive</title>
-
-  <link rel="preload" href="bg-image-narrow.png" as="image" media="(max-width: 600px)">
-  <link rel="preload" href="bg-image-wide.png" as="image" media="(min-width: 601px)">
-
-  <link rel="stylesheet" href="main.css">
-</head>
-<body>
-  <header>
-    <h1>Mon site</h1>
-  </header>
-
-  <script>
-    var mediaQueryList = window.matchMedia("(max-width: 600px)");
-    var header = document.querySelector('header');
-
-    if(mediaQueryList.matches) {
-      header.style.backgroundImage = 'url(bg-image-narrow.png)';
-    } else {
-      header.style.backgroundImage = 'url(bg-image-wide.png)';
-    }
-  </script>
-</body>
- -

Vous pouvez ici voir qu'on a ajouté les attributs media sur les éléments <link> 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 Tester les requêtes média pour plus d'informations sur ce point).

- -

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.

- -

Utiliser des scripts et des préchargements différés

- -

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 :

- -
var preloadLink = document.createElement("link");
-preloadLink.href = "myscript.js";
-preloadLink.rel = "preload";
-preloadLink.as = "script";
-document.head.appendChild(preloadLink);
-
- -

Cela signifie que le navigateur préchargera le fichier JavaScript sans pour autant l'utiliser immédiatement.

- -

Pour utiliser le script en question, quand on en a besoin, on pourrait écrire :

- -
var preloadedScript = document.createElement("script");
-preloadedScript.src = "myscript.js";
-document.body.appendChild(preloadedScript);
-
- -

Cela permet de précharger un script et de différer son exécution jusqu'au moment où on en a besoin.

- -

Les autres mécanismes de préchargement

- -

Il existe d'autres fonctionnalités qui permettent de précharger des ressources mais aucune n'est aussi flexible que <link rel="preload"> :

- -
    -
  • <link rel="prefetch"> 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 prefetch que pour celles utilisant preload (la page actuelle est considérée comme plus importante que la suivante). Pour plus de détails, lire la FAQ sur le préchargement des liens.
    • -
  • <link rel="prerender"> 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 prerender comme un préchargement NoState.
    • -
  • <link rel="subresource">{{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 as n'existait pas) et l'ensemble des ressources recevait donc une priorité assez basse.
    • -
  • 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.
    • -
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('Preload','#x2.link-type-preload','preload')}}{{Spec2('Preload')}}Détails complémentaires sur preload.
{{SpecName('HTML WHATWG', 'link-type-preload', 'rel=preload')}}{{Spec2('HTML WHATWG')}}Définition simple de preload.
- -

Compatibilité des navigateurs

- - - -

{{Compat("html.elements.link.rel.preload")}}

- -

Voir aussi

- - diff --git a/files/fr/web/html/reglages_des_attributs_cors/index.html b/files/fr/web/html/reglages_des_attributs_cors/index.html deleted file mode 100644 index ebb63f97f5..0000000000 --- a/files/fr/web/html/reglages_des_attributs_cors/index.html +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: Attributs de réglage du CORS -slug: Web/HTML/Reglages_des_attributs_CORS -tags: - - Avancé - - CORS - - HTML - - Reference -translation_of: Web/HTML/Attributes/crossorigin ---- -
{{HTMLSidebar}}
- -

En HTML5, certains des éléments HTML supportant le CORS (Cross-Origin Resource Sharing) comme les éléments {{HTMLElement("img")}}, {{HTMLElement("video")}} ou {{HTMLElement("script")}}, ont un attribut crossorigin (propriété crossOrigin), qui permet de configurer les requêtes CORS pour les données de l'élément à renvoyer. Ces attributs sont listés ci-après avec les valeurs qu'ils peuvent avoir :

- - - - - - - - - - - - - - - - - - - - -
Mot-cléDescription
anonymousLes requêtes CORS pour cet élément auront le marqueur d'authentification (credentials flag) avec la valeur 'same-origin'.
use-credentialsLes requêtes CORS pour cet élément auront le marqueur d'authentification (credentials flag) avec la valeur 'include'.
""Utiliser la chaîne vide (crossorigin="") ou l'attribut seul (crossorigin) sera équivalent à l'utilisation de la valeur anonymous.
- -

Par défaut (quand l'attribut n'est pas spécifié), le CORS n'est pas du tout utilisé. Le mot-clé anonymous signifie que, lorsqu'il n'y a pas la même origine, il n'y aura ni échange d'informations d'authentification de l'utilisateur via des cookies, ni des certificats SSL côté client ou des authentifications HTTP comme détaillé dans la section terminologique de la spécification CORS.

- -

Un mot-clé invalide ou une chaîne de caractères vide seront interprétés comme le mot-clé anonymous.

- -

Exemple : utiliser crossorigin avec l'élément script

- -

On peut utiliser l'élément {{HTMLElement("script")}} afin d'indiquer au navigateur d'exécuter un script (ici, https://exemple.com/framework-exemple.js) sans envoyer les informations d'authentification de l'utilisateur.

- -
<script src="https://exemple.com/framework-exemple.js"
-        crossorigin="anonymous">
-</script>
- -

Exemple : utiliser des informations d'authentification avec un manifeste

- -

La valeur use-credentials doit être utilisée lorsqu'on récupère un manifeste nécessitant des informations d'authentification, y compris lorsque le fichier provient de la même origine :

- -
<link rel="manifest" href="/app.manifest" crossorigin="use-credentials">
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', 'infrastructure.html#cors-settings-attributes', 'CORS settings attributes')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML WHATWG', 'embedded-content.html#attr-img-crossorigin', 'crossorigin')}}{{Spec2('HTML WHATWG')}} 
- -

Compatibilité du navigateur

- -

L'attribut crossorigin pour <script>

- - - -

{{Compat("html.elements.script.crossorigin")}}

- -

L'attribut crossorigin pour <video>

- - - -

{{Compat("html.elements.video.crossorigin")}}

- -

Voir aussi

- - diff --git a/files/fr/web/html/sections_and_outlines_of_an_html5_document/index.html b/files/fr/web/html/sections_and_outlines_of_an_html5_document/index.html deleted file mode 100644 index 319d98e927..0000000000 --- a/files/fr/web/html/sections_and_outlines_of_an_html5_document/index.html +++ /dev/null @@ -1,375 +0,0 @@ ---- -title: Structures et sections d'un document HTML5 -slug: Web/HTML/Sections_and_Outlines_of_an_HTML5_document -tags: - - Avancé - - Exemple - - Guide - - HTML - - HTML5 - - Section - - Structure - - Web -translation_of: Web/Guide/HTML/Using_HTML_sections_and_outlines ---- -

Cette page présente la manière dont les navigateurs définissent la structure d'un document à partir de son fichier HTML.

- -

Structure et document outline

- -

Le terme anglais "document outline" ou "document outlines" désigne la structure d'un document générée à partir de ses titres. Cette structure permet de fournir aux usagers une vision simplifiée du document, tel un sommaire ou une table des matières.

- -

Les technologies d'assistances telles que les lecteurs d'écran peuvent proposer à leurs usagers de parcourir le document par ce moyen. Cela leur permet d'avoir rapidement une idée du contenu de la page ou d'aller directement à la section qui les intéresse.

- -

Depuis HTML4, cette structure est générée à partir de la valeur absolue des différents titres. Un <h2> sera considéré comme un niveau hiérarchique plus bas qu'un <h1> et un niveau plus haut qu'un <h3>.

- -

L'algorithme Outline HTML5, proposait quand à lui de générer cette même structure non pas à partir des titres, mais à partir de l'imbrication des <section> entre elles. Cet algorithme n'est à l'heure actuelle implémenté par aucun navigateur ou technologie d'assistance. La partie du document le concernant est donc purement indicative.

- -

Structure d'un document depuis HTML4

- -

La structure d'un document, à savoir la structure sémantique de ce qui est entre <body> et </body>, est fondamentale pour la présentation de la page à l'utilisateur. HTML4 utilise la notion de sections et sous-sections d'un document pour décrire sa structure. Une section est définie par un élément de division HTML ({{HTMLElement ("div")}}) contenant des éléments de titre ({{HTMLElement ("h1")}}, {{HTMLElement ("h2")}}, {{ HTMLElement ("h3")}}, {{HTMLElement ("h4")}}, {{HTMLElement ("h5")}} ou {{HTMLElement ("h6")}}), définissant son titre. Les relations entre ces éléments HTML et la division HTML conduit à la structure du document et son schéma.

- -

Ainsi, le code suivant :

- -

-<div class="section" id="foret-elephants">
-  <h1>Les éléphants de forêt</h1>
-  <p>Dans cet article, nous discutons des éléphants de forêt moins connus.
-     … cette section continue…
-  <div class="subsection" id="foret-habitat">
-    <h2>Habitat</h2>
-    <p>Les éléphants de forêt ne vivent pas dans les arbres mais parmi eux.
-       … ce paragraphe continue…
-  </div>
-</div>
- -

conduit au schéma suivant :

- -
1. Les éléphants de forêt
-  1.1 Habitat
-
- -

Les éléments {{HTMLElement ("div")}} ne sont pas obligatoires pour définir une nouvelle section. La simple présence d'un élément de titre est suffisante pour impliquer une nouvelle section. Par conséquent :

- -
<h1>Les éléphants de forêt</h1>
-  <p>Dans cette section, nous discutons des éléphants de forêt moins connus.
-    … cette section continue…
-
-  <h2>Habitat</h2>
-  <p>Les éléphants de forêt ne vivent pas dans les arbres mais parmi eux.
-    … ce paragraphe continue…
-
-  <h2>Régime</h2>
-
-<h1>Gerbilles de Mongolie</h1>
-
- -

conduit au schéma suivant :

- -
1. Les éléphants de forêt
-  1.1 Habitat
-  1.2 Régime
-2. Gerbilles de Mongolie
- -

Problèmes résolus par HTML5

- -

Le code HTML4 définit la structure d'un document, cependant son algorithme schématique implicite est très strict et conduit à de nombreux problèmes :

- -
    -
  1. L'utilisation de {{HTMLElement ("div")}} pour définir les sections sémantiques, sans définir de valeurs spécifiques pour l'attribut class, rend impossible l'automatisation de l'algorithme (« {{HTMLElement ("div")}} fait-il partie de l'aperçu de la page ? Définit-il une section ou un paragraphe ? » ou « Ce {{HTMLElement ("div")}} est-il là uniquement pour le style ? »). En d'autres termes, la spécification HTML4 est très imprécise sur ce qui est une section et quel est son champ d'application. La génération automatique du schéma est importante, surtout pour les technologies d'assistance (en) qui sont susceptibles d'adapter leur façon de présenter l'information aux utilisateurs en fonction de la structure du document. HTML5 supprime la nécessité d'éléments {{HTMLElement ("div")}} dans l'algorithme par l'introduction d'un nouvel élément, {{HTMLElement ("section")}}, l'élément HTML Section.
    2. -
  2. La fusion de plusieurs documents est compliquée : l'inclusion d'un sous-document dans un document principal conduit à modifier le niveau des éléments de titres HTML afin de conserver le plan du document. Ce problème est résolu dans HTML5, les éléments de section nouvellement introduits ({{HTMLElement ("article")}}, {{HTMLElement ("section")}}, {{HTMLElement ("nav")}} et {{HTMLElement ("aside")}}) sont toujours sous-sections de la plus proche section ascendante, indépendamment des sections créées par les en-têtes internes.
    3. -
  3. En HTML4, chaque section fait partie de la structure du document. Mais les documents ne sont pas souvent linéaires. Un document peut avoir des sections spéciales contenant des informations qui n'en font pas partie, même si elles sont liées au flux principal, comme un bloc de publicité ou une boîte explication. HTML5 introduit l'élément {{HTMLElement ("aside")}} permettant à ces sections de ne pas faire partie du plan principal.
    4. -
  4. Encore une fois, en HTML4, parce que chaque section fait partie de la structure du document, il n'est pas possible d'avoir des sections contenant des informations relatives non pas au document mais au site tout entier, comme des logos, des menus, une table des matières, ou des mentions légales. À cet effet, HTML5 introduit trois éléments de section spécifiques : {{HTMLElement ("nav")}} pour des collections de liens, comme une table des matières, {{HTMLElement ("footer")}} et {{HTMLElement ("header")}} pour les informations relatives au site.
    5. -
- -

Plus généralement HTML5 apporte la précision des caractéristiques de sectionnement et de position, permettant aux contours de documents à être prévisibles et utilisés par le navigateur afin d'améliorer l'expérience utilisateur.

- -

L'algorithme Outline HTML5

- -
-

Important : Aucune implémentation de cet algorithme Outline HTML5 n'existe ni dans les navigateurs web ni dans les technologies d'assistance. Elle n'a jamais fait partie de la spécification finale W3C. L'algorithme Outline ne devrait donc pas être utilisé pour transmettre la structure d'un document aux utilisateurs. Il est recommandé aux auteurs d'utiliser le rang des titres (h1-h6) pour transmettre la structure d'un document.

-
- -

Cet algorithme propose de générer la structure du document à partir de l'imbrication des sections entre elles.

- -

Définir des sections en HTML5

- -

Tout le contenu se trouvant à l'intérieur de l'élément {{HTMLElement ("body")}} est une partie d'une section. Les articles en HTML5 peuvent être imbriqués. À côté de la section principale, définie par l'élément {{HTMLElement ("body")}}, les limites de la section sont définies explicitement ou implicitement. Sections explicitement définies sont le contenu dans {{HTMLElement ("body")}}, {{HTMLElement ("section")}}, {{HTMLElement ("article")}}, {{HTMLElement ("aside")}}, {{HTMLElement ("footer")}}, {{HTMLElement ("header")}} et {{HTMLElement ("nav")}} balises.

- -
-

Remarque : Chaque section peut avoir sa propre hiérarchie rubrique. Par conséquent, même une section imbriquée peut avoir un {{HTMLElement ("h1")}}. Voir Définition des sections en HTML5

-
- -

Prenons un exemple - ici nous avons un document avec une section de haut niveau et un pied de page défini. Dans la section de haut niveau, nous avons trois sous-sections, définies par deux éléments {{htmlelement ('section')}} et un élément {{htmlelement ('aside')}} :

- -
<section>
-
-  <h1>éléphants de forêt</h1>
-
-  <section>
-    <h1>Introduction</h1>
-    <p>Dans cette section, nous discutons des éléphants de forêt moins connus.</p>
-  </section>
-
-  <section>
-    <h1>Habitat</h1>
-    <p>Les éléphants de forêt ne vivent pas dans les arbres mais parmi eux.</p>
-  </section>
-
-  <aside>
-    <p>bloc publicitaire</p>
-  </aside>
-
-</section>
-
-<footer>
-  <p>(c) 2010 La société Exemple</p>
-</footer>
-
- -

Cela conduit à la structure suivante :

- -
1. Les éléphants de forêt
-  1.1 Introduction
-  1.2 Habitat
-  1.3 Section (aside)
- -

Définition des en-têtes en HTML5

- -

Bien que les éléments de sectionnement HTML définissent la structure du document, un plan a également besoin de titres pour être utile. La règle de base est simple : le premier élément de titre HTML (l'un des {{HTMLElement ("h1")}}, {{HTMLElement ("h2")}}, {{HTMLElement ("h3")}}, {{HTMLElement ("h4")}}, {{HTMLElement ("h5")}}, {{HTMLElement ("h6")}}) définit le titre de la section courante.

- -

Les éléments de titre ont un rang donné par le nombre dans le nom de l'élément, où {{HTMLElement ("h1")}} a le rang le plus élevé et {{HTMLElement ("h6")}} a le rang le plus bas. Le classement relatif ne compte que dans une section ; la structure des sections détermine le plan, et non pas le rang des titres de sections. Par exemple, ce code :

- -
<section>
-  <h1>éléphants de forêt</h1>
-
-  <p>Dans cette section, nous discutons des éléphants de forêt moins connus.
-     Cette section continue…</p>
-
-  <section>
-    <h2>Habitat</h2>
-
-    <p>Les éléphants de forêt ne vivent pas dans les arbres mais parmi eux.
-       Ce paragraphe continue…</p>
-  </section>
-</section>
-
-<section>
-  <h3>Gerbilles de Mongolie</h3>
-
-  <p>Dans cet article, nous discutons des célèbres gerbilles mongoles.
-     Cette section continue…
-</section>
- -

conduit à la structure suivante :

- -
1. Les éléphants de forêt
-  1.1 Habitat
-2. Gerbilles de Mongolie
- -

Notez que le rang de l'élément titre (dans l'exemple {{HTMLElement ("h1")}} pour la première section de niveau supérieur, {{HTMLElement ("h2")}} pour la sous-section et {{HTMLElement ("h3")}} pour la seconde section de haut niveau) n'est pas important. Tout rang peut être utilisé comme en-tête d'une section explicitement définie, bien que cette pratique ne soit pas recommandée.

- -

Découpage implicite

- -

Parce que les éléments de sectionnement HTML5 ne sont pas obligatoires pour définir la structure, pour conserver la compatibilité avec le Web existant dominé par HTML4, il existe un moyen de définir des sections sans eux. C'est ce qu'on appelle le découpage implicite.

- -

Les éléments de titre HTML ({{HTMLElement ("h1")}} à {{HTMLElement ("h6")}}) définissent une nouvelle section, implicite, quand ils ne sont pas le premier en-tête de leurs sections ascendantes, explicites. La façon dont cette section implicite est positionnée dans la structure est définie par son rang par rapport au titre précédent dans leur section ascendante. Si elle est d'un rang inférieur à l'en-tête précédent, il ouvre une sous-section implicite de la section. Ce code :

- -
<section>
-  <h1>éléphants de forêt</h1>
-
-  <p>Dans cette section, nous discutons des éléphants de forêt moins connus.
-     Cette section continue…
-
-  <h3 class="implicit subsection">Habitat</h3>
-
-  <p>Les éléphants de forêt <p> ne vivent pas dans les arbres mais parmi eux.
-     Ce paragraphe continue…
-</section>
- -

conduit à la structure suivante :

- -
1. Les éléphants de forêt
-  1.1 Habitat (implicitement défini par l'élément h3)
- -

Si elle est de même rang que le titre précédent, elle ferme la section précédente (qui peut avoir été explicite !) et en ouvre une nouvelle implicite de même niveau :

- -
<section>
-  <h1>Éléphants de forêt</h1>
-
-  <p>Dans cette section, nous discutons des éléphants de forêt moins connus.
-     Cette section continue…
-
-  <h1 class="implicit section">Gerbilles de Mongolie</h1>
-
-  <p>Les gerbilles de Mongolie sont mignons petits mammifères.
-     Cette section continue…
-</section>
- -

conduit à la structure suivante :

- -
1. Les éléphants de forêt
-2. Gerbilles de Mongolie (implicitement défini par l'élément h1, qui a fermé la section précédente dans le même temps)
- -

Si elle est d'un rang supérieur au titre précédent, elle ferme la section précédente et en ouvre une nouvelle implicite de niveau supérieur :

- -
<body>
-  <h1>Mammifères</h1>
-
-  <h2>Baleines</h2>
-
-  <p>Dans cette section, nous discutons de baleines géantes.
-     Cette section continue…
-
-  <section>
-    <h3>Éléphants de forêt</h3>
-
-    <p>Dans cet article, nous discutons des éléphants de forêt moins connus.
-       Cette section continue…
-
-    <h3>Gerbilles de Mongolie</h3>
-
-    <p>Hordes de gerbilles ont étalé leur gamme bien au-delà Mongolie.
-       Ce paragraphe continue…
-
-    <h2>Reptiles</h2>
-
-    <p>Reptiles sont des animaux à sang froid.
-       Ce paragraphe continue…
-  </section>
-</body>
- -

conduit à la structure suivante :

- -
1. Mammifères
-  1.1 Baleines (défini implicitement par l'élément h2)
-  1.2 éléphants de forêt (défini explicitement par l'élément section)
-  1.3 Gerbilles de Mongolie (défini implicitement par l'élément h3 qui ferme la section précédente en même temps)
-2. Reptiles (défini implicitement par l'élément h2 qui ferme la section précédente en même temps)
-
- -

Ce n'est pas la structure à laquelle on pourrait s'attendre en jetant un coup d'œil rapide sur le balisage. Pour rendre votre balisage humainement compréhensible, il est bon d'utiliser des balises explicites pour ouvrir et fermer les sections, et de faire correspondre les niveaux des titres avec le niveau d'imbrication désiré de la section. Toutefois, cela n'est pas exigé par la spécification HTML5. Si vous trouvez que les navigateurs rendent de façon inattendue le plan de votre document, vérifiez que vos sections sont implicitement fermées par des éléments d'en-tête.

- -

Une exception à cette règle générale – qui veut que rang du titre devrait correspondre au niveau d'imbrication de la section – concerne les sections qui peuvent être réutilisées dans d'autres documents. Par exemple, une section peut être stockée dans un système de gestion de contenu et assemblée dans des documents au moment de l'exécution. Dans ce cas, une bonne pratique consiste à commencer par {{HTMLElement ("h1")}} pour le titre de niveau supérieur de la section réutilisable. Le niveau d'imbrication de la section réutilisable sera déterminé par la hiérarchie des sections du document dans lequel elle apparaît. Les balises de section explicites sont toujours utiles dans ce cas.

- -

Racines de sectionnement

- -

Une racine de sectionnement est un élément HTML qui peut avoir son propre plan, mais les sections et les titres qu'elle contient ne contribuent pas à la structure de son ascendant. À côté de {{HTMLElement ("body")}}, qui est la racine logique de sectionnement d'un document, il y a souvent des éléments qui introduisent du contenu externe à la page : {{HTMLElement ("blockquote")}}, {{HTMLElement ("details")}}, {{HTMLElement ("fieldset")}}, {{HTMLElement ("figure")}} et {{HTMLElement ("td")}}.

- -

Exemple

- -
<section>
-  <h1>Éléphants de forêt</h1>
-  <section>
-    <h2>Introduction</h2>
-    <p>Dans cette section, nous discutons des éléphants de forêt moins connus.</p>
-  </section>
-  <section>
-    <h2>Habitat</h2>
-    <p>Les éléphants de forêt ne vivent pas dans les arbres mais parmi eux. Regardons ce que les scientifiques disent dans «&nbsp;<cite> l'éléphant de forêt à Bornéo </cite>&nbsp;»&nbsp;:
-    <blockquote>
-      <h1>Bornéo</h1>
-      <p>L'éléphant de la forêt vie à Bornéo…</p>
-    </blockquote>
-  </section>
-</section>
-
- -

Cet exemple se traduit par la structure suivante :

- -
1. Les éléphants de forêt
-  1.1 Introduction
-  1.2 Habitat
- -

Cette structure ne contient pas le plan interne à l'élément {{HTMLElement ("blockquote")}}, qui, étant une citation externe, est une racine de sectionnement et isole sa structure interne.

- -

Les sections externes à la structure

- -

HTML5 introduit deux nouveaux éléments qui permettent de définir des sections ne faisant pas partie de la structure principale d'un document Web :

- -
    -
  1. L'élément HTML de section ({{HTMLElement ("aside")}}) définit une section qui, bien que liée à l'élément principal, ne fait pas partie du flux principal, comme une boîte d'information ou une publicité. Il dispose de son propre plan, mais il n'appartient pas au plan principal.
    2. -
  2. L'élément HTML de section ({{HTMLElement ("nav")}}) définit une section qui contient les liens de navigation. Il peut y en avoir plusieurs dans un document, par exemple, un avec des liens internes à la page, comme une table des matières, et un autre avec des liens de navigations dans le site. Ces liens ne font pas partie du flux principal et du plan, et généralement peut ne pas être initialement rendu par le lecteur d'écran et les technologies d'assistance similaires.
    3. -
- -

Headers and Footers

- -

HTML5 présente également deux nouveaux éléments qui peuvent être utilisés pour marquer l'en-tête et le pied de page d'une section :

- -
    -
  1. L'élément HTML de titre de section ({{HTMLElement ("header")}}) définit l'en-tête d'une page, contenant généralement le logo et le nom du site et, éventuellement, un menu horizontal. Malgré son nom, il n'est pas nécessairement placé au début de la page.
    2. -
  2. L'élément HTML de pied de section ({{HTMLElement ("footer")}}) définit un pied-de-page, contenant généralement les mentions légales et parfois quelques liens. Malgré son nom, il n'est pas nécessairement placé dans le bas de la page.
    3. -
- -

Ceux-ci ne créent pas de nouvelles sections dans la structure, mais ils marquent le contenu dans les sections de la page.

- -

Adresses dans les éléments de sectionnement

- -

L'auteur d'un document veut souvent publier des informations de contact, le nom de l'auteur tel et son adresse. HTML4 le permet grâce à cet l'élément {{HTMLElement ("address")}}, qui a été prolongé en HTML5.

- -

Un document peut être fait de différentes sections de différents auteurs. Une section d'un autre auteur que celui de la page principale est définie en utilisant l'élément {{HTMLElement ("article")}}. Par conséquent, l'élément {{HTMLElement ("address")}} est désormais lié à son {{HTMLElement ("body")}} ou à l'ancêtre {{HTMLElement ("article")}} le plus proche.

- -

Utilisation des éléments HTML5 dans les navigateurs Non-HTML5

- -

Les articles et les éléments en-têtes devraient fonctionner dans la plupart des navigateurs non HTML5. Bien que non pris en charge, ils n'ont pas besoin d'une interface spéciale DOM et ils n'ont besoin que d'un style CSS spécifique comme des éléments inconnus sont aménagés comme display: inline par défaut:

- -
section, article, aside, footer, header, nav, hgroup {
-  display: block;
-}
- -

Bien sûr, le développeur web peut styliser différemment, mais gardez à l'esprit que dans un navigateur non HTML5, le style par défaut est différent de ce qui est attendu de ces éléments. Notez également que le {{HTMLElement ("time")}} élément n'a pas été inclus, car le style par défaut pour elle dans un navigateur non HTML5 est le même que celui de l'une HTML5 compatible.

- -

Cette méthode a ses limites si, comme certains navigateurs ne permettent pas de style des éléments non pris en charge. C'est le cas d'Internet Explorer (version 8 et versions antérieures), qui ont besoin d'un script spécifique pour permettre à celle-ci :

- -
<!--[if lt IE 9]>;
-  <script>
-    document.createElement("header");
-    document.createElement("footer");
-    document.createElement("section");
-    document.createElement("aside");
-    document.createElement("nav");
-    document.createElement("article");
-    document.createElement("hgroup");
-    document.createElement("time");
-  </script>
-<![endif]-->
- -

Ce script signifie que, dans le cas d'Internet Explorer (8 et antérieures), les scripts doivent être activés pour pouvoir afficher HTML5 et les éléments de sectionnement titres correctement. Sinon, ils ne seront pas affichés, ce qui peut être problématique, car ces éléments sont susceptibles de définir la structure de la page entière. C'est pourquoi un élément {{HTMLElement ("NoScript")}} explicite devrait être ajouté pour ce cas :

- -
<noscript>
-  <p><strong>Attention, cette page Web nécessite que JavaScript soit activé !</strong></p>
-  <p>JavaScript est un langage de programmation couramment utilisé pour créer des effets intéractifs dans les navigateurs Web.</p>
-  <p>Malheureusement, il est désactivé dans votre navigateur. Veuillez l'activer pour afficher cette page.</p>
-  <p><a href="https://goo.gl/koeeaJ">Comment activer JavaScript ?</a></p>
-</noscript>
- -

Cela conduit au code ci-dessous pour permettre la prise en charge des éléments de sections et d'en-têtes HTML5 dans les navigateurs non HTML5, même pour Internet Explorer (8 et antérieur), avec un retour correct pour le cas où ce dernier est configuré pour ne pas autoriser les scripts :

- -
<!--[if lt IE 9]>
-  <script>
-    document.createElement("header");
-    document.createElement("footer");
-    document.createElement("section");
-    document.createElement("aside");
-    document.createElement("nav");
-    document.createElement("article");
-    document.createElement("hgroup");
-    document.createElement ("time");
-  </script>
-<![endif]-->
-  <noscript>
-    <p><strong>Attention, cette page Web nécessite que JavaScript soit activé !</strong></p>
-    <p>JavaScript est un langage de programmation couramment utilisé pour créer des effets interactifs dans les navigateurs Web.</p>
-    <p>Malheureusement, il est désactivé dans votre navigateur. Veuillez l'activer pour afficher cette page.</p>
-    <p><a href="https://goo.gl/koeeaJ">Comment activer JavaScript ?</a></p>
-  </noscript>
-
- -
-

Cependant, pour des raisons d’accessibilité, un site devrait toujours pouvoir être consultable en l’absence de Javascript.

-
- -

Conclusion

- -

Les nouveaux éléments sémantiques introduits en HTML5 apportent la capacité de décrire la structure et le plan d'un document web d'une manière standard. Ils apportent un grand avantage pour les utilisateurs de navigateurs HTML5 et qui ont besoin de la structure pour les aider à comprendre la page, par exemple, les utilisateurs de technologies d'assistance. Ces nouveaux éléments sémantiques sont simples à utiliser et, avec très peu d'efforts, ils peuvent également être mis en œuvre dans les navigateurs ne prenant pas en charge HTML5. Par conséquent, ils devraient être utilisés sans restriction.

- -
{{HTML5ArticleTOC()}}
diff --git a/files/fr/web/html/types_de_lien/index.html b/files/fr/web/html/types_de_lien/index.html deleted file mode 100644 index f8134a8fe7..0000000000 --- a/files/fr/web/html/types_de_lien/index.html +++ /dev/null @@ -1,368 +0,0 @@ ---- -title: Types de lien -slug: Web/HTML/Types_de_lien -tags: - - HTML - - Reference - - Types de lien - - Web -translation_of: Web/HTML/Link_types ---- -
{{HTMLSidebar}}
- -

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")}}.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Liste des types de lien HTML et leur signification
Type de lienDescriptionUtilisable dans ces élémentsInterdit dans ces éléments
alternate -
    -
  • Si l'élément est un élément {{HTMLElement("link")}} et que l'attribut {{htmlattrxref("rel", "link")}} contient le type stylesheet, ce lien définit une feuille de style alternative. Dans ce cas, l'attribut {{htmlattrxref("title", "link")}} doit être présent et ne doit pas être la chaîne de caractères vide.
    • -
  • Si l'attribut {{htmlattrxref("type","link")}} vaut application/rss+xml ou application/atom+xml, le lien définit un flux de syndication. Le premier flux définit sur la page est le flux par défaut.
    • -
  • Sinon, le lien définit une page alternative, il peut s'agir : -
      -
    • Si l'attribut {{htmlattrxref("media","link")}} est défini, d'une page destinée à un autre support (par exemple une tablette)
      • -
    • D'une page dans une autre langue si l'attribut {{htmlattrxref("hreflang","link")}} est défini,
      • -
    • D'une page dans un autre format (par exemple PDF) si l'attribut {{htmlattrxref("type","link")}} est défini,
      • -
    • D'une combinaison de ces documents.
      • -
    -
    • -
- 		{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}{{HTMLElement("form")}}
archives {{obsolete_inline}}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.
-
- Note : Bien que la forme archive (au singulier) soit reconnue, elle est incorrecte et doit être évitée.		{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}{{HTMLElement("form")}}
authorCe type définit un hyperlien vers une page qui décrit l'auteur ou qui fournit un moyen de contacter l'auteur du document.
-
- Note : Ce lien peut être un lien mailto: bien que ce ne soit pas recommandé afin d'éviter la collecte de l'adresse électronique (mieux vaut avoir un formulaire de contact).
-
- 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 « made » mais plutôt utiliser {{htmlattrxref("rel", "link")}} avec ce type de lien (« author »).		{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}{{HTMLElement("form")}}
bookmarkCe type de lien indique l'hyperlien est un permalien 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 la section la plus proche de l'élément courant.
-
- 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).		{{HTMLElement("a")}}, {{HTMLElement("area")}}{{HTMLElement("link")}}, {{HTMLElement("form")}}
canonicalUn lien canonique est un élément HTML qui aide les webmasters à ne pas dupliquer du contenu en indiquant la version canonique ou préférée de la page pour l'optimisation à destination des moteurs de recherche.{{HTMLElement("link")}}{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}
dns-prefetch {{experimental_inline}}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.{{HTMLElement("link")}}{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}
externalCe 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.{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}{{HTMLElement("link")}}
first {{obsolete_inline}}Ce type indique que l'hyperlien mène à la première ressource dans la série de ressources à laquelle appartient la page actuelle.
-
- Note : les autres types de lien permettant une navigation séquentielle sont : last, prev, next (pour respectivement la dernière, la précédente et la suivante).
-
- Bien que les synonymems begin et start puissent être reconnus, ils sont incorrects et devraient être évités.		{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}{{HTMLElement("form")}}
help -
    -
  • 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.
    • -
  • 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.
    • -
- 		{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}, {{HTMLElement("link")}}Aucun.
iconCe 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).
-
- 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.
-
- Note : sur iOS, ce type de lien n'est pas utilisé, à la place, ce sont les relations ({{htmlattrxref("rel","link")}}) apple-touch-icon et apple-touch-startup-image qui sont utilisées.
-
- Le type de lien shortcut est souvent vu avant icon mais il n'est pas conforme et les navigateurs l'ignorent, c'est pourquoi il ne doit plus être utilisé.		{{HTMLElement("link")}}{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}
import{{experimental_inline}}Imports de ressource en HTML{{HTMLElement("link")}}{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}
index {{obsolete_inline}}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.
-
- Si un ou plusieurs liens de type up sont présent, la quantité de ces liens indique la profondeur de la page courante au sein de la hiérarchie.		{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}{{HTMLElement("form")}}
last {{obsolete_inline}} -

Ce type indique que l'hyperlien mène à la dernière ressource dans la série de ressources à laquelle appartient la page actuelle.
-
- Note : les autres types de lien permettant une navigation séquentielle sont : first, prev, next (pour respectivement la première, la précédente et la suivante).

- -

Bien que le synonyme end puisse être reconnu, il est incorrect et doit être évité.

- 		{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}Aucun.
licenseCe 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.
-
- Note : bien qu'il puisse être reconnu, le synonyme copyright est incorrect et doit être évité.		{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}, {{HTMLElement("link")}}Aucun.
manifestCe type de lien indique que la ressource liée est un manifeste d'application web.{{HTMLElement("link")}}{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}
modulepreloadInitialise le chargement anticipé (et prioritaire) des modules de scripts{{HTMLElement("link")}}{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}
nextCe type indique que l'hyperlien mène à la prochaine ressource dans la série de ressources à laquelle appartient la page actuelle.
-
- Note : les autres types de lien permettant une navigation séquentielle sont : first, prev, last (pour respectivement la première, la précédente et la dernière).		{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}, {{HTMLElement("link")}}Aucun.
nofollowCe 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.{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}{{HTMLElement("link")}}
noopener -

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 null).
-
- 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 About rel=noopener pour plus de détails) tout en fournissant un référent via l'en-tête HTTP (à moins que noreferrer n'y soit également utilisé).

- -

Lorsque noopener est utilisé, les noms utilisés pour l'attribut target, qui ne sont pas vides et qui ne sont pas _top, _self ou _parent sont alors traités comme s'ils étaient synonymes de _blank lorsqu'il s'agit de décider d'ouvrir une nouvelle fenêtre ou un nouvel onglet.

- 		{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}{{HTMLElement("link")}}
noreferrer -

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")}}.
- (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é.

- 		{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}{{HTMLElement("link")}}
opener {{experimental_inline}} {{non-standard_inline}}Annule l'effet de l'ajout implicite de  rel="noopener" sur les liens qui possèdent explicitement target="_blank" (voir la discussion sur les spécifications HTML, la modification WebKit change et la discussion sur le bug Firefox correspondant).{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}{{HTMLElement("link")}}
pingbackCe 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 Pingback 1.0.
-
- Note : 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.		{{HTMLElement("link")}}{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}
preconnect {{experimental_inline}}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.{{HTMLElement("link")}}{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}
prefetchCe 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.
-
- Note : la FAQ sur prefetch explique quels liens peuvent être récupérés de façon anticipée et quelles peuvent être les méthodes alternatives.		{{HTMLElement("a")}} {{unimplemented_inline}},
- {{HTMLElement("area")}} {{unimplemented_inline}},
- {{HTMLElement("link")}}		{{HTMLElement("form")}}
preload -

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.

- -

Voir l'article Précharger du contenu grâce à rel="preload" pour plus d'informations.

- 		{{HTMLElement("link")}}{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}
prerender {{experimental_inline}}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.{{HTMLElement("link")}}{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}
prevCe type indique que l'hyperlien mène à la ressource précédente dans la série de ressources à laquelle appartient la page actuelle.
-
- Note : les autres types de lien permettant une navigation séquentielle sont : first, next, last (pour respectivement la première, la suivante et la dernière).
-
- Bien que la valeur previous soit reconnue comme synonyme, elle est incorrecte et ne doit pas être utilisée.		{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}, {{HTMLElement("form")}}Aucun.
searchCe 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.
-
- Si l'attribut {{htmlattrxref("type","link")}} vaut application/opensearchdescription+xml, la ressource est un plugin OpenSearch qui peut facilement être ajouté à l'interface de certains navigateurs comme Firefox ou Internet Explorer.		{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}, {{HTMLElement("form")}}Aucun.
sidebar {{non-standard_inline}}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é.
-
- 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.		{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}{{HTMLElement("form")}}
stylesheetCe 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 text/css.
-
- Utilisé avec le mot-clé alternate, il permet de définir une feuille de style alternative auquel cas l'atttribut {{htmlattrxref("title", "link")}} doit être présent et ne doit pas être la chaîne vide.		{{HTMLElement("link")}}{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}
tagCe type indique que l'hyperlien fait référence à un document qui décrit l'étiquette (le tag) appliquée à ce document.
-
- Note : ce type de lien ne doit pas être utilisé pour renvoyer vers un nuage de tags car ce dernier concerne un ensemble de pages et pas uniquement le document courant.		{{HTMLElement("a")}}, {{HTMLElement("area")}}{{HTMLElement("link")}}, {{HTMLElement("form")}}
up {{obsolete_inline}}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.
-
- Le nombre de up indique la différence de profondeur dans la hiérarchie entre la page courante et la page associée.		{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}{{HTMLElement("form")}}
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('Preload','#x2.link-type-preload','preload')}}{{Spec2('Preload')}}Ajout du type preload.
{{SpecName('Resource Hints', '#dfn-preconnect', 'preconnect')}}{{Spec2('Resource Hints')}}Ajout des types dns-prefetch, preconnect et prerender.
{{SpecName("HTML WHATWG", "links.html#linkTypes", "link types")}}{{Spec2('HTML WHATWG')}}Ajout de opener. noopener devient le comportement par défaut pour les liens avec target="_blank".
{{SpecName("HTML5 W3C", "links.html#linkTypes", "link types")}}{{Spec2('HTML5 W3C')}}Ajout de tag, search, prefetch, noreferrer, nofollow, icon et author.
- Renommage de copyright en license.
- Suppression de start, chapter, section, subsection et appendix
{{SpecName("HTML4.01", "types.html#type-links", "link types")}}{{Spec2('HTML4.01')}}Ajout de alternate, stylesheet, start, chapter, section, subsection, appendix et bookmark.
- Renomme previous en prev.
- Suppression de top et search.
{{SpecName("HTML3.2", "#link", "<link>")}}ObsolèteAjout de top, contents, index, glossary, copyright, next, previous, help et search.
{{RFC(1866, "HTML 2.0")}}ObsolèteDéfinition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("html.elements.link.rel")}}

- -

Voir aussi

- -
    -
  • {{HTMLElement("link")}}
    • -
  • {{HTMLElement("a")}}
    • -
  • {{HTMLElement("area")}}
    • -
diff --git a/files/fr/web/html/using_the_application_cache/index.html b/files/fr/web/html/using_the_application_cache/index.html new file mode 100644 index 0000000000..ccc78772a8 --- /dev/null +++ b/files/fr/web/html/using_the_application_cache/index.html @@ -0,0 +1,338 @@ +--- +title: Utiliser Application Cache +slug: Web/HTML/Utiliser_Application_Cache +tags: + - Avancé + - Cache + - Déprécié + - Guide + - HTML + - appcache +translation_of: Web/HTML/Using_the_application_cache +--- +
{{DefaultAPISidebar("App Cache")}}{{securecontext_header}}{{deprecated_header}}
+ +
+

Attention ! L'utilisation de la fonction de mise en cache d'application décrite ici est actuellement fortement déconseillée; cette fonctionnalité est en train d' être retiré de la plate-forme Web. Utiliser Service Workers à la place. En fait, à partir de Firefox 44, quand l'application cache 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 Service workers à la place ({{bug("1204581")}}).

+
+ +

Introduction

+ +

HTML5 supporte la mise en cache hors-ligne de ressources d'applications web; les fichiers sont stockés dans l'Application Cache (AppCache) - une collection de ressources obtenues depuis un fichier manifest (*.appcache) inclue dans une application web.

+ +

L'utilisation d'une application cache permet les bénéfices suivants :

+ +
    +
  • Navigation hors-ligne : les utilisateurs peuvent utiliser un site même s'ils ne sont pas connectés.
    • +
  • Vitesse : les ressources mises en cache sont locales, et se chargent donc plus rapidement.
    • +
  • Réduction de la charge serveur : le navigateur ne télécharge uniquement les ressources qui ont changées sur le serveur.
    • +
+ +
+

Comment fonctionne AppCache

+ +

Activer AppCache

+ +

Vous devez, pour utiliser le cache d'application, utiliser l'attribut manifest dans l'élément <html> comme suit :

+ +
<html manifest="example.appcache">
+  ...
+</html>
+ +

L'attribut manifest spécifie l'URI d'un manifeste de cache, qui est un fichier texte qui répertorie les ressources (fichiers) que le navigateur doit mettre en cache pour votre application.

+ +

Vous devez inclure l'attribut manifest 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 manifest, 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 manifest réglé sur le cache de l'application.

+ +

Certains navigateurs dont Firefox vont avertir l'utilisateur la première fois que celui-ci charge votre application par une notification :

+ +

« Ce site internet (www.example.com) veut stocker des données sur votre ordinateur pour une utilisation hors-ligne. [Accepter] [Refuser pour ce site] [Pas maintenant] ».

+ +

Le terme « d'applications (fonctionnant) hors-ligne » est parfois utilisé pour désigner les applications que l'utilisateur a autorisé à travailler hors-ligne.

+ +

Chargement des documents

+ +

L'utilisation d'un cache de l'application modifie le processus normal de chargement d'un document :

+ +
    +
  • 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.
    • +
  • Le navigateur vérifie ensuite si le manifeste de cache a été mis à jour sur le serveur.
    • +
  • 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.
    • +
+ +

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:

+ +
    +
  1. Quand le navigateur visite un document qui contient l'attribut manifest 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.
    2. +
  2. 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 checking à l'objet window.applicationCache, puis récupère le manifeste en fonction de la règle de cache HTTP adéquate.
    3. +
  3. Si la version en cache du manifeste est à jour, l'évènement noupdate est envoyé a l'applicationCache, 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.
    4. +
  4. Si le manifeste a changé, tous les fichiers dans le manifeste (dont ceux ajoutés au cache lors de l'appel à applicationCache.add()) sont récupérés dans un cache temporaire, en fonction des règles de cache HTTP adéquates. Un évènement progress est envoyé à l'objet applicationCache chaque fois qu'un fichier est récupéré dans le cache temporaire. Un évènement error est envoyé à chaque erreur, et la mise à jour s'arrête.
    5. +
  5. 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 cached est envoyé à l'objet applicationCache. 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).
    6. +
+ +

Emplacement du stockage et effacement du cache hors-ligne

+ +

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 chrome://appcache-internals/. 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.

+ +

Dans Firefox, les données de cache hors-ligne sont stockées séparément du profil Firefox—à côté du cache disque normal :

+ +
    +
  • Windows Vista/7: C:\Users\<username>\AppData\Local\Mozilla\Firefox\Profiles\<salt>.<profile name>\OfflineCache
    • +
  • Mac/Linux: /Users/<username>/Library/Caches/Firefox/Profiles/<salt>.<profile name>/OfflineCache
    • +
+ +

Dans Firefox l'état actuel du cache hors-ligne est consultable sur la page about:cache (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.

+ +

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é.

+ +

Voir aussi effacer les données de stockage DOM.

+ +

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 applicationCache. Le statut du cache de l'application est alors OBSOLETE.

+ +

Le manifeste du cache

+ +

Référencement d'un fichier de manifeste de cache

+ +

L'attribut manifest 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 text/cache-manifest.

+ +
Note: Sur les serveurs Apache, le MIME type pour les fichiers manifest (.appcache) peut être défini par l'ajout de AddType text/cache-manifest .appcache à un fichier a .htaccess soit à l'intérieur du répertoire racine, soit le même répertoire que l'application.
+ +

Les entrées dans un manifeste de cache

+ +

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.

+ +

Example 1: Un fichier manifeste simple

+ +

Ci-dessous, un exemple simple de manifeste — example.appcache utilisé par le site imaginaire www.example.com:

+ +
CACHE MANIFEST
+# v1 - 2011-08-13
+# Ceci est un commentaire.
+https://www.example.com/index.html
+https://www.example.com/header.png
+https://www.example.com/blah/blah
+
+ +

Il n'y a pas, dans cet exemple, d'en-tête de section, donc toutes les lignes sont supposées être des sections (CACHE:) explicites. On peut aussi utiliser des URL relatives (index.html, …)

+ +

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 header.png), vous devez changer le manifeste pour signaller au navigateur qu'il doit rafraîchir le cache, et, comme header.png 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.

+ +
Important: 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.
+ +

Des sections dans un manifeste de cache: CACHE, NETWORK, et FALLBACK

+ +

Un manifeste peut avoir trois sections distinctes: CACHE, NETWORK, et FALLBACK.

+ +
+
CACHE:
+
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.
+
NETWORK:
+
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 *.
+
FALLBACK:
+
Le FALLBACK: 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.
+
+ +

Les sections CACHE, NETWORK, 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.

+ +

Example 2 : Un manifeste de cache plus complet

+ +

Voici un exemple plus complet de manifeste pour notre site imaginaire www.example.com.

+ +
CACHE MANIFEST
+# v1 2011-08-14
+# Ceci est un autre commentaire
+index.html
+cache.html
+style.css
+image1.png
+
+# Contenu Fallback
+FALLBACK:
+. fallback.html
+
+# L'utilise depuis le network (réseau) si il est disponible
+NETWORK:
+network.html
+ +

Nous utilisons dans cet exemple les sections FALLBACK et NETWORK pour préciser que la page network.html doit toujours être récupérée depuis le réseau et que la page fallback.html doit être utilisée comme ressource de secours, par exemple si la connexion au serveur ne peut être établie.

+ +

Structure d'un manifeste

+ +

Les manifestes doivent être servis avec le type MIME text/cache-manifest, et toutes les ressources servies en utilisant ce type MIME doivent respecter la syntaxe d'un manifeste, comme défini ici.

+ +

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 (U+000A), retour chariot (U+000D), ou les deux.

+ +

La première ligne du manifeste doit être la chaine CACHE MANIFEST (séparé par un simple espace U+0020), suivi par aucun ou plusieurs espaces ou tabulations. Tout autre texte sur la ligne sera ignoré.

+ +

Le reste du manifeste peut contenir 0 ou plusieurs lignes :

+ +
+
Lines vides
+
Vous pouvez utiliser les lignes vides comprenant 0 ou plusieurs espaces ou tabulations.
+
Commentaire
+
Les commentaires consistent en 0 ou plusieurs espaces ou tabulations suivis du caractère #, 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.
+
Section de tête
+
La section header précise la section du cache qui est manipulée. Il en existe trois types:
+
+ +
+ + + + + + + + + + + + + + + + + + + +
Section headerDescription
CACHE:Passe à la section explicite. C'est la section par défaut.
NETWORK:Passe à la section des sections en ligne sur la liste blanche.
FALLBACK:Passe à la section de secours.
+
+ +
+
La ligne d'en-tête de section peut contenir des espaces, mais doit inclure un « : » dans le nom de la section.
+
Section data
+
Le format des lignes de données varie selon les sections. Dans la section explicite (CACHE:) 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). +
Note: Les URI relatives pointent vers les URI du manifeste, et non vers les URI du document qui référence le manifeste.
+
+
+ +

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.

+ +

Les ressources dans AppCache

+ +

Le cache inclue toujours au moins une ressource, identifiée par URI. Toutes les ressources répondent à une des catégories suivantes :

+ +
+
Entrées Maitres
+
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 manifest.
+
Entrées Explicites
+
Il s'agit de ressources listées dans le manifeste du cache.
+
Entrées Network
+
Il s'agit de ressources listées dans le manifeste du cache comme entrées de network.
+
Entrées Fallback
+
Il s'agit de ressources listées dans le manifeste du cache comme entrées de fallback. {{fx_minversion_inline("3")}}
+
+ +
Note : 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.
+ +

Les catégories ressources sont décrites en détail ci-dessous.

+ +

Entrées Maitres

+ +

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 https://www.example.com/entry.html, qui ressemble à ça :

+ +
<html manifest="example.appcache">
+  <h1>Application Cache Example</h1>
+</html>
+
+ +

Si entry.html n'est pas inclue dans le manifeste, visiter la page entry.html provoquera l'ajout de la page entry.html dans le cache de l'application comme une master entry.

+ +

Entrées Explicites

+ +

Les entrées explicites sont des ressources explicitement listées dans la section CACHE d'un manifeste de cache.

+ +

Entrées Network

+ +

Les entrées listées dans NETWORK : peuvent contenir plusieurs ou aucune ressource que l'application requiert lors d'un accès en ligne. C'est principalement une liste blanche en ligne. Les URIS spécifiées dans la section NETWORK 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.

+ +
Note : La liste blanche en ligne est ignorée pour les versions de Firefox antérieures à 3.5.
+ +

Vous pouvez l'utiliser pour, par exemple, charger et exécuter des scripts et d'autres codes depuis le serveur au lieu du cache. :

+ +
CACHE MANIFEST
+NETWORK:
+/api
+
+ +

Ceci assure que les requêtes téléchargent les ressources contenues dans https://www.example.com/api/ viendront toujours du réseau sans essayer d'accéder au cache.

+ +
Note : Juste omettre les master entries (les fichiers qui ont l'attribut manifest défini dans l'élément html) dans le manifeste n'aurait pas le même comportement parce que les master entries seront ajoutées — et donc servies depuis— le cache. 
+ +

Entrées Fallback

+ +

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é à https://www.example.com/example.appcache, et qui contient :

+ +
CACHE MANIFEST
+FALLBACK:
+example/bar/ example.html
+
+ +

Toute requête vers https://www.example.com/example/bar/ 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 example.html sera chargé à la place.

+ +

Les états

+ +

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 :

+ +
+
UNCACHED
+
Une valeur spéciale qui indique qu'un object application cache n'est pas complètement initialisée.
+
IDLE
+
Le cache n'est pas en cours de mise à jour.
+
CHECKING
+
Le manifeste est en train d'être contrôlé pour d'éventuelles mises à jour.
+
DOWNLOADING
+
Des ressources sont en train d'être téléchargées pour être ajoutées au cache, dû à un changement du manifeste.
+
UPDATEREADY
+
Il y a une nouvelle version du cache disponible. Il y a un évènement updateready correspondant, qui est lancé au lieu de l'évènement cached quand une nouvelle mise à jour a été téléchargée mais pas encore activée via la méthode swapCache().
+
OBSOLETE
+
Le groupe de caches est maintenant obsolète.
+
+ +

Test pour les mises à jour des manifestes de cache

+ +

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 window.applicationCache.status.

+ +
function onUpdateReady() {
+  console.log('nouvelle version trouvée !');
+}
+window.applicationCache.addEventListener('updateready', onUpdateReady);
+if(window.applicationCache.status === window.applicationCache.UPDATEREADY) {
+  onUpdateReady();
+}
+ +

Pour démarrer manuellement le test pour un nouveau manifeste de cache, vous pouvez utilisez window.applicationCache.update().

+ +

Pièges

+ +
    +
  • Ne jamais accéder à des fichiers mis en cache à l'aide des paramètres GET traditionnels (comme other-cached-page.html?parameterName=value). 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 other-cached-page.html#whatever?parameterName=value.
    • +
  • 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 programmewindow.applicationCache.swapCache(), 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.
    • +
  • 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:
    + ExpiresByType text/cache-manifest "access plus 0 seconds"
    • +
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("html.elements.html.manifest")}}

+ +

Voir aussi

+ + +
diff --git a/files/fr/web/html/utilisation_d'audio_et_video_en_html5/index.html b/files/fr/web/html/utilisation_d'audio_et_video_en_html5/index.html deleted file mode 100644 index efa30853e6..0000000000 --- a/files/fr/web/html/utilisation_d'audio_et_video_en_html5/index.html +++ /dev/null @@ -1,245 +0,0 @@ ---- -title: Utilisation d'audio et video en HTML5 -slug: Web/HTML/Utilisation_d'audio_et_video_en_HTML5 -tags: - - Aperçu - - Featured - - Guide - - HTML - - HTML5 - - Media - - Web -translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content -translation_of_original: Web/Guide/HTML/Using_HTML5_audio_and_video ---- -

{{ gecko_minversion_header("1.9.1") }}

- -

La gestion des éléments HTML 5 audio et video a été introduite dans Firefox 3.5, ce qui permet d'intégrer facilement des médias dans des documents HTML. Actuellement, les formats de média Ogg Theora, Ogg Vorbis et WAV sont gérés.

- -

Intégration de médias

- -

Il est trivial d'intégrer des médias dans vos documents HTML :

- -
<video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" controls>
-  Votre navigateur ne gère pas l'élément <code>video</code>.
-</video>
-
- -

Cet exemple jouera une vidéo exemple du site web de Theora.

- -

Plusieurs fichiers sources peuvent être référencés à l'aide de l'élément source afin de fournir des vidéos/extraits audio encodés dans différents formats pour différents navigateurs. Par exemple,

- -
<video controls>
-  <source src="foo.ogg" type="video/ogg">
-  <source src="foo.mp4">
-  Votre navigateur ne gère pas l'élément <code>video</code>.
-</video>
-
- -

jouera le fichier Ogg dans les navigateurs gérant ce format. Si ce n'est pas le cas, il essaiera de jouer le fichier MPEG-4.

- -

Il est également possible d'indiquer les codecs dont le fichier média a besoin ; cela permet au navigateur de prendre de meilleurs décisions :

- -
<video controls>
-  <source src="foo.ogg" type="video/ogg; codecs=&quot;dirac, speex&quot;">
-  Votre navigateur ne gère pas l'élément <code>video</code>.
-</video>
- -

Ici, on indique que la vidéo utilise les codecs Dirac et Speex. Si le navigateur gère les médias Ogg, mais pas les codecs spécifiés, la vidéo ne se chargera pas.

- -

Si l'attribut type n'est pas spécifié le type du média est récupéré depuis le serveur et vérifié pour voir s'il est géré par Gecko ; s'il n'est pas utilisable, l'élément source suivant est vérifié. Si aucun des éléments source ne peut être utilisé, un évènement error est transmis à l'élément video. Si l'attribut type est spécifié, il est comparé avec ceux qui peuvent être joués ; s'il n'est pas reconnu, le serveur n'est même pas interrogé, et on passe directement à la vérification de l'élément source suivant.

- -

 

- -

Contrôle de la lecture

- -

Une fois le média intégré dans votre document HTML à l'aide de ces nouveaux éléments, vous pouvez les contrôler programmatiquement depuis du code JavaScript. Par exemple, pour démarrer (ou redémarrer) la lecture, vous pouvez faire ceci :

- -
var v = document.getElementsByTagName("video")[0];
-v.play();
-
- -

La première ligne récupère le premier élément video dans le document, et la seconde appelle la méthode play() de l'élément, telle que définie dans l'interface {{ interface("nsIDOMHTMLMediaElement") }} utilisée pour implémenter les éléments de médias.

- -

Évènements des médias

- -

Différents évènements sont envoyés lors du traitement de médias :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Nom de l'évènementDescription
abortEnvoyé lorsque la lecture est annulée ; par exemple il sera envoyé si le média est en cours de lecture et redémarré depuis le début.
canplayEnvoyé lorsque suffisamment de données sont disponibles pour débuter la lecture du média, au moins pour quelques premières images. Il correspond à la valeur CAN_PLAY de readyState.
canplaythroughEnvoyé lorsque l'état devient CAN_PLAY_THROUGH, ce qui indique que le média peut être entièrement lu sans interruption, en supposant que la vitesse de téléchargement reste au niveau actuel.
canshowcurrentframeL'image courante est chargée et peut être présentée. Ceci correspond à la valeur CAN_SHOW_CURRENT_FRAME de readyState.
dataunavailableEnvoyé lorsque l'état devient DATA_UNAVAILABLE.
durationchangeLes métadonnées ont été chargées ou modifiées, ce qui indique un changement dans la durée du média. Sera par exemple envoyé lorsque le média est suffisamment chargé pour que sa durée soit connue.
emptiedLe média est devenu vide ; par exemple si le média est déjà chargé (ou partiellement chargé) et qu'on appelle la méthode load() pour le recharger.
emptyEnvoyé lorsqu'une erreur survient et que le média est vide.
endedEnvoyé lorsque la lecture se termine.
errorEnvoyé lorsqu'une erreur se produit. L'attribut error de l'élément contient plus d'informations.
loadedfirstframeLa première image du média a été chargée.
loadedmetadataLes métadonnées du média ont été chargées ; tous les attributs contiennent autant d'informations que possible.
loadstartEnvoyé lorsque le chargement du média débute.
pauseEnvoyé lorsque la lecture est interrompue.
playEnvoyé lorsque la lecture débute ou reprend.
progress -

Envoyé périodiquement pour informer les parties intéressées de la progression du téléchargement du média. L'évènement progress dispose de trois attributs :

- -
-
lengthComputable
-
vaut true si la taille totale du média est connue, false sinon.
-
loaded
-
Le nombre d'octets du fichier de média qui ont été reçus jusqu'à présent.
-
total
-
Le nombre total d'octets dans le fichier de média.
-
-
ratechangeEnvoyé lorsque la vitesse de lecture change.
seekedEnvoyé lorsqu'une opération de positionnement est effectuée.
seekingEnvoyé lorsqu'une opération de positionnement débute.
suspend {{ gecko_minversion_inline("1.9.2") }}Envoyé lorsque le chargement du média est interrompu ; cela peut arriver parce que le téléchargement est terminé ou parce qu'il a été mis en pause pour toute autre raison.
timeupdateLe temps indiqué par l'attribut currentTime de l'élément a été modifié.
volumechangeEnvoyé lorsque le volume audio est modifié (qu'il s'agisse d'une modification du volume ou d'un changement de l'attribut muted).
waitingEnvoyé lorsque l'opération demandée (comme une lecture) est retardée en attendant la fin d'une autre opération (comme un positionnement).
- -

{{ gecko_minversion_note("1.9.2", "L'ancien évènement load a été retiré de Gecko 1.9.2, il n'était pas déclenché quand il fallait et ne doit pas être utilisé.") }}

- -

Ces évènements peuvent facilement être interceptés à l'aide ce ce genre de code :

- -
var v = document.getElementsByTagName("video")[0];
-
-v.addEventListener("seeked", function() { document.getElementsByTagName("video")[0].play(); }, true);
-v.currentTime = 10.0;
-
- -

Cet exemple récupère le premier élément vidéo du document et lui attache un écouteur d'évènement, vérifiant l'évènement seeked qui est envoyé lorsqu'une opération de positionnement se termine. La fonction appelle simplement la méthode play() de l'élément, qui lance la lecture.

- -

Ensuite, à la ligne 4, cet exemple positionne l'attribut currentTime de l'élément à 10.0, ce qui lance une opération de positionnement à la dixième seconde du média. Cela déclenche l'envoi d'un évènement seeking au début de l'opération, ensuite d'un évènement seeked lorsque le positionnement est terminé.

- -

Autrement dit, l'exemple se positionne à dix secondes du début du média, puis commence la lecture dès que c'est fait.

- -

Options de rechange

- -

Le code HTML fourni entre les balises, par exemple <video> et </video>, est utilisé par les navigateurs ne gérant pas les médias HTML 5. Vous pouvez tirer parti de cela pour fournir un contenu alternatif de rechange pour ces navigateurs.

- -

Cette section propose deux options de rechange possibles pour la vidéo. Dans les deux cas, si le navigateur gère la vidéo HTML 5, c'est celle-ci qui sera utilisée.

- -

Utilisation de Flash

- -

Vous pouvez utiliser Flash pour lire une vidéo Flash si l'élément video n'est pas géré :

- -
<video src="video.ogv" controls>
-    <object data="flvplayer.swf" type="application/x-shockwave-flash">
-      <param value="flvplayer.swf" name="movie"/>
-    </object>
-</video>
-
- -

Notez qu'il ne faut pas mettre d'attribut classid à la balise object afin de rester compatible avec les autres navigateurs qu'Internet Explorer.

- -

Lecture de vidéos Ogg dans une applet Java

- -

Une applet Java appelée Cortado peut-être utilisée pour lire les vidéos Ogg dans les navigateurs ne pouvant pas lire les vidéos HTML 5 mais où Java est géré :

- -
<video src="my_ogg_video.ogg" controls width="320" height="240">
-  <object type="application/x-java-applet"
-          width="320" height="240">
-     <param name="archive" value="cortado.jar">
-     <param name="code" value="com.fluendo.player.Cortado.class">
-     <param name="url" value="my_ogg_video.ogg">
-     <p>You need to install Java to play this file.</p>
-  </object>
-</video>
-
- -

Si vous ne créez pas d'élément enfant de l'objet cortado comme l'élément <p> dans l'exemple ci-dessus, les installations de Firefox 3.5 qui gèrent la vidéo nativement mais où Java n'est pas installé informeront incorrectement l'utilisateur qu'il doit installer un plugin pour lire le contenu de la page.

- -

Voir également

- - - -

 {{ languages( { "en": "en/Using_audio_and_video_in_Firefox" } ) }}

- -

 {{ languages( { "es": "es/Etiquetas audio y video en Firefox" } ) }}

diff --git a/files/fr/web/html/utiliser_application_cache/index.html b/files/fr/web/html/utiliser_application_cache/index.html deleted file mode 100644 index ccc78772a8..0000000000 --- a/files/fr/web/html/utiliser_application_cache/index.html +++ /dev/null @@ -1,338 +0,0 @@ ---- -title: Utiliser Application Cache -slug: Web/HTML/Utiliser_Application_Cache -tags: - - Avancé - - Cache - - Déprécié - - Guide - - HTML - - appcache -translation_of: Web/HTML/Using_the_application_cache ---- -
{{DefaultAPISidebar("App Cache")}}{{securecontext_header}}{{deprecated_header}}
- -
-

Attention ! L'utilisation de la fonction de mise en cache d'application décrite ici est actuellement fortement déconseillée; cette fonctionnalité est en train d' être retiré de la plate-forme Web. Utiliser Service Workers à la place. En fait, à partir de Firefox 44, quand l'application cache 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 Service workers à la place ({{bug("1204581")}}).

-
- -

Introduction

- -

HTML5 supporte la mise en cache hors-ligne de ressources d'applications web; les fichiers sont stockés dans l'Application Cache (AppCache) - une collection de ressources obtenues depuis un fichier manifest (*.appcache) inclue dans une application web.

- -

L'utilisation d'une application cache permet les bénéfices suivants :

- -
    -
  • Navigation hors-ligne : les utilisateurs peuvent utiliser un site même s'ils ne sont pas connectés.
    • -
  • Vitesse : les ressources mises en cache sont locales, et se chargent donc plus rapidement.
    • -
  • Réduction de la charge serveur : le navigateur ne télécharge uniquement les ressources qui ont changées sur le serveur.
    • -
- -
-

Comment fonctionne AppCache

- -

Activer AppCache

- -

Vous devez, pour utiliser le cache d'application, utiliser l'attribut manifest dans l'élément <html> comme suit :

- -
<html manifest="example.appcache">
-  ...
-</html>
- -

L'attribut manifest spécifie l'URI d'un manifeste de cache, qui est un fichier texte qui répertorie les ressources (fichiers) que le navigateur doit mettre en cache pour votre application.

- -

Vous devez inclure l'attribut manifest 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 manifest, 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 manifest réglé sur le cache de l'application.

- -

Certains navigateurs dont Firefox vont avertir l'utilisateur la première fois que celui-ci charge votre application par une notification :

- -

« Ce site internet (www.example.com) veut stocker des données sur votre ordinateur pour une utilisation hors-ligne. [Accepter] [Refuser pour ce site] [Pas maintenant] ».

- -

Le terme « d'applications (fonctionnant) hors-ligne » est parfois utilisé pour désigner les applications que l'utilisateur a autorisé à travailler hors-ligne.

- -

Chargement des documents

- -

L'utilisation d'un cache de l'application modifie le processus normal de chargement d'un document :

- -
    -
  • 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.
    • -
  • Le navigateur vérifie ensuite si le manifeste de cache a été mis à jour sur le serveur.
    • -
  • 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.
    • -
- -

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:

- -
    -
  1. Quand le navigateur visite un document qui contient l'attribut manifest 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.
    2. -
  2. 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 checking à l'objet window.applicationCache, puis récupère le manifeste en fonction de la règle de cache HTTP adéquate.
    3. -
  3. Si la version en cache du manifeste est à jour, l'évènement noupdate est envoyé a l'applicationCache, 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.
    4. -
  4. Si le manifeste a changé, tous les fichiers dans le manifeste (dont ceux ajoutés au cache lors de l'appel à applicationCache.add()) sont récupérés dans un cache temporaire, en fonction des règles de cache HTTP adéquates. Un évènement progress est envoyé à l'objet applicationCache chaque fois qu'un fichier est récupéré dans le cache temporaire. Un évènement error est envoyé à chaque erreur, et la mise à jour s'arrête.
    5. -
  5. 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 cached est envoyé à l'objet applicationCache. 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).
    6. -
- -

Emplacement du stockage et effacement du cache hors-ligne

- -

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 chrome://appcache-internals/. 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.

- -

Dans Firefox, les données de cache hors-ligne sont stockées séparément du profil Firefox—à côté du cache disque normal :

- -
    -
  • Windows Vista/7: C:\Users\<username>\AppData\Local\Mozilla\Firefox\Profiles\<salt>.<profile name>\OfflineCache
    • -
  • Mac/Linux: /Users/<username>/Library/Caches/Firefox/Profiles/<salt>.<profile name>/OfflineCache
    • -
- -

Dans Firefox l'état actuel du cache hors-ligne est consultable sur la page about:cache (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.

- -

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é.

- -

Voir aussi effacer les données de stockage DOM.

- -

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 applicationCache. Le statut du cache de l'application est alors OBSOLETE.

- -

Le manifeste du cache

- -

Référencement d'un fichier de manifeste de cache

- -

L'attribut manifest 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 text/cache-manifest.

- -
Note: Sur les serveurs Apache, le MIME type pour les fichiers manifest (.appcache) peut être défini par l'ajout de AddType text/cache-manifest .appcache à un fichier a .htaccess soit à l'intérieur du répertoire racine, soit le même répertoire que l'application.
- -

Les entrées dans un manifeste de cache

- -

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.

- -

Example 1: Un fichier manifeste simple

- -

Ci-dessous, un exemple simple de manifeste — example.appcache utilisé par le site imaginaire www.example.com:

- -
CACHE MANIFEST
-# v1 - 2011-08-13
-# Ceci est un commentaire.
-https://www.example.com/index.html
-https://www.example.com/header.png
-https://www.example.com/blah/blah
-
- -

Il n'y a pas, dans cet exemple, d'en-tête de section, donc toutes les lignes sont supposées être des sections (CACHE:) explicites. On peut aussi utiliser des URL relatives (index.html, …)

- -

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 header.png), vous devez changer le manifeste pour signaller au navigateur qu'il doit rafraîchir le cache, et, comme header.png 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.

- -
Important: 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.
- -

Des sections dans un manifeste de cache: CACHE, NETWORK, et FALLBACK

- -

Un manifeste peut avoir trois sections distinctes: CACHE, NETWORK, et FALLBACK.

- -
-
CACHE:
-
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.
-
NETWORK:
-
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 *.
-
FALLBACK:
-
Le FALLBACK: 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.
-
- -

Les sections CACHE, NETWORK, 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.

- -

Example 2 : Un manifeste de cache plus complet

- -

Voici un exemple plus complet de manifeste pour notre site imaginaire www.example.com.

- -
CACHE MANIFEST
-# v1 2011-08-14
-# Ceci est un autre commentaire
-index.html
-cache.html
-style.css
-image1.png
-
-# Contenu Fallback
-FALLBACK:
-. fallback.html
-
-# L'utilise depuis le network (réseau) si il est disponible
-NETWORK:
-network.html
- -

Nous utilisons dans cet exemple les sections FALLBACK et NETWORK pour préciser que la page network.html doit toujours être récupérée depuis le réseau et que la page fallback.html doit être utilisée comme ressource de secours, par exemple si la connexion au serveur ne peut être établie.

- -

Structure d'un manifeste

- -

Les manifestes doivent être servis avec le type MIME text/cache-manifest, et toutes les ressources servies en utilisant ce type MIME doivent respecter la syntaxe d'un manifeste, comme défini ici.

- -

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 (U+000A), retour chariot (U+000D), ou les deux.

- -

La première ligne du manifeste doit être la chaine CACHE MANIFEST (séparé par un simple espace U+0020), suivi par aucun ou plusieurs espaces ou tabulations. Tout autre texte sur la ligne sera ignoré.

- -

Le reste du manifeste peut contenir 0 ou plusieurs lignes :

- -
-
Lines vides
-
Vous pouvez utiliser les lignes vides comprenant 0 ou plusieurs espaces ou tabulations.
-
Commentaire
-
Les commentaires consistent en 0 ou plusieurs espaces ou tabulations suivis du caractère #, 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.
-
Section de tête
-
La section header précise la section du cache qui est manipulée. Il en existe trois types:
-
- -
- - - - - - - - - - - - - - - - - - - -
Section headerDescription
CACHE:Passe à la section explicite. C'est la section par défaut.
NETWORK:Passe à la section des sections en ligne sur la liste blanche.
FALLBACK:Passe à la section de secours.
-
- -
-
La ligne d'en-tête de section peut contenir des espaces, mais doit inclure un « : » dans le nom de la section.
-
Section data
-
Le format des lignes de données varie selon les sections. Dans la section explicite (CACHE:) 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). -
Note: Les URI relatives pointent vers les URI du manifeste, et non vers les URI du document qui référence le manifeste.
-
-
- -

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.

- -

Les ressources dans AppCache

- -

Le cache inclue toujours au moins une ressource, identifiée par URI. Toutes les ressources répondent à une des catégories suivantes :

- -
-
Entrées Maitres
-
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 manifest.
-
Entrées Explicites
-
Il s'agit de ressources listées dans le manifeste du cache.
-
Entrées Network
-
Il s'agit de ressources listées dans le manifeste du cache comme entrées de network.
-
Entrées Fallback
-
Il s'agit de ressources listées dans le manifeste du cache comme entrées de fallback. {{fx_minversion_inline("3")}}
-
- -
Note : 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.
- -

Les catégories ressources sont décrites en détail ci-dessous.

- -

Entrées Maitres

- -

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 https://www.example.com/entry.html, qui ressemble à ça :

- -
<html manifest="example.appcache">
-  <h1>Application Cache Example</h1>
-</html>
-
- -

Si entry.html n'est pas inclue dans le manifeste, visiter la page entry.html provoquera l'ajout de la page entry.html dans le cache de l'application comme une master entry.

- -

Entrées Explicites

- -

Les entrées explicites sont des ressources explicitement listées dans la section CACHE d'un manifeste de cache.

- -

Entrées Network

- -

Les entrées listées dans NETWORK : peuvent contenir plusieurs ou aucune ressource que l'application requiert lors d'un accès en ligne. C'est principalement une liste blanche en ligne. Les URIS spécifiées dans la section NETWORK 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.

- -
Note : La liste blanche en ligne est ignorée pour les versions de Firefox antérieures à 3.5.
- -

Vous pouvez l'utiliser pour, par exemple, charger et exécuter des scripts et d'autres codes depuis le serveur au lieu du cache. :

- -
CACHE MANIFEST
-NETWORK:
-/api
-
- -

Ceci assure que les requêtes téléchargent les ressources contenues dans https://www.example.com/api/ viendront toujours du réseau sans essayer d'accéder au cache.

- -
Note : Juste omettre les master entries (les fichiers qui ont l'attribut manifest défini dans l'élément html) dans le manifeste n'aurait pas le même comportement parce que les master entries seront ajoutées — et donc servies depuis— le cache. 
- -

Entrées Fallback

- -

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é à https://www.example.com/example.appcache, et qui contient :

- -
CACHE MANIFEST
-FALLBACK:
-example/bar/ example.html
-
- -

Toute requête vers https://www.example.com/example/bar/ 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 example.html sera chargé à la place.

- -

Les états

- -

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 :

- -
-
UNCACHED
-
Une valeur spéciale qui indique qu'un object application cache n'est pas complètement initialisée.
-
IDLE
-
Le cache n'est pas en cours de mise à jour.
-
CHECKING
-
Le manifeste est en train d'être contrôlé pour d'éventuelles mises à jour.
-
DOWNLOADING
-
Des ressources sont en train d'être téléchargées pour être ajoutées au cache, dû à un changement du manifeste.
-
UPDATEREADY
-
Il y a une nouvelle version du cache disponible. Il y a un évènement updateready correspondant, qui est lancé au lieu de l'évènement cached quand une nouvelle mise à jour a été téléchargée mais pas encore activée via la méthode swapCache().
-
OBSOLETE
-
Le groupe de caches est maintenant obsolète.
-
- -

Test pour les mises à jour des manifestes de cache

- -

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 window.applicationCache.status.

- -
function onUpdateReady() {
-  console.log('nouvelle version trouvée !');
-}
-window.applicationCache.addEventListener('updateready', onUpdateReady);
-if(window.applicationCache.status === window.applicationCache.UPDATEREADY) {
-  onUpdateReady();
-}
- -

Pour démarrer manuellement le test pour un nouveau manifeste de cache, vous pouvez utilisez window.applicationCache.update().

- -

Pièges

- -
    -
  • Ne jamais accéder à des fichiers mis en cache à l'aide des paramètres GET traditionnels (comme other-cached-page.html?parameterName=value). 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 other-cached-page.html#whatever?parameterName=value.
    • -
  • 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 programmewindow.applicationCache.swapCache(), 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.
    • -
  • 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:
    - ExpiresByType text/cache-manifest "access plus 0 seconds"
    • -
- -

Compatibilité des navigateurs

- - - -

{{Compat("html.elements.html.manifest")}}

- -

Voir aussi

- - -
diff --git "a/files/fr/web/html/utiliser_dash_avec_les_vid\303\251os_en_html/index.html" "b/files/fr/web/html/utiliser_dash_avec_les_vid\303\251os_en_html/index.html" deleted file mode 100644 index 6a1b7f19f1..0000000000 --- "a/files/fr/web/html/utiliser_dash_avec_les_vid\303\251os_en_html/index.html" +++ /dev/null @@ -1,103 +0,0 @@ ---- -title: Utiliser DASH avec les vidéos en HTML -slug: Web/HTML/Utiliser_DASH_avec_les_vidéos_en_HTML -tags: - - Avancé - - DASH - - Guide - - HTML -translation_of: Web/Media/DASH_Adaptive_Streaming_for_HTML_5_Video ---- -
{{HTMLSidebar}}
- -

Dynamic Adaptive Streaming over HTTP (DASH) est un protocole de streaming adaptatif : il permet de changer le débit de la vidéo en fonction des performances réseau afin que la vidéo ne soit pas interrompue lors de la lecture.

- -

Compatibilité des navigateurs

- -

Firefox 21 inclut une implémentation de DASH pour le format vidéo WebM mais celle-ci est désactivée par défaut et peut être activée via la préférence media.dash.enabled sous about:config.

- -

Firefox 23 a retiré la prise en charge de DASH pour le format WebM. Cette fonctionnalité sera remplacée par l'implémentation de l'API Media Source Extensions qui permettra la prise en charge de DASH via des bibliothèques JavaScript tierces (telles que dash.js). Pour plus de détails, voir le bug 778617.

- -

Utiliser DASH, côté serveur

- -

Pour commencer, il faut convertir la vidéo WebM en manifeste DASH avec les vidéos associées aux différents débits. Pour cela, on aura besoin de :

- -
    -
  • ffpmeg - avec la prise en charge de l'audio et vidéo WebM fourni via libvpx and libvoribis en version 2.5 minimum (ffmpeg.org).
    • -
- -

1. Utiliser un fichier WebM afin de créer une piste audio et plusieurs fichiers vidéo

- -

Dans les lignes d'exemple qui suivent, on utilise le fichier de départ in.video. Ce fichier peut être n'importe quel conteneur avec au moins un flux audio et un flux vidéo qui peut être décodé par ffmpeg.

- -

On créera la piste audio avec :

- -
ffmpeg -i in.video -vn -acodec libvorbis -ab 128k -dash 1 my_audio.webm
-
- -

On créera les pistes vidéos avec :

- -
ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 -g 150 -tile-columns 4 -frame-parallel 1  -f webm -dash 1 \
--an -vf scale=160:90 -b:v 250k -dash 1 video_160x90_250k.webm
-
-ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 -g 150 -tile-columns 4 -frame-parallel 1  -f webm -dash 1 \
--an -vf scale=320:180 -b:v 500k -dash 1 video_320x180_500k.webm
-
-ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 -g 150 -tile-columns 4 -frame-parallel 1  -f webm -dash 1 \
--an -vf scale=640:360 -b:v 750k -dash 1 video_640x360_750k.webm
-
-ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 -g 150 -tile-columns 4 -frame-parallel 1  -f webm -dash 1 \
--an -vf scale=640:360 -b:v 1000k -dash 1 video_640x360_1000k.webm
-
-ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 -g 150 -tile-columns 4 -frame-parallel 1  -f webm -dash 1 \
--an -vf scale=1280:720 -b:v 1500k -dash 1 video_1280x720_1500k.webm
-
- -

Autrement, on peut utiliser cette commande :

- -
ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 \
--g 150 -tile-columns 4 -frame-parallel 1  -f webm -dash 1 \
--an -vf scale=160:90 -b:v 250k -dash 1 video_160x90_250k.webm \
--an -vf scale=320:180 -b:v 500k -dash 1 video_320x180_500k.webm \
--an -vf scale=640:360 -b:v 750k -dash 1 video_640x360_750k.webm \
--an -vf scale=640:360 -b:v 1000k -dash 1 video_640x360_1000k.webm \
--an -vf scale=1280:720 -b:v 1500k -dash 1 video_1280x720_1500k.webm
- -

2. Créer le manifeste

- -
ffmpeg \
-  -f webm_dash_manifest -i video_160x90_250k.webm \
-  -f webm_dash_manifest -i video_320x180_500k.webm \
-  -f webm_dash_manifest -i video_640x360_750k.webm \
-  -f webm_dash_manifest -i video_1280x720_1500k.webm \
-  -f webm_dash_manifest -i my_audio.webm \
-  -c copy \
-  -map 0 -map 1 -map 2 -map 3 -map 4 \
-  -f webm_dash_manifest \
-  -adaptation_sets "id=0,streams=0,1,2,3 id=1,streams=4" \
-  my_video_manifest.mpd
- -

Les arguments -map correspondent aux fichiers d'entrée dans l'ordre dans lequel ils sont fournis. Il doit y en avoir un pour chaque fichier. L'argument -adaptation_sets permet de les affecter à différents ensembles d'adaptation. Par exemple, cela crée un ensemble (0) qui contient les flux 0, 1, 2 et 3 (les vidéos) et un autre ensemble (1) qui contient uniquement le flux 4 (l'audio).

- -

On pourra alors placer le fichier de manifeste créé à côté des fichiers vidéo sur le serveur web ou sur le CDN. DASH fonctionne via HTTP donc il suffit simplement que votre serveur prenne en charge les requêtes d'intervalles d'octets (byte range requests) et qu'il puisse servir les fichiers .mpd avec mimetype="application/dash+xml".

- -

Utiliser DASH, côté client

- -

Il faut modifier la page web pour que celle-ci pointe d'abord vers le manifeste, avant le fichier vidéo en tant que tel :

- -
<video>
-  <source src="movie.mpd">
-  <source src="movie.webm">
-  Votre navigateur ne prend pas en charge les vidéos HTML.
-</video>
- -

C'est tout !
- Si le navigateur utilisé prend en charge DASH/MSE, la diffusion de la vidéo sera maintenant adaptative.

- -

Voir aussi

- - diff --git "a/files/fr/web/html/\303\251l\303\251ments_en_bloc/index.html" "b/files/fr/web/html/\303\251l\303\251ments_en_bloc/index.html" deleted file mode 100644 index c099de574f..0000000000 --- "a/files/fr/web/html/\303\251l\303\251ments_en_bloc/index.html" +++ /dev/null @@ -1,126 +0,0 @@ ---- -title: Éléments de bloc -slug: Web/HTML/Éléments_en_bloc -tags: - - Débutant - - HTML - - Web -translation_of: Web/HTML/Block-level_elements ---- -
{{HTMLSidebar}}
- -

Les éléments de bloc forment une catégorie d'éléments HTML (HyperText Markup Language) en opposition 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 (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.

- -
-

Note : Un élément de bloc commence toujours sur une nouvelle ligne et prend toute la largeur disponible (autrement dit, il s'étend le plus possible vers la droite et vers la gauche).

-
- -

Exemples

- -

HTML

- -
<p>Ce paragraphe est un élément de bloc. Son fond a été coloré pour illustrer son conteneur.</p>
- -

CSS

- -
p {
-  background-color: #8ABB55;
-}
- -

Résultat

- -

{{EmbedLiveSample('Exemples')}}

- -

Contrainte

- -
    -
  • Les éléments de bloc ne peuvent apparaître qu'au sein d'un élément {{HTMLElement("body")}}
    • -
- -

Élément de bloc ou élément en ligne ?

- -

Les éléments de bloc diffèrent des éléments en ligne par :

- -
-
La mise en forme
-
Par défaut, les éléments de bloc commencent sur des nouvelles lignes.
-
Le modèle de contenu
-
De façon générale, les éléments de bloc peuvent contenir des éléments en ligne et d'autres éléments de bloc. L'idée structurelle sous-jacente est que les éléments de bloc créent de plus grandes structures que les éléments en ligne.
-
- -

La distinction entre bloc et ligne est utilisée dans les spécifications HTML jusqu'à la version 4.01. En HTML5, cette distinction binaire est remplacée par un ensemble plus complexe de catégories de contenu. La catégorie des éléments en bloc correspond approximativement à la catégorie de contenu de flux en HTML5, celle des éléments en ligne correspond à la catégorie de contenu phrasé. Il y a également d'autres catégories (le contenu interactif par exemple).

- -

Éléments

- -

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).

- -
-
-
{{HTMLElement("address")}}
-
Information de contact.
-
{{HTMLElement("article")}}
-
Contenu d'un article.
-
{{HTMLElement("aside")}}
-
Contenu tangentiel.
-
{{HTMLElement("blockquote")}}
-
Long bloc de citation.
-
{{HTMLElement("details")}}
-
Outil permettant de révéler des informations sur la page.
-
{{HTMLElement("dialog")}}
-
Boîte de dialogue.
-
{{HTMLElement("dd")}}
-
Description d'une définition.
-
{{HTMLElement("div")}}
-
Division d'un document.
-
{{HTMLElement("dl")}}
-
Liste de définitions.
-
{{HTMLElement("dt")}}
-
Définition/description d'un terme.
-
{{HTMLElement("fieldset")}}
-
Ensemble de champs.
-
{{HTMLElement("figcaption")}}
-
Légende d'une image.
-
{{HTMLElement("figure")}}
-
Permet de grouper des média avec une légende (voir {{HTMLElement("figcaption")}}).
-
{{HTMLElement("footer")}}
-
Bas de page ou de section.
-
{{HTMLElement("form")}}
-
Formulaire.
-
{{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}
-
Éléments de titre de niveau 1 à 6.
-
{{HTMLElement("header")}}
-
En-tête de page ou de section.
-
{{HTMLElement("hgroup")}}
-
Information d'en-tête de groupe.
-
{{HTMLElement("hr")}}
-
Ligne de division horizontale.
-
{{HTMLElement("li")}}
-
Élément d'une liste.
-
{{HTMLElement("main")}}
-
Contient le contenu central unique au document.
-
{{HTMLElement("nav")}}
-
Contient des liens de navigation.
-
{{HTMLElement("ol")}}
-
Liste ordonnée.
-
{{HTMLElement("p")}}
-
Paragraphe.
-
{{HTMLElement("pre")}}
-
Texte pré-formaté.
-
{{HTMLElement("section")}}
-
Section d'une page web.
-
{{HTMLElement("table")}}
-
Tableau.
-
{{HTMLElement("ul")}}
-
Liste non-ordonnée.
-
-
- -

Voir aussi

- - diff --git "a/files/fr/web/html/\303\251l\303\251ments_en_ligne/index.html" "b/files/fr/web/html/\303\251l\303\251ments_en_ligne/index.html" deleted file mode 100644 index fb9207dd72..0000000000 --- "a/files/fr/web/html/\303\251l\303\251ments_en_ligne/index.html" +++ /dev/null @@ -1,169 +0,0 @@ ---- -title: Éléments en-ligne -slug: Web/HTML/Éléments_en_ligne -tags: - - Débutant - - Elements en ligne - - Guide - - HTML - - Reference -translation_of: Web/HTML/Inline_elements ---- -
{{HTMLSidebar}}
- -

En HTML, les éléments en ligne (inline elements en anglais) sont ceux qui occupent l'espace délimités par leurs balises plutôt que d'interrompre le flux du contenu. Dans cet article, nous étudierons ces éléments en ligne et également leurs différences quant aux éléments de bloc (block-level elements).

- -
-

Note : Un élément en ligne ne commence pas sur une nouvelle ligne et prend uniquement la largeur qui lui est nécessaire.

-
- -

Éléments en ligne et éléments de bloc : un exemple

- -

Un exemple vaut mieux qu'une longue explication. Voici pour commencer la feuille de style CSS que nous utiliserons :

- -
.highlight {
-  background-color:#ee3;
-}
- -

Élément en ligne

- -

Le fragment de code HTML qui suit utilise un élément en ligne avec la classe highlight :

- -
<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>
- -

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 <span> étant un élément en ligne, le paragraphe est bien affiché sous la forme d'un flux de texte sans rupture :

- -

{{EmbedLiveSample("Élément_en_ligne", 600, 80)}}

- - - -

Élément de bloc

- -

Transformons l'exemple précédent pour passer d'un élément <span> à un élément {{HTMLElement("div")}} qui est un élément de bloc :

- -
<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>
- - - -

Et voici le résultat qu'on obtient :

- -

{{EmbedLiveSample("Élément_de_bloc", 600, 150)}}

- -

On voit ici que l'élément <div> modifie complètement la disposition du texte et le découpe en trois partie : une partie avant le <div>, une partie constituée avec le texte de l'élément <div> et une dernière partie ensuite.

- -

Modifier le type d'un d'élément

- -

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 display de "inline" à "block", 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 display:block sur un élément {{HTMLElement("span")}} ne permettra toujours pas de lui imbriquer un élément {{HTMLElement("div")}} à l'intérieur.

- -

Différences conceptuelles

- -

Voici, en résumé, les différences conceptuelles entre les éléments en ligne et les éléments de bloc :

- -
-
Modèle de contenu
-
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.
-
Formatage
-
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).
-
- -

Liste des éléments en ligne

- -

Les éléments HTML suivants sont, par défaut, des éléments en ligne :

- -
-
-
{{HTMLElement("a")}}
-
{{HTMLElement("abbr")}}
-
{{HTMLElement("acronym")}}
-
{{HTMLElement("audio")}} (if has visible controls)
-
{{HTMLElement("b")}}
-
{{HTMLElement("bdi")}}
-
{{HTMLElement("bdo")}}
-
{{HTMLElement("big")}}
-
{{HTMLElement("br")}}
-
{{HTMLElement("button")}}
-
{{HTMLElement("canvas")}}
-
{{HTMLElement("cite")}}
-
{{HTMLElement("code")}}
-
{{HTMLElement("data")}}
-
{{HTMLElement("datalist")}}
-
{{HTMLElement("del")}}
-
{{HTMLElement("dfn")}}
-
{{HTMLElement("em")}}
-
{{HTMLElement("embed")}}
-
{{HTMLElement("i")}}
-
{{HTMLElement("iframe")}}
-
{{HTMLElement("img")}}
-
{{HTMLElement("input")}}
-
{{HTMLElement("ins")}}
-
{{HTMLElement("kbd")}}
-
{{HTMLElement("label")}}
-
{{HTMLElement("map")}}
-
{{HTMLElement("mark")}}
-
{{HTMLElement("meter")}}
-
{{HTMLElement("noscript")}}
-
{{HTMLElement("object")}}
-
{{HTMLElement("output")}}
-
{{HTMLElement("picture")}}
-
{{HTMLElement("progress")}}
-
{{HTMLElement("q")}}
-
{{HTMLElement("ruby")}}
-
{{HTMLElement("s")}}
-
{{HTMLElement("samp")}}
-
{{HTMLElement("script")}}
-
{{HTMLElement("select")}}
-
{{HTMLElement("slot")}}
-
{{HTMLElement("small")}}
-
{{HTMLElement("span")}}
-
{{HTMLElement("strong")}}
-
{{HTMLElement("sub")}}
-
{{HTMLElement("sup")}}
-
{{HTMLElement("svg")}}
-
{{HTMLElement("template")}}
-
{{HTMLElement("textarea")}}
-
{{HTMLElement("time")}}
-
{{HTMLElement("u")}}
-
{{HTMLElement("tt")}}
-
{{HTMLElement("var")}}
-
{{HTMLElement("video")}}
-
{{HTMLElement("wbr")}}
-
-
- -

Voir aussi

- - -- cgit v1.2.3-54-g00ecf