From 2727d3c76fd54476ecc29fc01b6ce3fe8e33b582 Mon Sep 17 00:00:00 2001 From: SphinxKnight Date: Wed, 13 Oct 2021 07:08:36 +0200 Subject: Prepare HTML section for Markdown conversion (#2628) * Remove summary classes * Remove useless spans * Remove notranslate * Fix element index page (cf en-US) * Align page vs en-US cf8bcd9 for CI * Remove hidden classes * remove ids * Fix notes - part 1 / n * Fix notes - part 2/2 * Fix warnings * fix dls and some other issues * Fix imgs and styles --- files/fr/web/html/applying_color/index.html | 34 +++--- files/fr/web/html/attributes/accept/index.html | 13 +-- .../fr/web/html/attributes/autocomplete/index.html | 17 ++- files/fr/web/html/attributes/capture/index.html | 12 +- .../fr/web/html/attributes/crossorigin/index.html | 7 +- files/fr/web/html/attributes/disabled/index.html | 16 ++- .../web/html/attributes/elementtiming/index.html | 2 +- files/fr/web/html/attributes/for/index.html | 2 +- files/fr/web/html/attributes/index.html | 37 +++---- files/fr/web/html/attributes/max/index.html | 27 +++-- files/fr/web/html/attributes/maxlength/index.html | 7 +- files/fr/web/html/attributes/min/index.html | 27 +++-- files/fr/web/html/attributes/minlength/index.html | 2 +- files/fr/web/html/attributes/multiple/index.html | 4 +- files/fr/web/html/attributes/pattern/index.html | 16 +-- files/fr/web/html/attributes/readonly/index.html | 17 +-- files/fr/web/html/attributes/rel/index.html | 83 +++++++------- files/fr/web/html/attributes/required/index.html | 7 +- files/fr/web/html/attributes/size/index.html | 2 +- files/fr/web/html/attributes/step/index.html | 21 ++-- files/fr/web/html/block-level_elements/index.html | 123 ++++++++++----------- files/fr/web/html/cors_enabled_image/index.html | 2 +- files/fr/web/html/date_and_time_formats/index.html | 6 +- files/fr/web/html/element/a/index.html | 72 +++++------- files/fr/web/html/element/abbr/index.html | 4 +- files/fr/web/html/element/acronym/index.html | 17 ++- files/fr/web/html/element/address/index.html | 4 +- files/fr/web/html/element/applet/index.html | 42 ++++--- files/fr/web/html/element/area/index.html | 40 ++++--- files/fr/web/html/element/article/index.html | 2 +- files/fr/web/html/element/aside/index.html | 2 +- files/fr/web/html/element/audio/index.html | 37 +++---- files/fr/web/html/element/b/index.html | 2 +- files/fr/web/html/element/base/index.html | 15 ++- files/fr/web/html/element/basefont/index.html | 13 +-- files/fr/web/html/element/bdi/index.html | 35 +++--- files/fr/web/html/element/bdo/index.html | 4 +- files/fr/web/html/element/bgsound/index.html | 20 ++-- files/fr/web/html/element/big/index.html | 22 ++-- files/fr/web/html/element/blink/index.html | 12 +- files/fr/web/html/element/blockquote/index.html | 6 +- files/fr/web/html/element/body/index.html | 58 +++++----- files/fr/web/html/element/br/index.html | 9 +- files/fr/web/html/element/button/index.html | 35 +++--- files/fr/web/html/element/canvas/index.html | 13 +-- files/fr/web/html/element/caption/index.html | 19 ++-- files/fr/web/html/element/center/index.html | 12 +- files/fr/web/html/element/cite/index.html | 2 +- files/fr/web/html/element/code/index.html | 2 +- files/fr/web/html/element/col/index.html | 24 ++-- files/fr/web/html/element/colgroup/index.html | 24 ++-- files/fr/web/html/element/content/index.html | 19 ++-- files/fr/web/html/element/data/index.html | 2 +- files/fr/web/html/element/datalist/index.html | 2 +- files/fr/web/html/element/dd/index.html | 4 +- files/fr/web/html/element/del/index.html | 6 +- files/fr/web/html/element/details/index.html | 27 ++--- files/fr/web/html/element/dfn/index.html | 5 +- files/fr/web/html/element/dialog/index.html | 8 +- files/fr/web/html/element/dir/index.html | 19 ++-- files/fr/web/html/element/div/index.html | 5 +- files/fr/web/html/element/em/index.html | 2 +- files/fr/web/html/element/embed/index.html | 15 ++- files/fr/web/html/element/fieldset/index.html | 14 ++- files/fr/web/html/element/figcaption/index.html | 2 +- files/fr/web/html/element/figure/index.html | 2 +- files/fr/web/html/element/font/index.html | 17 ++- files/fr/web/html/element/footer/index.html | 2 +- files/fr/web/html/element/form/index.html | 36 +++--- files/fr/web/html/element/frame/index.html | 19 ++-- files/fr/web/html/element/frameset/index.html | 14 +-- files/fr/web/html/element/header/index.html | 2 - .../web/html/element/heading_elements/index.html | 12 +- files/fr/web/html/element/hgroup/index.html | 9 +- files/fr/web/html/element/hr/index.html | 2 - files/fr/web/html/element/i/index.html | 2 - files/fr/web/html/element/iframe/index.html | 56 +++++----- files/fr/web/html/element/image/index.html | 2 +- files/fr/web/html/element/img/index.html | 75 ++++++------- files/fr/web/html/element/index.html | 20 ++-- files/fr/web/html/element/input/button/index.html | 51 +++------ .../fr/web/html/element/input/checkbox/index.html | 76 ++++++------- files/fr/web/html/element/input/color/index.html | 36 ++---- files/fr/web/html/element/input/date/index.html | 34 +----- .../html/element/input/datetime-local/index.html | 56 +++------- files/fr/web/html/element/input/email/index.html | 20 +--- files/fr/web/html/element/input/file/index.html | 34 +++--- files/fr/web/html/element/input/hidden/index.html | 14 +-- files/fr/web/html/element/input/image/index.html | 12 +- files/fr/web/html/element/input/index.html | 19 ++-- files/fr/web/html/element/input/month/index.html | 41 +++---- files/fr/web/html/element/input/number/index.html | 18 +-- .../fr/web/html/element/input/password/index.html | 12 +- files/fr/web/html/element/input/radio/index.html | 10 +- files/fr/web/html/element/input/range/index.html | 57 ++++------ files/fr/web/html/element/input/reset/index.html | 25 ++--- files/fr/web/html/element/input/search/index.html | 26 ++--- files/fr/web/html/element/input/submit/index.html | 22 ++-- files/fr/web/html/element/input/tel/index.html | 64 ++++++----- files/fr/web/html/element/input/text/index.html | 24 +--- files/fr/web/html/element/input/time/index.html | 35 +++--- files/fr/web/html/element/input/url/index.html | 25 ++--- files/fr/web/html/element/input/week/index.html | 16 +-- files/fr/web/html/element/ins/index.html | 2 - files/fr/web/html/element/kbd/index.html | 4 +- files/fr/web/html/element/keygen/index.html | 2 +- files/fr/web/html/element/label/index.html | 17 ++- files/fr/web/html/element/legend/index.html | 3 - files/fr/web/html/element/li/index.html | 47 ++++---- files/fr/web/html/element/link/index.html | 38 ++++--- files/fr/web/html/element/main/index.html | 6 +- files/fr/web/html/element/map/index.html | 23 ++-- files/fr/web/html/element/mark/index.html | 2 - files/fr/web/html/element/menu/index.html | 2 +- files/fr/web/html/element/meta/index.html | 34 +++--- files/fr/web/html/element/meter/index.html | 13 +-- files/fr/web/html/element/nav/index.html | 7 +- files/fr/web/html/element/nobr/index.html | 4 +- files/fr/web/html/element/noframes/index.html | 4 +- files/fr/web/html/element/object/index.html | 2 - files/fr/web/html/element/ol/index.html | 13 +-- files/fr/web/html/element/optgroup/index.html | 3 - files/fr/web/html/element/option/index.html | 4 +- files/fr/web/html/element/p/index.html | 2 - files/fr/web/html/element/picture/index.html | 6 +- files/fr/web/html/element/plaintext/index.html | 4 +- files/fr/web/html/element/pre/index.html | 2 - files/fr/web/html/element/progress/index.html | 2 - files/fr/web/html/element/q/index.html | 4 +- files/fr/web/html/element/rb/index.html | 30 ++--- files/fr/web/html/element/rp/index.html | 28 ++--- files/fr/web/html/element/rt/index.html | 27 ++--- files/fr/web/html/element/rtc/index.html | 8 +- files/fr/web/html/element/ruby/index.html | 2 - files/fr/web/html/element/s/index.html | 2 - files/fr/web/html/element/samp/index.html | 2 - files/fr/web/html/element/script/index.html | 25 ++--- files/fr/web/html/element/section/index.html | 2 - files/fr/web/html/element/select/index.html | 12 +- files/fr/web/html/element/shadow/index.html | 2 +- files/fr/web/html/element/slot/index.html | 6 +- files/fr/web/html/element/small/index.html | 2 - files/fr/web/html/element/source/index.html | 2 - files/fr/web/html/element/span/index.html | 4 +- files/fr/web/html/element/strike/index.html | 6 +- files/fr/web/html/element/strong/index.html | 4 - files/fr/web/html/element/style/index.html | 2 - files/fr/web/html/element/sub/index.html | 2 - files/fr/web/html/element/summary/index.html | 2 - files/fr/web/html/element/sup/index.html | 2 - files/fr/web/html/element/table/index.html | 98 +++------------- files/fr/web/html/element/tbody/index.html | 108 +++++------------- files/fr/web/html/element/td/index.html | 44 +++----- files/fr/web/html/element/template/index.html | 4 +- files/fr/web/html/element/textarea/index.html | 2 - files/fr/web/html/element/tfoot/index.html | 33 ++---- files/fr/web/html/element/th/index.html | 94 ++-------------- files/fr/web/html/element/thead/index.html | 88 ++------------- files/fr/web/html/element/time/index.html | 19 +--- files/fr/web/html/element/tr/index.html | 31 +++--- files/fr/web/html/element/track/index.html | 2 - files/fr/web/html/element/tt/index.html | 4 +- files/fr/web/html/element/u/index.html | 19 +--- files/fr/web/html/element/ul/index.html | 12 +- files/fr/web/html/element/var/index.html | 2 - files/fr/web/html/element/video/index.html | 30 ++--- files/fr/web/html/element/wbr/index.html | 2 - files/fr/web/html/element/xmp/index.html | 5 +- .../html/global_attributes/accesskey/index.html | 14 +-- .../html/global_attributes/autofocus/index.html | 6 +- .../fr/web/html/global_attributes/class/index.html | 2 - .../global_attributes/contenteditable/index.html | 2 - .../html/global_attributes/contextmenu/index.html | 4 +- .../html/global_attributes/data-_star_/index.html | 2 - files/fr/web/html/global_attributes/dir/index.html | 5 +- .../web/html/global_attributes/hidden/index.html | 2 - files/fr/web/html/global_attributes/id/index.html | 6 +- files/fr/web/html/global_attributes/index.html | 2 +- .../html/global_attributes/inputmode/index.html | 2 +- .../web/html/global_attributes/itemid/index.html | 8 +- .../web/html/global_attributes/itemprop/index.html | 4 +- .../web/html/global_attributes/itemref/index.html | 6 +- .../html/global_attributes/itemscope/index.html | 7 +- .../fr/web/html/global_attributes/lang/index.html | 2 - .../html/global_attributes/spellcheck/index.html | 2 - .../fr/web/html/global_attributes/style/index.html | 4 +- .../web/html/global_attributes/tabindex/index.html | 6 +- .../fr/web/html/global_attributes/title/index.html | 2 - .../x-ms-acceleratorkey/index.html | 2 +- .../x-ms-format-detection/index.html | 2 +- files/fr/web/html/index.html | 4 +- files/fr/web/html/inline_elements/index.html | 16 +-- files/fr/web/html/link_types/index.html | 6 +- files/fr/web/html/link_types/noopener/index.html | 6 +- files/fr/web/html/link_types/preload/index.html | 4 +- files/fr/web/html/microdata/index.html | 4 +- files/fr/web/html/microformats/index.html | 10 +- .../html/quirks_mode_and_standards_mode/index.html | 2 +- files/fr/web/html/reference/index.html | 2 +- files/fr/web/html/viewport_meta_tag/index.html | 6 +- 200 files changed, 1277 insertions(+), 2052 deletions(-) (limited to 'files') diff --git a/files/fr/web/html/applying_color/index.html b/files/fr/web/html/applying_color/index.html index f7c67a9c00..ea1e73ea67 100644 --- a/files/fr/web/html/applying_color/index.html +++ b/files/fr/web/html/applying_color/index.html @@ -17,7 +17,7 @@ original_slug: Web/HTML/Appliquer_des_couleurs ---
{{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.

+

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.

@@ -149,11 +149,9 @@ original_slug: Web/HTML/Appliquer_des_couleurs

D'autres personnes préfèrent manipuler la notation HSL ou aussi appelée « 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.
-
-
+

Le diagramme qui suit illustre un cylindre de couleur pour le modèle 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.

+ +Cylindre de couleur HSL

La valeur de la teinte (H) est un angle qui commence au rouge, parcourt le jaune, le vert, le cyan, le bleu et le magenta (avant de revenir à rouge avec un angle de 360°). Cette valeur identifie la teinte de base. La valeur utilisée est de type <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).

@@ -169,11 +167,11 @@ original_slug: Web/HTML/Appliquer_des_couleurs

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

+

Exemples avec HSL

+

Voici quelques exemples utilisant la notation HSL :

-
- -

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

-
+

{{EmbedLiveSample("Exemples_avec_HSL", 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).

@@ -342,7 +338,7 @@ th {

{{EmbedLiveSample("Example_Picking_a_color", 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.

@@ -409,7 +405,7 @@ colorPicker.addEventListener("change", function(event) {

Une fois la couleur de base sélectionnée, vous pouvez utiliser certaines extensions de navigateur pour « prélever » des couleurs existantes sur le web. Le site web 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.

@@ -427,7 +423,7 @@ colorPicker.addEventListener("change", function(event) {

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

@@ -448,7 +444,7 @@ colorPicker.addEventListener("change", function(event) {

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

@@ -500,7 +496,7 @@ colorPicker.addEventListener("change", function(event) {

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.

diff --git a/files/fr/web/html/attributes/accept/index.html b/files/fr/web/html/attributes/accept/index.html index 90f1ff9bed..ab22f146ca 100644 --- a/files/fr/web/html/attributes/accept/index.html +++ b/files/fr/web/html/attributes/accept/index.html @@ -12,7 +12,7 @@ translation_of: Web/HTML/Attributes/accept ---

{{HTMLSidebar}}

-

L'attribut accept prend comme valeur une liste séparée par des virgules d'un ou plusieurs types de fichiers, ou d'une spécification de type de fichier unique, décrivant les types de fichiers à autoriser. La propriété accept est un attribut pour les éléments <input> de type file. Elle était prise en charge par l'élément <form>, mais a été supprimée au profit de file dans HTML5.

+

L'attribut accept prend comme valeur une liste séparée par des virgules d'un ou plusieurs types de fichiers, ou d'une spécification de type de fichier unique, décrivant les types de fichiers à autoriser. La propriété accept est un attribut pour les éléments <input> de type file. Elle était prise en charge par l'élément <form>, mais a été supprimée au profit de file dans HTML5.

Comme un type de fichier donné peut être identifié de plusieurs manières, il est utile de fournir un ensemble complet de spécificateurs de type lorsque vous avez besoin de fichiers d'un type spécifique, ou d'utiliser le joker pour indiquer qu'un type de n'importe quel format est accepté.

@@ -82,19 +82,16 @@ translation_of: Web/HTML/Attributes/accept </div> </form> -

Cela produit le résultat suivant :

{{EmbedLiveSample('a_basic_example', 650, 100)}}

-
-

Note :

-

Vous pouvez trouver cet exemple sur GitHub également - voir le code source, et aussi le fonctionnement en direct.

+
+

Note : Vous pouvez trouver cet exemple sur GitHub également - voir le code source, et aussi le fonctionnement en direct.

Quel que soit le dispositif ou le système d'exploitation de l'utilisateur, l'entrée de fichier fournit un bouton qui ouvre une boîte de dialogue de sélection de fichier permettant à l'utilisateur de choisir un fichier.

@@ -127,11 +124,9 @@ translation_of: Web/HTML/Attributes/accept </div> </form> -

{{EmbedLiveSample('limiting_accepted_file_types', 650, 100)}}

diff --git a/files/fr/web/html/attributes/autocomplete/index.html b/files/fr/web/html/attributes/autocomplete/index.html index 8e26069dd5..a419111c3f 100644 --- a/files/fr/web/html/attributes/autocomplete/index.html +++ b/files/fr/web/html/attributes/autocomplete/index.html @@ -22,7 +22,7 @@ original_slug: Web/HTML/Attributs/autocomplete ---
{{HTMLSidebar}}
-

L'attribut autocomplete est disponible sur les éléments <input> qui prennent une valeur textuelle ou numérique en entrée, mais aussi pour les éléments <textarea>, <select> et <form>. autocomplete permet aux développeuses et développeurs web de spécifier quelle est l'autorisation éventuelle, pour l'agent utilisateur, de fournir une assistance automatisée afin de remplir les valeurs des champs de formulaire, ainsi que des indications au navigateur quant au type d'informations attendues dans le champ.

+

L'attribut autocomplete est disponible sur les éléments <input> qui prennent une valeur textuelle ou numérique en entrée, mais aussi pour les éléments <textarea>, <select> et <form>. autocomplete permet aux développeuses et développeurs web de spécifier quelle est l'autorisation éventuelle, pour l'agent utilisateur, de fournir une assistance automatisée afin de remplir les valeurs des champs de formulaire, ainsi que des indications au navigateur quant au type d'informations attendues dans le champ.

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. Des valeurs préconfigurées peuvent aussi être utilisé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.

@@ -30,9 +30,8 @@ original_slug: Web/HTML/Attributs/autocomplete

Pour plus d'informations, voir la documentation de l'attribut autocomplete pour l'élément <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>:

+
+

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. @@ -46,9 +45,8 @@ original_slug: Web/HTML/Attributs/autocomplete
    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.

    +
    +

    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
    @@ -163,9 +161,8 @@ original_slug: Web/HTML/Attributs/autocomplete

    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.

    +
    +

    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.

    Exemples

    diff --git a/files/fr/web/html/attributes/capture/index.html b/files/fr/web/html/attributes/capture/index.html index 63cefd3d74..c55c1a05e9 100644 --- a/files/fr/web/html/attributes/capture/index.html +++ b/files/fr/web/html/attributes/capture/index.html @@ -12,12 +12,7 @@ translation_of: Web/HTML/Attributes/capture ---

    {{HTMLSidebar}}

    -
    -

    Brouillon :

    -

    Cette page n'est pas terminée.

    -
    - -

    L'attribut capture spécifie que, facultativement, un nouveau fichier doit être capturé, et le périphérique qui devrait être utilisé pour capturer ce nouveau média d'un type défini par l'attribut accept. Les valeurs comprennent user et environment. L'attribut capture est pris en charge sur les champs de formulaire de type file.

    +

    L'attribut capture spécifie que, facultativement, un nouveau fichier doit être capturé, et le périphérique qui devrait être utilisé pour capturer ce nouveau média d'un type défini par l'attribut accept. Les valeurs comprennent user et environment. L'attribut capture est pris en charge sur les champs de formulaire de type file.

    L'attribut capture prend pour valeur une chaîne de caractères qui spécifie quelle caméra utiliser pour la capture des données d'image ou de vidéo, si l'attribut accept indique que l'entrée doit être de l'un de ces types.

    @@ -40,9 +35,8 @@ translation_of: Web/HTML/Attributes/capture -
    -

    Note :

    -

    Capture était auparavant un attribut booléen qui, lorsqu'il était présent, indiqué que les périphériques de capture de l'appareil (comme la caméra ou le micro) devaient être utilisés plutôt que de demander à l'utilisateur de sélectionner un fichier.

    +
    +

    Note : Capture était auparavant un attribut booléen qui, lorsqu'il était présent, indiqué que les périphériques de capture de l'appareil (comme la caméra ou le micro) devaient être utilisés plutôt que de demander à l'utilisateur de sélectionner un fichier.

    Exemples

    diff --git a/files/fr/web/html/attributes/crossorigin/index.html b/files/fr/web/html/attributes/crossorigin/index.html index 76893fe115..6d9a19c6c6 100644 --- a/files/fr/web/html/attributes/crossorigin/index.html +++ b/files/fr/web/html/attributes/crossorigin/index.html @@ -14,7 +14,7 @@ original_slug: Web/HTML/Reglages_des_attributs_CORS ---
    {{HTMLSidebar}}
    -

    L'attribut crossorigin, valable sur les éléments <audio>, <img>, <link>, <script> et <video>, fournit la prise en charge de CORS, définissant la manière dont l'élément traite les demandes d'origine croisée, permettant ainsi la configuration des demandes CORS pour les données extraites de l'élément. Selon l'élément, l'attribut peut être un attribut de paramètres CORS.

    +

    L'attribut crossorigin, valable sur les éléments <audio>, <img>, <link>, <script> et <video>, fournit la prise en charge de CORS, définissant la manière dont l'élément traite les demandes d'origine croisée, permettant ainsi la configuration des demandes CORS pour les données extraites de l'élément. Selon l'élément, l'attribut peut être un attribut de paramètres CORS.

    L'attribut de contenu crossorigin sur les éléments médias est un attribut de paramétrage CORS.

    @@ -47,9 +47,8 @@ original_slug: Web/HTML/Reglages_des_attributs_CORS

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

    -
    -

    Note :

    -

    Avant Firefox 83, l'attribut crossorigin n'était pas pris en charge pour rel="icon" ; il existe également un bug sur Chrome.

    +
    +

    Note : Avant Firefox 83, l'attribut crossorigin n'était pas pris en charge pour rel="icon" ; il existe également un bug sur Chrome.

    Exemples

    diff --git a/files/fr/web/html/attributes/disabled/index.html b/files/fr/web/html/attributes/disabled/index.html index acc0a9cbfc..7bc4989a26 100644 --- a/files/fr/web/html/attributes/disabled/index.html +++ b/files/fr/web/html/attributes/disabled/index.html @@ -11,20 +11,19 @@ translation_of: Web/HTML/Attributes/disabled ---

    {{HTMLSidebar}}

    -

    L'attribut booléen disabled, lorsqu'il est présent, rend l'élément non mutable, non focusable, ou même non soumis avec le formulaire. L'utilisateur ne peut ni modifier ni cibler le contrôle, ni les descendants du contrôle de formulaire. Si l'attribut disabled est spécifié sur un contrôle de formulaire, l'élément et ses descendants de contrôle de formulaire ne participent pas à la validation des contraintes. Souvent, les navigateurs grisent ces contrôles et ils ne reçoivent aucun événement de navigation, comme les clics de souris ou les événements liés au focus.

    +

    L'attribut booléen disabled, lorsqu'il est présent, rend l'élément non mutable, non focusable, ou même non soumis avec le formulaire. L'utilisateur ne peut ni modifier ni cibler le contrôle, ni les descendants du contrôle de formulaire. Si l'attribut disabled est spécifié sur un contrôle de formulaire, l'élément et ses descendants de contrôle de formulaire ne participent pas à la validation des contraintes. Souvent, les navigateurs grisent ces contrôles et ils ne reçoivent aucun événement de navigation, comme les clics de souris ou les événements liés au focus.

    L'attribut disabled est utilisé par <button>, <fieldset>, <keygen>, <optgroup>, <option>, <select>, <textarea> et <input>.

    Cet attribut booléen indique que l'utilisateur ne peut pas interagir avec le contrôle ou ses contrôles descendants. Si cet attribut n'est pas spécifié, le contrôle hérite ce paramètre de l'élément contenant, par exemple fieldset ; s'il n'y a pas d'élément contenant avec l'attribut disabled défini, et que le contrôle lui-même ne possède pas cet attribut, alors le contrôle est activé. S'il est déclaré sur un <optgroup>, le sélecteur est toujours interactif (sauf s'il est désactivé autrement), mais aucun des éléments du groupe d'options n'est sélectionnable.

    -
    -

    Note :

    -

    Si un <fieldset> est désactivé, les contrôles de formulaire descendants sont tous désactivés, à l'exception des contrôles de formulaire dans la légende (<legend>).

    +
    +

    Note :Si un <fieldset> est désactivé, les contrôles de formulaire descendants sont tous désactivés, à l'exception des contrôles de formulaire dans la légende (<legend>).

    Lorsqu'un élément de support a l'attribut disabled est appliqué, la pseudo-classe :disabled s'y applique également. Inversement, les éléments qui prennent en charge l'attribut disabled mais qui n'ont pas l'attribut défini correspondent à la pseudo-classe :enabled.

    -

    Cet attribut booléen empêche l'utilisateur d'interagir avec le bouton. Si cet attribut n'est pas défini, le bouton peut toujours être désactivé à partir d'un élément contenant, par exemple <fieldset> ; s'il n'y a pas d'élément contenant avec l'attribut disabled défini, alors le bouton est activé.

    +

    Cet attribut booléen empêche l'utilisateur d'interagir avec le bouton. Si cet attribut n'est pas défini, le bouton peut toujours être désactivé à partir d'un élément contenant, par exemple <fieldset> ; s'il n'y a pas d'élément contenant avec l'attribut disabled défini, alors le bouton est activé.

    Firefox va, contrairement aux autres navigateurs, faire persister l'état désactivé dynamique d'un <button> à travers les chargements de pages. Utilisez l'attribut autocomplete pour contrôler cette fonctionnalité.

    @@ -34,16 +33,15 @@ translation_of: Web/HTML/Attributes/disabled

    Étant donné qu'un champ désactivé ne peut pas voir sa valeur modifiée, required n'a aucun effet sur les entrées dont l'attribut disabled est également spécifié. De plus, puisque les éléments deviennent immuables, la plupart des autres attributs, tels que pattern, n'ont aucun effet, tant que le contrôle n'est pas activé.

    -
    -

    Note :

    -

    L'attribut required n'est pas autorisé sur les entrées pour lesquelles l'attribut disabled est spécifié.

    +
    +

    Note :L'attribut required n'est pas autorisé sur les entrées pour lesquelles l'attribut disabled est spécifié.

    Utilisation

    Les navigateurs affichent les contrôles de formulaire désactivés en grisé, car les contrôles de formulaire désactivés sont immuables, ne reçoivent pas de focus ou d'événements de navigation, comme les clics de souris ou les événements liés au focus, et ne sont pas soumis avec le formulaire.

    -

    S'il est présent sur un élément de support, la pseudo-classe :disabled correspondra. Si l'attribut n'est pas inclus, la pseudo-classe :enabled correspondra. Si l'élément ne prend pas en charge l'attribut disabled, l'attribut n'aura aucun effet, y compris celui de ne pas être apparié par les pseudo-classes :disabled et :enabled.

    +

    S'il est présent sur un élément de support, la pseudo-classe :disabled correspondra. Si l'attribut n'est pas inclus, la pseudo-classe :enabled correspondra. Si l'élément ne prend pas en charge l'attribut disabled, l'attribut n'aura aucun effet, y compris celui de ne pas être apparié par les pseudo-classes :disabled et :enabled.

    Validation des contraintes

    diff --git a/files/fr/web/html/attributes/elementtiming/index.html b/files/fr/web/html/attributes/elementtiming/index.html index 8335ba0ed6..36cf4b9628 100644 --- a/files/fr/web/html/attributes/elementtiming/index.html +++ b/files/fr/web/html/attributes/elementtiming/index.html @@ -12,7 +12,7 @@ translation_of: Web/HTML/Attributes/elementtiming ---

    {{HTMLSidebar}}

    -

    L'attribut elementtiming est utilisé pour indiquer qu'un élément est marqué pour le suivi par l'API Element Timing. Cet attribut peut être appliqué aux éléments <img>, <image> à l'intérieur d'un <svg>, aux vignettes des éléments <video>, aux éléments qui ont un background-image et aux éléments contenant des noeuds de texte, comme un paragraphe (<p>).

    +

    L'attribut elementtiming est utilisé pour indiquer qu'un élément est marqué pour le suivi par l'API Element Timing. Cet attribut peut être appliqué aux éléments <img>, <image> à l'intérieur d'un <svg>, aux vignettes des éléments <video>, aux éléments qui ont un background-image et aux éléments contenant des noeuds de texte, comme un paragraphe (<p>).

    Utilisation

    diff --git a/files/fr/web/html/attributes/for/index.html b/files/fr/web/html/attributes/for/index.html index 3499bc9489..4622351ac0 100644 --- a/files/fr/web/html/attributes/for/index.html +++ b/files/fr/web/html/attributes/for/index.html @@ -11,7 +11,7 @@ translation_of: Web/HTML/Attributes/for ---

    {{HTMLSidebar}}

    -

    L'attribut for est un attribut autorisé pour <label> et <output>. Lorsqu'il est utilisé sur un élément <label>, il indique l'élément de formulaire que ce label décrit. Lorsqu'il est utilisé sur un élément <output>, il permet une relation explicite entre les éléments, qui représentent les valeurs, qui sont utilisées dans le résultat représenté par <output>.

    +

    L'attribut for est un attribut autorisé pour <label> et <output>. Lorsqu'il est utilisé sur un élément <label>, il indique l'élément de formulaire que ce label décrit. Lorsqu'il est utilisé sur un élément <output>, il permet une relation explicite entre les éléments, qui représentent les valeurs, qui sont utilisées dans le résultat représenté par <output>.

    Utilisation

    diff --git a/files/fr/web/html/attributes/index.html b/files/fr/web/html/attributes/index.html index f34c74e52d..c77e29a6ed 100644 --- a/files/fr/web/html/attributes/index.html +++ b/files/fr/web/html/attributes/index.html @@ -17,7 +17,7 @@ original_slug: Web/HTML/Attributs ---
    {{HTMLSidebar}}
    -

    Les éléments HTML ont des attributs ; ce sont des valeurs supplémentaires qui configurent les éléments ou ajustent leur comportement de différentes manières pour répondre aux critères souhaités par les utilisateurs.

    +

    Les éléments HTML ont des attributs ; ce sont des valeurs supplémentaires qui configurent les éléments ou ajustent leur comportement de différentes manières pour répondre aux critères souhaités par les utilisateurs.

    Liste des attributs

    @@ -98,9 +98,8 @@ original_slug: Web/HTML/Attributs

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

    -
    -

    Note :

    -

    Bien que les navigateurs et les clients e-mails prennent en charge cet attribut, cet attribut est obsolète. On utilisera plutôt la propriété background-image.

    +
    +

    Note :Bien que les navigateurs et les clients e-mails prennent en charge cet attribut, cet attribut est obsolète. On utilisera plutôt la propriété background-image.

    @@ -110,9 +109,8 @@ original_slug: Web/HTML/Attributs

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

    +
    +

    Note :Cet attribut est un attribut historique. Veuillez utiliser la propriété CSS standard background-color.

    @@ -122,9 +120,8 @@ original_slug: Web/HTML/Attributs

    Cet attribut indique la largeur de la bordure.

    -
    -

    Note :

    -

    Cet attribut est un attribut historique. Veuillez utiliser la propriété CSS standard border.

    +
    +

    Note :Cet attribut est un attribut historique. Veuillez utiliser la propriété CSS standard border.

    @@ -179,9 +176,8 @@ original_slug: Web/HTML/Attributs

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

    +
    +

    Note :Cet attribut est un attribut historique. Veuillez utiliser la propriété CSS standard color.

    @@ -342,9 +338,8 @@ original_slug: Web/HTML/Attributs

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

    -
    -

    Note :

    -

    Pour certains éléments comme <div>,cet attribut est un reliquat et ne devrait plus être utilisé. C'est la propriété CSS height qui est la méthode standard pour définir la hauteur d'un élément.

    +
    +

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

    @@ -464,9 +459,8 @@ original_slug: Web/HTML/Attributs manifest {{obsolete_inline}} <html> Cet attribut définit l'URL du manifeste du document pour la gestion du cache. -
    -

    Note :

    -

    Cet attribut est obsolète, utilisez <link rel="manifest"> à la place.

    +
    +

    Note :Cet attribut est obsolète, utilisez <link rel="manifest"> à la place.

    @@ -724,9 +718,8 @@ original_slug: Web/HTML/Attributs width <canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video> Pour ces éléments, cet attribut définit la largeur occupée sur l'écran. -
    -

    Note :

    -

    Pour tous les autres éléments, comme <div>, il faut utiliser la propriété CSS standard width afin de définir la largeur.

    +
    +

    Note :Pour tous les autres éléments, comme <div>, il faut utiliser la propriété CSS standard width afin de définir la largeur.

    diff --git a/files/fr/web/html/attributes/max/index.html b/files/fr/web/html/attributes/max/index.html index b7b6dd56f6..2db1bd554b 100644 --- a/files/fr/web/html/attributes/max/index.html +++ b/files/fr/web/html/attributes/max/index.html @@ -12,7 +12,7 @@ translation_of: Web/HTML/Attributes/max ---

    {{HTMLSidebar}}

    -

    L'attribut max définit la valeur maximale acceptable et valide pour le champ de saisie contenant l'attribut. Si la valeur de l'élément est supérieure à cette valeur, l'élément échoue à la validation des contraintes. Cette valeur doit être supérieure ou égale à la valeur de l'attribut min. Si l'attribut max est présent mais n'est pas spécifié ou est invalide, aucune valeur max n'est appliquée. Si l'attribut max est valide et qu'une valeur non vide est supérieure au maximum autorisé par l'attribut max, la validation des contraintes empêchera la soumission du formulaire.

    +

    L'attribut max définit la valeur maximale acceptable et valide pour le champ de saisie contenant l'attribut. Si la valeur de l'élément est supérieure à cette valeur, l'élément échoue à la validation des contraintes. Cette valeur doit être supérieure ou égale à la valeur de l'attribut min. Si l'attribut max est présent mais n'est pas spécifié ou est invalide, aucune valeur max n'est appliquée. Si l'attribut max est valide et qu'une valeur non vide est supérieure au maximum autorisé par l'attribut max, la validation des contraintes empêchera la soumission du formulaire.

    Valable pour les types de saisie numérique, y compris les date, month, week, time, datetime-local, number et range, ainsi que les deux éléments <progress> et <meter>, l'attribut max est un nombre qui spécifie la valeur la plus positive qu'un contrôle de formulaire doit considérer comme valide.

    @@ -32,45 +32,44 @@ translation_of: Web/HTML/Attributes/max date - yyyy-mm-dd - <input type="date" max="2019-12-25" step="1"> +
    yyyy-mm-dd
    +
    <input type="date" max="2019-12-25" step="1">
    month - yyyy-mm - <input type="month" max="2019-12" step="12"> +
    yyyy-mm
    +
    <input type="month" max="2019-12" step="12">
    week - yyyy-W## - <input type="week" max="2019-W23" step=""> +
    yyyy-W##
    +
    <input type="week" max="2019-W23" step="">
    time - hh:mm - <input type="time" max="17:00" step="900"> +
    hh:mm
    +
    <input type="time" max="17:00" step="900">
    datetime-local yyyy-mm-ddThh:mm - <input type="datetime-local" max="2019-12-25T23:59"> +
    <input type="datetime-local" max="2019-12-25T23:59">
    number <number> - <input type="number" min="0" step="5" max="100"> +
    <input type="number" min="0" step="5" max="100">
    range <number> - <input type="range" min="60" step="5" max="100"> +
    <input type="range" min="60" step="5" max="100">
    -

    Note :

    -

    Lorsque les données saisies par l'utilisateur ne respectent pas la valeur maximale fixée, la valeur est considérée comme invalide dans la validation des contraintes et correspondra aux pseudo-classes :invalid et :out-of-range.

    +

    Note :Lorsque les données saisies par l'utilisateur ne respectent pas la valeur maximale fixée, la valeur est considérée comme invalide dans la validation des contraintes et correspondra aux pseudo-classes :invalid et :out-of-range.

    Voir la validation côté client et rangeOverflow pour plus d'informations.

    diff --git a/files/fr/web/html/attributes/maxlength/index.html b/files/fr/web/html/attributes/maxlength/index.html index a2cd5314f5..5ad331ca73 100644 --- a/files/fr/web/html/attributes/maxlength/index.html +++ b/files/fr/web/html/attributes/maxlength/index.html @@ -14,12 +14,7 @@ translation_of: Web/HTML/Attributes/maxlength ---

    {{HTMLSidebar}}

    -
    -

    Brouillon :

    -

    Cette page n'est pas terminée.

    -
    - -

    L'attribut maxlength définit le nombre maximal de caractères (en unités de code UTF-16) que l'utilisateur peut saisir dans un <input> ou un <textarea>. Il doit s'agir d'un nombre entier égal ou supérieur à 0. Si aucune longueur maximale n'est spécifiée, ou si une valeur non valide est spécifiée, l'entrée ou la zone de texte n'a pas de longueur maximale.

    +

    L'attribut maxlength définit le nombre maximal de caractères (en unités de code UTF-16) que l'utilisateur peut saisir dans un <input> ou un <textarea>. Il doit s'agir d'un nombre entier égal ou supérieur à 0. Si aucune longueur maximale n'est spécifiée, ou si une valeur non valide est spécifiée, l'entrée ou la zone de texte n'a pas de longueur maximale.

    Toute valeur de maxlength doit être supérieure ou égale à la valeur de minlength, si elle est présente et valide. L'entrée échoue à la validation des contraintes si la longueur de la valeur textuelle du champ est supérieure à la longueur maximale des unités de code UTF-16. La validation des contraintes n'est appliquée que lorsque la valeur est modifiée par l'utilisateur.

    diff --git a/files/fr/web/html/attributes/min/index.html b/files/fr/web/html/attributes/min/index.html index 17e65cf47d..9a142deaeb 100644 --- a/files/fr/web/html/attributes/min/index.html +++ b/files/fr/web/html/attributes/min/index.html @@ -12,7 +12,7 @@ translation_of: Web/HTML/Attributes/min ---

    {{HTMLSidebar}}

    -

    L'attribut min définit la valeur minimale qui est acceptable et valide pour l'entrée contenant l'attribut. Si la valeur de l'élément est inférieure à cette valeur, l'élément échoue lors de la validation des contraintes. Cette valeur doit être inférieure ou égale à la valeur de l'attribut max. Si une valeur est spécifiée pour min qui n'est pas un nombre valide, l'entrée n'a pas de valeur minimale.

    +

    L'attribut min définit la valeur minimale qui est acceptable et valide pour l'entrée contenant l'attribut. Si la valeur de l'élément est inférieure à cette valeur, l'élément échoue lors de la validation des contraintes. Cette valeur doit être inférieure ou égale à la valeur de l'attribut max. Si une valeur est spécifiée pour min qui n'est pas un nombre valide, l'entrée n'a pas de valeur minimale.

    Valable pour les types de saisie numérique, y compris les types date, month, week, time, datetime-local, number et range, et l'élément <meter>, l'attribut min est un nombre qui spécifie la valeur la plus négative qu'un contrôle de formulaire doit considérer comme valide.

    @@ -30,45 +30,44 @@ translation_of: Web/HTML/Attributes/min date - yyyy-mm-dd - <input type="date" min="2019-12-25" step="1"> +
    yyyy-mm-dd
    +
    <input type="date" min="2019-12-25" step="1">
    month - yyyy-mm - <input type="month" min="2019-12" step="12"> +
    yyyy-mm
    +
    <input type="month" min="2019-12" step="12">
    week - yyyy-W## - <input type="week" min="2019-W23" step=""> +
    yyyy-W##
    +
    <input type="week" min="2019-W23" step="">
    time - hh:mm - <input type="time" min="09:00" step="900"> +
    hh:mm
    +
    <input type="time" min="09:00" step="900">
    datetime-local yyyy-mm-ddThh:mm - <input type="datetime-local" min="2019-12-25T19:30"> +
    <input type="datetime-local" min="2019-12-25T19:30">
    number <number> - <input type="number" min="0" step="5" max="100"> +
    <input type="number" min="0" step="5" max="100">
    range <number> - <input type="range" min="60" step="5" max="100"> +
    <input type="range" min="60" step="5" max="100">
    -

    Note :

    -

    Lorsque les données saisies par l'utilisateur ne respectent pas la valeur minimale définie, la valeur est considérée comme non valide dans la validation des contraintes et correspondra aux pseudo-classes :invalid et :out-of-range.

    +

    Note :Lorsque les données saisies par l'utilisateur ne respectent pas la valeur minimale définie, la valeur est considérée comme non valide dans la validation des contraintes et correspondra aux pseudo-classes :invalid et :out-of-range.

    Voir la validation côté client et rangeUnderflow pour plus d'informations.

    diff --git a/files/fr/web/html/attributes/minlength/index.html b/files/fr/web/html/attributes/minlength/index.html index 42bbc2ab19..2e3960b93f 100644 --- a/files/fr/web/html/attributes/minlength/index.html +++ b/files/fr/web/html/attributes/minlength/index.html @@ -14,7 +14,7 @@ translation_of: Web/HTML/Attributes/minlength ---

    {{HTMLSidebar}}

    -

    L'attribut minlength définit le nombre minimal de caractères (sous forme d'unités de code UTF-16) que l'utilisateur peut saisir dans un élément <input> ou <textarea>. Il doit s'agir d'une valeur entière égale ou supérieure à 0. Si aucune longueur minimale n'est spécifiée, ou si une valeur invalide est spécifiée, l'entrée n'a pas de longueur minimale. Cette valeur doit être inférieure ou égale à la valeur de maxlength, sinon la valeur ne sera jamais valide, car il est impossible de satisfaire aux deux critères.

    +

    L'attribut minlength définit le nombre minimal de caractères (sous forme d'unités de code UTF-16) que l'utilisateur peut saisir dans un élément <input> ou <textarea>. Il doit s'agir d'une valeur entière égale ou supérieure à 0. Si aucune longueur minimale n'est spécifiée, ou si une valeur invalide est spécifiée, l'entrée n'a pas de longueur minimale. Cette valeur doit être inférieure ou égale à la valeur de maxlength, sinon la valeur ne sera jamais valide, car il est impossible de satisfaire aux deux critères.

    L'entrée échouera à la validation des contraintes si la longueur de la valeur textuelle du champ est inférieure à minlength unités de code UTF-16, avec validityState.tooShort retournant true. La validation des contraintes n'est appliquée que lorsque la valeur est modifiée par l'utilisateur. En cas d'échec de la soumission, certains navigateurs affichent un message d'erreur indiquant la longueur minimale requise et la longueur actuelle.

    diff --git a/files/fr/web/html/attributes/multiple/index.html b/files/fr/web/html/attributes/multiple/index.html index 3f306bf96c..f5dbe76289 100644 --- a/files/fr/web/html/attributes/multiple/index.html +++ b/files/fr/web/html/attributes/multiple/index.html @@ -10,7 +10,7 @@ translation_of: Web/HTML/Attributes/multiple ---

    {{HTMLSidebar}}

    -

    L'attribut booléen multiple, s'il est défini, signifie que le contrôle de formulaire accepte une ou plusieurs valeurs. Valable pour les types de saisie email et file et l'élément <select>, la manière dont l'utilisateur opte pour plusieurs valeurs dépend du contrôle de formulaire.

    +

    L'attribut booléen multiple, s'il est défini, signifie que le contrôle de formulaire accepte une ou plusieurs valeurs. Valable pour les types de saisie email et file et l'élément <select>, la manière dont l'utilisateur opte pour plusieurs valeurs dépend du contrôle de formulaire.

    Selon le type, le contrôle de formulaire peut avoir une apparence différente si l'attribut multiple est défini. Pour le type de saisie de fichier, la messagerie native fournie par le navigateur diffère. Dans Firefox, l'entrée de fichier indique « Aucun fichier sélectionné » lorsque l'attribut est présent et « Aucun fichier sélectionné » dans le cas contraire, lorsqu'aucun fichier n'est sélectionné. La plupart des navigateurs affichent une zone de liste déroulante pour un contrôle <select> avec l'attribut multiple défini contre une liste déroulante à une ligne lorsque l'attribut est omis. L'entrée email s'affiche de la même manière, mais correspondra à la pseudo-classe :invalid si plus d'une adresse électronique séparée par des virgules est incluse en l'absence de l'attribut.

    @@ -57,9 +57,7 @@ translation_of: Web/HTML/Attributes/multiple <option value="doc@menuisiers.fr">Doc</option> </datalist> -

    Si et seulement si l'attribut multiple est spécifié, la valeur peut être une liste d'adresses électroniques correctement formées et séparées par des virgules. Tout espace blanc de queue et de tête est supprimé de chaque adresse de la liste. Si l'attribut required est présent, au moins une adresse électronique est requise.

    diff --git a/files/fr/web/html/attributes/pattern/index.html b/files/fr/web/html/attributes/pattern/index.html index 73604d285f..c5e53db9ef 100644 --- a/files/fr/web/html/attributes/pattern/index.html +++ b/files/fr/web/html/attributes/pattern/index.html @@ -12,7 +12,7 @@ original_slug: Web/HTML/Attributs/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é patternMismatch en lecture seule, rattachée à l'objet ValidityState, vaudra true.

    +

    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é patternMismatch en lecture seule, rattachée à l'objet ValidityState, vaudra true.

    L'attribut pattern peut être utilisé pour les champs de type text, tel, email, url, password, search.

    @@ -20,9 +20,8 @@ original_slug: Web/HTML/Attributs/pattern

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

    +
    +

    Note :On pourra utiliser l'attribut title 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 email et 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 typeMismatch vaudra true.

    @@ -38,9 +37,9 @@ original_slug: Web/HTML/Attributs/pattern

    Exemples

    +

    Exemple 1

    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"/>)-
    @@ -57,8 +56,7 @@ original_slug: Web/HTML/Attributs/pattern
       border: red solid 3px;
     }
    -
    {{EmbedLiveSample("exemple1", 300, 80)}}
    -
    +
    {{EmbedLiveSample("Exemple_1", 300, 80)}}

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

    @@ -81,8 +79,7 @@ original_slug: Web/HTML/Attributs/pattern </div> </form> -

    Cela donne le résultat suivant :

    diff --git a/files/fr/web/html/attributes/readonly/index.html b/files/fr/web/html/attributes/readonly/index.html index 18131ec228..9eba1c737c 100644 --- a/files/fr/web/html/attributes/readonly/index.html +++ b/files/fr/web/html/attributes/readonly/index.html @@ -11,20 +11,14 @@ translation_of: Web/HTML/Attributes/readonly ---
    {{HTMLSidebar}}
    -
    -

    Brouillon :

    -

    Cette page n'est pas terminée.

    -
    - -

    L'attribut booléen readonly, lorsqu'il est présent, rend l'élément non mutable, ce qui signifie que l'utilisateur ne peut pas modifier le contrôle. Si l'attribut readonly est spécifié sur un élément de saisie, comme l'utilisateur ne peut pas modifier la saisie, l'élément ne participe pas à la validation des contraintes.

    +

    L'attribut booléen readonly, lorsqu'il est présent, rend l'élément non mutable, ce qui signifie que l'utilisateur ne peut pas modifier le contrôle. Si l'attribut readonly est spécifié sur un élément de saisie, comme l'utilisateur ne peut pas modifier la saisie, l'élément ne participe pas à la validation des contraintes.

    L'attribut readonly est pris en charge par les types text, search, url, tel, email, password, date, mois, week, time, datetime-local, et number de <input> et les éléments de contrôle de formulaire <textarea>. S'il est présent sur l'un de ces types de saisie et éléments, la pseudo-classe :read-only correspondra. Si l'attribut n'est pas inclus, la pseudo-classe :read-write correspondra.

    L'attribut n'est pas pris en charge ou pertinent pour <select> ou les types d'entrée qui ne sont déjà pas mutables, comme checkbox et radio ou ne peuvent pas, par définition, commencer par une valeur, comme le type d'entrée file. range et color, car tous deux ont des valeurs par défaut. Il n'est pas non plus pris en charge sur hidden, car on ne peut pas s'attendre à ce qu'un utilisateur remplisse un formulaire qui est caché. Il n'est pas non plus supporté sur des types de boutons, y compris image.

    -
    -

    Note :

    -

    Seuls les contrôles de texte peuvent être rendus en lecture seule, car pour les autres contrôles (comme les cases à cocher et les boutons), il n'y a pas de distinction utile entre être en lecture seule et être désactivé, donc l'attribut readonly ne s'applique pas.

    +
    +

    Note :Seuls les contrôles de texte peuvent être rendus en lecture seule, car pour les autres contrôles (comme les cases à cocher et les boutons), il n'y a pas de distinction utile entre être en lecture seule et être désactivé, donc l'attribut readonly ne s'applique pas.

    Lorsqu'une entrée possède l'attribut readonly, la pseudo-classe :read-only s'y applique également. Inversement, les entrées qui prennent en charge l'attribut readonly mais qui n'ont pas l'attribut défini correspondent à la pseudo-classe :read-write.

    @@ -37,9 +31,8 @@ translation_of: Web/HTML/Attributes/readonly

    Le seul moyen de modifier dynamiquement la valeur de l'attribut readonly est d'utiliser un script.

    -
    -

    Note :

    -

    L'attribut required n'est pas autorisé sur les entrées pour lesquelles l'attribut readonly est spécifié.

    +
    +

    Note :L'attribut required n'est pas autorisé sur les entrées pour lesquelles l'attribut readonly est spécifié.

    Validation des contraintes

    diff --git a/files/fr/web/html/attributes/rel/index.html b/files/fr/web/html/attributes/rel/index.html index 45c4bb4ec0..c2f3fbde6d 100644 --- a/files/fr/web/html/attributes/rel/index.html +++ b/files/fr/web/html/attributes/rel/index.html @@ -12,7 +12,7 @@ translation_of: Web/HTML/Attributes/rel ---
    {{HTMLSidebar}}
    -

    L'attribut rel définit la relation entre une ressource liée et le document actuel. Valable sur <link>, <a>, <area>, et <form>, les valeurs supportées dépendent de l'élément sur lequel se trouve l'attribut.

    +

    L'attribut rel définit la relation entre une ressource liée et le document actuel. Valable sur <link>, <a>, <area>, et <form>, les valeurs supportées dépendent de l'élément sur lequel se trouve l'attribut.

    Le type de relations est donné par la valeur de l'attribut rel, qui, s'il est présent, doit avoir une valeur qui est un ensemble non ordonné de mots-clés uniques séparés par des espaces. À la différence d'un nom de class, qui n'exprime pas de sémantique, l'attribut rel doit exprimer des mots-clés qui sont sémantiquement valides pour les machines et les humains. Les registres actuels des valeurs possibles de l'attribut rel sont le registre de relations de liens de l'IANA, le HTML Living Standard, et la page existing-rel-values librement modifiable dans le wiki microformats, comme suggéré par le Living Standard. Si un attribut rel non présent dans l'une des trois sources ci-dessus est utilisé, certains validateurs HTML (tels que le W3C Markup Validation Service) généreront un avertissement.

    @@ -218,13 +218,12 @@ translation_of: Web/HTML/Attributes/rel

    Note : L'iOS d'Apple n'utilise pas ce type de lien, ni l'attribut sizes, comme le font d'autres navigateurs mobiles, pour sélectionner une icône de page Web pour Web Clip ou un espace réservé au démarrage. Au lieu de cela, il utilise les attributs non standard apple-touch-icon et apple-touch-startup-image respectivement.

    -
    -

    Note :

    -

    Le type de lien shortcut est souvent vu avant icon, mais ce type de lien est non conforme, ignoré et les auteurs web ne doivent plus l'utiliser.

    +
    +

    Note :Le type de lien shortcut est souvent vu avant icon, mais ce type de lien est non conforme, ignoré et les auteurs web ne doivent plus l'utiliser.

    -
    alternate
    +
    alternate
    Indique une représentation alternative du document actuel. Valable pour <link>, <a>, et <area>, la signification dépend des valeurs des autres attributs.
    • Avec le mot clé stylesheet sur un <link>, il crée une feuille de style alternative. @@ -242,24 +241,23 @@ translation_of: Web/HTML/Attributes/rel <link rel="alternate" href="/fr/pdf" hreflang="fr" type=application/pdf title="PDF Français">
    -
    -

    Note :

    -

    L'attribut obsolète rev="made" est traité comme rel="alternate".

    +
    +

    Note :L'attribut obsolète rev="made" est traité comme rel="alternate".

    -
    author
    +
    author
    Indique l'auteur du document ou de l'article en cours. Pertinent pour les éléments <link>, <a> et <area>, le mot-clé author crée un lien hypertexte. Avec <a> et <area>, il indique que le document lié (ou mailto:) fournit des informations sur l'auteur de l'ancêtre le plus proche d'un élément <article> s'il en existe un, sinon le document entier. Pour <link>, il représente l'auteur du document entier.
    -
    bookmark
    +
    bookmark
    Pertinent comme valeur de l'attribut rel pour les éléments <a> et <area>, le signet fournit un permalien pour la section ancêtre, qui est l'ancêtre le plus proche d'un élément <article> ou <section>, s'il y en a au moins un, sinon, le parent le plus proche de l'en-tête ou l'ancêtre descendant, jusqu'au suivant.
    -
    canonical
    +
    canonical
    Valable pour <link>, elle définit l'URL préférée du document actuel, ce qui est utile pour les moteurs de recherche.
    -
    dns-prefetch
    +
    dns-prefetch
    Pertinent pour l'élément <link> à la fois dans les éléments <body> et <head>, il indique au navigateur d'effectuer de manière préemptive la résolution DNS pour l'origine de la ressource cible. Utile pour les ressources dont l'utilisateur aura probablement besoin, elle permet de réduire la latence et donc d'améliorer les performances lorsque l'utilisateur accède effectivement aux ressources car le navigateur a effectué de manière préemptive la résolution DNS pour l'origine de la ressource spécifiée. Voir dns-prefetch décrit dans les conseils.
    -
    external
    +
    external
    S'appliquant à <form>, <a> et <area>, elle indique que le document référencé ne fait pas partie du site actuel. Il peut être utilisé avec des sélecteurs d'attributs pour donner un style aux liens externes d'une manière qui indique à l'utilisateur qu'il va quitter le site actuel.
    -
    help
    +
    help
    Concerne les éléments <form>, <link>, <a> et <area>, le mot clé help indique que le contenu lié fournit une aide contextuelle, fournissant des informations pour le parent de l'élément définissant l'hyperlien, et ses enfants. Lorsqu'il est utilisé dans <link>, l'aide concerne l'ensemble du document. Lorsqu'elle est incluse avec <a> et <area> et qu'elle est prise en charge, le cursor par défaut sera help au lieu de pointer.
    -
    icon
    +
    icon

    Valable avec <link>, la ressource liée représente l'icône, ressource de représentation de la page dans l'interface utilisateur, pour le document courant.

    @@ -269,68 +267,65 @@ translation_of: Web/HTML/Attributes/rel

    S'il existe plusieurs <link rel="icon">, le navigateur utilise leurs attributs media, type, et sizes pour sélectionner l'icône la plus appropriée. Si plusieurs icônes sont également appropriées, la dernière est utilisée. Si l'icône la plus appropriée s'avère ultérieurement inappropriée, par exemple parce qu'elle utilise un format non pris en charge, le navigateur passe à l'icône suivante la plus appropriée, et ainsi de suite.

    -
    -

    Note :

    -

    Avant Firefox 83, l'attribut crossorigin n'était pas pris en charge pour rel="icon" ; il existe également un problème pour Chrome.

    +
    +

    Note :Avant Firefox 83, l'attribut crossorigin n'était pas pris en charge pour rel="icon" ; il existe également un problème pour Chrome.

    L'iOS d'Apple n'utilise pas ce type de lien, ni l'attribut sizes, comme le font d'autres navigateurs mobiles, pour sélectionner une icône de page Web pour Web Clip ou un espace réservé au démarrage. Au lieu de cela, il utilise respectivement le type non standard apple-touch-icon et apple-touch-startup-image.

    Le type de lien shortcut est souvent vu avant icon, mais ce type de lien est non conforme, ignoré et les auteurs web ne doivent plus l'utiliser.

    -
    license
    +
    license

    Valable sur les éléments <a>, <area>, <form> et <link>, la valeur license indique que l'hyperlien mène à un document décrivant les informations relatives à la licence ; que le contenu principal du document actuel est couvert par la licence de droit d'auteur décrite par le document référencé. Si elle ne se trouve pas à l'intérieur de l'élément <head>, la norme ne fait pas de distinction entre un hyperlien s'appliquant à une partie spécifique du document ou au document dans son ensemble. Seules les données de la page peuvent l'indiquer.

    <link rel="license" href="#license">
    -
    -

    Note :

    -

    Bien que reconnu, le synonyme copyright est incorrect et doit être évité.

    +
    +

    Note :Bien que reconnu, le synonyme copyright est incorrect et doit être évité.

    -
    manifest
    +
    manifest
    Manifeste de l'application Web. Nécessite l'utilisation du protocole CORS pour le « fetching cross-origin ».
    -
    modulepreload
    +
    modulepreload
    Utile pour améliorer les performances, et pertinent pour l'élément <link> n'importe où dans le document, la définition de rel="modulepreload" indique au navigateur de récupérer de manière préemptive le script (et les dépendances) et de le stocker dans la carte des modules du document pour une évaluation ultérieure. Les liens modulepreload peuvent garantir que la récupération du réseau se fait avec le module prêt (mais non évalué) dans la carte des modules avant qu'il ne soit nécessairement nécessaire. Voir aussi Types de liens : modulepreload.
    -
    next
    +
    next
    Pertinent pour les éléments <form>, <link>, <a> et <area>, les valeurs next indiquent que le document actuel fait partie d'une série, et que le document suivant dans la série est le document référencé. Lorsqu'elles sont incluses dans un <link>, les navigateurs peuvent supposer que le document sera récupéré ensuite, et le traiter comme une indication de ressource.
    -
    nofollow
    +
    nofollow
    Pertinent pour les éléments <form>, <a> et <area>, le mot clé nofollow indique aux robots des moteurs de recherche d'ignorer la relation de lien. La relation nofollow peut indiquer que le propriétaire du document actuel ne cautionne pas le document référencé. Elle est souvent incluse par les optimiseurs de moteurs de recherche qui prétendent que leurs fermes de liens ne sont pas des pages de spam.
    -
    noopener
    +
    noopener
    Cela concerne <form>, <a> et <area>, elle crée un contexte de navigation de haut niveau qui n'est pas un contexte de navigation auxiliaire si l'hyperlien créait l'un ou l'autre pour commencer (c.-à-d. a une valeur appropriée de l'attribut target). En d'autres termes, il fait en sorte que le lien se comporte comme si window.opener était nul et que target="_parent" était défini.

    C'est le contraire de opener.
    -
    noreferrer
    +
    noreferrer
    Pertinent pour <form>, <a> et <area>, l'inclusion de cette valeur rend le référent inconnu (aucun en-tête Referer ne sera inclus), et crée un contexte de navigation de haut niveau comme si noopener était également défini.
    -
    opener
    +
    opener
    Crée un contexte de navigation auxiliaire si l'hyperlien créerait autrement un contexte de navigation de haut niveau qui n'est pas un contexte de navigation auxiliaire (c.-à-d. a « _blank » comme valeur d'attribut target). Effectivement, c'est le contraire de noopener.
    -
    pingback
    +
    pingback
    Donne l'adresse du serveur de retour d'appel qui gère les retours d'appel pour le document actuel.
    -
    preconnect
    +
    preconnect
    Spécifie que l'agent utilisateur doit se connecter de manière préemptive à l'origine de la ressource cible.
    -
    prefetch
    +
    prefetch
    Indique que l'agent utilisateur doit récupérer et mettre en cache de manière préemptive la ressource cible, car elle est susceptible d'être requise pour une navigation ultérieure.
    -
    preload
    +
    preload
    Spécifie que l'agent utilisateur doit récupérer et mettre en cache de manière préemptive la ressource cible pour la navigation actuelle en fonction de la destination potentielle donnée par l'attribut as (et la priorité associée à la destination correspondante).
    -
    prerender
    +
    prerender
    Spécifie que l'agent utilisateur doit récupérer de manière préemptive la ressource cible et la traiter de manière à fournir une réponse plus rapide à l'avenir.
    -
    prev
    +
    prev

    Similaire au mot-clé next, pertinent pour les éléments <form>, <link>, <a> et <area>, les valeurs prev indiquent que le document actuel fait partie d'une série, et que le lien renvoie à un document précédent de la série est le document référencé.

    -
    -

    Note :

    -

    Le synonyme previous est incorrect et ne doit pas être utilisé.

    +
    +

    Note :Le synonyme previous est incorrect et ne doit pas être utilisé.

    -
    search
    +
    search

    Concerne les éléments <form>, <link>, <a> et < area>, les mots-clés search indiquent que l'hyperlien fait référence à un document dont l'interface est spécialement conçue pour effectuer des recherches dans le document actuel, le site et les ressources connexes, en fournissant un lien vers une ressource qui peut être utilisée pour effectuer une recherche.

    Si l'attribut type est défini à application/opensearchdescription+xml, la ressource est un prolongateur OpenSearch qui peut être facilement ajouté à l'interface de certains navigateurs comme Firefox ou Internet Explorer.

    -
    stylesheet
    +
    stylesheet

    Valable pour l'élément <link>, il importe une ressource externe à utiliser comme feuille de style. L'attribut type n'est pas nécessaire, car il s'agit d'une feuille de style text/css, puisque c'est la valeur par défaut. S'il ne s'agit pas d'une feuille de style de type text/css, il est préférable de déclarer le type.

    @@ -342,7 +337,7 @@ translation_of: Web/HTML/Attributes/rel

    Nécessite l'utilisation du protocole CORS pour la récupération inter-origine.

    -
    tag
    +
    tag
    Valable pour les éléments <a> et <area>, il donne une balise (identifiée par l'adresse donnée) qui s'applique au document actuel. La valeur de la balise indique que le lien renvoie à un document, décrivant une balise s'appliquant au document sur lequel il se trouve. Ce type de lien n'est pas destiné aux balises, dans un nuage de balises, car elles s'appliquent à un groupe de pages, alors que la valeur tag de l'attribut rel concerne un seul document.
    @@ -350,7 +345,7 @@ translation_of: Web/HTML/Attributes/rel
    apple-touch-icon-precomposed
    -
    +

    Exemple d'utilisation

    <!-- iPad de troisième génération avec écran Retina haute résolution : -->
       <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/static/img/favicon144.e7e21ca263ca.png">
       <!-- iPhone avec écran Retina haute résolution : -->
    @@ -407,13 +402,13 @@ translation_of: Web/HTML/Attributes/rel
         
           {{SpecName("HTML3.2", "#link", "<link>")}}
           
    -      

    Obsolète

    +

    Obsolète

    Ajout de top, contents, index, glossary, copyright, next, previous, help et search. {{RFC(1866, "HTML 2.0")}} - Obsolète + Obsolète Définition initiale. diff --git a/files/fr/web/html/attributes/required/index.html b/files/fr/web/html/attributes/required/index.html index a9ee8bdaaf..56e487c081 100644 --- a/files/fr/web/html/attributes/required/index.html +++ b/files/fr/web/html/attributes/required/index.html @@ -11,7 +11,7 @@ translation_of: Web/HTML/Attributes/required ---
    {{HTMLSidebar}}
    -

    L'attribut booléen required, s'il est présent, indique que l'utilisateur doit spécifier une valeur pour l'entrée avant que le formulaire propriétaire puisse être soumis. L'attribut required est pris en charge pour les éléments text, search, url, tel, email, password, date, month, week, time, datetime-local, number, checkbox, radio, les éléments file, <input>, <select> et <textarea> de contrôle de formulaire. Si elle est présente sur l'un de ces types de saisie et éléments, la pseudo-classe :required s'appliquera. Si l'attribut n'est pas inclus, la pseudo-classe :optional s'appliquera.

    +

    L'attribut booléen required, s'il est présent, indique que l'utilisateur doit spécifier une valeur pour l'entrée avant que le formulaire propriétaire puisse être soumis. L'attribut required est pris en charge pour les éléments text, search, url, tel, email, password, date, month, week, time, datetime-local, number, checkbox, radio, les éléments file, <input>, <select> et <textarea> de contrôle de formulaire. Si elle est présente sur l'un de ces types de saisie et éléments, la pseudo-classe :required s'appliquera. Si l'attribut n'est pas inclus, la pseudo-classe :optional s'appliquera.

    L'attribut n'est pas pris en charge ou n'est pas pertinent pour range et color, car les deux ont des valeurs par défaut. Il n'est pas non plus pris en charge sur hidden car on ne peut pas s'attendre à ce qu'un utilisateur remplisse un formulaire qui est caché. Il n'est pas non plus supporté sur aucun des types de boutons, y compris image.

    @@ -21,9 +21,8 @@ translation_of: Web/HTML/Attributes/required

    Dans le cas d'un même groupe nommé de types d'entrée checkbox, seules les cases à cocher avec l'attribut required sont obligatoires.

    -
    -

    Note :

    -

    Le réglage aria-required="true" indique à un lecteur d'écran qu'un élément (n'importe lequel) est requis, mais n'a aucune incidence sur le caractère facultatif de l'élément.

    +
    +

    Note :Le réglage aria-required="true" indique à un lecteur d'écran qu'un élément (n'importe lequel) est requis, mais n'a aucune incidence sur le caractère facultatif de l'élément.

    Interactions entre attributs

    diff --git a/files/fr/web/html/attributes/size/index.html b/files/fr/web/html/attributes/size/index.html index 8e6c06105a..aac800a452 100644 --- a/files/fr/web/html/attributes/size/index.html +++ b/files/fr/web/html/attributes/size/index.html @@ -11,7 +11,7 @@ translation_of: Web/HTML/Attributes/size ---
    {{HTMLSidebar}}
    -

    L'attribut size définit la largeur de l'élément <input> et la hauteur de l'élément <select>. Pour input, si l'attribut type est text ou password alors c'est le nombre de caractères. Il doit s'agir d'un nombre entier de valeur 0 ou supérieure. Si aucun size n'est spécifié, ou si une valeur invalide est spécifiée, l'entrée n'a pas de taille déclarée, et le contrôle de formulaire aura la largeur par défaut basée sur l'agent utilisateur. Si CSS cible l'élément avec des propriétés ayant un impact sur la largeur, CSS a la priorité.

    +

    L'attribut size définit la largeur de l'élément <input> et la hauteur de l'élément <select>. Pour input, si l'attribut type est text ou password alors c'est le nombre de caractères. Il doit s'agir d'un nombre entier de valeur 0 ou supérieure. Si aucun size n'est spécifié, ou si une valeur invalide est spécifiée, l'entrée n'a pas de taille déclarée, et le contrôle de formulaire aura la largeur par défaut basée sur l'agent utilisateur. Si CSS cible l'élément avec des propriétés ayant un impact sur la largeur, CSS a la priorité.

    L'attribut size n'a aucun impact sur la validation des contraintes.

    diff --git a/files/fr/web/html/attributes/step/index.html b/files/fr/web/html/attributes/step/index.html index fca8bc80d0..c87e0ddc44 100644 --- a/files/fr/web/html/attributes/step/index.html +++ b/files/fr/web/html/attributes/step/index.html @@ -12,7 +12,7 @@ translation_of: Web/HTML/Attributes/step ---
    {{HTMLSidebar}}
    -

    L'attribut step est un nombre qui indique l'incrément que la valeur doit suivre ou le mot-clé any. Il est valable pour les types de saisie numérique, notamment les date, month, week, time, datetime-local, number et range.

    +

    L'attribut step est un nombre qui indique l'incrément que la valeur doit suivre ou le mot-clé any. Il est valable pour les types de saisie numérique, notamment les date, month, week, time, datetime-local, number et range.

    step définit l'incrément obtenu lors du clic sur les boutons déroulants haut et bas, du déplacement d'un curseur vers la gauche et la droite sur une plage, et de la validation des différents types de date. S'il n'est pas explicitement inclus, step prend par défaut la valeur 1 pour number et range, et 1 type d'unité (minute, semaine, mois, jour) pour les types d'entrée date/heure. La valeur doit être un nombre positif - entier ou flottant - ou la valeur spéciale any, ce qui signifie qu'aucun incrément n'est impliqué et que toute valeur est autorisée (sauf autres contraintes, comme min et max).

    @@ -33,37 +33,37 @@ translation_of: Web/HTML/Attributes/step date 1 (jour) - <input type="date" min="2019-12-25" step="1"> +
    <input type="date" min="2019-12-25" step="1">
    month 1 (mois) - <input type="month" min="2019-12" step="12"> +
    <input type="month" min="2019-12" step="12">
    week 1 (semaine) - <input type="week" min="2019-W23" step="2"> +
    <input type="week" min="2019-W23" step="2">
    time 60 (secondes) - <input type="time" min="09:00" step="900"> +
    <input type="time" min="09:00" step="900">
    datetime-local 1 (jour) - <input type="datetime-local" min="019-12-25T19:30" step="7"> +
    <input type="datetime-local" min="019-12-25T19:30" step="7">
    number 1 - <input type="number" min="0" step="0.1" max="10"> +
    <input type="number" min="0" step="0.1" max="10">
    range 1 - <input type="range" min="0" step="2" max="10"> +
    <input type="range" min="0" step="2" max="10">
    @@ -88,9 +88,8 @@ translation_of: Web/HTML/Attributes/step
    {{EmbedLiveSample("min_impact_on_step","",50)}}
    -
    -

    Note :

    -

    Lorsque les données saisies par l'utilisateur ne respectent pas la configuration indiquée par l'incrément, la valeur est considérée comme non valide dans la validation des contraintes et correspondra aux pseudoclasses :invalid et :out-of-range.

    +
    +

    Note :Lorsque les données saisies par l'utilisateur ne respectent pas la configuration indiquée par l'incrément, la valeur est considérée comme non valide dans la validation des contraintes et correspondra aux pseudoclasses :invalid et :out-of-range.

    Voir Validation côté client et stepMismatch pour plus d'informations.

    diff --git a/files/fr/web/html/block-level_elements/index.html b/files/fr/web/html/block-level_elements/index.html index 948738c8c5..7b1944d421 100644 --- a/files/fr/web/html/block-level_elements/index.html +++ b/files/fr/web/html/block-level_elements/index.html @@ -11,11 +11,11 @@ tags: translation_of: Web/HTML/Block-level_elements original_slug: Web/HTML/Éléments_en_bloc --- -

    Les éléments HTML (Hypertext Markup Language) étaient historiquement catégorisés comme des éléments de type "block" ou de type "inline". Comme il s'agit d'une caractéristique de présentation, elle est aujourd'hui spécifiée par CSS dans la disposition en flux. Un élément de type bloc occupe tout l'espace horizontal de son élément parent (conteneur), et un espace vertical égal à la hauteur de son contenu, créant ainsi un bloc. Dans cet article, nous examinerons les éléments HTML de type bloc et comment ils diffèrent des éléments en ligne.

    +

    Les éléments HTML (Hypertext Markup Language) étaient historiquement catégorisés comme des éléments de type "block" ou de type "inline". Comme il s'agit d'une caractéristique de présentation, elle est aujourd'hui spécifiée par CSS dans la disposition en flux. Un élément de type bloc occupe tout l'espace horizontal de son élément parent (conteneur), et un espace vertical égal à la hauteur de son contenu, créant ainsi un bloc. Dans cet article, nous examinerons les éléments HTML de type bloc et comment ils diffèrent des éléments en ligne.

    Les navigateurs affichent généralement un élément de type bloc avec une nouvelle ligne avant et après l'élément. Vous pouvez les visualiser comme une pile de boîtes.

    -
    +

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

    @@ -57,66 +57,65 @@ Son fond a été coloré pour illustrer son conteneur.</p>

    La liste qui suit contient tous les éléments HTML de type bloc (cette catégorie n'est pas strictement applicable pour les éléments apparus avec HTML5).

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

    Voir aussi

    diff --git a/files/fr/web/html/cors_enabled_image/index.html b/files/fr/web/html/cors_enabled_image/index.html index 07aef9b0ef..0e839a8c73 100644 --- a/files/fr/web/html/cors_enabled_image/index.html +++ b/files/fr/web/html/cors_enabled_image/index.html @@ -14,7 +14,7 @@ tags: translation_of: Web/HTML/CORS_enabled_image original_slug: Web/HTML/Images_avec_le_contrôle_d_accès_HTTP --- -

    HTML permet d'utiliser l'attribut crossorigin sur les images. Utilisé avec un en-tête CORS adéquat, les images définies par <img> provenant d'origines étrangères pourront être utilisées au sein d'un élément <canvas> comme si elles avaient été chargées depuis l'origine courante.

    +

    HTML permet d'utiliser l'attribut crossorigin sur les images. Utilisé avec un en-tête CORS adéquat, les images définies par <img> provenant d'origines étrangères pourront être utilisées au sein d'un élément <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.

    diff --git a/files/fr/web/html/date_and_time_formats/index.html b/files/fr/web/html/date_and_time_formats/index.html index 71e7e3483f..95aebbdca4 100644 --- a/files/fr/web/html/date_and_time_formats/index.html +++ b/files/fr/web/html/date_and_time_formats/index.html @@ -24,7 +24,7 @@ original_slug: Web/HTML/Formats_date_heure_HTML ---
    {{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 <input> qui permettent de choisir une date, une heure ou les deux, les éléments <ins> et <del> dont l'attribut ins indique la date (ou la date et l'heure) à laquelle l'ajout ou la suppression de contenu a eu lieu.

    +

    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 <input> qui permettent de choisir une date, une heure ou les deux, les éléments <ins> et <del> dont l'attribut 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. input) pour lesquels l'attribut value contient une chaîne de caractères représentant une date ou une heure :

    @@ -389,12 +389,12 @@ original_slug: Web/HTML/Formats_date_heure_HTML 1986-01-28 11:38:00.010 - 1986-01-28T11:38:00.011 + 1986-01-28T11:38:00.01 28 janvier 1986 à 11 heures et 38 minutes passées de 10 millisecondes 0170-07-31T22:00:00 - 0170-07-31T22:002 + 0170-07-31T22:00 31 juillet 170 à 22 heures diff --git a/files/fr/web/html/element/a/index.html b/files/fr/web/html/element/a/index.html index ef41ac41a5..786964fa38 100644 --- a/files/fr/web/html/element/a/index.html +++ b/files/fr/web/html/element/a/index.html @@ -18,7 +18,7 @@ browser-compat: html.elements.a ---
    {{HTMLRef}}
    -

    L'élément HTML <a> (pour ancre ou anchor en anglais), avec son attribut href, crée un lien hypertexte vers des pages web, des fichiers, des adresses e-mail, des emplacements se trouvant dans la même page, ou tout ce qu'une URL peut adresser. Le contenu de chaque élément <a> doit indiquer la destination du lien. Si l'attribut href est présent, appuyer sur la touche entrée en se concentrant sur l'élément <a> l'activera.

    +

    L'élément HTML <a> (pour ancre ou anchor en anglais), avec son attribut href, crée un lien hypertexte vers des pages web, des fichiers, des adresses e-mail, des emplacements se trouvant dans la même page, ou tout ce qu'une URL peut adresser. Le contenu de chaque élément <a> doit indiquer la destination du lien. Si l'attribut href est présent, appuyer sur la touche entrée en se concentrant sur l'élément <a> l'activera.

    {{EmbedInteractiveExample("pages/tabbed/a.html")}}
    @@ -27,20 +27,17 @@ browser-compat: html.elements.a

    Cet élément inclut les attributs universels.

    -
    download
    +
    download
    -
      -
    • Sans valeur, le navigateur proposera un nom de fichier/extension, généré à partir de diverses sources : +

      Sans valeur, le navigateur proposera un nom de fichier/extension, généré à partir de diverses sources :

      -
    • -
    • La définition d'une valeur la suggère comme nom de fichier. Les caractères / et \ sont convertis en caractères de soulignement (_). Les systèmes de fichiers peuvent interdire d'autres caractères dans les noms de fichiers, les navigateurs ajusteront donc le nom suggéré si nécessaire.
    • -
    -
    -

    Note :

    +

    La définition d'une valeur la suggère comme nom de fichier. Les caractères / et \ sont convertis en caractères de soulignement (_). Les systèmes de fichiers peuvent interdire d'autres caractères dans les noms de fichiers, les navigateurs ajusteront donc le nom suggéré si nécessaire.

    +
    +

    Note :

    • download ne fonctionne que pour les URLs de même origine, ou les schémas blob: et data:.
    • @@ -53,7 +50,7 @@ browser-compat: html.elements.a
    -
    href
    +
    href

    L'URL vers laquelle pointe l'hyperlien. Les liens ne sont pas limités aux URL basées sur HTTP - ils peuvent utiliser n'importe quel schéma d'URL pris en charge par les navigateurs :

      @@ -64,15 +61,15 @@ browser-compat: html.elements.a
    • Bien que les navigateurs web puissent ne pas prendre en charge d'autres schémas d'URL, les sites web le peuvent avec registerProtocolHandler().
    -
    hreflang
    +
    hreflang
    Donne des indications sur le langage humain de l'URL liée. Aucune fonctionnalité intégrée. Les valeurs autorisées sont les mêmes que l'attribut global lang.
    -
    ping
    +
    ping
    Contient une liste d'URL séparées par des espaces vers lesquelles sont envoyées des requêtes POST avec le corps PING lorsque l'utilisateur suit le lien. Cet attribut est généralement utilisé pour tracer un utilisateur.
    -
    referrerpolicy {{experimental_inline}}
    +
    referrerpolicy {{experimental_inline}}
    La portion du referrer envoyer lors du suivi du lien. Voir Referrer-Policy pour les valeurs possibles et leurs effets.
    -
    rel
    +
    rel
    Cet attribut indique la relation entre la cible du lien et l'objet faisant le lien. La valeur est une liste de types de liens séparés par des espaces.
    -
    target
    +
    target
    Où afficher l'URL liée, comme nom d'un contexte de navigation (un onglet, une fenêtre ou un <iframe>). Les mots-clés suivants ont des significations spéciales pour l'endroit où charger l'URL :
    • _self : le contexte de navigation actuel. (Par défaut)
    • @@ -80,41 +77,37 @@ browser-compat: html.elements.a
    • _parent : le contexte de navigation parent de celui en cours. S'il n'y a pas de parent, il se comporte comme _self.
    • _top : le contexte de navigation le plus haut (le contexte "le plus haut" qui est un ancêtre du contexte actuel). S'il n'a aucun ancêtre, il se comporte comme _self.
    -
    -

    Note :

    -

    Définir target="_blank" sur les éléments <a> fournit implicitement le même comportement rel que définir rel="noopener" qui ne définit pas window.opener. Voir la compatibilité des navigateurs pour le support.

    +
    +

    Note :Définir target="_blank" sur les éléments <a> fournit implicitement le même comportement rel que définir rel="noopener" qui ne définit pas window.opener. Voir la compatibilité des navigateurs pour le support.

    -
    type
    +
    type
    Donne des indications sur le format de l'URL liée avec un Type MIME. Aucune fonctionnalité intégrée.

    Attributs obsolètes

    -
    charset {{Deprecated_Inline}}
    +
    charset {{Deprecated_Inline}}
    Fait allusion aux encodages des caractères de l'URL liée. -
    -

    Note :

    -

    Cet attribut est déprécié et ne doit pas être utilisé par les auteurs. Utilisez l'en-tête HTTP Content-Type sur l'URL liée.

    +
    +

    Note :Cet attribut est déprécié et ne doit pas être utilisé par les auteurs. Utilisez l'en-tête HTTP Content-Type sur l'URL liée.

    -
    coords {{Deprecated_Inline}}
    +
    coords {{Deprecated_Inline}}
    Utilisé avec l'attribut shape. Une liste de coordonnées séparées par des virgules.
    -
    name {{Deprecated_Inline}}
    +
    name {{Deprecated_Inline}}
    Était nécessaire pour définir un emplacement cible possible dans une page. En HTML 4.01, id et name pouvaient tous deux être utilisés sur <a>, pour autant qu'ils aient des valeurs identiques. -
    -

    Note :

    -

    Utilisez l'attribut universel id à la place.

    +
    +

    Note :Utilisez l'attribut universel id à la place.

    -
    rev {{Deprecated_Inline}}
    +
    rev {{Deprecated_Inline}}
    Spécifiait un lien inverse ; l'opposé de l'attribut rel. Déprécié pour avoir été très confus.
    -
    shape {{Deprecated_Inline}}
    +
    shape {{Deprecated_Inline}}
    La forme de la région de l'hyperlien dans une carte d'image. -
    -

    Note :

    -

    Utilisez plutôt l'élément <area> pour les cartes d'images.

    +
    +

    Note :Utilisez plutôt l'élément <area> pour les cartes d'images.

    @@ -178,7 +171,7 @@ browser-compat: html.elements.a

    HTML

    -
    <a href="https://www.mozilla.com">
    +
    <a href="https://www.mozilla.com">
       Mozilla
     </a>
    @@ -194,11 +187,7 @@ browser-compat: html.elements.a <a href="/fr/docs/Web/HTML">URL relative à l'origine</a> <a href="./p">URL relative au répertoire</a>
    - +

    Résultat

    @@ -214,9 +203,8 @@ browser-compat: html.elements.a <!-- Rubrique à relier --> <h2 id="section_further_down">Section plus bas</h2> -
    -

    Note :

    -

    Vous pouvez utiliser href="#top" ou le fragment vide (href="#") pour créer un lien vers le haut de la page actuelle, comme défini dans la spécification HTML.

    +
    +

    Note :Vous pouvez utiliser href="#top" ou le fragment vide (href="#") pour créer un lien vers le haut de la page actuelle, comme défini dans la spécification HTML.

    Créer un lien avec une adresse électronique

    diff --git a/files/fr/web/html/element/abbr/index.html b/files/fr/web/html/element/abbr/index.html index f92760de19..178a8835df 100644 --- a/files/fr/web/html/element/abbr/index.html +++ b/files/fr/web/html/element/abbr/index.html @@ -20,7 +20,7 @@ browser-compat: html.elements.abbr ---
    {{HTMLRef}}
    -

    L'élément HTML <abbr> (abréviation en français) représente une abréviation ou un acronyme ; l'attribut facultatif title peut fournir une explication ou une description de l'abréviation. S'il est présent, title doit contenir cette description complète et rien d'autre.

    +

    L'élément HTML <abbr> (abréviation en français) représente une abréviation ou un acronyme ; l'attribut facultatif title peut fournir une explication ou une description de l'abréviation. S'il est présent, title doit contenir cette description complète et rien d'autre.

    {{EmbedInteractiveExample("pages/tabbed/abbr.html", "tabbed-shorter")}}
    @@ -57,7 +57,7 @@ browser-compat: html.elements.abbr

    Cet élément n'a pas d'autres attributs que les attributs universels.

    -

    On notera que l'attribut title possède ici une sémantique spécifique et il représente la description complète de l'abréviation. Souvent, mais pas nécessairement, il s'affiche comme une info-bulle au survol de la souris.

    +

    On notera que l'attribut title possède ici une sémantique spécifique et il représente la description complète de l'abréviation. Souvent, mais pas nécessairement, il s'affiche comme une info-bulle au survol de la souris.

    Chaque élément <abbr> est indépendant, rattacher un titre à l'un ne l'associe pas aux abréviations identiques qui suivent.

    diff --git a/files/fr/web/html/element/acronym/index.html b/files/fr/web/html/element/acronym/index.html index 8909b7ba3e..68ac02fa39 100644 --- a/files/fr/web/html/element/acronym/index.html +++ b/files/fr/web/html/element/acronym/index.html @@ -13,16 +13,14 @@ browser-compat: html.elements.acronym ---
    {{HTMLRef}}
    -
    -

    Obsolète

    -

    Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la supporter, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications Web l'utilisant peuvent cesser de fonctionner à tout moment.

    +
    +

    Attention : Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la supporter, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications Web l'utilisant peuvent cesser de fonctionner à tout moment.

    -

    L'élément HTML <acronym>, pour les acronymes, permet aux auteurs de pages d'indiquer une suite de caractères composant un acronyme ou l'abréviation d'un mot.

    +

    L'élément HTML <acronym>, pour les acronymes, permet aux auteurs de pages d'indiquer une suite de caractères composant un acronyme ou l'abréviation d'un mot.

    -
    -

    Note :

    -

    Cet élément n'existe plus en HTML5 et ne devrait plus être utilisé. Les développeuses et développeurs web devraient utiliser l'élément <abbr> à la place.

    +
    +

    Note :Cet élément n'existe plus en HTML5 et ne devrait plus être utilisé. Les développeuses et développeurs web devraient utiliser l'élément <abbr> à la place.

    Attributs

    @@ -33,9 +31,8 @@ browser-compat: html.elements.acronym

    Cet élément implémente l'interface HTMLElement.

    -
    -

    Note :

    -

    Jusqu'à Gecko 1.9.2 (inclus), Firefox implémente l'interface HTMLSpanElement pour cet élément.

    +
    +

    Note :Jusqu'à Gecko 1.9.2 (inclus), Firefox implémente l'interface HTMLSpanElement pour cet élément.

    Exemple

    diff --git a/files/fr/web/html/element/address/index.html b/files/fr/web/html/element/address/index.html index e89c7c69f3..45ca70e4b9 100644 --- a/files/fr/web/html/element/address/index.html +++ b/files/fr/web/html/element/address/index.html @@ -20,7 +20,7 @@ browser-compat: html.elements.address ---
    {{HTMLRef}}
    -

    L'élément HTML <address> indique des informations de contact pour une personne, un groupe de personnes ou une organisation.

    +

    L'élément HTML <address> indique des informations de contact pour une personne, un groupe de personnes ou une organisation.

    {{EmbedInteractiveExample("pages/tabbed/address.html", "tabbed-standard")}}
    @@ -107,5 +107,5 @@ browser-compat: html.elements.address diff --git a/files/fr/web/html/element/applet/index.html b/files/fr/web/html/element/applet/index.html index 1a0fb83e01..fd69f43973 100644 --- a/files/fr/web/html/element/applet/index.html +++ b/files/fr/web/html/element/applet/index.html @@ -13,17 +13,15 @@ translation_of: Web/HTML/Element/applet ---
    {{HTMLRef}}
    -
    -

    Obsolète

    -

    Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la supporter, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications Web l'utilisant peuvent cesser de fonctionner à tout moment.

    +
    +

    Attention : Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la supporter, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications Web l'utilisant peuvent cesser de fonctionner à tout moment.

    -
    -

    Attention !

    -

    Cet élément a été retiré à partir de Gecko 56, de Chrome 47 et le retrait est à l'étude pour WebKit et Edge.

    +
    +

    Attention : Cet élément a été retiré à partir de Gecko 56, de Chrome 47 et le retrait est à l'étude pour WebKit et Edge.

    -

    L'élément <applet>, pour les applets, définit l'intégration d'un applet Java. Cet élément est désormais déprécié en faveur de <object>.

    +

    L'élément <applet>, pour les applets, définit l'intégration d'un applet Java. Cet élément est désormais déprécié en faveur de <object>.

    L'utilisation d'applets Java sur le Web est dépréciée, la plupart des navigateurs ne prennent plus en charge les plugins Java.

    @@ -57,35 +55,35 @@ translation_of: Web/HTML/Element/applet

    Cet élément peut utiliser les attributs universels.

    -
    align {{deprecated_inline}}
    +
    align {{deprecated_inline}}
    Cet attribut est utilisé pour positionner l'applet sur la page en fonction du contenu qui l'entoure. La spécification HTML 4.01 définit l'utilisation des valeurs bottom (en bas), left (à gauche), middle (au milieu), right (à droite), et top (en haut), tandis que Microsoft et Netscape supporteraient également les valeurs absbottom, absmiddle, baseline, center, et texttop.
    -
    alt {{deprecated_inline}}
    +
    alt {{deprecated_inline}}
    Cet attribut génère un texte alternatif à afficher pour les navigateurs ne supportant pas Java. Il est à noter que le contenu de l'élément <applet> peut être également restitué comme du texte alternatif dans certains cas.
    -
    archive {{deprecated_inline}}
    +
    archive {{deprecated_inline}}
    Cet attribut fait référence à une version archivée ou compressée de l'applet et des fichiers classes associés, ce qui peut aider à réduire le temps de téléchargement.
    -
    code {{deprecated_inline}}
    +
    code {{deprecated_inline}}
    Cet attribut définit l'URL du fichier classe de l'applet qui doit être chargé et exécuté. Les noms de fichiers pour les applets sont définis avec une extension en .class. L'URL définie par cet attribut peut être relative par rapport à l'attribut codebase.
    -
    codebase {{deprecated_inline}}
    +
    codebase {{deprecated_inline}}
    Cet attribut donne une URL absolue ou relative du répertoire où les fichiers classes de l'applet (déclarés dans l'attribut code) doivent être placés.
    -
    datafld {{deprecated_inline}}
    +
    datafld {{deprecated_inline}}
    Cet attribut, supporté par Internet Explorer à partir de sa version 4, définit le nom de colonne attribué aux objets de données fournis par les données attachées. Cet attribut peut être utilisé pour définir les différents éléments <param> envoyés à l'applet Java.
    -
    datasrc {{deprecated_inline}}
    +
    datasrc {{deprecated_inline}}
    Comme l'attribut datafld, cet attribut est utilisé pour les données attachées sous Internet Explorer 4. Il indique un identifiant pour l'objet définissant la source des données qui seront attachées aux éléments <param> associés à l'applet.
    -
    height {{deprecated_inline}}
    +
    height {{deprecated_inline}}
    Cet attribut définit la hauteur dont l'applet à besoin, en pixels.
    -
    hspace {{deprecated_inline}}
    +
    hspace {{deprecated_inline}}
    Cet attribut définit l'espace horizontal supplémentaire qui doit être réservé à côté de l'applet, en pixels.
    -
    mayscript {{deprecated_inline}}
    +
    mayscript {{deprecated_inline}}
    Cet attribut, concerné par l'implémentation effectuée dans Netscape, permet l'accès à l'applet par les scripts contenus dans le document.
    -
    name {{deprecated_inline}}
    +
    name {{deprecated_inline}}
    Cet attribut donne un nom à l'applet afin qu'elle soit possiblement identifiée par d'autres ressources, notamment les scripts.
    -
    object {{deprecated_inline}}
    +
    object {{deprecated_inline}}
    Cet attribut définit l'URL d'une représentation de l'applet.
    -
    src {{deprecated_inline}}
    +
    src {{deprecated_inline}}
    Dans Internet Explorer 4 et ses versions ultérieures, cet attribut définit une URL pour le fichier associé à l'applet. La signification de cet attribut n'est pas claire et ne fait pas partie du standard HTML.
    -
    vspace {{deprecated_inline}}
    +
    vspace {{deprecated_inline}}
    Cet attribut définit l'espace supplémentaire qui doit être réservé en haut et en bas de l'applet, en pixels.
    -
    width {{deprecated_inline}}
    +
    width {{deprecated_inline}}
    Cet attribut définit la largeur, en pixels, dont l'applet a besoin
    diff --git a/files/fr/web/html/element/area/index.html b/files/fr/web/html/element/area/index.html index d3e10ca3f6..2061200c14 100644 --- a/files/fr/web/html/element/area/index.html +++ b/files/fr/web/html/element/area/index.html @@ -15,7 +15,7 @@ browser-compat: html.elements.area ---
    {{HTMLRef}}
    -

    L'élément HTML <area> définit une zone particulière d'une image et peut lui associer un lien hypertexte. Cet élément n'est utilisé qu'au sein d'un élément <map>.

    +

    L'élément HTML <area> définit une zone particulière d'une image et peut lui associer un lien hypertexte. Cet élément n'est utilisé qu'au sein d'un élément <map>.

    {{EmbedInteractiveExample("pages/tabbed/area.html", "tabbed-taller")}}
    @@ -57,9 +57,9 @@ browser-compat: html.elements.area

    Cet élément inclut les attributs universels.

    -
    alt
    +
    alt
    Une chaîne de texte alternative à afficher sur les navigateurs qui n'affichent pas les images. Le texte doit être formulé de manière à offrir à l'utilisateur le même type de choix que l'image lorsqu'elle est affichée sans le texte alternatif. Cet attribut est requis uniquement si l'attribut href est utilisé.
    -
    coords
    +
    coords
    L'attribut coords détaille les coordonnées de l'attribut shape en taille, forme et placement d'un élément <area>.
    • rect : la valeur est x1,y1,x2,y2. La valeur spécifie les coordonnées du coin supérieur gauche et inférieur droit du rectangle. @@ -72,15 +72,15 @@ browser-compat: html.elements.area
    • default : définit la région entière.
    Les valeurs sont exprimées en nombre de pixels CSS.
    -
    download
    +
    download
    Cet attribut, s'il est présent, indique que l'auteur souhaite que l'hyperlien soit utilisé pour télécharger une ressource. Voir <a> pour une description complète de l'attribut download.
    -
    href
    +
    href
    Le lien hypertexte porté par la zone d'intérêt. Ce doit être une URL valide. Cet attribut peut être absent et dans ce cas, la zone d'intérêt ne représente pas de lien hypertexte.
    -
    hreflang
    +
    hreflang
    Cet attribut indique la langue du contenu vers lequel le lien renvoie. Les valeurs autorisées pour cet attribut sont définies par BCP47. Cet attribut doit uniquement être utilisé lorsque href est présent.
    -
    ping
    +
    ping
    Cet attribut contient une liste d'URL séparées par des espaces vers lesquelles sont envoyées des requêtes HTTP POST dont le corps vaut PING lors du clic sur le lien. Les requêtes sont envoyées en arrière-plan. Cet attribut est généralement utilisé à des fins de pistage.
    -
    referrerpolicy {{experimental_inline}}
    +
    referrerpolicy {{experimental_inline}}
    Une chaîne de caractères qui indique le référent (referrer) à utiliser lors de la récupération de la ressource :
    • « no-referrer » indique que l'en-tête Referer ne sera pas envoyé.
    • @@ -90,11 +90,11 @@ browser-compat: html.elements.area
    • « unsafe-url » indique que le référent envoyé inclura l'origine et le chemin (mais pas le fragment, le mot de passe ou le nom d'utilisateur). Ce cas n'est pas considéré comme sûr, car il peut laisser fuiter des origines et des chemins de ressources protégées par TLS vers des origines non-sécurisées.
    -
    rel
    +
    rel
    Pour les ancres contenant l'attribut href, cet attribut définit la relation entre l'objet ciblé et l'objet lié. La valeur est une liste des différentes relations dont les valeurs sont séparées par des espaces. Les valeurs et leurs significations peuvent être enregistrées par une autorité jugée utile par l'auteur du document. La valeur par défaut est la relation vide. Cet attribut doit uniquement être utilisé si l'attribut href est présent.
    -
    shape
    +
    shape
    La forme de la zone d'intérêt. Les spécifications HTML5 et HTML4 définissent les valeurs rect (zone rectangulaire), circle (zone circulaire), poly (zone polygonale) et default (indiquant toute la zone). Beacuoup de navigateurs, comme Internet Explorer 4 et ultérieur, supportent les valeurs circ, polygon et rectangle pour l'attribut shape, mais ces valeurs ne sont pas standard.
    -
    target
    +
    target
    Cet attribut dans quel contexte de navigation afficher la ressource liée. Les mots-clés peuvent avoir les significations suivantes :
    • _self (valeur par défaut) : Charge la réponse dans le contexte de navigation actuel.
    • @@ -104,9 +104,8 @@ browser-compat: html.elements.area

    Cet attribut doit uniquement être utilisé si l'attribut href est présent.

    -
    -

    Note :

    -

    La définition de target="_blank" sur les éléments <area> fournit implicitement le même comportement rel que la définition de rel="noopener" qui ne définit pas window.opener. Voir la compatibilité des navigateurs pour les informations sur son support.

    +
    +

    Note :La définition de target="_blank" sur les éléments <area> fournit implicitement le même comportement rel que la définition de rel="noopener" qui ne définit pas window.opener. Voir la compatibilité des navigateurs pour les informations sur son support.

    @@ -114,18 +113,17 @@ browser-compat: html.elements.area

    Attributs dépréciés ou obsolètes

    -
    name {{deprecated_inline}}
    +
    name {{deprecated_inline}}
    Définit un nom pour la zone sur laquelle on peut cliquer afin que cet élément puisse être interprété par les navigateurs plus anciens.
    -
    nohref {{deprecated_inline}}
    +
    nohref {{deprecated_inline}}
    Indique une absence d'hyperlien pour la zone d'intérêt. Cet attribut doit être présent si href ne l'est pas et vice versa. -
    -

    Note :

    -

    Cet attribut est obsolète en HTML5, ne pas utiliser l'attribut href suffit.

    +
    +

    Note :Cet attribut est obsolète en HTML5, ne pas utiliser l'attribut href suffit.

    -
    tabindex {{deprecated_inline}}
    +
    tabindex {{deprecated_inline}}
    Une valeur numérique définissant l'ordre de la zone d'intérêt parmi les différentes étiquettes. Cet attribut est un attribut universel avec HTML5.
    -
    type {{deprecated_inline}}
    +
    type {{deprecated_inline}}
    Sans effet car ignoré par les navigateurs.
    diff --git a/files/fr/web/html/element/article/index.html b/files/fr/web/html/element/article/index.html index 9ac036eac1..ebc68dab68 100644 --- a/files/fr/web/html/element/article/index.html +++ b/files/fr/web/html/element/article/index.html @@ -12,7 +12,7 @@ browser-compat: html.elements.article ---
    {{HTMLRef}}
    -

    L'élément <article> représente une composition autonome dans un document, une page, une application ou un site, destinée à être distribuée ou réutilisée de manière indépendante (par exemple, dans le cadre d'une syndication). Exemples : un message de forum, un article de magazine ou de journal, ou un article de blog, une fiche produit, un commentaire soumis par un utilisateur, un widget ou gadget interactif, ou tout autre élément de contenu indépendant.

    +

    L'élément <article> représente une composition autonome dans un document, une page, une application ou un site, destinée à être distribuée ou réutilisée de manière indépendante (par exemple, dans le cadre d'une syndication). Exemples : un message de forum, un article de magazine ou de journal, ou un article de blog, une fiche produit, un commentaire soumis par un utilisateur, un widget ou gadget interactif, ou tout autre élément de contenu indépendant.

    {{EmbedInteractiveExample("pages/tabbed/article.html", "tabbed-standard")}}
    diff --git a/files/fr/web/html/element/aside/index.html b/files/fr/web/html/element/aside/index.html index 6917f99223..07961c0af4 100644 --- a/files/fr/web/html/element/aside/index.html +++ b/files/fr/web/html/element/aside/index.html @@ -16,7 +16,7 @@ browser-compat: html.elements.aside ---
    {{HTMLRef}}
    -

    L'élément <aside> (en français, « aparté ») représente une partie d'un document dont le contenu n'a qu'un rapport indirect avec le contenu principal du document. Les apartés sont fréquemment présents sous la forme d'encadrés ou de boîtes de légende.

    +

    L'élément <aside> (en français, « aparté ») représente une partie d'un document dont le contenu n'a qu'un rapport indirect avec le contenu principal du document. Les apartés sont fréquemment présents sous la forme d'encadrés ou de boîtes de légende.

    {{EmbedInteractiveExample("pages/tabbed/aside.html", "tabbed-standard")}}
    diff --git a/files/fr/web/html/element/audio/index.html b/files/fr/web/html/element/audio/index.html index 17d0fba0fd..98e125bcc3 100644 --- a/files/fr/web/html/element/audio/index.html +++ b/files/fr/web/html/element/audio/index.html @@ -20,7 +20,7 @@ browser-compat: html.elements.audio ---
    {{HTMLRef}}
    -

    L'élément HTML <audio> est utilisé afin d'intégrer un contenu sonore dans un document. Il peut contenir une ou plusieurs sources audio représentées avec l'attribut src ou l'élément <source> : le navigateur choisira celle qui convient le mieux. Il peut également être la destination de médias diffusés en continu, en utilisant un MediaStream.

    +

    L'élément HTML <audio> est utilisé afin d'intégrer un contenu sonore dans un document. Il peut contenir une ou plusieurs sources audio représentées avec l'attribut src ou l'élément <source> : le navigateur choisira celle qui convient le mieux. Il peut également être la destination de médias diffusés en continu, en utilisant un MediaStream.

    {{EmbedInteractiveExample("pages/tabbed/audio.html","tabbed-standard")}}
    @@ -33,17 +33,16 @@ browser-compat: html.elements.audio

    Cet élément inclut les attributs universels.

    -
    autoplay
    +
    autoplay
    Un attribut booléen : s'il est spécifié, l'audio commencera automatiquement la lecture dès qu'il pourra le faire, sans attendre la fin du téléchargement de l'ensemble du fichier audio. -
    -

    Note :

    -

    Les sites qui diffusent automatiquement de l'audio (ou des vidéos avec une piste audio) peuvent s'avérer désagréables pour les utilisateurs et doivent donc être évités dans la mesure du possible. Si vous devez offrir une fonctionnalité de lecture automatique, vous devez la soumettre au choix de l'utilisateur. Cependant, cela peut être utile lors de la création d'éléments médias dont la source sera définie ultérieurement, sous le contrôle de l'utilisateur. Consultez notre guide sur la lecture automatique pour obtenir des informations supplémentaires sur la manière d'utiliser correctement la fonction autoplay.

    +
    +

    Note :Les sites qui diffusent automatiquement de l'audio (ou des vidéos avec une piste audio) peuvent s'avérer désagréables pour les utilisateurs et doivent donc être évités dans la mesure du possible. Si vous devez offrir une fonctionnalité de lecture automatique, vous devez la soumettre au choix de l'utilisateur. Cependant, cela peut être utile lors de la création d'éléments médias dont la source sera définie ultérieurement, sous le contrôle de l'utilisateur. Consultez notre guide sur la lecture automatique pour obtenir des informations supplémentaires sur la manière d'utiliser correctement la fonction autoplay.

    -
    controls
    +
    controls
    Si l'attribut est présent, le navigateur affichera des contrôles pour que l'utilisateur puisse gérer la lecture, le volume, et le déplacement du curseur de lecture.
    -
    crossorigin
    +
    crossorigin
    Cet attribut à valeur contrainte indique comment le CORS doit être utilisé afin de récupérer la ressource. Les ressources utilisant le CORS peuvent être réutilisées dans un élément <canvas> sans corrompre celui-ci. Les valeurs autorisées pour cet attribut sont :
    anonymous
    @@ -52,18 +51,17 @@ browser-compat: html.elements.audio
    Une requête multi-origine est envoyée avec une information d'authentification (c'est-à-dire avec un en-tête HTTP Origin: qui contient un cookie, un certificat ou effectuant une authentification HTTP).
    Lorsque cet attribut n'est pas présent, la ressource est récupérée sans requête CORS et empêche ainsi d'utiliser la ressource dans un <canvas>. Si la valeur fournie est invalide, elle sera considérée comme anonymous. Voir Paramétrage des attributs relatifs au CORS pour plus d'informations.
    -
    disableRemotePlayback {{experimental_inline}}
    +
    disableRemotePlayback {{experimental_inline}}
    Un attribut booléen utilisé pour désactiver la capacité de lecture à distance dans les appareils qui sont connectés à l'aide de câbles (HDMI, DVI, etc.) et sans fil (Miracast, Chromecast, DLNA, AirPlay, etc.). Voir cette proposition de spécification pour plus d'informations. -
    -

    Note :

    -

    Dans Safari, vous pouvez utiliser x-webkit-airplay="deny" comme solution de repli.

    +
    +

    Note :Dans Safari, vous pouvez utiliser x-webkit-airplay="deny" comme solution de repli.

    -
    loop
    +
    loop
    Un attribut booléen. S'il est renseigné, la lecture du fichier se fera en boucle.
    -
    muted
    +
    muted
    Un attribut booléen, indiquant si le son de l'élément audio est initialement coupé. Sa valeur par défaut est false.
    -
    preload
    +
    preload
    Cet attribut indique au navigateur ce que l'auteur du code html pense de l'utilisation optimale de cet élément. Il accepte uniquement les valeurs suivantes :
      @@ -75,15 +73,15 @@ browser-compat: html.elements.audio

      La valeur par défaut peut varier d'un navigateur à l'autre. Les spécifications recommandent la valeur metadata.

      -
      -

      Note :

      +
      +

      Note :

      • L'attribut autoplay a la priorité sur preload. Si autoplay est spécifié, le navigateur devrait évidemment commencer à télécharger l'audio pour le lire.
      • La spécification n'oblige pas le navigateur à suivre la valeur de cet attribut ; il s'agit d'une simple indication.
    -
    src
    +
    src
    L'URL du fichier audio à intégrer. Cet élément est soumis aux contrôles d'accès HTTP. Cet attribut est facultatif ; vous pouvez utiliser l'élément <source> dans le bloc audio pour spécifier l'audio à intégrer.
    @@ -230,9 +228,8 @@ browser-compat: html.elements.audio
    Un écouteur addtrack peut être ajouté à cet objet TextTrackList afin d'alerter lorsque de nouvelles pistes de texte sont ajoutées à l'élément.
    -
    -

    Note :

    -

    Bien qu'on parle ici d'un élément <audio>, il est possible qu'un tel élément possède des pistes vidéo et des pistes texte bien que la cohérence des interfaces puisse être mise à mal.

    +
    +

    Note :Bien qu'on parle ici d'un élément <audio>, il est possible qu'un tel élément possède des pistes vidéo et des pistes texte bien que la cohérence des interfaces puisse être mise à mal.

    Ainsi, on pourra utiliser un fragment de code analogue à celui qui suit pour détecter si de nouvelles pistes sont ajoutées ou supprimées d'un élément <audio> :

    diff --git a/files/fr/web/html/element/b/index.html b/files/fr/web/html/element/b/index.html index 41415effc5..22ae6d5ce3 100644 --- a/files/fr/web/html/element/b/index.html +++ b/files/fr/web/html/element/b/index.html @@ -16,7 +16,7 @@ browser-compat: html.elements.b ---
    {{HTMLRef}}
    -

    L'élément HTML <b> permet d'attirer l'attention du lecteur sur un contenu qui n'a pas, pour autant, d'importance significative. Anciennement utilisé pour mettre le texte en gras. Cet élément ne doit pas être utilisé pour mettre en forme des éléments, c'est la propriété CSS font-weight qu'il faut utiliser. Si l'élément est d'une importance particulière, on utilisera l'élément HTML <strong>.

    +

    L'élément HTML <b> permet d'attirer l'attention du lecteur sur un contenu qui n'a pas, pour autant, d'importance significative. Anciennement utilisé pour mettre le texte en gras. Cet élément ne doit pas être utilisé pour mettre en forme des éléments, c'est la propriété CSS font-weight qu'il faut utiliser. Si l'élément est d'une importance particulière, on utilisera l'élément HTML <strong>.

    {{EmbedInteractiveExample("pages/tabbed/b.html", "tabbed-shorter")}}
    diff --git a/files/fr/web/html/element/base/index.html b/files/fr/web/html/element/base/index.html index 151e595f3e..9a88ff2286 100644 --- a/files/fr/web/html/element/base/index.html +++ b/files/fr/web/html/element/base/index.html @@ -12,7 +12,7 @@ browser-compat: html.elements.base ---
    {{HTMLRef}}
    -

    L'élément <base> définit l'URL de base à utiliser pour recomposer toutes les URL relatives contenues dans un document. Il ne peut y avoir qu'un seul élément <base> au sein d'un document.

    +

    L'élément <base> définit l'URL de base à utiliser pour recomposer toutes les URL relatives contenues dans un document. Il ne peut y avoir qu'un seul élément <base> au sein d'un document.

    Il est possible d'accéder à l'URL de base d'un document via un script en utilisant Node.baseURI. Si le document ne possède pas d'élément <base>; la base par défaut pour la composition des URL sera l'URL courante.

    @@ -53,18 +53,17 @@ browser-compat: html.elements.base

    Les attributs universels peuvent être utilisés sur cet élément.

    -
    -

    Attention

    -

    Si l'un des attributs suivants est spécifié, cet élément doit venir avant d'autres éléments dont les valeurs d'attribut sont des URL, comme l'attribut href de <link>.

    +
    +

    Attention : Si l'un des attributs suivants est spécifié, cet élément doit venir avant d'autres éléments dont les valeurs d'attribut sont des URL, comme l'attribut href de <link>.

    -
    href
    +
    href
    L'URL de base à utiliser afin de recomposer les URL relatives contenues dans le document. Si cet attribut est défini, cet élément doit être présent avant les éléments dont les attributs sont des URL.
    Les URI absolues et relatives sont autorisées (voir la note ci-après).
    -
    target
    -
    Un mot-clé ou un nom défini par l'auteur du contexte de navigation par défaut pour afficher les résultats de la navigation à partir des éléments <a>, <area> ou <form> sans attributs target explicites.
    -
    Les mots-clés suivants ont des significations particulières : +
    target
    +

    Un mot-clé ou un nom défini par l'auteur du contexte de navigation par défaut pour afficher les résultats de la navigation à partir des éléments <a>, <area> ou <form> sans attributs target explicites.

    +

    Les mots-clés suivants ont des significations particulières :

    • _self : Charge le résultat dans le contexte de navigation courant. C'est la valeur par défaut de l'attribut s'il n'est pas utilisé.
    • _blank : Charge le résultat dans un nouveau contexte de navigation.
    • diff --git a/files/fr/web/html/element/basefont/index.html b/files/fr/web/html/element/basefont/index.html index adab60dbcf..85422a4f89 100644 --- a/files/fr/web/html/element/basefont/index.html +++ b/files/fr/web/html/element/basefont/index.html @@ -16,12 +16,11 @@ browser-compat: html.elements.basefont ---
      {{HTMLRef}}
      -
      -

      Obsolète

      -

      Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la supporter, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications Web l'utilisant peuvent cesser de fonctionner à tout moment.

      +
      +

      Attention : Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la supporter, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications Web l'utilisant peuvent cesser de fonctionner à tout moment.

      -

      L'élément HTML <basefont> définit la police par défaut (taille, fonte, couleur) pour les éléments qui sont des descendants de cet élément. La taille de la police utilisée peut ensuite varier relativement à cette taille de base grâce à l'élément <font>.

      +

      L'élément HTML <basefont> définit la police par défaut (taille, fonte, couleur) pour les éléments qui sont des descendants de cet élément. La taille de la police utilisée peut ensuite varier relativement à cette taille de base grâce à l'élément <font>.

      N'utilisez pas cet élément, mais plutôt les propriétés CSS telles que font, font-family, font-size et color pour modifier la configuration de la police d'un élément et de son contenu.

      @@ -30,11 +29,11 @@ browser-compat: html.elements.basefont

      Comme tous les autres éléments HTML, cet élément prend en charge les attributs universels.

      -
      color
      +
      color
      Cet attribut définit la couleur du texte grâce à une couleur nommée ou à une couleur définie dans un format hexadécimal #RRGGBB.
      -
      face
      +
      face
      Cet attribut contient une liste d'un ou plusieurs noms de police. Le texte du document, dans son style par défaut, est rendu avec la première police prise en charge par le navigateur du client. Si aucune police listée ne se trouve sur le système local, le navigateur utilise la police proportionnelle ou à largeur fixe du système.
      -
      size
      +
      size
      Cet attribut définit la taille de la police avec une valeur numérique ou relative. Les valeurs numériques vont de 1 à 7 ; 1 étant la plus petite et 3 la taille par défaut.
      diff --git a/files/fr/web/html/element/bdi/index.html b/files/fr/web/html/element/bdi/index.html index 858ece9f1f..4fa34fd952 100644 --- a/files/fr/web/html/element/bdi/index.html +++ b/files/fr/web/html/element/bdi/index.html @@ -26,7 +26,7 @@ browser-compat: html.elements.bdi ---
      {{HTMLRef}}
      -

      L'élément <bdi> (ou élément d'isolation de texte bidirectionnel) isole une portée (span) de texte pouvant être formatée dans une direction différente de celle du texte qui l'entoure. Cela permet, par exemple, de présenter correctement une citation en arabe (écrit de droite à gauche) au sein d'un texte écrit en français (écrit de gauche à droite).

      +

      L'élément <bdi> (ou élément d'isolation de texte bidirectionnel) isole une portée (span) de texte pouvant être formatée dans une direction différente de celle du texte qui l'entoure. Cela permet, par exemple, de présenter correctement une citation en arabe (écrit de droite à gauche) au sein d'un texte écrit en français (écrit de gauche à droite).

      {{EmbedInteractiveExample("pages/tabbed/bdi.html", "tabbed-standard")}}
      @@ -94,71 +94,66 @@ browser-compat: html.elements.bdi

      Exemples

      -

      Texte de gauche à droite uniquement, sans <bdi>

      +

      Gauche à droite sans bdi

      Cet exemple affiche les gagnants d'une compétition grâce à des éléments <span>. Ici, les noms ne s'écrivent que de gauche à droite et le résultat s'affiche correctement :

      -
      <ul>
         <li><span class="name">Henrietta Boffin</span> - 1<sup>re</sup> place</li>
         <li><span class="name">Jerry Cruncher</span> - 2<sup>e</sup> place</li>
       </ul>
      - -
      -
      {{EmbedLiveSample("bdi-sample-1", "100%", 150)}}
      + +

      {{EmbedLiveSample("Gauche_à_droite_sans_bdi", "100%", 150)}}

      Texte sans <bdi> avec deux directionnalités

      Cela fonctionne sans problème tant que les noms s'écrivent de gauche à droite. Lorsqu'on insère un nom écrit de droite à gauche, la partie « - 1 » sera captée par le texte en RTL et le résultat sera confus :

      -
      +

      Exemple sans bidi

      <ul>
         <li><span class="name">اَلأَعْشَى</span> - 1<sup>re</sup> place</li>
         <li><span class="name">Jerry Cruncher</span> - 2<sup>e</sup> place</li>
       </ul>
      - -
      -
      {{EmbedLiveSample("bdi-sample-2", "100%", 150)}}
      + +

      {{EmbedLiveSample("Exemple_sans_bidi", "100%", 150)}}

      Texte avec <bdi> et deux directionnalités

      Pour éviter cet écueil, on pourra utiliser <bdi> pour séparer le contenu :

      -
      +

      Exemple avec bidi

      +
      <ul>
         <li><bdi class="name">اَلأَعْشَى</bdi> - 1<sup>re</sup> place</li>
         <li><bdi class="name">Jerry Cruncher</bdi> - 2<sup>e</sup> place</li>
       </ul>
      - -
      -
      {{EmbedLiveSample("bdi-sample-3", "100%", 150)}}
      + +

      {{EmbedLiveSample("Exemple_avec_bidi", "100%", 150)}}

      Spécifications

      diff --git a/files/fr/web/html/element/bdo/index.html b/files/fr/web/html/element/bdo/index.html index 4ba543103c..67b99e390c 100644 --- a/files/fr/web/html/element/bdo/index.html +++ b/files/fr/web/html/element/bdo/index.html @@ -24,7 +24,7 @@ browser-compat: html.elements.bdo ---
      {{HTMLRef}}
      -

      L'élément HTML <bdo> (pour élément de remplacement du texte bidirectionnel) est utilisé afin d'outrepasser la direction du texte. Cela permet d'imposer une direction donnée à un texte. L'orientation du texte est inversée mais pas celle des caractères.

      +

      L'élément HTML <bdo> (pour élément de remplacement du texte bidirectionnel) est utilisé afin d'outrepasser la direction du texte. Cela permet d'imposer une direction donnée à un texte. L'orientation du texte est inversée mais pas celle des caractères.

      {{EmbedInteractiveExample("pages/tabbed/bdo.html", "tabbed-standard")}}
      @@ -68,7 +68,7 @@ browser-compat: html.elements.bdo

      Comme pour tous les éléments, on peut appliquer les attributs universels.

      -
      dir
      +
      dir
      La direction du texte au sein de l'élément. Cet attribut peut valoir :
      • ltr : pour un texte allant de gauche à droite (left-to-right).
      • diff --git a/files/fr/web/html/element/bgsound/index.html b/files/fr/web/html/element/bgsound/index.html index be61ed23e8..0839e6268b 100644 --- a/files/fr/web/html/element/bgsound/index.html +++ b/files/fr/web/html/element/bgsound/index.html @@ -16,28 +16,26 @@ browser-compat: html.elements.bgsound ---
        {{HTMLRef}}
        -
        -

        Obsolète

        -

        Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la supporter, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications Web l'utilisant peuvent cesser de fonctionner à tout moment.

        +
        +

        Attention : Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la supporter, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications Web l'utilisant peuvent cesser de fonctionner à tout moment.

        -

        L'élément HTML <bgsound> (pour background sound ou « son d'arrière-plan ») est un élément défini par Internet Explorer qui permet d'associer un son d'ambiance à une page.

        +

        L'élément HTML <bgsound> (pour background sound ou « son d'arrière-plan ») est un élément défini par Internet Explorer qui permet d'associer un son d'ambiance à une page.

        -
        -

        Attention :

        -

        Cet élément n'est pas standard et ne doit pas être utilisé ! Pour intégrer du son à une page web, on utilisera l'élément <audio>.

        +
        +

        Attention : Cet élément n'est pas standard et ne doit pas être utilisé ! Pour intégrer du son à une page web, on utilisera l'élément <audio>.

        Attributs

        -
        balance
        +
        balance
        Cet attribut accepte un nombre entre -10 000 et +10 000, qui déterminera comment le volume sera réparti entre les hauts-parleurs (ou les écouteurs).
        -
        loop
        +
        loop
        Cet attribut indique le nombre de fois que le son doit être joué, grâce à une valeur numérique ou avec le mot-clé infinite (infini).
        -
        src
        +
        src
        Cet attribut indique l'URL du fichier sonore qui doit être joué. Il doit être d'un des types suivants : .wav, .au, ou .mid.
        -
        volume
        +
        volume
        Cet attribut accepte un nombre entre -10 000 et 0 qui déterminera le volume du son.
        diff --git a/files/fr/web/html/element/big/index.html b/files/fr/web/html/element/big/index.html index 9ce6c4aa2c..a4309d4738 100644 --- a/files/fr/web/html/element/big/index.html +++ b/files/fr/web/html/element/big/index.html @@ -12,16 +12,14 @@ browser-compat: html.elements.big ---
        {{HTMLRef}}
        -
        -

        Obsolète

        -

        Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la supporter, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications Web l'utilisant peuvent cesser de fonctionner à tout moment.

        +
        +

        Attention : Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la supporter, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications Web l'utilisant peuvent cesser de fonctionner à tout moment.

        -

        L'élément HTML <big> (gros) augmente d'une taille la police du texte de l'élément (il permet par exemple de passer de small à medium, ou de large à x-large) jusqu'à atteindre la taille maximale autorisée par le navigateur.

        +

        L'élément HTML <big> (gros) augmente d'une taille la police du texte de l'élément (il permet par exemple de passer de small à medium, ou de large à x-large) jusqu'à atteindre la taille maximale autorisée par le navigateur.

        -
        -

        Note d'utilisation :

        -

        Cet élément est purement stylistique. Il a été supprimé en HTML5 et ne doit plus être utilisé. Les développeurs web doivent utiliser les propriétés CSS pour remplacer cet élément.

        +
        +

        Note : Cet élément est purement stylistique. Il a été supprimé en HTML5 et ne doit plus être utilisé. Les développeurs web doivent utiliser les propriétés CSS pour remplacer cet élément.

        Attributs

        @@ -32,9 +30,8 @@ browser-compat: html.elements.big

        Nous voyons ici des exemples montrant l'utilisation de <big> suivis d'un exemple montrant comment obtenir les mêmes résultats en utilisant plutôt la syntaxe CSS moderne.

        -

        Utilisation de <big>

        +

        Utilisation de <big>

        -

        Dans cet exemple, on utilise l'élément obsolète <big> afin d'augmenter la taille du texte.

        HTML

        @@ -43,10 +40,10 @@ browser-compat: html.elements.big C'est la première phrase. <big>Cette phrase entière phrase est en plus gros caractères.</big> </p> -
        +

        Résultat

        -

        {{EmbedLiveSample("using_big", "", 110)}}

        +

        {{EmbedLiveSample("Utilisation_de_big", "", 110)}}

        Utilisation de la propriété CSS font-size

        @@ -74,8 +71,7 @@ browser-compat: html.elements.big

        Cet élément implémente l'interface HTMLElement.

        -

        Note d'implémentation :

        -

        Jusqu'à Gecko 1.9.2 inclus, Firefox implémentait l'interface HTMLSpanElement pour cet élément.

        +

        Note : Jusqu'à Gecko 1.9.2 inclus, Firefox implémentait l'interface HTMLSpanElement pour cet élément.

        Spécifications

        diff --git a/files/fr/web/html/element/blink/index.html b/files/fr/web/html/element/blink/index.html index dcd82c1270..870656bac2 100644 --- a/files/fr/web/html/element/blink/index.html +++ b/files/fr/web/html/element/blink/index.html @@ -13,16 +13,14 @@ browser-compat: html.elements.blink ---
        {{HTMLRef}}
        -
        -

        Obsolète

        -

        Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la supporter, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications Web l'utilisant peuvent cesser de fonctionner à tout moment.

        +
        +

        Attention : Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la supporter, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications Web l'utilisant peuvent cesser de fonctionner à tout moment.

        -

        L'élément HTML <blink> (N.D.T le verbe blink signifie « clignoter ») est un élément non-standard faisant clignoter le texte qu'il contient.

        +

        L'élément HTML <blink> (N.D.T le verbe blink signifie « clignoter ») est un élément non-standard faisant clignoter le texte qu'il contient.

        -
        -

        Attention :

        -

        Ne pas utiliser cet élément qui n'est pas standard et qui est obsolète. Le clignotement de texte est contraire à la plupart des standards d'accessibilité, la spécification CSS permet donc aux navigateurs d'ignorer la valeur blink.

        +
        +

        Attention : Ne pas utiliser cet élément qui n'est pas standard et qui est obsolète. Le clignotement de texte est contraire à la plupart des standards d'accessibilité, la spécification CSS permet donc aux navigateurs d'ignorer la valeur blink.

        Interface DOM

        diff --git a/files/fr/web/html/element/blockquote/index.html b/files/fr/web/html/element/blockquote/index.html index 517632a938..e86f94caa2 100644 --- a/files/fr/web/html/element/blockquote/index.html +++ b/files/fr/web/html/element/blockquote/index.html @@ -17,7 +17,7 @@ browser-compat: html.elements.blockquote ---
        {{HTMLRef}}
        -

        L'élément HTML <blockquote> (qui signifie bloc de citation) indique que le texte contenu dans l'élément est une citation longue. Le texte est généralement affiché avec une indentation (voir les notes ci-après). Une URL indiquant la source de la citation peut être donnée grâce à l'attribut cite tandis qu'un texte représentant la source peut être donné via l'élément <cite>.

        +

        L'élément HTML <blockquote> (qui signifie bloc de citation) indique que le texte contenu dans l'élément est une citation longue. Le texte est généralement affiché avec une indentation (voir les notes ci-après). Une URL indiquant la source de la citation peut être donnée grâce à l'attribut cite tandis qu'un texte représentant la source peut être donné via l'élément <cite>.

        {{EmbedInteractiveExample("pages/tabbed/blockquote.html","tabbed-standard")}}
        @@ -59,7 +59,7 @@ browser-compat: html.elements.blockquote

        Comme pour tous les éléments HTML, on peut utiliser les attributs universels.

        -
        cite
        +
        cite
        Une URL qui désigne la source du document ou du message cité. Cet attribut est prévu pour signaler l'information expliquant le contexte ou la référence de la citation
        @@ -71,7 +71,7 @@ browser-compat: html.elements.blockquote

        Exemple

        -

        Cet exemple démontre l'utilisation de l'élément <blockquote> pour citer un passage de RFC 1149, A Standard for the Transmission of IP Datagrams on Avian Carriers.

        +

        Cet exemple démontre l'utilisation de l'élément <blockquote> pour citer un passage de RFC 1149 A Standard for the Transmission of IP Datagrams on Avian Carriers.

        <blockquote cite="https://datatracker.ietf.org/doc/html/rfc1149">
           <p>Avian carriers can provide high delay, low
        diff --git a/files/fr/web/html/element/body/index.html b/files/fr/web/html/element/body/index.html
        index 79a181ecd4..2a6b8139d5 100644
        --- a/files/fr/web/html/element/body/index.html
        +++ b/files/fr/web/html/element/body/index.html
        @@ -13,7 +13,7 @@ browser-compat: html.elements.body
         ---
         
        {{HTMLRef}}
        -

        L'élément HTML <body> représente le contenu principal du document HTML. Il ne peut y avoir qu'un élément <body> par document.

        +

        L'élément HTML <body> représente le contenu principal du document HTML. Il ne peut y avoir qu'un élément <body> par document.

        @@ -58,61 +58,61 @@ browser-compat: html.elements.body

        Comme pour tous les autres éléments, on peut utiliser les attributs universels.

        -
        alink {{deprecated_inline}}
        +
        alink {{deprecated_inline}}
        La couleur du texte quand les liens hypertextes sont sélectionnés. Cette méthode n'est pas conforme, on devra utiliser la propriété CSS color à la place avec la pseudo-classe :active.
        -
        background {{deprecated_inline}}
        +
        background {{deprecated_inline}}
        L'URI d'une image à utiliser en tant qu'arrière-plan. Cette méthode n'est pas conforme, on devra utiliser la propriété CSS background à la place.
        -
        bgcolor {{deprecated_inline}}
        +
        bgcolor {{deprecated_inline}}
        Couleur d'arrière-plan pour le document. Cette méthode n'est pas conforme, on devra utiliser la propriété CSS background-color sur l'élément à la place.
        -
        bottommargin {{deprecated_inline}}
        +
        bottommargin {{deprecated_inline}}
        La marge à appliquer en bas du corps de la page. Cette méthode n'est pas conforme, on devra utiliser la propriété CSS margin-bottom sur l'élément.
        -
        leftmargin {{deprecated_inline}}
        +
        leftmargin {{deprecated_inline}}
        La marge à appliquer à gauche du corps de la page. Cette méthode n'est pas conforme, on devra utiliser la propriété CSS margin-left à la place.
        -
        link {{deprecated_inline}}
        +
        link {{deprecated_inline}}
        La couleur du texte à utiliser pour les liens non visités. Cette méthode n'est pas conforme, on devra utiliser la propriété CSS color avec la pseudo-classe :link.
        -
        onafterprint
        +
        onafterprint
        Fonction à appeler après que l'utilisateur ait imprimé le document.
        -
        onbeforeprint
        +
        onbeforeprint
        Fonction à appeler lorsque l'utilisateur lance une impression du document.
        -
        onbeforeunload
        +
        onbeforeunload
        Fonction à appeler avant que le document ne disparaisse.
        -
        onblur
        +
        onblur
        Fonction à appeler quand le document perd le focus.
        -
        onerror
        +
        onerror
        Fonction à appeler quand le document n'arrive pas à se charger correctement.
        -
        onfocus
        +
        onfocus
        Fonction à appeler quand le document reçoit le focus.
        -
        onhashchange
        +
        onhashchange
        Fonction à appeler quand le fragment (la partie commençant avec le caractère #) de l'adresse actuelle du document, a changé.
        -
        onlanguagechange {{experimental_inline}}
        +
        onlanguagechange {{experimental_inline}}
        Fonction à appeler lorsque les langues préférées ont été modifiées.
        -
        onload
        +
        onload
        Fonction à appeler quand le document a fini de charger.
        -
        onmessage
        +
        onmessage
        Fonction à appeler quand le document a reçu un message.
        -
        onoffline
        +
        onoffline
        Fonction à appeler quand la connexion réseau est perdue.
        -
        ononline
        +
        ononline
        Fonction à appeler quand la connexion réseau est restaurée.
        -
        onpopstate
        +
        onpopstate
        Fonction à appeler quand l'utilisateur se déplace dans son historique de session.
        -
        onredo
        +
        onredo
        Fonction à appeler quand l'utilisateur avance et refait un élément de l'historique de transaction.
        -
        onresize
        +
        onresize
        Fonction à appeler quand le document a été redimensionné.
        -
        onstorage
        +
        onstorage
        Fonction à appeler quand la zone de stockage a changée.
        -
        onundo
        +
        onundo
        Fonction à appeler quand l'utilisateur recule et défait l'historique de transaction.
        -
        onunload
        +
        onunload
        Fonction à appeler quand le document disparait.
        -
        rightmargin {{deprecated_inline}}
        +
        rightmargin {{deprecated_inline}}
        La marge à appliquer à droite du corps de la page. Cette méthode n'est pas conforme, on devra utiliser la propriété CSS margin-right sur l'élément à la place.
        -
        text {{deprecated_inline}}
        +
        text {{deprecated_inline}}
        La couleur à utiliser pour la police du texte. Cette méthode n'est pas conforme, on devra utiliser la propriété CSS color sur l'élément à la place.
        -
        topmargin {{deprecated_inline}}
        +
        topmargin {{deprecated_inline}}
        La marge à appliquer en haut du corps de la page. Cette méthohde n'est pas conforme, on devra utiliser la propriété CSS margin-top sur l'élément à la place.
        -
        vlink {{deprecated_inline}}
        +
        vlink {{deprecated_inline}}
        La couleur de texte pour les liens hypertextes visités. Cette méthode n'est pas conforme, on devra utiliser la propriété CSS color avec la pseudo-classe :visited.
        diff --git a/files/fr/web/html/element/br/index.html b/files/fr/web/html/element/br/index.html index 9ee2f16922..0c5b97e35d 100644 --- a/files/fr/web/html/element/br/index.html +++ b/files/fr/web/html/element/br/index.html @@ -12,15 +12,14 @@ browser-compat: html.elements.br ---
        {{HTMLRef}}
        -

        L'élément HTML <br> crée un saut de ligne (un retour chariot) dans le texte. Il s'avère utile lorsque les sauts de ligne ont une importance (par exemple lorsqu'on écrit une adresse ou un poème).

        +

        L'élément HTML <br> crée un saut de ligne (un retour chariot) dans le texte. Il s'avère utile lorsque les sauts de ligne ont une importance (par exemple lorsqu'on écrit une adresse ou un poème).

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

        Comme vous pouvez le voir dans l'exemple ci-dessus, un élément <br> est inclus à chaque point où nous voulons que le texte soit interrompu. Le texte après le <br> recommence au début de la ligne suivante du bloc de texte.

        -
        -

        Note :

        -

        Attention, <br> ne doit pas être utilisé de façon abusive afin d'augmenter l'espace entre les lignes d'un texte. Pour cela, on utilisera la propriété CSS margin sur l'élément HTML <p>.

        +
        +

        Note :Attention, <br> ne doit pas être utilisé de façon abusive afin d'augmenter l'espace entre les lignes d'un texte. Pour cela, on utilisera la propriété CSS margin sur l'élément HTML <p>.

        Attributs

        @@ -30,7 +29,7 @@ browser-compat: html.elements.br

        Attributs obsolètes

        -
        clear {{deprecated_inline}}
        +
        clear {{deprecated_inline}}
        Cet attribut indique où commencer la prochaine ligne après le saut de ligne.
        diff --git a/files/fr/web/html/element/button/index.html b/files/fr/web/html/element/button/index.html index 93bffb8e99..d99f03d0b7 100644 --- a/files/fr/web/html/element/button/index.html +++ b/files/fr/web/html/element/button/index.html @@ -13,7 +13,7 @@ browser-compat: html.elements.button ---
        {{HTMLRef}}
        -

        L'élément <button> représente un bouton cliquable, utilisé pour soumettre des formulaires ou n'importe où dans un document pour une fonctionnalité de bouton accessible et standard. Par défaut, les boutons HTML sont présentés dans un style ressemblant à la plate-forme d'exécution de l'agent utilisateur, mais vous pouvez modifier l'apparence des boutons avec CSS.

        +

        L'élément <button> représente un bouton cliquable, utilisé pour soumettre des formulaires ou n'importe où dans un document pour une fonctionnalité de bouton accessible et standard. Par défaut, les boutons HTML sont présentés dans un style ressemblant à la plate-forme d'exécution de l'agent utilisateur, mais vous pouvez modifier l'apparence des boutons avec CSS.

        {{EmbedInteractiveExample("pages/tabbed/button.html", "tabbed-shorter")}}
        @@ -55,22 +55,22 @@ browser-compat: html.elements.button

        Cet élément peut utiliser les attributs universels.

        -
        autofocus
        +
        autofocus
        Cet attribut booléen, qui ne doit être défini qu'une fois par document, indique au navigateur que cet élément doit automatiquement avoir le focus lorsque la page est chargée. Cela permet d'utiliser immédiatement ce bouton, via un raccourci clavier par exemple, sans avoir à cliquer au préalable dans le contrôle adéquat.
        -
        autocomplete {{non-standard_inline}}
        +
        autocomplete {{non-standard_inline}}
        Pour l'élément <button>, cet attribut, propre à Firefox, n'est pas standard. Par défaut et à la différence des autres navigateurs, Firefox conserve l'état de désactivation d'un bouton d'un élément <button> au fur et à mesure des chargements d'une page. Utiliser cet attribut avec la valeur off (i.e. autocomplete="off") désactive cette fonctionnalité (cf. bug 654072 pour plus d'informations).
        -
        disabled
        +
        disabled

        Cet attribut booléen empêche l'utilisateur d'interagir avec le bouton : il ne peut pas être pressé ou ciblé.

        Firefox, contrairement aux autres navigateurs, persiste l'état désactivé dynamique d'un <bouton> à travers les chargements de page. Utilisez l'attribut autocomplete pour contrôler cette fonctionnalité.

        -
        form
        +
        form
        L'élément <form> auquel associer le bouton (son formulaire rattaché). Cet attribut contient l'attribut id de l'élément <form> auquel celui-ci est rattaché. Par défaut, le bouton est rattaché à l'élément <form> qui est son plus proche ancêtre. Cet attribut permet à un bouton d'être placé n'importe où dans le document et pas seulement comme un descendant d'éléments <form>. Il permet également de rattacher le bouton à un autre formulaire que son élément parent.
        -
        formaction
        +
        formaction
        L'URL qui traite les informations soumises par le bouton. Remplace l'attribut action du formulaire rattaché au bouton. Il ne fait rien s'il n'y a pas de formulaire rattaché.
        -
        formenctype
        -
        Lorsque l'attribut type possède la valeur submit, cet attribut définit le type MIME qui sera utilisée pour encoder les données envoyées au serveur. C'est un attribut à valeur contrainte qui peut prendre les valeurs suivantes : +
        formenctype
        +

        Lorsque l'attribut type possède la valeur submit, cet attribut définit le type MIME qui sera utilisée pour encoder les données envoyées au serveur. C'est un attribut à valeur contrainte qui peut prendre les valeurs suivantes :

        • application/x-www-form-urlencoded : La valeur par défaut.
        • multipart/form-data : Utilisé pour soumettre des éléments <input> dont les attributs type sont définis sur file.
        • @@ -79,8 +79,8 @@ browser-compat: html.elements.button

          Si cet attribut est spécifié, il remplace l'attribut enctype du formulaire rattaché au bouton.

        -
        formmethod
        -
        Lorsque l'attribut type possède la valeur submit (explicitement ou comme valeur par défaut), cet attribut définit la méthode HTTP qui sera utilisée pour envoyer les données au serveur. C'est un attribut à valeur contrainte qui peut prendre les valeurs suivantes : +
        formmethod
        +

        Lorsque l'attribut type possède la valeur submit (explicitement ou comme valeur par défaut), cet attribut définit la méthode HTTP qui sera utilisée pour envoyer les données au serveur. C'est un attribut à valeur contrainte qui peut prendre les valeurs suivantes :

        • post : Les données du formulaire sont incluses dans le corps de la requête HTTP lorsqu'elles sont envoyées au serveur. À utiliser lorsque le formulaire contient des informations qui ne devraient pas être publiques, comme les identifiants de connexion.
        • get : Les données du formulaire sont ajoutées à l'URL action du formulaire, avec un ? comme séparateur, et l'URL résultante est envoyée au serveur. Utilisez cette méthode lorsque le formulaire n'a pas d'effets secondaires, comme les formulaires de recherche.
        • @@ -88,11 +88,10 @@ browser-compat: html.elements.button

          S'il est spécifié, cet attribut remplace l'attribut method du formulaire rattaché au bouton.

        -
        formnovalidate
        -
        Si le bouton est un bouton de soumission (type non défini ou défini avec la valeur "submit"), cet attribut booléen spécifie que le formulaire ne doit pas être validé lorsqu'il est soumis. Si cet attribut est spécifié, il remplace l'attribut novalidate du formulaire rattaché au bouton.
        -
        Cet attribut est également disponible sur les éléments <input type="image"> et <input type="submit">.

        +
        formnovalidate
        +
        Si le bouton est un bouton de soumission (type non défini ou défini avec la valeur "submit"), cet attribut booléen spécifie que le formulaire ne doit pas être validé lorsqu'il est soumis. Si cet attribut est spécifié, il remplace l'attribut novalidate du formulaire rattaché au bouton. Cet attribut est également disponible sur les éléments <input type="image"> et <input type="submit">.

        -
        formtarget
        +
        formtarget
        Lorsque l'attribut type possède la valeur submit, cet attribut indique le contexte de navigation (onglet, fenêtre, frame) associé avec le formulaire, sa cible. Outre un attribut id valide du document, il peut prendre l'une de ces valeurs particulières:
        • _self : Charge la réponse dans le même contexte de navigation que le contexte actuel. Il s'agit de la valeur par défaut si l'attribut n'est pas spécifié.
        • @@ -101,17 +100,17 @@ browser-compat: html.elements.button
        • _top : Charge la réponse dans le contexte de navigation de niveau supérieur (c'est-à-dire le contexte de navigation qui est un ancêtre du contexte actuel, et qui n'a pas de parent). S'il n'y a pas de parent, cette option se comporte de la même manière que _self.
        -
        name
        +
        name
        Le nom du bouton, soumis en tant que paire avec la valeur du bouton comme partie des données du formulaire.
        -
        type
        -
        Le comportement par défaut du bouton. Les valeurs possibles sont : +
        type
        +

        Le comportement par défaut du bouton. Les valeurs possibles sont :

        • submit : Le bouton soumet les données du formulaire au serveur. C'est la valeur par défaut si l'attribut n'est pas spécifié pour les boutons associés à un <form>, ou si l'attribut est une valeur vide ou invalide.
        • reset : Le bouton réinitialise tous les contrôles à leur valeur initiale, comme <input type="reset">. (Ce comportement a tendance à agacer les utilisateurs).
        • button : Le bouton n'a pas de comportement par défaut et ne fait rien lorsqu'il est pressé par défaut. Les scripts côté client peuvent écouter les événements de l'élément, qui sont déclenchés lorsque les événements se produisent.
        -
        value
        +
        value
        Définit la valeur associée au name du bouton lorsqu'il est soumis avec les données du formulaire. Cette valeur est transmise au serveur en paramètres lorsque le formulaire est soumis.
        diff --git a/files/fr/web/html/element/canvas/index.html b/files/fr/web/html/element/canvas/index.html index be7e12369b..c7b9f6dcfe 100644 --- a/files/fr/web/html/element/canvas/index.html +++ b/files/fr/web/html/element/canvas/index.html @@ -14,7 +14,7 @@ browser-compat: html.elements.canvas ---
        {{HTMLRef}}
        -

        On utilise l'élément HTML <canvas> avec l'API canvas, ou l'API WebGL pour dessiner des graphiques et des animations.

        +

        On utilise l'élément HTML <canvas> avec l'API canvas, ou l'API WebGL pour dessiner des graphiques et des animations.

        @@ -54,11 +54,11 @@ browser-compat: html.elements.canvas

        Comme les autres éléments HTML, cet élément possède les attributs globaux.

        -
        height
        +
        height
        La hauteur de l'espace pour l'élément, exprimée en pixels CSS. La valeur par défaut est 150.
        -
        moz-opaque {{non-standard_inline}}{{deprecated_inline}}
        +
        moz-opaque {{non-standard_inline}}{{deprecated_inline}}
        Cet attribut permet d'indiquer s'il y aura de la transparence ou non. Si le canevas sait qu'il n'y aura pas de transparence, les performances de rendu pourront être améliorées. Cet attribut est uniquement pris en charge par les navigateurs Mozilla, il est préférable d'utiliser la méthode standard canvas.getContext('2d', { alpha: false}) à la place.
        -
        width
        +
        width
        La largeur de l'espace pour l'élément, exprimée en pixels CSS. La valeur par défaut est 300.
        @@ -119,9 +119,8 @@ browser-compat: html.elements.canvas
        -
        -

        Note :

        -

        Si on dépasse les dimensions ou l'aire maximale, le canevas deviendra inutilisable et les commandes de dessin ne fonctionneront pas.

        +
        +

        Note :Si on dépasse les dimensions ou l'aire maximale, le canevas deviendra inutilisable et les commandes de dessin ne fonctionneront pas.

        Exemples

        diff --git a/files/fr/web/html/element/caption/index.html b/files/fr/web/html/element/caption/index.html index 7210126072..00a70e2d0c 100644 --- a/files/fr/web/html/element/caption/index.html +++ b/files/fr/web/html/element/caption/index.html @@ -17,7 +17,7 @@ browser-compat: html.elements.caption ---
        {{HTMLRef}}
        -

        L'élément <caption> définit la légende (ou le titre) d'un tableau.

        +

        L'élément <caption> définit la légende (ou le titre) d'un tableau.

        {{EmbedInteractiveExample("pages/tabbed/caption.html", "tabbed-standard")}}
        @@ -61,7 +61,7 @@ browser-compat: html.elements.caption

        Attributs obsolètes

        -
        align {{deprecated_inline}}
        +
        align {{deprecated_inline}}
        Cet attribut à valeur contrainte indique l'alignement de la légende du tableau par rapport au tableau lui-même. Il peut valoir :
        left
        @@ -74,9 +74,8 @@ browser-compat: html.elements.caption
        La légende est affichée en dessous du tableau
        -
        -

        Note d'utilisation :

        -

        Ne pas utiliser cet attribut. Il a été déprécié. L'élément <caption> devrait être mis en forme grâce au CSS. Afin d'obtenir des effets similaires à cet attribut, on utilisera les propriétés CSS caption-side et text-align.

        +
        +

        Note : Ne pas utiliser cet attribut. Il a été déprécié. L'élément <caption> devrait être mis en forme grâce au CSS. Afin d'obtenir des effets similaires à cet attribut, on utilisera les propriétés CSS caption-side et text-align.

        @@ -89,7 +88,7 @@ browser-compat: html.elements.caption

        Utiliser la propriété background-color sur le tableau ne modifiera pas l'apparence de la légende. Il est également nécessaire d'ajouter une déclaration CSS avec background-color sur l'élément <caption> pour que celui-ci ait la même couleur.

        -

        Exemple

        +

        Exemple

        Cet exemple simple présente un tableau qui comprend une légende.

        @@ -111,8 +110,7 @@ browser-compat: html.elements.caption </tr> </table>
        - +

        Résultat

        -

        {{EmbedLiveSample('example', '', 120)}}

        +

        {{EmbedLiveSample('Exemple', '', 120)}}

        Spécifications

        diff --git a/files/fr/web/html/element/center/index.html b/files/fr/web/html/element/center/index.html index 5e7bdd54e2..ab336c36fc 100644 --- a/files/fr/web/html/element/center/index.html +++ b/files/fr/web/html/element/center/index.html @@ -16,12 +16,11 @@ browser-compat: html.elements.center ---
        {{HTMLRef}}
        -
        -

        Obsolète

        -

        Cette fonctionnalité est obsolète. Bien qu'encore supportée par des navigateurs, son utilisation est découragée pour tout nouveau projet. Évitez de l'utiliser.

        +
        +

        Attention : Cette fonctionnalité est obsolète. Bien qu'encore supportée par des navigateurs, son utilisation est découragée pour tout nouveau projet. Évitez de l'utiliser.

        -

        L'élément <center> est un élément de bloc qui contient des paragraphes et d'autres éléments de type bloc ou en ligne. Le contenu entier de cet élément est centré horizontalement au sein de son conteneur parent (généralement l'élément <body>).

        +

        L'élément <center> est un élément de bloc qui contient des paragraphes et d'autres éléments de type bloc ou en ligne. Le contenu entier de cet élément est centré horizontalement au sein de son conteneur parent (généralement l'élément <body>).

        Cet élément a été déprécié en HTML4 (et XHTML 1) au profit de la propriété CSS text-align qui peut être appliqué à l'élément <div> ou à un élément <p>. Pour centrer des blocs, on utilisera d'autres propriétés (margin-left et margin-right (ou définissez margin à 0 auto).

        @@ -29,9 +28,8 @@ browser-compat: html.elements.center

        Cet élément implémente l'interface HTMLElement.

        -
        -

        Note d'implémentation :

        -

        Jusqu'à Gecko 1.9.2 inclus, Firefox implémentait l'interface HTMLSpanElement pour cet élément.

        +
        +

        Note : Jusqu'à Gecko 1.9.2 inclus, Firefox implémentait l'interface HTMLSpanElement pour cet élément.

        Exemple 1

        diff --git a/files/fr/web/html/element/cite/index.html b/files/fr/web/html/element/cite/index.html index 7f2eed785a..cd93bd61c9 100644 --- a/files/fr/web/html/element/cite/index.html +++ b/files/fr/web/html/element/cite/index.html @@ -17,7 +17,7 @@ browser-compat: html.elements.cite ---
        {{HTMLRef}}
        -

        L'élément <cite> contient le titre d'une œuvre telle qu'un livre, une chanson, un film, une sculpture… Cet élément doit inclure le titre de l'œuvre. Cette référence peut-être abrégée en accord avec les conventions d'usages pour l'ajout des métadonnées de citations.

        +

        L'élément <cite> contient le titre d'une œuvre telle qu'un livre, une chanson, un film, une sculpture… Cet élément doit inclure le titre de l'œuvre. Cette référence peut-être abrégée en accord avec les conventions d'usages pour l'ajout des métadonnées de citations.

        {{EmbedInteractiveExample("pages/tabbed/cite.html", "tabbed-standard")}}
        diff --git a/files/fr/web/html/element/code/index.html b/files/fr/web/html/element/code/index.html index 332abaf92b..c6ccf9dbba 100644 --- a/files/fr/web/html/element/code/index.html +++ b/files/fr/web/html/element/code/index.html @@ -14,7 +14,7 @@ browser-compat: html.elements.code ---
        {{HTMLRef}}
        -

        L'élément HTML <code> représente un court fragment de code machine. Par défaut, l'agent utilisateur utilise une police à chasse fixe (monospace) afin d'afficher le texte contenu dans cet élément.

        +

        L'élément HTML <code> représente un court fragment de code machine. Par défaut, l'agent utilisateur utilise une police à chasse fixe (monospace) afin d'afficher le texte contenu dans cet élément.

        {{EmbedInteractiveExample("pages/tabbed/code.html", "tabbed-shorter")}}
        diff --git a/files/fr/web/html/element/col/index.html b/files/fr/web/html/element/col/index.html index 77709ea9a9..bde20a7a7a 100644 --- a/files/fr/web/html/element/col/index.html +++ b/files/fr/web/html/element/col/index.html @@ -13,7 +13,7 @@ browser-compat: html.elements.col ---
        {{HTMLRef}}
        -

        L'élément HTML <col> définit une colonne appartenant à un tableau et est utilisé afin de définir la sémantique commune à toutes ses cellules. On trouve généralement cet élément au sein d'un élément <colgroup>.

        +

        L'élément HTML <col> définit une colonne appartenant à un tableau et est utilisé afin de définir la sémantique commune à toutes ses cellules. On trouve généralement cet élément au sein d'un élément <colgroup>.

        {{EmbedInteractiveExample("pages/tabbed/col.html","tabbed-taller")}}
        @@ -55,7 +55,7 @@ browser-compat: html.elements.col

        Cet élément inclut les attributs universels.

        -
        span
        +
        span
        Cet attribut contient un nombre entier positif indiquant le nombre de colonnes consécutives que l'élément <col> couvre. S'il n'est pas présent, sa valeur par défaut est 1.
        @@ -64,7 +64,7 @@ browser-compat: html.elements.col

        Les attributs suivants sont dépréciés et ne doivent pas être utilisés. Ils sont documentés ci-dessous à titre de référence lors de la mise à jour du code existant et uniquement pour des raisons historiques.

        -
        align {{deprecated_inline}}
        +
        align {{deprecated_inline}}
        Cet attribut de type énumératif indique comment l'alignement horizontal du contenu des cellules de chaque colonne sera traité. Les valeurs possibles sont :
        • left, aligner le contenu à gauche de la cellule
        • @@ -75,8 +75,8 @@ browser-compat: html.elements.col

          Si cet attribut n'est pas défini, sa valeur est héritée du align de l'élément <colgroup> auquel appartient cet <col>. S'il n'y en a pas, la valeur left est supposée.

          -
          -

          Note :

          +
          +

          Note :

          • Pour obtenir le même effet que les valeurs left, center, right ou justify : @@ -90,17 +90,17 @@ browser-compat: html.elements.col
        -
        bgcolor {{deprecated_inline}}
        +
        bgcolor {{deprecated_inline}}

        La couleur de fond du tableau. Il s'agit d'un code RVB hexadécimal à 6 chiffres, préfixé par un « # ». L'un des mots-clés de couleur prédéfinis peut également être utilisé.

        Pour obtenir un effet similaire, utilisez la propriété CSS background-color.

        -
        char {{deprecated_inline}}
        +
        char {{deprecated_inline}}
        Cet attribut est utilisé pour définir le caractère sur lequel aligner les cellules d'une colonne. Les valeurs typiques de cet attribut incluent un point (.) lorsqu'on tente d'aligner des nombres ou des valeurs monétaires. Si align n'est pas défini sur char, cet attribut est ignoré.
        -
        charoff {{deprecated_inline}}
        +
        charoff {{deprecated_inline}}
        Cet attribut est utilisé pour indiquer le nombre de caractères pour décaler les données de la colonne par rapport aux caractères d'alignement spécifiés par l'attribut char.
        -
        valign {{deprecated_inline}}
        +
        valign {{deprecated_inline}}
        Cet attribut spécifie l'alignement vertical du texte dans chaque cellule de la colonne. Les valeurs possibles de cet attribut sont les suivantes :
        • baseline, mettra le texte aussi près du bas de la cellule que possible, mais l'alignera sur la base des caractères au lieu du bas de ceux-ci. Si les caractères sont tous de la même taille, cela a le même effet que bottom ;
        • @@ -109,8 +109,8 @@ browser-compat: html.elements.col
        • and top, placera le texte aussi près du haut de la cellule que possible.
        -
        -

        Note :

        +
        +

        Note :

        • N'essayez pas de définir la propriété vertical-align sur un sélecteur donnant un élément <col>. Comme les éléments <td> ne sont pas des descendants de l'élément <col>, ils n'en hériteront pas.
        • @@ -119,7 +119,7 @@ browser-compat: html.elements.col
        -
        width {{deprecated_inline}}
        +
        width {{deprecated_inline}}
        Cet attribut spécifie une largeur par défaut pour chaque colonne du groupe de colonnes actuel. En plus des valeurs standard en pixels et en pourcentage, cet attribut peut prendre la forme spéciale 0*, ce qui signifie que la largeur de chaque colonne du groupe doit être la largeur minimale nécessaire pour contenir le contenu de la colonne. Des largeurs relatives telles que 5* peuvent également être utilisées.
        diff --git a/files/fr/web/html/element/colgroup/index.html b/files/fr/web/html/element/colgroup/index.html index 2dd5a5eb2b..4ed3fc245c 100644 --- a/files/fr/web/html/element/colgroup/index.html +++ b/files/fr/web/html/element/colgroup/index.html @@ -13,7 +13,7 @@ browser-compat: html.elements.colgroup ---
        {{HTMLRef}}
        -

        L'élément HTML <colgroup> définit un groupe de colonnes au sein d'un tableau.

        +

        L'élément HTML <colgroup> définit un groupe de colonnes au sein d'un tableau.

        {{EmbedInteractiveExample("pages/tabbed/colgroup.html","tabbed-taller")}}
        @@ -56,9 +56,9 @@ browser-compat: html.elements.colgroup

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

        -
        span
        +
        span
        Cet attribut contient un nombre entier positif indiquant le nombre de colonnes consécutives que l'élément <colgroup> couvre. S'il n'est pas présent, sa valeur par défaut est 1. -
        +

        Note:

        Cet attribut est appliqué sur les attributs du groupe de colonnes, il n'a aucun effet sur les règles de style CSS qui lui sont associées ni, a fortiori, sur les cellules des membres du groupe de la colonne.

          @@ -73,7 +73,7 @@ browser-compat: html.elements.colgroup

          Les attributs suivants sont dépréciés et ne doivent pas être utilisés. Ils sont documentés ci-dessous à titre de référence lors de la mise à jour du code existant et uniquement pour des raisons historiques.

          -
          align {{deprecated_inline}}
          +
          align {{deprecated_inline}}
          Cet attribut de type énumératif indique comment l'alignement horizontal du contenu des cellules de chaque colonne sera traité. Les valeurs possibles sont :
          • left, aligner le contenu à gauche de la cellule
          • @@ -85,8 +85,8 @@ browser-compat: html.elements.colgroup

            Si cet attribut n'est pas défini, la valeur left est adoptée. Les éléments <col> descendants peuvent remplacer cette valeur en utilisant leur propre attribut align.

            -
            -

            Note :

            +
            +

            Note :

            • N'essayez pas de définir la propriété text-align sur un sélecteur donnant un élément <colgroup>. Comme les éléments <td> ne sont pas des descendants de l'élément <colgroup>, ils n'en hériteront pas.
            • Si le tableau n'utilise pas d'attribut code>colspan, utilisez un td:nth-child(an+b) sélecteur CSS par colonne, où a est le nombre total de colonnes du tableau et b est la position ordinale de cette colonne dans le tableau. Ce n'est qu'après ce sélecteur que la propriété text-align peut être utilisée.
            • @@ -94,17 +94,17 @@ browser-compat: html.elements.colgroup
          -
          bgcolor {{deprecated_inline}}
          +
          bgcolor {{deprecated_inline}}

          La couleur de fond du tableau. Il s'agit d'un code RVB hexadécimal à 6 chiffres, préfixé par un « # ». L'un des mots-clés de couleur prédéfinis peut également être utilisé.

          Pour obtenir un effet similaire, utilisez la propriété CSS background-color.

          -
          char {{deprecated_inline}}
          +
          char {{deprecated_inline}}
          Cet attribut spécifie l'alignement du contenu d'un groupe de colonnes sur un caractère. Les valeurs typiques de cet attribut comprennent un point (.) lorsqu'on tente d'aligner des chiffres ou des valeurs monétaires. Si align n'est pas défini sur char, cet attribut est ignoré, bien qu'il sera toujours utilisé comme valeur par défaut pour le align du <col> qui sont membres de ce groupe de colonnes.
          -
          charoff {{deprecated_inline}}
          +
          charoff {{deprecated_inline}}
          Cet attribut est utilisé pour indiquer le nombre de caractères pour décaler les données de la colonne par rapport au caractère d'alignement spécifié par l'attribut char.
          -
          valign {{deprecated_inline}}
          +
          valign {{deprecated_inline}}
          Cet attribut spécifie l'alignement vertical du texte dans chaque cellule de la colonne. Les valeurs possibles de cet attribut sont les suivantes :
          • baseline, mettra le texte aussi près du bas de la cellule que possible, mais l'alignera sur la ligne de base des caractères au lieu du bas de ceux-ci. Si les caractères sont tous de la même taille, cela a le même effet que bottom ;
          • @@ -113,8 +113,8 @@ browser-compat: html.elements.colgroup
          • and top, placera le texte aussi près du haut de la cellule que possible.
          -
          -

          Note :

          +
          +

          Note :

          • N'essayez pas de définir la propriété vertical-align sur un sélecteur donnant un élément <col>. Comme les éléments <td> ne sont pas des descendants de l'élément <col>, ils n'en hériteront pas.
          • Si le tableau n'utilise pas d'attribut colspan, utilisez le sélecteur CSS td:nth-child(an+b) où a est le nombre total de colonnes du tableau et b la position ordinale de la colonne dans le tableau. Ce n'est qu'après ce sélecteur que la propriété vertical-align peut être utilisée.
          • diff --git a/files/fr/web/html/element/content/index.html b/files/fr/web/html/element/content/index.html index 4997c16527..65be830bb8 100644 --- a/files/fr/web/html/element/content/index.html +++ b/files/fr/web/html/element/content/index.html @@ -18,16 +18,14 @@ browser-compat: html.elements.content ---
            {{HTMLRef}}
            -
            -

            Déprécié

            -

            Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la supporter, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications Web l'utilisant peuvent cesser de fonctionner à tout moment.

            +
            +

            Attention : Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la supporter, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications Web l'utilisant peuvent cesser de fonctionner à tout moment.

            -

            L'élément HTML <content> — une partie obsolète de la suite de technologies Web Components — était utilisé à l'intérieur de Shadow DOM comme un point d'insertion, et n'était pas destiné à être utilisé dans du HTML ordinaire. Il a maintenant été remplacé par l'élément <slot>, qui crée un point dans le DOM où un Shadow DOM peut être inséré.

            +

            L'élément HTML <content> — une partie obsolète de la suite de technologies Web Components — était utilisé à l'intérieur de Shadow DOM comme un point d'insertion, et n'était pas destiné à être utilisé dans du HTML ordinaire. Il a maintenant été remplacé par l'élément <slot>, qui crée un point dans le DOM où un Shadow DOM peut être inséré.

            -
            -

            Note :

            -

            Bien que présent dans les premières versions des spécifications et mis en œuvre dans plusieurs navigateurs, cet élément a été supprimé dans les versions ultérieures de la spécification, et ne doit pas être utilisé. Il est documenté ici pour aider à adapter le code écrit à l'époque où il était inclus dans la spécification afin qu'il fonctionne avec les versions plus récentes de la spécification.

            +
            +

            Note :Bien que présent dans les premières versions des spécifications et mis en œuvre dans plusieurs navigateurs, cet élément a été supprimé dans les versions ultérieures de la spécification, et ne doit pas être utilisé. Il est documenté ici pour aider à adapter le code écrit à l'époque où il était inclus dans la spécification afin qu'il fonctionne avec les versions plus récentes de la spécification.

            @@ -60,7 +58,7 @@ browser-compat: html.elements.content

            Comme pour tous les éléments, on peut utiliser les attributs universels sur <content>.

            -
            select
            +
            select
            Une liste de sélecteurs séparés par des virgules. La syntaxe utilisée est la même que celle utilisée pour les sélecteurs CSS. Ils permettent de sélectionner le contenu à insérer à la place de l'élément <content>.
            @@ -68,9 +66,8 @@ browser-compat: html.elements.content

            Voici un exemple simple d'utilisation de l'élément <content>. Il s'agit d'un fichier HTML It is an HTML file with everything needed in it.

            -
            -

            Note :

            -

            Pour que ce code fonctionne, le navigateur utilisé doit prendre en charge les composants web (voir par exemple l'activation des composants web dans Firefox).

            +
            +

            Note :Pour que ce code fonctionne, le navigateur utilisé doit prendre en charge les composants web (voir par exemple l'activation des composants web dans Firefox).

            <html>
            diff --git a/files/fr/web/html/element/data/index.html b/files/fr/web/html/element/data/index.html
            index 921d4205ff..9bf13456b6 100644
            --- a/files/fr/web/html/element/data/index.html
            +++ b/files/fr/web/html/element/data/index.html
            @@ -54,7 +54,7 @@ browser-compat: html.elements.data
             

            Comme pour tous les autres éléments, on peut utiliser les attributs universels sur <data>.

            -
            value
            +
            value
            Cet attribut définit la version du contenu qui doit être interprétée par une machine.
            diff --git a/files/fr/web/html/element/datalist/index.html b/files/fr/web/html/element/datalist/index.html index 831b1f5372..94845bfd17 100644 --- a/files/fr/web/html/element/datalist/index.html +++ b/files/fr/web/html/element/datalist/index.html @@ -13,7 +13,7 @@ browser-compat: html.elements.datalist ---
            {{HTMLRef}}
            -

            L'élément HTML <datalist> contient un ensemble d'éléments <option> qui représentent les valeurs possibles pour d'autres contrôles.

            +

            L'élément HTML <datalist> contient un ensemble d'éléments <option> qui représentent les valeurs possibles pour d'autres contrôles.

            {{EmbedInteractiveExample("pages/tabbed/datalist.html", "tabbed-standard")}}
            diff --git a/files/fr/web/html/element/dd/index.html b/files/fr/web/html/element/dd/index.html index bb76b3f403..640a75a714 100644 --- a/files/fr/web/html/element/dd/index.html +++ b/files/fr/web/html/element/dd/index.html @@ -17,7 +17,7 @@ browser-compat: html.elements.dd ---
            {{HTMLRef}}
            -

            L'élément HTML <dd> fournit la description, la définition ou la valeur du terme précédent (<dt>) dans une liste de description (<dl>).

            +

            L'élément HTML <dd> fournit la description, la définition ou la valeur du terme précédent (<dt>) dans une liste de description (<dl>).

            {{EmbedInteractiveExample("pages/tabbed/dd.html","tabbed-standard")}}
            @@ -59,7 +59,7 @@ browser-compat: html.elements.dd

            Cet élément inclut les attributs universels.

            -
            nowrap {{non-standard_inline}}
            +
            nowrap {{non-standard_inline}}
            Si la valeur de cet attribut est yes, il n'y aura pas de retour à la ligne si le texte de la définition dépasse la taille de la ligne. La valeur par défaut est no.
            diff --git a/files/fr/web/html/element/del/index.html b/files/fr/web/html/element/del/index.html index dfb07d4fde..b4b1b21928 100644 --- a/files/fr/web/html/element/del/index.html +++ b/files/fr/web/html/element/del/index.html @@ -14,7 +14,7 @@ browser-compat: html.elements.del ---
            {{HTMLRef}}
            -

            L'élément HTML <del> représente une portion de texte ayant été supprimée d'un document. Cet élément est souvent (mais pas nécessairement) affiché rayé. L'élément <ins> est quant à lui utilisé pour représenter des portions de texte ajoutées.

            +

            L'élément HTML <del> représente une portion de texte ayant été supprimée d'un document. Cet élément est souvent (mais pas nécessairement) affiché rayé. L'élément <ins> est quant à lui utilisé pour représenter des portions de texte ajoutées.

            {{EmbedInteractiveExample("pages/tabbed/del.html", "tabbed-standard")}}
            @@ -58,9 +58,9 @@ browser-compat: html.elements.del

            Comme pour tous les autres éléments, on peut utiliser les attributs universels sur <del>.

            -
            cite
            +
            cite
            Une URL pour une ressource expliquant le changement (cela peut être un procès verbal d'une réunion par exemple).
            -
            datetime
            +
            datetime
            Cet attribut indique l'heure et la date du changement et doit être une date valide avec une heure facultative. Si la valeur ne peut pas être analysée comme telle, l'élément n'aura pas d'information temporelle associée. Voir l'article sur les formats pour la représentation d'une date seule ou d'une date avec une heure.
            diff --git a/files/fr/web/html/element/details/index.html b/files/fr/web/html/element/details/index.html index d9a30d8797..c597a7e084 100644 --- a/files/fr/web/html/element/details/index.html +++ b/files/fr/web/html/element/details/index.html @@ -15,32 +15,26 @@ browser-compat: html.elements.details ---
            {{HTMLRef}}
            -

            L'élément HTML <details> est utilisé comme un outil permettant de révéler une information. Un résumé ou un intitulé peuvent être fournis grâce à un élément <summary>.

            +

            L'élément HTML <details> est utilisé comme un outil permettant de révéler une information. Un résumé ou un intitulé peuvent être fournis grâce à un élément <summary>.

            La plupart du temps, le contrôle utilisé pour cet élément est un triangle qui est tourné ou tordu afin d'indiquer si l'élément est révélé ou non. Si le premier élément fils de l'élément <details> est un élément <summary>, c'est le contenu de ce dernier qui est utilisé comme intitulé pour le contenu à révéler (l'intitulé est donc toujours visible).

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

            Note :

            -

            L'utilisation courante d'un triangle qui tourne ou s'enroule pour représenter l'ouverture ou la fermeture du widget explique pourquoi on les appelle parfois « twisties » en anglais.

            +
            +

            Note :L'utilisation courante d'un triangle qui tourne ou s'enroule pour représenter l'ouverture ou la fermeture du widget explique pourquoi on les appelle parfois « twisties » en anglais.

            -

            Un widget <details> peut être dans l'un des deux états suivants. L'état par défaut fermé affiche uniquement le triangle et l'étiquette à l'intérieur du <summary> (ou une chaîne par défaut définie par l'agent utilisateur si aucun <summary>). Cela peut ressembler à ce qui suit :

            +

            Un widget <details> peut être dans l'un des deux états suivants. L'état par défaut fermé affiche uniquement le triangle et l'étiquette à l'intérieur du <summary> (ou une chaîne par défaut définie par l'agent utilisateur si aucun <summary>).

            -
            Capture d'écran du widget fermé <details>. Un triangle noir pointant vers la gauche se trouve à droite du texte « System Requirements ».
            - -

            Nous voyons ici un widget de divulgation standard avec l'étiquette "System Requirements", dans son état fermé par défaut. Lorsque l'utilisateur clique sur le widget ou le met au point, puis appuie sur la barre d'espacement, il s'ouvre par "torsion", révélant son contenu :

            - -
            Capture d'écran du widget <details> ouvert. Le triangle pointe maintenant vers le bas, et une description détaillée de ce que signifie « System Requirements » est affichée.
            +

            Lorsque l'utilisateur clique sur le widget ou le met au point, puis appuie sur la barre d'espacement, il s'ouvre par "torsion", révélant son contenu :

            À partir de là, vous pouvez utiliser les feuilles de style en cascade pour donner un style au widget de divulgation, et vous pouvez ouvrir et fermer le widget de façon programmatique en définissant ou en supprimant son attribut open.

            Par défaut, lorsqu'il est fermé, le widget est seulement assez haut pour afficher le triangle de divulgation et le résumé. Lorsqu'il est ouvert, il s'étend pour afficher les détails qu'il contient.

            -
            -

            Note :

            -

            Malheureusement, à l'heure actuelle, il n'existe aucun moyen intégré d'animer la transition entre l'ouverture et la fermeture.

            +
            +

            Note :Malheureusement, à l'heure actuelle, il n'existe aucun moyen intégré d'animer la transition entre l'ouverture et la fermeture.

            Les implémentations entièrement conformes aux normes appliquent automatiquement le code CSS display: list-item à l'élément <summary>. Vous pouvez l'utiliser pour personnaliser davantage son apparence. Voir personnaliser le marqueur de révélation pour plus de détails.

            @@ -83,13 +77,12 @@ browser-compat: html.elements.details

            Comme tous les éléments HTML, cet élément accepte les attributs universels.

            -
            open
            +
            open

            Cet attribut booléen indique si les détails — c'est-à-dire le contenu de l'élément <details> — sont actuellement visibles ou non. Les détails sont affichés lorsque cet attribut existe, ou cachés lorsque cet attribut est absent. Par défaut, cet attribut est absent, ce qui signifie que les détails ne sont pas visibles.

            -

            Note :

            -

            Vous devez supprimer entièrement cet attribut pour que les détails soient cachés. Attention, open="false" rend les détails visibles, car cet attribut est booléen.

            +

            Note :Vous devez supprimer entièrement cet attribut pour que les détails soient cachés. Attention, open="false" rend les détails visibles, car cet attribut est booléen.

            @@ -201,7 +194,7 @@ details[open] > summary {

            CSS

            -
            details {
            +
            details {
               font: 16px "Open Sans", "Arial", sans-serif;
               width: 620px;
             }
            diff --git a/files/fr/web/html/element/dfn/index.html b/files/fr/web/html/element/dfn/index.html
            index 147a16f0a6..d370093857 100644
            --- a/files/fr/web/html/element/dfn/index.html
            +++ b/files/fr/web/html/element/dfn/index.html
            @@ -16,7 +16,7 @@ browser-compat: html.elements.dfn
             ---
             
            {{HTMLRef}}
            -

            L'élément HTML <dfn> (aussi nommé « définition ») est utilisé pour indiquer le terme défini dans le contexte d'une expression ou d'une phrase de définition. L'élément <p>, le couple <dt>/<dd> ou l'élément <section> qui est le plus proche ancêtre de <dfn> est considéré comme la définition du terme.

            +

            L'élément HTML <dfn> (aussi nommé « définition ») est utilisé pour indiquer le terme défini dans le contexte d'une expression ou d'une phrase de définition. L'élément <p>, le couple <dt>/<dd> ou l'élément <section> qui est le plus proche ancêtre de <dfn> est considéré comme la définition du terme.

            {{EmbedInteractiveExample("pages/tabbed/dfn.html", "tabbed-shorter")}}
            @@ -74,8 +74,7 @@ browser-compat: html.elements.dfn
            -

            Note :

            -

            Si l'élément <dfn> possède un attribut title, il doit contenir le terme défini et aucun autre texte.

            +

            Note :Si l'élément <dfn> possède un attribut title, il doit contenir le terme défini et aucun autre texte.

            diff --git a/files/fr/web/html/element/dialog/index.html b/files/fr/web/html/element/dialog/index.html index ea1a1effa4..8c5051b4b2 100644 --- a/files/fr/web/html/element/dialog/index.html +++ b/files/fr/web/html/element/dialog/index.html @@ -14,7 +14,7 @@ browser-compat: html.elements.dialog ---
            {{HTMLRef}}
            -

            L'élément HTML <dialog> représente une boite de dialogue ou un composant interactif (par exemple un inspecteur ou une fenêtre).

            +

            L'élément HTML <dialog> représente une boite de dialogue ou un composant interactif (par exemple un inspecteur ou une fenêtre).

            @@ -53,12 +53,12 @@ browser-compat: html.elements.dialog

            Cet élément inclut les attributs universels.

            -
            -

            L'attribut tabindex ne doit pas être utilisé sur l'élément <dialog>.

            +
            +

            Attention : L'attribut tabindex ne doit pas être utilisé sur l'élément <dialog>.

            -
            open
            +
            open
            Cet attribut indique que la boîte de dialogue est active et peut être utilisée de façon interactive. Si l'attribut n'est pas renseigné, la boîte de dialogue ne doit pas être présentée à l'utilisateur.
            diff --git a/files/fr/web/html/element/dir/index.html b/files/fr/web/html/element/dir/index.html index 6c1dc7e17d..40e8f2b9c8 100644 --- a/files/fr/web/html/element/dir/index.html +++ b/files/fr/web/html/element/dir/index.html @@ -16,16 +16,14 @@ browser-compat: html.elements.dir ---
            {{HTMLRef}}
            -
            -

            Obsolète :

            -

            Cette fonctionnalité est obsolète. Bien qu'encore supportée par des navigateurs, son utilisation est découragée pour tout nouveau projet. Évitez de l'utiliser.

            +
            +

            Attention : Cette fonctionnalité est obsolète. Bien qu'encore supportée par des navigateurs, son utilisation est découragée pour tout nouveau projet. Évitez de l'utiliser.

            -

            L'élément HTML <dir> (pour directory) est utilisé comme un conteneur pour un répertoire (c'est-à-dire un ensemble de fichiers). Des styles et icônes peuvent être appliqués par l'agent utilisateur. Cet élément obsolète ne doit pas être utilisé, il peut être remplacé par l'élément <ul> qui permet de représenter des listes et, entre autres, des listes de fichiers.

            +

            L'élément HTML <dir> (pour directory) est utilisé comme un conteneur pour un répertoire (c'est-à-dire un ensemble de fichiers). Des styles et icônes peuvent être appliqués par l'agent utilisateur. Cet élément obsolète ne doit pas être utilisé, il peut être remplacé par l'élément <ul> qui permet de représenter des listes et, entre autres, des listes de fichiers.

            -
            -

            Note d'utilisation :

            -

            Cet élément ne doit pas être utilisé. Bien que présent dans les premières spécifications HTML, il a été déprécié dans HTML 4, et rendu obsolète avec HTML5. Il faudra privilégier l'élément <ul>. De plus, aucun navigateur majeur ne prend en charge cet élément.

            +
            +

            Attention : Cet élément ne doit pas être utilisé. Bien que présent dans les premières spécifications HTML, il a été déprécié dans HTML 4, et rendu obsolète avec HTML5. Il faudra privilégier l'élément <ul>. De plus, aucun navigateur majeur ne prend en charge cet élément.

            Interface DOM

            @@ -37,11 +35,10 @@ browser-compat: html.elements.dir

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

            -
            compact
            +
            compact
            Cet attribut booléen indique que la liste doit être rendue avec un affichage compact. L'interprétation de cet attribut dépend de l'agent utilisateur. Il ne fonctionne pas dans tous les navigateurs. -
            -

            Note d'utilisation :

            -

            Cet attribut ne doit pas être utilisé, car il a été déprécié. L'élément <dir> doit être mis en forme en utilisant CSS. Pour obtenir un effect visuel similaire à l'attribut compact, la propriété CSS line-height peut être utilisé avec la valeur 80%.

            +
            +

            Attention : Cet attribut ne doit pas être utilisé, car il a été déprécié. L'élément <dir> doit être mis en forme en utilisant CSS. Pour obtenir un effect visuel similaire à l'attribut compact, la propriété CSS line-height peut être utilisé avec la valeur 80%.

            diff --git a/files/fr/web/html/element/div/index.html b/files/fr/web/html/element/div/index.html index 35b092a859..1764eb7d29 100644 --- a/files/fr/web/html/element/div/index.html +++ b/files/fr/web/html/element/div/index.html @@ -16,7 +16,7 @@ browser-compat: html.elements.div ---
            {{HTMLRef}}
            -

            L'élément HTML <div> (ou division) est le conteneur générique du contenu du flux. Il n'a aucun effet sur le contenu ou la mise en page tant qu'il n'est pas mis en forme d'une manière quelconque à l'aide de CSS.

            +

            L'élément HTML <div> (ou division) est le conteneur générique du contenu du flux. Il n'a aucun effet sur le contenu ou la mise en page tant qu'il n'est pas mis en forme d'une manière quelconque à l'aide de CSS.

            {{EmbedInteractiveExample("pages/tabbed/div.html","tabbed-standard")}}
            @@ -60,8 +60,7 @@ browser-compat: html.elements.div

            Comme tous les autres éléments HTML, cet élément accepte les attributs universels.

            -

            Note :

            -

            L'attribut align est désormais obsolète et ne doit plus être appliqué pour un <div>. On privilégiera l'utilisation des propriétés et outils CSS (tels que la grille CSS ou les boîtes flexibles (flexbox)) pour aligner et positionner des éléments <div>.

            +

            Note :L'attribut align est désormais obsolète et ne doit plus être appliqué pour un <div>. On privilégiera l'utilisation des propriétés et outils CSS (tels que la grille CSS ou les boîtes flexibles (flexbox)) pour aligner et positionner des éléments <div>.

            Notes d'utilisation

            diff --git a/files/fr/web/html/element/em/index.html b/files/fr/web/html/element/em/index.html index ea92b0a937..439117440a 100644 --- a/files/fr/web/html/element/em/index.html +++ b/files/fr/web/html/element/em/index.html @@ -12,7 +12,7 @@ browser-compat: html.elements.em ---
            {{HTMLRef}}
            -

            L'élément HTML <em> (pour emphase) est utilisé afin de marquer un texte sur lequel on veut insister. Les éléments <em> peuvent être imbriqués, chaque degré d'imbrication indiquant un degré d'insistance plus élevé.

            +

            L'élément HTML <em> (pour emphase) est utilisé afin de marquer un texte sur lequel on veut insister. Les éléments <em> peuvent être imbriqués, chaque degré d'imbrication indiquant un degré d'insistance plus élevé.

            {{EmbedInteractiveExample("pages/tabbed/em.html", "tabbed-shorter")}}
            diff --git a/files/fr/web/html/element/embed/index.html b/files/fr/web/html/element/embed/index.html index 21f1ee793d..6f8281163c 100644 --- a/files/fr/web/html/element/embed/index.html +++ b/files/fr/web/html/element/embed/index.html @@ -17,13 +17,12 @@ browser-compat: html.elements.embed ---
            {{HTMLRef}}
            -

            L'élément HTML <embed> permet d'intégrer du contenu externe à cet endroit dans le document. Le contenu peut être fourni par une application externe ou une autre source telle qu'un plugin du navigateur.

            +

            L'élément HTML <embed> permet d'intégrer du contenu externe à cet endroit dans le document. Le contenu peut être fourni par une application externe ou une autre source telle qu'un plugin du navigateur.

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

            Note :

            -

            Cet article ne traite que de l'élément faisant partie du HTML5. Il ne concerne pas la version précédente et non normalisée de cet élément.

            +
            +

            Note :Cet article ne traite que de l'élément faisant partie du HTML5. Il ne concerne pas la version précédente et non normalisée de cet élément.

            Il faut garder à l'esprit que la plupart des navigateurs ont déprécié voire retiré la prise en charge des plugins. Aussi, mieux vaut ne pas utiliser sur <embed> si on souhaite qu'un site ou une application soit fonctionnelle sur un navigateur moyen.

            @@ -66,13 +65,13 @@ browser-compat: html.elements.embed

            Cet élément possède les attributs universels.

            -
            height
            +
            height
            La hauteur utilisée pour l'affichage de la ressource, exprimée en pixels CSS. La valeur est absolue, les pourcentages ne sont pas autorisés.
            -
            src
            +
            src
            L'URL de la ressource à intégrer.
            -
            type
            +
            type
            Le type MIME à utiliser pour sélectionner le plugin à instancier.
            -
            width
            +
            width
            La largeur utilisée pour l'affichage de la ressource, exprimée en pixels CSS. La valeur est absolue, les pourcentages ne sont pas autorisés.
            diff --git a/files/fr/web/html/element/fieldset/index.html b/files/fr/web/html/element/fieldset/index.html index 3187ec76bd..d6689a7867 100644 --- a/files/fr/web/html/element/fieldset/index.html +++ b/files/fr/web/html/element/fieldset/index.html @@ -13,7 +13,7 @@ browser-compat: html.elements.fieldset ---
            {{HTMLRef}}
            -

            L'élément HTML <fieldset> est utilisé afin de regrouper plusieurs contrôles interactifs ainsi que des étiquettes (<label>) dans un formulaire HTML.

            +

            L'élément HTML <fieldset> est utilisé afin de regrouper plusieurs contrôles interactifs ainsi que des étiquettes (<label>) dans un formulaire HTML.

            {{EmbedInteractiveExample("pages/tabbed/fieldset.html", "tabbed-standard")}}
            @@ -24,13 +24,15 @@ browser-compat: html.elements.fieldset

            Cet élément prend en charge les attributs universels.

            -
            disabled
            +
            disabled
            Si cet attribut booléen est utilisé, les contrôles de formulaires des éléments descendants sont désactivés (ils ne peuvent pas être édités). Bien qu'ils ne soient pas éditables, les données de ces contrôles seront envoyées avec le formulaire. Ces contrôles ne recevront pas les évènements liés à la navigation (tels que ceux liés aux clics ou au focus). La plupart du temps, ces contrôles désactivés apparaissent comme grisés. On notera que les éléments de formulaires au sein de l'élément <legend> ne seront pas désactivés.
            -
            form
            +
            form
            La valeur de cet attribut correspond à la valeur de l'attribut id de l'élément <form> auquel il est rattaché. La valeur par défaut est l'identifiant du plus proche élément <form> dont l'élément <fieldset> est le descendant. Attention, cet attribut peut être source de confusion, tout élément <input> contenu au sein du <fieldset> et qui devra être associé au formulaire devra également avoir l'attribut form explicitement défini. En JavaScript, on pourra utiliser la propriété HTMLFormElement.elements pour vérifier le bon rattachement des éléments au formulaire.
            -
            name
            -
            Le nom associé au groupe. -
            Note : L'étiquette du groupe de contrôle est donné par le premier élément enfant <legend> du <fieldset>.
            +
            name
            +

            Le nom associé au groupe.

            +
            +

            Note : L'étiquette du groupe de contrôle est donné par le premier élément enfant <legend> du <fieldset>.

            +
            diff --git a/files/fr/web/html/element/figcaption/index.html b/files/fr/web/html/element/figcaption/index.html index d7e245b9ed..4c7d730f26 100644 --- a/files/fr/web/html/element/figcaption/index.html +++ b/files/fr/web/html/element/figcaption/index.html @@ -11,7 +11,7 @@ browser-compat: html.elements.figcaption ---
            {{HTMLRef}}
            -

            L'élément HTML <figcaption> représente une légende décrivant le reste du contenu de son élément parent <figure>.

            +

            L'élément HTML <figcaption> représente une légende décrivant le reste du contenu de son élément parent <figure>.

            {{EmbedInteractiveExample("pages/tabbed/figcaption.html","tabbed-shorter")}}
            diff --git a/files/fr/web/html/element/figure/index.html b/files/fr/web/html/element/figure/index.html index 7ab8953ba1..9c53dbb174 100644 --- a/files/fr/web/html/element/figure/index.html +++ b/files/fr/web/html/element/figure/index.html @@ -14,7 +14,7 @@ browser-compat: html.elements.figure ---
            {{HTMLRef}}
            -

            L'élément HTML <figure> représente un contenu autonome, éventuellement accompagné d'une légende facultative, qui est spécifiée à l'aide de l'élément <figcaption>. La figure, sa légende et son contenu sont référencés comme une seule unité.

            +

            L'élément HTML <figure> représente un contenu autonome, éventuellement accompagné d'une légende facultative, qui est spécifiée à l'aide de l'élément <figcaption>. La figure, sa légende et son contenu sont référencés comme une seule unité.

            {{EmbedInteractiveExample("pages/tabbed/figure.html","tabbed-shorter")}}
            diff --git a/files/fr/web/html/element/font/index.html b/files/fr/web/html/element/font/index.html index bbb5f2386f..599305edf9 100644 --- a/files/fr/web/html/element/font/index.html +++ b/files/fr/web/html/element/font/index.html @@ -12,17 +12,14 @@ browser-compat: html.elements.font ---
            {{HTMLRef}}
            -
            -

            Obsolète

            -

            Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la prendre en charge, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications web l'utilisant peuvent cesser de fonctionner à tout moment.

            +
            +

            Attention : Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la prendre en charge, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications web l'utilisant peuvent cesser de fonctionner à tout moment.

            L'élément HTML <font> définit la taille, la couleur et la police de son contenu.

            -
            -

            Note d'utilisation :

            - -

            Ne pas utiliser cet élément ! Bien qu'il ait été normalisé en HTML 3.2, il a été déprécié en HTML 4.01, en même temps que tous les éléments liés uniquement au style, puis rendu obsolète en HTML5.

            +
            +

            Attention : Ne pas utiliser cet élément ! Bien qu'il ait été normalisé en HTML 3.2, il a été déprécié en HTML 4.01, en même temps que tous les éléments liés uniquement au style, puis rendu obsolète en HTML5.

            À partir de HTML 4, HTML ne véhicule plus d'informations de style (en dehors de l'élément <style> ou de l'attribut style de chaque élément). Pour tout nouveau développement web, le style doit être écrit en utilisant le CSS uniquement.

            @@ -34,11 +31,11 @@ browser-compat: html.elements.font

            Comme tous les autres éléments HTML, cet élément prend en charge les attributs universels.

            -
            color
            +
            color
            Cet attribut définit la couleur du texte en utilisant soit une couleur nommée, soit une couleur indiquée par le format hexadécimal #RRGGBB.
            -
            face
            +
            face
            Cet attribut contient une liste d'une ou plusieurs polices, séparées par des virgules. Le texte est affiché avec la première police que le navigateur supporte. Si aucune des polices listées n'est installée sur le système, le navigateur prend habituellement la police proportionnelle, ou à taille fixe par défaut, du système.
            -
            size
            +
            size
            Cet attribut indique la taille du texte par une valeur numérique ou relative. Les valeurs numériques vont de 1 à 7, 1 étant la plus petite taille et 3 la taille par défaut. Il peut être défini en utilisant une valeur relative, comme +2 ou -3, qui est relative par rapport à la valeur de l'attribut size de l'élément <basefont>, ou relatif à 3, la valeur par défaut, si aucune existe.
            diff --git a/files/fr/web/html/element/footer/index.html b/files/fr/web/html/element/footer/index.html index 1424e9896b..f07e3cef1e 100644 --- a/files/fr/web/html/element/footer/index.html +++ b/files/fr/web/html/element/footer/index.html @@ -88,5 +88,5 @@ browser-compat: html.elements.footer diff --git a/files/fr/web/html/element/form/index.html b/files/fr/web/html/element/form/index.html index e3817ff92a..2f9a5d0ac6 100644 --- a/files/fr/web/html/element/form/index.html +++ b/files/fr/web/html/element/form/index.html @@ -15,7 +15,7 @@ browser-compat: html.elements.form ---
            {{HTMLRef}}
            -

            L'élément HTML <form> représente un formulaire, c'est-à-dire une section d'un document qui contient des contrôles interactifs permettant à un utilisateur de fournir des informations.

            +

            L'élément HTML <form> représente un formulaire, c'est-à-dire une section d'un document qui contient des contrôles interactifs permettant à un utilisateur de fournir des informations.

            {{EmbedInteractiveExample("pages/tabbed/form.html", "tabbed-standard")}}
            @@ -59,17 +59,16 @@ browser-compat: html.elements.form

            Cet élément prend en charge les attributs universels.

            -
            accept {{deprecated_inline}}
            +
            accept {{deprecated_inline}}
            Cet attribut indique quels types de contenus sont acceptés par le serveur. Il peut y en avoir plusieurs, séparés par des virgules. -
            -

            Note :

            -

            Cet attribut a été retiré dans HTML5 et ne doit plus être utilisé. À la place, il faut utiliser l'attribut accept de l'élément <input type=file>.

            +
            +

            Note :Cet attribut a été retiré dans HTML5 et ne doit plus être utilisé. À la place, il faut utiliser l'attribut accept de l'élément <input type=file>.

            -
            accept-charset
            +
            accept-charset
            Encodages de caractères séparés par des espaces que le serveur accepte. Le navigateur les utilise dans l'ordre dans lequel ils sont listés. La valeur par défaut signifie le même encodage que celui de la page.
            (Dans les versions précédentes de HTML, les codages de caractères pouvaient également être délimités par des virgules).
            -
            autocapitalize {{non-standard_inline}}
            +
            autocapitalize {{non-standard_inline}}
            Cet attribut est un attribut non-standard utilisé sur iOS par Safari Mobile qui contrôle la façon dont la valeur du texte est automatiquement transcrite en majuscules lors de la saisie par l'utilisateur. Si l'attribut autocapitalize est défini sur un des descendants du formulaire, il surchargera la valeur de autocapitalize utilisée pour le formulaire. Les valeurs non-dépréciées sont disponibles pour iOS 5 et supérieurs. La valeur par défaut est sentences. Les valeurs possibles sont:
            • none : La mise en majuscules est totalement désactivée
            • @@ -78,17 +77,17 @@ browser-compat: html.elements.form
            • characters : Tous les caractères sont automatiquement passés en majuscules.
            -
            autocomplete
            +
            autocomplete
            Cet attribut énuméré est utilisé pour définir le comportement du navigateur quant à l'autocomplétion des champs. Cet attribut peut être surchargé par chacun des éléments du formulaire. Il peut prendre deux valeurs :
            • off : Le navigateur ne peut pas compléter automatiquement les entrées. (Les navigateurs ont tendance à ignorer ce point pour les formulaires de connexion suspects ; voir L'attribut autocomplete et les champs de connexion.)
            • on : Le navigateur peut compléter automatiquement les entrées.
            -
            name
            +
            name
            Le nom du formulaire. Il doit être unique parmi tous les formulaires d'un document, et ne doit pas être une chaîne de caractères vide.
            -
            rel
            -
            Crée un hyperlien ou une annotation en fonction de la valeur, voir l'attribut rel pour plus de détails.
            +
            rel
            +
            Crée un hyperlien ou une annotation en fonction de la valeur, voir l'attribut rel pour plus de détails.

            Attributs pour l'envoi de formulaires

            @@ -96,9 +95,9 @@ browser-compat: html.elements.form

            Les attributs suivants contrôlent le comportement pendant l'envoi du formulaire.

            -
            action
            +
            action
            L'URL qui traite l'envoi du formulaire. Cette valeur peut être remplacée par un attribut formaction sur un <button>, <input type="submit">, ou <input type="image">.
            -
            enctype
            +
            enctype
            Lorsque la valeur de l'attribut method est post, cet attribut définit le type MIME qui sera utilisé pour encoder les données envoyées au serveur. C'est un attribut énuméré qui peut prendre les valeurs suivantes :
            -
            method
            +
            method
            Cet attribut définit la méthode HTTP qui sera utilisée pour envoyer les données au serveur. C'est un attribut énuméré qui peut prendre les valeurs suivantes :
            -
            novalidate
            +
            novalidate
            Cet attribut booléen indique si le formulaire doit être validé au moment de sa soumission. S'il n'est pas défini, le formulaire sera validé lors de sa soumission. Il peut être surchargé par l'attribut formnovalidate des éléments <button> ou <input> appartenant au formulaire.
            -
            target
            +
            target
            Un nom ou un mot-clé indiquant où afficher la réponse après avoir envoyé le formulaire. Dans HTML 4, c'est le nom, ou le mot-clé, d'une frame. Dans HTML5, c'est le nom, ou le mot-clé, d'un contexte de navigation (onglet, fenêtre, frame). Les mots-clés suivants ont un sens particulier :
            • _self (par défaut) : Charger dans le même contexte de navigation que le contexte actuel.
            • @@ -130,9 +129,8 @@ browser-compat: html.elements.form

            Cette valeur peut être remplacée par un attribut formtarget sur un <button>, <input type="submit">, ou <input type="image">.

            -
            -

            Note :

            -

            La définition de target="_blank" sur les éléments <form> fournit implicitement le même comportement rel que la définition de rel="noopener" qui ne définit pas window.opener.

            +
            +

            Note :La définition de target="_blank" sur les éléments <form> fournit implicitement le même comportement rel que la définition de rel="noopener" qui ne définit pas window.opener.

            diff --git a/files/fr/web/html/element/frame/index.html b/files/fr/web/html/element/frame/index.html index af1e94d6a3..00b383057d 100644 --- a/files/fr/web/html/element/frame/index.html +++ b/files/fr/web/html/element/frame/index.html @@ -12,9 +12,8 @@ browser-compat: html.elements.frame ---
            {{HTMLRef}}
            -
            -

            Obsolète

            -

            Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la supporter, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications web l'utilisant peuvent cesser de fonctionner à tout moment.

            +
            +

            Attention : Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la supporter, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications web l'utilisant peuvent cesser de fonctionner à tout moment.

            L'élément HTML <frame> définit une zone particulière dans laquelle un autre document HTML est affiché. Une <frame> (un « cadre ») doit être utilisée dans un élément <frameset>.

            @@ -26,19 +25,19 @@ browser-compat: html.elements.frame

            Comme tous les autres éléments HTML, cet élément prend en charge les attributs universels.

            -
            src
            +
            src
            Cet attribut indique le document qui doit être affiché dans la frame.
            -
            name
            +
            name
            Cet attribut sert à nommer les frames. Sans nommage, tous les liens seront ouverts dans la frame où ils se trouvent. Voir target pour plus d'informations.
            -
            noresize
            +
            noresize
            Cet attribut empêche aux utilisateurs de redimensionner les frames.
            -
            scrolling
            +
            scrolling
            Cet attribut définit l'existence des barres de défilement. Si cet attribut n'est pas utilisé, le navigateur mettre une barre de défilement si nécessaire. Il y a deux options : yes pour afficher les barres de défilement même quand ce n'est pas nécessaire, et no pour ne pas afficher les barres de défilement même quand c'est nécessaire.
            -
            marginheight
            +
            marginheight
            Cet attribut définit la hauteur des marges entre les frames.
            -
            marginwidth
            +
            marginwidth
            Cet attribut définit la largeur des marges entre les frames.
            -
            frameborder
            +
            frameborder
            Cet attribut permet de mettre des bordures à la frame.
            diff --git a/files/fr/web/html/element/frameset/index.html b/files/fr/web/html/element/frameset/index.html index f8674ebce1..33576fbbfb 100644 --- a/files/fr/web/html/element/frameset/index.html +++ b/files/fr/web/html/element/frameset/index.html @@ -12,16 +12,14 @@ browser-compat: html.elements.frameset ---
            {{HTMLRef}}
            -
            -

            Obsolète

            -

            Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la prendre en charge, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications web l'utilisant peuvent cesser de fonctionner à tout moment.

            +
            +

            Attention : Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la prendre en charge, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications web l'utilisant peuvent cesser de fonctionner à tout moment.

            L'élément HTML <frameset> est utilisé pour contenir les éléments <frame>.

            -
            -

            Note :

            -

            L'utilisation de cadres étant désormais déconseillée au profit de l'utilisation de <iframe>, cet élément n'est généralement pas utilisé par les sites web modernes.

            +
            +

            Note :L'utilisation de cadres étant désormais déconseillée au profit de l'utilisation de <iframe>, cet élément n'est généralement pas utilisé par les sites web modernes.

            Attributs

            @@ -29,9 +27,9 @@ browser-compat: html.elements.frameset

            Comme tous les autres éléments HTML, cet élément prend en charge les attributs universels.

            -
            cols
            +
            cols
            Cet attribut définit le nombre et la taille des espaces horizontaux dans un <frameset>.
            -
            rows
            +
            rows
            Cet attribut définit le nombre et la taille des espaces verticaux dans un <frameset>.
            diff --git a/files/fr/web/html/element/header/index.html b/files/fr/web/html/element/header/index.html index 09f3376e63..b03ea5384e 100644 --- a/files/fr/web/html/element/header/index.html +++ b/files/fr/web/html/element/header/index.html @@ -14,8 +14,6 @@ translation_of: Web/HTML/Element/header
            {{EmbedInteractiveExample("pages/tabbed/header.html", "tabbed-standard")}}
            - -
            diff --git a/files/fr/web/html/element/heading_elements/index.html b/files/fr/web/html/element/heading_elements/index.html index 1d228caef2..f659ec97d0 100644 --- a/files/fr/web/html/element/heading_elements/index.html +++ b/files/fr/web/html/element/heading_elements/index.html @@ -14,8 +14,6 @@ translation_of: Web/HTML/Element/Heading_Elements
            {{EmbedInteractiveExample("pages/tabbed/h1-h6.html", "tabbed-standard")}}
            - -

            Attributs

            Ces éléments acceptent uniquement les attributs universels (communs à l'ensemble des éléments).

            @@ -39,7 +37,7 @@ translation_of: Web/HTML/Element/Heading_Elements

            HTML

            -
            <h1>Titre de niveau 1</h1>
            +
            <h1>Titre de niveau 1</h1>
             <h2>Titre de niveau 2</h2>
             <h3>Titre de niveau 3</h3>
             <h4>Titre de niveau 4</h4>
            @@ -55,7 +53,7 @@ translation_of: Web/HTML/Element/Heading_Elements
             
             

            HTML

            -
            <h1>Élément de titre</h1>
            +
            <h1>Élément de titre</h1>
             <h2>Présentation</h2>
             <p>Du texte...</p>
             
            @@ -82,14 +80,14 @@ translation_of: Web/HTML/Element/Heading_Elements
             
             

            Mauvaises pratiques

            -
            <h1>Heading level 1</h1>
            +
            <h1>Heading level 1</h1>
             <h3>Heading level 3</h3>
             <h4>Heading level 4</h4>
             

            Bonnes pratiques

            -
            <h1>Heading level 1</h1>
            +
            <h1>Heading level 1</h1>
             <h2>Heading level 2</h2>
             <h3>Heading level 3</h3>
             
            @@ -153,7 +151,7 @@ translation_of: Web/HTML/Element/Heading_Elements

            Exemple

            -
            <header>
            +
            <header>
               <nav aria-labelledby="primary-navigation">
                 <h2 id="primary-navigation">Outils de navigation</h2>
                 <!-- éléments relatifs à la navigation -->
            diff --git a/files/fr/web/html/element/hgroup/index.html b/files/fr/web/html/element/hgroup/index.html
            index a7e93d9d4e..517aa07981 100644
            --- a/files/fr/web/html/element/hgroup/index.html
            +++ b/files/fr/web/html/element/hgroup/index.html
            @@ -14,9 +14,6 @@ translation_of: Web/HTML/Element/hgroup
             
             
            {{EmbedInteractiveExample("pages/tabbed/hgroup.html", "tabbed-standard")}}
            - - -

            Attributs

            Cet élément inclut uniquement les attributs universels.

            @@ -60,13 +57,13 @@ translation_of: Web/HTML/Element/hgroup

            Le rendu de ce document pourrait être :

            -

            +

            Où on voit que le titre principal est suivi de deux points puis d'un espace avant le titre secondaire, Living Standard — Last Updated 12 August 2016.

            On pourrait également avoir cet affichage :

            -

            Rendered outline that includes an <hgroup> element, with parens around the secondary heading

            +

            Plan rendu en incluant un élément <hgroup>, avec des parenthèses autour du titre secondaire

            Ici, le titre secondaire est placé entre parenthèses après le titre principal.

            @@ -140,5 +137,5 @@ translation_of: Web/HTML/Element/hgroup
            • Les autres éléments HTML relatifs aux sections du document : {{HTMLElement("body")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}}
            • -
            • Les sections et le plan d'un document HTML5
            • +
            • Les sections et le plan d'un document HTML5
            diff --git a/files/fr/web/html/element/hr/index.html b/files/fr/web/html/element/hr/index.html index d92044e920..d29d2b3bb1 100644 --- a/files/fr/web/html/element/hr/index.html +++ b/files/fr/web/html/element/hr/index.html @@ -14,8 +14,6 @@ translation_of: Web/HTML/Element/hr
            {{EmbedInteractiveExample("pages/tabbed/hr.html", "tabbed-shorter")}}
            - -

            Dans les versions précédentes d'HTML, il représente une ligne horizontale. Bien qu'il puisse toujours être représenté ainsi par les navigateurs graphiques, il possède désormais une signification sémantique et ne représente plus un élément de mise en forme.

            Attributs

            diff --git a/files/fr/web/html/element/i/index.html b/files/fr/web/html/element/i/index.html index e9547c1865..8307b0f26c 100644 --- a/files/fr/web/html/element/i/index.html +++ b/files/fr/web/html/element/i/index.html @@ -14,8 +14,6 @@ translation_of: Web/HTML/Element/i
            {{EmbedInteractiveExample("pages/tabbed/i.html", "tabbed-shorter")}}
            - -

            Attributs

            Cet élément possède uniquement les attributs universels.

            diff --git a/files/fr/web/html/element/iframe/index.html b/files/fr/web/html/element/iframe/index.html index 1e7c45a210..041dfcbb65 100644 --- a/files/fr/web/html/element/iframe/index.html +++ b/files/fr/web/html/element/iframe/index.html @@ -25,8 +25,8 @@ browser-compat: html.elements.iframe

            Chaque contexte de navigation possède son propre historique et son propre document actif. Le contexte de navigation qui contient le contenu intégré est appelé « contexte de navigation parent ». Le contexte de navigation le plus élevé (qui n'a pas de contexte parent) correspond généralement à la fenêtre du navigateur (cf. Window).

            -
            -

            Chaque contexte de navigation créé par un élément <iframe> représente un document à part entière et cela peut donc augmenter les ressources nécessaires à l'utilisation de la page. Aussi, bien qu'en théorie on puisse ajouter autant d'iframes que possible sur autant de niveaux d'imbrication que voulus, on gardera à l'esprit que cela peut nuire aux performances.

            +
            +

            Attention : Chaque contexte de navigation créé par un élément <iframe> représente un document à part entière et cela peut donc augmenter les ressources nécessaires à l'utilisation de la page. Aussi, bien qu'en théorie on puisse ajouter autant d'iframes que possible sur autant de niveaux d'imbrication que voulus, on gardera à l'esprit que cela peut nuire aux performances.

            @@ -67,36 +67,34 @@ browser-compat: html.elements.iframe

            Cet élément prend en charge les attributs universels.

            -
            allow
            +
            allow
            L'attribut allow permet de définir une politique de fonctionnalité pour l'iframe. Cette politique définit les fonctionnalités disponibles au sein de l'iframe selon l'origine de la requête (les fonctionnalités peuvent être l'accès au micro, à la caméra, aux informations de batterie, etc.). Pour plus d'informations, voir l'article sur l'utilisation de Feature-Policy.
            -
            allowfullscreen
            +
            allowfullscreen
            Cet attribut, lorsqu'il vaut true, indique que l'iframe intégrée peut être passée en plein écran via la méthodeElement.requestFullscreen(). -
            -

            Note :

            -

            Cet attribut est considéré comme historique et a été redéfini avec allow="fullscreen".

            +
            +

            Note :Cet attribut est considéré comme historique et a été redéfini avec allow="fullscreen".

            -
            allowpaymentrequest
            +
            allowpaymentrequest
            Cet attribut, lorsqu'il vaut true, permet à l'iframe intégrée d'appeler l'API Payment Request. -
            -

            Note :

            -

            Cet attribut est considéré comme historique et a été redéfini avec allow="payment".

            +
            +

            Note :Cet attribut est considéré comme historique et a été redéfini avec allow="payment".

            -
            csp {{experimental_inline}}
            +
            csp {{experimental_inline}}
            L'attribut csp définit la politique de sécurité du contenu que le document intégré doit respecter. Voir HTMLIFrameElement.csp pour plus de détails.
            -
            height
            +
            height
            Cet attribut définit la hauteur du cadre en pixels CSS. La valeur par défaut est 150.
            -
            loading {{experimental_inline}}
            +
            loading {{experimental_inline}}
            Cet attribut indique la façon dont le navigateur devrait charger l'iframe :
            • eager : L'iframe doit être chargée immédiatement, même si elle n'est pas dans la zone d'affichage (viewport) visible. C'est la valeur par défaut.
            • lazy : Le chargement de l'iframe est retardé jusqu'à ce que celle-ci atteigne une distance donnée du viewport, définie par le navigateur.
            -
            name
            +
            name
            Un nom pour le contexte de navigation (ou la frame). Ce nom peut être utilisé comme la valeur de l'attribut target (cible) d'un élément <a> ou <form> (formulaire) ou comme valeur de l'attribut formtarget d'un élément <input> (entrée) ou <button> (bouton). Il peut également être utilisé comme valeur pour le paramètre windowName de la méthode window.open().
            -
            referrerpolicy
            +
            referrerpolicy
            Une chaîne de caractères qui indique le référent (referrer) à utiliser lors de la récupération de la ressource :
            • no-referrer signifie que l'en-tête Referer ne sera pas envoyé.
            • @@ -109,7 +107,7 @@ browser-compat: html.elements.iframe
            • unsafe-url signifie que le référent inclura l'origine et le chemin (mais pas le fragment, le mot de passe ou le nom utilisateur). Cette valeur n'est pas sûre, car elle peut entraîner des fuites d'origine ou de chemin provenant de ressources sécurisées avec TLS vers des origines non sécurisées.
            -
            sandbox
            +
            sandbox
            Cet attribut permet d'appliquer des restrictions sur le contenu qui peut apparaître dans l'iframe. Si cet attribut vaut la chaîne de caractères vide, toutes les restrictions sont appliquées, sinon, on peut utiliser une liste de mots-clés séparés par des espaces pour définir des restrictions précises. Les mots-clés qui peuvent être utilisés sont :
            • allow-downloads-without-user-activation {{experimental_inline}} : permet aux téléchargements d'avoir lieu sans un signe de l'utilisateur.
            • @@ -127,8 +125,8 @@ browser-compat: html.elements.iframe
            • allow-top-navigation : le contexte de navigation peut charger du contenu depuis le contexte de navigation de plus haut niveau. Si ce mot-clé est absent, cette opération n'est pas autorisée.
            • allow-top-navigation-by-user-activation : le contexte de navigation peut charger du contenu depuis le contexte de plus haut niveau uniquement si l'action provient de l'utilisateur. Si ce mot-clé est absent, cette opération n'est pas autorisée.
            -
            -

            Notes :

            +
            +

            Note :

            • Lorsque le document intégré possède la même origine que la page principale, il est fortement déconseillé d'employer allow-scripts et allow-same-origin simultanément, car cela permet de retirer l'attribut sandbox via un programme, c'est donc aussi sûr que de ne pas utiliser l'attribut sandbox.
            • La mise en bac à sable (sandboxing) est d'une aide minime si un attaquant peut faire en sorte qu'un contenu potentiellement hostile soit affiché dans le navigateur de l'utilisateur en dehors d'un iframe sous sandbox. Aussi, il est recommandé de diffuser le contenu depuis un domaine dédié séparé, afin de limiter les éventuels dommages.
            • @@ -136,28 +134,28 @@ browser-compat: html.elements.iframe
            -
            src
            +
            src
            L'URL de la page qu'on souhaite intégrer. On pourra utiliser about:blank pour les pages vides afin de respecter les règles de même origine (Same-Origin Policy). On notera également que retirer l'attribut src d'un élément <iframe> à l'aide d'un script (par exemple avec Element.removeAttribute()) provoquera le chargement de about:blank dans la frame pour Firefox à partir de la version 65, pour les navigateurs basés sur Chromium ainsi que pour Safari.
            -
            srcdoc
            +
            srcdoc
            Le contenu de la page qu'on souhaite intégrer dans le contexte de navigation et qui surcharge celui indiqué par src.
            -
            width
            +
            width
            Cet attribut indique la largeur de l'iframe en pixels CSS. Par défaut, cet attribut vaut 300.

            Attributs dépréciés

            -
            align {{deprecated_inline}}
            +
            align {{deprecated_inline}}
            Cet attribut obsolète permettait de définir l'alignement de l'iframe par rapport à son contexte englobant.
            -
            frameborder {{deprecated_inline}}
            +
            frameborder {{deprecated_inline}}
            Lorsqu'il vaut 1 (la valeur par défaut), cet attribut indique au navigateur de définir une bordure entre ce cadre et tout autre cadre. Lorsqu'il vaut 0, aucune bordure n'est dessinée. Plutôt que cet attribut, on utilisera la propriété CSS border pour dessiner la bordure autour d'une iframe.
            -
            longdesc {{deprecated_inline}}
            +
            longdesc {{deprecated_inline}}
            Un URI vers une description détaillée du cadre. En raison d'un mauvais usage, cet attribut n'est pas utile pour les navigateurs non-visuels.
            -
            marginheight {{deprecated_inline}}
            +
            marginheight {{deprecated_inline}}
            L'espace, exprimé en pixels, entre le contenu du cadre et ses marges haute et basse.
            -
            marginwidth {{deprecated_inline}}
            +
            marginwidth {{deprecated_inline}}
            L'espace, exprimé en pixels, entre le contenu du cadre et ses marges gauche et droite.
            -
            scrolling {{deprecated_inline}}
            +
            scrolling {{deprecated_inline}}
            Un attribut à valeur contrainte qui indique si le navigateur doit afficher une barre de défilement (ou tout autre moyen de défilement) pour le cadre :
            • auto : la barre de défilement est uniquement affichée lorsque c'est nécessaire.
            • @@ -170,7 +168,7 @@ browser-compat: html.elements.iframe

              Attributs non-standard {{non-standard_inline}}

              -
              mozbrowser {{non-standard_inline}}
              +
              mozbrowser {{non-standard_inline}}
              Cet attribut est uniquement disponible pour les WebExtensions. L'iframe se comporte comme une fenêtre de navigateur de plus haut niveau. Voir le bug 1318532 quant à l'exposition de cet attribut dans Firefox.
              diff --git a/files/fr/web/html/element/image/index.html b/files/fr/web/html/element/image/index.html index 66ff034ac2..086e6a1f93 100644 --- a/files/fr/web/html/element/image/index.html +++ b/files/fr/web/html/element/image/index.html @@ -14,7 +14,7 @@ translation_of: Web/HTML/Element/image

              L'élément HTML <image> est un élément obsolète, remplacé depuis longtemps par l'élément standard {{HTMLElement("img")}}.

              -

              Attention ! Si vous souhaitez afficher des images, c'est l'élément {{HTMLElement("img")}} qui doit être utilisé.

              +

              Attention : Si vous souhaitez afficher des images, c'est l'élément {{HTMLElement("img")}} qui doit être utilisé.

              Bien que les navigateurs essaient de convertir cet élément {{HTMLElement("img")}}, cela peut avoir des résultats incertains voire inattendus.

              diff --git a/files/fr/web/html/element/img/index.html b/files/fr/web/html/element/img/index.html index c166e8371d..35508bb966 100644 --- a/files/fr/web/html/element/img/index.html +++ b/files/fr/web/html/element/img/index.html @@ -49,9 +49,8 @@ browser-compat: html.elements.img

              {{page("/fr/docs/Web/Media/Formats/Types_des_images", "table-of-image-file-types")}}

              -
              -

              Astuce :

              -

              Voir le Guide des types et formats de fichiers image pour des informations plus complètes sur les formats d'image pris en charge par les navigateurs web. Cela inclut les formats d'image pris en charge mais non recommandés pour le contenu web (par exemple, ICO, BMP, etc.).

              +
              +

              Note : Voir le Guide des types et formats de fichiers image pour des informations plus complètes sur les formats d'image pris en charge par les navigateurs web. Cela inclut les formats d'image pris en charge mais non recommandés pour le contenu web (par exemple, ICO, BMP, etc.).

              Erreurs de chargement des images

              @@ -71,10 +70,10 @@ browser-compat: html.elements.img

              Cet élément inclut les attributs globaux.

              -
              alt
              +
              alt
              Cet attribut définit le texte alternatif utilisé lorsqu'il est impossible d'afficher l'image (par exemple si l'URL est incorrecte ou si l'image n'est pas encore téléchargée). -
              -

              Note :

              +
              +

              Note :

              Les navigateurs n'affichent pas toujours les images. Il existe un certain nombre de situations dans lesquelles un navigateur peut ne pas afficher les images, par exemple :

              • Navigateurs non visuels (tels que ceux utilisés par les personnes souffrant de déficiences visuelles)
              • @@ -89,7 +88,7 @@ browser-compat: html.elements.img

                Cet attribut est également utilisé pour copier et coller l'image dans du texte, ou pour enregistrer une image liée dans un signet.

              -
              crossorigin
              +
              crossorigin

              Indique si la récupération de l'image doit être effectuée à l'aide d'une requête CORS. Les données d'image d'une image compatible avec le système CORS renvoyées par une requête CORS peuvent être réutilisées dans l'élément <canvas> sans être marquées « corrompu ».

              @@ -106,7 +105,7 @@ browser-compat: html.elements.img
              Une requête entre deux origines est effectuée (avec l'en-tête Origin) avec des informations d'authentification qui sont envoyées (par exemple un cookie, un certificat et une authentification HTTP). Si le serveur ne fournit pas d'informations d'authentification au site d'origine (via l'en-tête HTTP Access-Control-Allow-Origin), l'image sera corrompue et son utilisation sera restreinte.
              Lorsque cet attribut est absent, la ressource est récupérée sans requête CORS (c'est-à-dire sans envoyer l'en-tête HTTP origin) ce qui empêche de l'utiliser dans un <canvas> sans qu'elle soit considérée comme corrompue. Si la valeur de l'attribut est invalide, elle sera considérée comme anonymous. Voir la page réglage des attributs CORS pour plus d'informations.
            -
            decoding
            +
            decoding

            Cet attribut fournit une indication à l'agent utilisateur pour le décodage de l'information. Les valeurs possibles sont :

            @@ -118,30 +117,28 @@ browser-compat: html.elements.img
            Le mode par défaut qui indique l'absence de préférence pour le mode de décodage. Dans ce cas, l'agent utilisateur décide de la meilleure stratégie.
            -
            height
            +
            height
            La hauteur intrinsèque de l'image, en pixels. Doit être un nombre entier sans unité.
            -
            intrinsicsize {{deprecated_inline}}
            +
            intrinsicsize {{deprecated_inline}}
            Cet attribut indique au navigateur d'ignorer la taille intrinsèque réelle de l'image et d'utiliser la taille fournie par les attributs. La matrice contenant l'image aurait donc ces dimensions et calculer naturalWidth/naturalHeight sur de telles images renverrait les valeurs de cet attribut. Explications, exemples.
            -
            ismap
            +
            ismap
            Un attribut booléen dont la valeur indique si l'image fait partie d'une carte cliquable. Si c'est le cas, les coordonnées du clic seront envoyées au serveur. -
            -

            Note :

            -

            Cet attribut est uniquement autorisé si l'élément <img> descend d'un élément <a> dont l'attribut href est valide.

            +
            +

            Note :Cet attribut est uniquement autorisé si l'élément <img> descend d'un élément <a> dont l'attribut href est valide.

            -
            loading {{experimental_inline}}
            +
            loading {{experimental_inline}}
            Indique comment le navigateur doit charger l'image :
            • eager : Charge l'image immédiatement, que l'image se trouve ou non dans le viewport visible (c'est la valeur par défaut).
            • lazy : Diffère le chargement de l'image au moment où elle atteint une certaine distance de la fenêtre de visualisation, telle que définie par le navigateur. Le but est d'éviter que le réseau et la zone de stockage nécessaires à la manipulation de l'image ne soient utilisés tant qu'il n'est pas relativement sûr que celle-ci sera nécessaire. Cela permet généralement d'améliorer les performances du contenu dans la plupart des cas d'utilisation typiques. -
              -

              Note :

              -

              Le chargement n'est différé que lorsque JavaScript est activé. Il s'agit d'une mesure anti-pistage, car si un agent utilisateur prenait en charge le chargement différé lorsque les scripts sont désactivés, il serait toujours possible pour un site de suivre la position de défilement approximative d'un utilisateur tout au long d'une session, en plaçant stratégiquement des images dans le balisage d'une page de sorte qu'un serveur puisse suivre le nombre d'images demandées et le moment où elles le sont.

              +
              +

              Note :Le chargement n'est différé que lorsque JavaScript est activé. Il s'agit d'une mesure anti-pistage, car si un agent utilisateur prenait en charge le chargement différé lorsque les scripts sont désactivés, il serait toujours possible pour un site de suivre la position de défilement approximative d'un utilisateur tout au long d'une session, en plaçant stratégiquement des images dans le balisage d'une page de sorte qu'un serveur puisse suivre le nombre d'images demandées et le moment où elles le sont.

            -
            referrerpolicy {{experimental_inline}}
            +
            referrerpolicy {{experimental_inline}}
            Une chaîne de caractères indiquant le référent à utiliser lors de la récupération de la ressource :
            • no-referrer : l'en-tête HTTP Referer ne sera pas envoyé.
            • @@ -151,7 +148,7 @@ browser-compat: html.elements.img
            • unsafe-url : l'en-tête HTTP Referer incluera l'origine et le chemin mais aucun fragment, mot de passe ou nom d'utilisateur. Ce cas de figure n'est pas sécurisé, car il peut laisser fuire des origines et des chemins de ressources protégées par TLS vers des origines non-sécurisées.
            -
            sizes
            +
            sizes
            Une ou plusieurs chaînes de caractères séparées par des virgules, indiquant un ensemble de tailles sources. Chaque taille source est composée de :
            1. D'une condition sur le média. Qui doit être absente pour le dernier élément de la liste.
            2. @@ -162,9 +159,9 @@ browser-compat: html.elements.img

              Les valeurs de taille de la source spécifient la taille d'affichage prévue de l'image. Les agents utilisateurs utilisent la taille actuelle de la source pour sélectionner l'une des sources fournies par l'attribut srcset, lorsque ces sources sont décrites à l'aide de descripteurs de largeur (w). La taille de la source sélectionnée affecte la taille intrinsèque de l'image (la taille d'affichage de l'image si aucun style CSS n'est appliqué). Si l'attribut srcset est absent, ou ne contient aucune valeur avec un descripteur de largeur, alors l'attribut sizes n'a aucun effet.

            -
            src
            +
            src
            L'URL de l'image. Cet attribut est obligatoire pour l'élément <img>. Pour les navigateurs qui prennent en charge srcset, src est considéré comme une image candidate dont la densité de pixel vaut 1x si aucune autre image avec cette densité n'est définie via srcset ou si srcset contient des descripteurs « w ».
            -
            srcset*
            +
            srcset*
            Une liste de une ou plusieurs chaînes de caractères, séparées par des virgules, qui indiquent un ensemble d'images sources parmi lequel l'agent utilisateur pourra choisir la meilleure image à afficher. Chaque chaîne de caractères se compose :
            1. D'une URL vers une image,
            2. @@ -182,13 +179,12 @@ browser-compat: html.elements.img

              L'agent utilisateur sélectionne l'une des sources disponibles à sa discrétion. Il dispose ainsi d'une marge de manœuvre importante pour adapter sa sélection en fonction de choses comme les préférences de l'utilisateur ou les conditions de bande passante. Voir notre Tutoriel sur les images responsives pour un exemple.

            -
            width
            +
            width
            La largeur intrinsèque de l'image en pixels. Doit être un nombre entier sans unité.
            -
            usemap
            +
            usemap
            Le fragment d'URL (commençant avec #) d'une carte d'images associée à cet élément.
            -

            Note :

            -

            Cet attribut ne peut pas être utilisé si l'élément <img> est un descendant d'un élément <a> ou d'un élément <button>.

            +

            Note :Cet attribut ne peut pas être utilisé si l'élément <img> est un descendant d'un élément <a> ou d'un élément <button>.

            @@ -196,9 +192,8 @@ browser-compat: html.elements.img

            Attributs obsolètes

            -
            align {{deprecated_inline}}
            -
            L'alignement de l'image selon le contexte qui l'entoure. En HTML5, on privilégiera les propriétés CSS float et/ou vertical-align voire la propriété object-position qui permet de positionner l'image au sein de la boîte de l'élément. Les valeurs autorisées sont :
            -
            +
            align {{deprecated_inline}}
            +

            L'alignement de l'image selon le contexte qui l'entoure. En HTML5, on privilégiera les propriétés CSS float et/ou vertical-align voire la propriété object-position qui permet de positionner l'image au sein de la boîte de l'élément. Les valeurs autorisées sont :

            top
            Équivalent à vertical-align: top; ou à vertical-align: text-top;
            @@ -212,20 +207,19 @@ browser-compat: html.elements.img
            Équivalent à float: right;
            -
            border {{deprecated_inline}}
            +
            border {{deprecated_inline}}
            La largeur d'une bordure autour de l'image. Utilisez plutôt la propriété CSS border.
            -
            hspace {{deprecated_inline}}
            +
            hspace {{deprecated_inline}}
            Le nombre de pixels blancs à insérer à droite et à gauche de l'image. En HTML5, on privilégiera la propriété CSS margin.
            -
            longdesc {{deprecated_inline}}
            -
            Un lien vers une description plus détaillée de l'image. Les valeurs possibles sont une URL ou un identifiant (id) d'un élément. -
            -

            Note :

            -

            Cet attribut est mentionné dans la dernière version du W3C, HTML 5.2, mais a été supprimé du HTML Living Standard du WHATWG. Son avenir est incertain ; les auteurs devraient utiliser une alternative WAI-ARIA telle que aria-describedby ou aria-details.

            +
            longdesc {{deprecated_inline}}
            +

            Un lien vers une description plus détaillée de l'image. Les valeurs possibles sont une URL ou un identifiant (id) d'un élément.

            +
            +

            Note :Cet attribut est mentionné dans la dernière version du W3C, HTML 5.2, mais a été supprimé du HTML Living Standard du WHATWG. Son avenir est incertain ; les auteurs devraient utiliser une alternative WAI-ARIA telle que aria-describedby ou aria-details.

            -
            name {{deprecated_inline}}
            +
            name {{deprecated_inline}}
            Un nom pour l'élément. Utilisez plutôt l'attribut id.
            -
            vspace {{deprecated_inline}}
            +
            vspace {{deprecated_inline}}
            Le nombre de pixels blancs à insérer en dessous et au-dessus de l'image. En HTML5, on privilégiera la propriété CSS margin.
            @@ -282,9 +276,8 @@ browser-compat: html.elements.img

            {{EmbedLiveSample("using_the_srcset_and_sizes_attributes", "100%", 450)}}

            -
            -

            Note :

            -

            Pour observer l'effet du redimensionnement, vous devrez consulter l'exemple sur une page séparée afin de pouvoir modifier la taille de la zone.

            +
            +

            Note :Pour observer l'effet du redimensionnement, vous devrez consulter l'exemple sur une page séparée afin de pouvoir modifier la taille de la zone.

            Sécurité et vie privée

            diff --git a/files/fr/web/html/element/index.html b/files/fr/web/html/element/index.html index 0f479e43f2..d07bd5c022 100644 --- a/files/fr/web/html/element/index.html +++ b/files/fr/web/html/element/index.html @@ -12,11 +12,10 @@ translation_of: Web/HTML/Element ---
            {{HTMLSidebar("Elements")}}
            -

            Cette page répertorie tous les éléments HTML, qui sont créés à l'aide de balises. Ils sont regroupés par fonction pour vous aider à trouver facilement ce que vous avez en tête. Une liste alphabétique de tous les éléments est fournie dans la barre latérale de la page de chaque élément ainsi que de celle-ci.

            +

            Cette page répertorie tous les éléments HTML, qui sont créés à l'aide de balises. Ils sont regroupés par fonction pour vous aider à trouver facilement ce que vous avez en tête. Une liste alphabétique de tous les éléments est fournie dans la barre latérale de la page de chaque élément ainsi que de celle-ci.

            -

            Note :

            -

            Pour plus d'informations sur les bases des éléments et attributs HTML, voir la section sur les éléments dans l'article Introduction au HTML.

            +

            Note :Pour plus d'informations sur les bases des éléments et attributs HTML, voir la section sur les éléments dans l'article Introduction au HTML.

            Racine principale

            @@ -61,13 +60,13 @@ translation_of: Web/HTML/Element

            En plus du contenu multimédia, un document HTML peut embarquer d'autres contenus (bien que les interactions soient plutôt limitées).

            -

            {{HTMLRefTable({"include":["HTML embedded content"], "exclude":["multimedia"]})}}

            +

            {{HTMLRefTable("multimedia")}}

            SVG et MathML

            Vous pouvez intégrer du contenu SVG et MathML directement dans des documents HTML, en utilisant les éléments <svg> et <math>.

            -
            +
            @@ -76,11 +75,11 @@ translation_of: Web/HTML/Element - + - + @@ -124,9 +123,8 @@ translation_of: Web/HTML/Element

            Éléments obsolètes ou dépréciés

            -
            -

            Attention :

            -

            Ces éléments sont d'anciens éléments HTML qui sont désormais dépréciés et qui ne devraient plus être utilisés. Ces éléments ne doivent pas être utilisés dans de nouveaux projets et doivent être remplacés dans les anciens projets dès que possible. Ces éléments uniquement sont listés ici à des fins d'information.

            +
            +

            Attention : Ces éléments sont d'anciens éléments HTML qui sont désormais dépréciés et qui ne devraient plus être utilisés. Ces éléments ne doivent pas être utilisés dans de nouveaux projets et doivent être remplacés dans les anciens projets dès que possible. Ces éléments uniquement sont listés ici à des fins d'information.

            -

            {{HTMLRefTable({"include":["Deprecated","Obsolete"]})}}

            +

            {{HTMLRefTable({"include":["Deprecated","Obsolete"]})}}

            \ No newline at end of file diff --git a/files/fr/web/html/element/input/button/index.html b/files/fr/web/html/element/input/button/index.html index f86eba3bcf..02a4e420e0 100644 --- a/files/fr/web/html/element/input/button/index.html +++ b/files/fr/web/html/element/input/button/index.html @@ -11,33 +11,29 @@ translation_of: Web/HTML/Element/input/button ---
            {{HTMLRef}}
            -

            Les éléments {{HTMLElement("input")}} de type button sont affichés comme des boutons poussoirs qui peuvent être programmés afin de contrôler des fonctionnalités de la page via un gestionnaire d'évènement (la plupart du temps pour l'évènement {{event("click")}}).

            +

            Les éléments {{HTMLElement("input")}} de type button sont affichés comme des boutons poussoirs qui peuvent être programmés afin de contrôler des fonctionnalités de la page via un gestionnaire d'évènement (la plupart du temps pour l'évènement {{event("click")}}).

            {{EmbedInteractiveExample("pages/tabbed/input-button.html", "tabbed-shorter")}}
            - -
            -

            Note : Bien que les éléments <input> de type "button" représentent toujours des éléments HTML valides, l'élément {{HTMLElement("button")}}, plus récent, est la meilleure méthode pour créer des boutons hors d'un formulaire. Il est aussi possible d'insérer des éléments HTML dans l'étiquette du bouton, ce qui permet notamment d'avoir des images.

            +

            Note : Bien que les éléments <input> de type "button" représentent toujours des éléments HTML valides, l'élément {{HTMLElement("button")}}, plus récent, est la meilleure méthode pour créer des boutons hors d'un formulaire. Il est aussi possible d'insérer des éléments HTML dans l'étiquette du bouton, ce qui permet notamment d'avoir des images.

            Valeur

            L'attribut {{htmlattrxref("value", "input")}} d'un t'el élément contient une chaîne de caractères qui est utilisée comme étiquette pour le bouton (autrement dit, comme texte affiché sur le bouton).

            -
            +

            Exemple 1

            <input type="button" value="Bouton cliquer">
            -
            -

            {{EmbedLiveSample("summary-example3", 650, 30)}}

            +

            {{EmbedLiveSample("Exemple_1", 650, 30)}}

            +

            Exemple 2

            Si on n'indique aucune valeur, le bouton sera vide :

            -
            <input type="button">
            -
            -

            {{EmbedLiveSample("summary-example1", 650, 30)}}

            +

            {{EmbedLiveSample("Exemple_2", 650, 30)}}

            Utiliser les boutons <input>

            @@ -77,7 +73,6 @@ function updateBtn() {

            Dans l'exemple qui suit, on définit s comme raccourci (autrement dit, il faudra appuyer sur la touche s avec une ou plusieurs touches supplémentaires qui dépendent du navigateur et du système d'exploitation, cf. accesskey pour la liste de ces touches).

            -
            <form>
               <input type="button" value="Démarrer la machine" accesskey="s">
             </form>
            @@ -85,8 +80,7 @@ function updateBtn() {
             
            -

            {{EmbedLiveSample("Ajouter_des_raccourcis_clavier", 650, 100)}}

            -

            Note : Un problème de cet exemple est que l'utilisateur ne saura pas quelle touche utiliser comme raccourci. Dans un cas concret, cette information serait affichée ou fournie via un lien simple d'accès qui décrirait les raccourcis disponibles.

            +

            Note : Un problème de cet exemple est que l'utilisateur ne saura pas quelle touche utiliser comme raccourci. Dans un cas concret, cette information serait affichée ou fournie via un lien simple d'accès qui décrirait les raccourcis disponibles.

            Désactiver et activer un bouton

            Pour désactiver un bouton, il suffit d'ajouter l'attribut universel {{htmlattrxref("disabled")}} :

            -
            <input type="button" value="Je suis désactivé" disabled>
            -

            Il est possible d'activer ou de désactiver des boutons lors de de l'utilisation de la page en modifiant l'attribut disabled de l'élément dans le DOM. Dans l'exemple qui suit, le bouton est initialement activé et si on appuie dessus : il devient désactivé (c'est ce que fait la ligne de code btn.disabled = true). La fonction {{domxref("WindowTimers.setTimeout","setTimeout()")}} est ensuite utilisée afin de réinitialiser le bouton après deux secondes.

            - -

            {{EmbedLiveSample("Hidden_code_1", 650, 60)}}

            +

            {{EmbedLiveSample("Exemple_1", 650, 60)}}

            Si l'attribut disabled n'est pas fourni, il est hérité depuis l'élément parent. De cette façon, on peut activer/désactiver des groupes d'éléments en les plaçant dans un conteneur (par exemple un élément {{HTMLElement("fieldset")}}) et en indiquant disabled sur le conteneur.

            C'est ce qu'illustre l'exemple suivant. Il est semblable à l'exemple précédent mais l'attribut  disabled est activé sur l'élément <fieldset> lorsqu'on appuie sur le premier bouton. Les trois autres boutons sont donc désactivés pendant deux secondes.

            - -

            {{EmbedLiveSample("Hidden_code_2", 650, 60)}}

            +

            {{EmbedLiveSample("Exemple_2", 650, 60)}}

            -

            Note : À la différence des autres navigateurs, Firefox conservera un état désactivé obtenu de façon dynamique lorsque la page est rechargée. L'attribut {{htmlattrxref("autocomplete","button")}} peut être utilisé afin de contrôler cette fonctionnalité.

            +

            Note : À la différence des autres navigateurs, Firefox conservera un état désactivé obtenu de façon dynamique lorsque la page est rechargée. L'attribut {{htmlattrxref("autocomplete","button")}} peut être utilisé afin de contrôler cette fonctionnalité.

            Validation

            @@ -190,8 +177,7 @@ function disableBtn() { <p>Votre navigateur ne semble pas prendre en charge cette fonctionnalité.</p> </canvas> -
            var canvas = document.querySelector('.myCanvas');
             var width = canvas.width = window.innerWidth;
            diff --git a/files/fr/web/html/element/input/checkbox/index.html b/files/fr/web/html/element/input/checkbox/index.html
            index 6961d790b7..a2e5726900 100644
            --- a/files/fr/web/html/element/input/checkbox/index.html
            +++ b/files/fr/web/html/element/input/checkbox/index.html
            @@ -15,17 +15,15 @@ translation_of: Web/HTML/Element/input/checkbox
             
             
            {{EmbedInteractiveExample("pages/tabbed/input-checkbox.html", "tabbed-standard")}}
            - -
            -

            Note : Les boutons radio sont semblables aux cases à cocher mais il existe une différence importante : les boutons radio permettent de sélectionner une seule valeur parmi plusieurs alors que les cases à cocher permettent de cocher/décocher plusieurs valeurs d'un groupe.

            +

            Note : Les boutons radio sont semblables aux cases à cocher mais il existe une différence importante : les boutons radio permettent de sélectionner une seule valeur parmi plusieurs alors que les cases à cocher permettent de cocher/décocher plusieurs valeurs d'un groupe.

            Valeur

            Une chaîne de caractères ({{domxref("DOMString")}}) qui représente la valeur de la case à cocher. Cette chaîne de caractères n'est pas affichée côté client mais est envoyée au serveur comme valeur associée à la donnée envoyée avec le nom de la case à cocher. Par exemple :

            -
            <form>
            +
            <form>
               <div>
                 <input type="checkbox" id="subscribeNews" name="subscribe" value="newsletter">
                 <label for="subscribeNews">Souhaitez-vous vous abonner à la newsletter ?</label>
            @@ -42,7 +40,7 @@ translation_of: Web/HTML/Element/input/checkbox
             

            Si l'attribut value n'était pas renseigné, la valeur par défaut sera on (dans l'exemple, les données envoyées au serveur auraient la forme subscribe=on).

            -

            Note : Si la case à cocher n'est pas cochée lorsque le formulaire est envoyé, aucune valeur n'est envoyée au serveur pour indiquer cet état (autrement dit, le client n'envoie pas quelque chose comme value=unchecked) ; la valeur n'est pas transmise au serveur du tout.

            +

            Note : Si la case à cocher n'est pas cochée lorsque le formulaire est envoyé, aucune valeur n'est envoyée au serveur pour indiquer cet état (autrement dit, le client n'envoie pas quelque chose comme value=unchecked) ; la valeur n'est pas transmise au serveur du tout.

            Attributs supplémentaires

            @@ -90,7 +88,7 @@ translation_of: Web/HTML/Element/input/checkbox

            Dans l'exemple qui suit, on affiche différentes cases à cocher pour représenter les intérets d'un utilisateur (voir l'exemple complet dans la section {{anch("Exemples")}}).

            -
            <fieldset>
            +
            <fieldset>
               <legend>Veuillez sélectionner vos intérêts :</legend>
               <div>
                 <input type="checkbox" id="coding" name="interest" value="coding">
            @@ -104,13 +102,13 @@ translation_of: Web/HTML/Element/input/checkbox
             
             

            {{EmbedLiveSample('Gérer_plusieurs_cases_à_cocher', 600, 100)}}

            -

            Dans cet exemple on voit que chaque case à cocher utilise le même attribut name. Si les deux cases sont cochées lorsque le formulaire est envoyé, la chaîne des paires nom/valeur qui sera envoyée au serveur sera : interest=coding&interest=music. Lorsque les données parviennent au serveur, on peut ainsi récupérer un tableau des valeurs sélctionnées (voir Gérer plusieurs cases à cocher avec une seule variable côté serveur par exemple).

            +

            Dans cet exemple on voit que chaque case à cocher utilise le même attribut name. Si les deux cases sont cochées lorsque le formulaire est envoyé, la chaîne des paires nom/valeur qui sera envoyée au serveur sera : interest=coding&interest=music. Lorsque les données parviennent au serveur, on peut ainsi récupérer un tableau des valeurs sélctionnées (voir Gérer plusieurs cases à cocher avec une seule variable côté serveur par exemple).

            Cocher certaines cases par défaut

            Afin qu'une case à cocher soit sélectionnée par défaut, il suffit de placer l'attribut booléen checked. Voir l'exemple qui suit :

            -
            <fieldset>
            +
            <fieldset>
               <legend>Veuillez sélectionner vos intérêts</legend>
               <div>
                 <input type="checkbox" id="coding" name="interest" value="coding" checked>
            @@ -134,7 +132,7 @@ translation_of: Web/HTML/Element/input/checkbox
             
             

            Il existe un état indéterminé pour les cases à cocher qui indique que la case n'est ni cochée, ni décochée mais indéterminéee. Cet état peut être obtenu via la propriété indeterminate d'un élément {{domxref("HTMLInputElement")}} en JavaScript (il est impossible d'obtenir cet état en utilisant uniquement du HTML) :

            -
            inputInstance.indeterminate = true;
            +
            inputInstance.indeterminate = true;

            Dans la plupart des navigateurs, une case à cocher dans un état indéterminé est représentée avec une ligne horizontale en travers de la case.

            @@ -148,40 +146,42 @@ translation_of: Web/HTML/Element/input/checkbox

            Dans cet exemple, l'état indeterminate est utilisé afin d'indiquer qu'on possède certains ingrédients mais pas suffisamment pour une recette.

            -
              var overall = document.querySelector('input[id="EnchTbl"]');
            -  var ingredients = document.querySelectorAll('ul input');
            +
            +var overall = document.querySelector('input[id="EnchTbl"]');
            +var ingredients = document.querySelectorAll('ul input');
             
            -  overall.addEventListener('click', function(e) {
            -    e.preventDefault();
            -  });
            +overall.addEventListener('click', function(e) {
            +  e.preventDefault();
            +});
             
            -  for(var i = 0; i < ingredients.length; i++) {
            -    ingredients[i].addEventListener('click', updateDisplay);
            -  }
            +for(var i = 0; i < ingredients.length; i++) {
            +  ingredients[i].addEventListener('click', updateDisplay);
            +}
             
            -  function updateDisplay() {
            -    var checkedCount = 1;
            -    for(var i = 0; i < ingredients.length; i++) {
            -      if(ingredients[i].checked) {
            -        checkedCount++;
            -      }
            +function updateDisplay() {
            +  var checkedCount = 1;
            +  for(var i = 0; i < ingredients.length; i++) {
            +    if(ingredients[i].checked) {
            +      checkedCount++;
                 }
            -    if(checkedCount === 0) {
            -      overall.checked = false;
            -      overall.indeterminate = false;
            -    } else if(checkedCount === ingredients.length) {
            -      overall.checked = true;
            -      overall.indeterminate = false;
            -    } else {
            -      overall.checked = false;
            -      overall.indeterminate = true;
            -    }
            -  }
            + } + if(checkedCount === 0) { + overall.checked = false; + overall.indeterminate = false; + } else if(checkedCount === ingredients.length) { + overall.checked = true; + overall.indeterminate = false; + } else { + overall.checked = false; + overall.indeterminate = true; + } +} +

            {{EmbedGHLiveSample("learning-area/html/forms/indeterminate-example/index.html", '100%', 200)}}

            -

            Note : Si vous envoyez un formulaire avec une case à cocher dans un état indéterminé, le résultat obtenu est le même que si la case avait été décochée : aucune donnée n'est envoyée au serveur.

            +

            Note : Si vous envoyez un formulaire avec une case à cocher dans un état indéterminé, le résultat obtenu est le même que si la case avait été décochée : aucune donnée n'est envoyée au serveur.

            Validation

            @@ -192,7 +192,7 @@ translation_of: Web/HTML/Element/input/checkbox

            Dans l'exemple suivant, on développe l'exemple vu précédemment avec les groupes de cases à cocher : il y a cette fois plus d'options et un champ texte libre qui permet de saisir une autre valeur. Pour cela on utilise un bloc de code JavaScript et quelques règles CSS pour la mise en forme.

            -
            <form>
            +
            <form>
               <fieldset>
               <legend>Veuillez sélectionner vos intérêts</legend>
                 <div>
            @@ -226,7 +226,7 @@ translation_of: Web/HTML/Element/input/checkbox
               </fieldset>
             </form>
            -
            html {
            +
            html {
               font-family: sans-serif;
             }
             
            @@ -263,7 +263,7 @@ legend {
             
             

            JavaScript

            -
            var otherCheckbox = document.querySelector('input[value="other"]');
            +
            var otherCheckbox = document.querySelector('input[value="other"]');
             var otherText = document.querySelector('input[id="otherValue"]');
             otherText.style.visibility = 'hidden';
             
            diff --git a/files/fr/web/html/element/input/color/index.html b/files/fr/web/html/element/input/color/index.html
            index 3a06d2a084..4fe3dd2319 100644
            --- a/files/fr/web/html/element/input/color/index.html
            +++ b/files/fr/web/html/element/input/color/index.html
            @@ -11,14 +11,12 @@ translation_of: Web/HTML/Element/input/color
             ---
             
            {{HTMLRef}}
            -

            Les éléments {{HTMLElement("input")}} de type "color" permettent de sélectionner une couleur via une interface (un sélecteur de couleur) ou en saisissant le code hexadécimal de la couleur au format "#rrggbb". Ce format de valeur peut être utilisé en CSS.

            +

            Les éléments {{HTMLElement("input")}} de type "color" permettent de sélectionner une couleur via une interface (un sélecteur de couleur) ou en saisissant le code hexadécimal de la couleur au format "#rrggbb". Ce format de valeur peut être utilisé en CSS.

            L'apparence du contrôle de sélection des couleurs peut grandement varier d'un navigateur à un autre et d'un système d'exploitation à un autre. Pour certains navigateurs, seul un champ textuel sera affiché afin de saisir le code de la couleur (avec des mécanismes de validation vérifiant le format), pour d'autres, ce sera le sélecteur de couleur du système d'exploitation qui sera utilisé et pour d'autres encore, ce sera un sélecteur de couleur spécifique.

            {{EmbedInteractiveExample("pages/tabbed/input-color.html", "tabbed-standard")}}
            - -

            Valeur

            L'attribut {{htmlattrxref("value", "input")}} d'un élément <input type="color"> est une chaîne de caractères sur 7 caractères qui correspond au code de la couleur en représentation hexadécimale RGB. Autrement dit, le premier caractère est un croisillon (#) , les deux suivants indiquent la composante rouge (R) de la couleur, les deux suivants indiquent la couleur verte (G pour Green en anglais) et les deux suivants indiquent la composante bleue (B) de la couleur. La valeur respecte nécessairement ce format et n'est jamais vide.

            @@ -35,7 +33,7 @@ translation_of: Web/HTML/Element/input/color

            Il est possible de créer un sélecteur de couleur qui emploie une valeur par défaut :

            -
            <input type="color" value="#ff0000">
            +
            <input type="color" value="#ff0000">

            {{EmbedLiveSample("Fournir_une_couleur_par_défaut", 700, 30)}}

            @@ -45,7 +43,7 @@ translation_of: Web/HTML/Element/input/color

            Comme pour les différents éléments {{HTMLElement("input")}}, deux évènements peuvent être utilisés afin de détecter une modification de la couleur : {{event("input")}} et {{event("change")}}. input est déclenché sur l'élément <input> à chaque fois que la couleur change. L'évènement change est déclenché lorsque l'utilisateur ferme le sélecteur de couleur. Dans tous les cas, il est possible de déterminer la nouvelle valeur de l'élément grâce à {{domxref("HTMLInputElement.value", "value")}}.

            -
            colorPicker.addEventListener("input", updateFirst, false);
            +
            colorPicker.addEventListener("input", updateFirst, false);
             colorPicker.addEventListener("change", watchColorPicker, false);
             
             function watchColorPicker(event) {
            @@ -57,23 +55,9 @@ function watchColorPicker(event) {
             
             

            Sélectionner la valeur

            -

            Si l'implémentation du navigateur n'affiche pas de sélecteur de couleur mais un champ texte, il est possible de sélectionner la valeur du texte avec la méthode {{domxref("HTMLInputElement.select", "select()")}}. Si le navigateur affiche un sélecteur de couleur, select() ne fera rien.

            - -
            colorWell.select();
            - -

            Différences d'aspect

            - -

            Comme mentionné précédemment, lorsqu'un navigateur ne prend pas en charge l'affichage d'un sélecteur de couleur, c'est un champ texte qui sera affiché. Par exemple, sous Safari 10.1, on peut voir le résultat suivant :

            - -

            Screenshot of the example taken in Safari.

            - -

            Avec Firefox Firefox 55, on aura cet affichage :

            - -

            Screenshot of the example taken in Firefox 55 for macOS

            - -

            Pour ce deuxième cas, en cliquant sur le carré coloré, cela ouvrira le sélecteur de couleur natif du système d'exploitation :

            +

            Si l'implémentation du navigateur n'affiche pas de sélecteur de couleur mais un champ texte, il est possible de sélectionner la valeur du texte avec la méthode {{domxref("HTMLInputElement.select", "select()")}}. Si le navigateur affiche un sélecteur de couleur, select() ne fera rien. Soyez conscient⋅e de ce comportement afin d'adapter votre code à ce cas.

            -

            Screenshot of the element with the color picker open in Firefox Mac.

            +
            colorWell.select();

            Validation

            @@ -87,7 +71,7 @@ function watchColorPicker(event) {

            Le fragment de code HTML utilisé est relativement simple. On utilise quelques paragraphes descriptifs ainsi qu'un élément {{HTMLElement("input")}} de type "color" dont l'identifiant est "colorWell" (c'est la valeur de cette couleur qu'on utilisera pour changer la couleur du texte des paragraphes).

            -
            <p>Un exemple qui illustre l'utilisation de <code>&lt;input type="color"&gt;</code>.</p>
            +
            <p>Un exemple qui illustre l'utilisation de <code>&lt;input type="color"&gt;</code>.</p>
             
             <label for="colorWell">Couleur :</label>
             <input type="color" value="#ff0000" id="colorWell">
            @@ -102,7 +86,7 @@ function watchColorPicker(event) {
             
             

            Tout d'abord, on établit certains variables : une pour la couleur du sélecteur et une autre couleur pour la couleur par défaut. On ajoute un gestionnaire {{event("load")}} afin de lancer les actions de démarrage lorsque la page est chargée.

            -
            var colorWell
            +
            var colorWell
             var defaultColor = "#0000ff";
             
             window.addEventListener("load", startup, false);
            @@ -112,7 +96,7 @@ window.addEventListener("load", startup, false);
             
             

            Lorsque la page est chargée, l'évènement "load" est déclenché et la fonction startup() est donc appelée :

            -
            function startup() {
            +
            function startup() {
               colorWell = document.querySelector("#colorWell");
               colorWell.value = defaultColor;
               colorWell.addEventListener("input", updateFirst, false);
            @@ -129,7 +113,7 @@ window.addEventListener("load", startup, false);
             
             

            On dispose de deux fonctions qui gèrent les modifications de couleurs. La fonction updateFirst() permet de répondre à l'évènement input et modifie la couleur du premier paragraphe dans le document en utilisant la nouvelle valeur saisie. Étant donné que les évènements input ont lieu à chaque fois qu'un ajustement est fait, cette fonction sera appelée sans cesse lorsque le sélecteur de couleur est utilisé.

            -
            function updateFirst(event) {
            +
            function updateFirst(event) {
               var p = document.querySelector("p");
             
               if (p) {
            @@ -139,7 +123,7 @@ window.addEventListener("load", startup, false);
             
             

            Lorsque le sélecteur est fermé, cela signifie que la valeur ne sera plus modifié avant une prochaine ouverture du sélecteur. Un évènement change est alors envoyé et cela déclenche alors l'appel de la fonction updateAll() :

            -
            function updateAll(event) {
            +
            function updateAll(event) {
               document.querySelectorAll("p").forEach(function(p) {
                 p.style.color = event.target.value;
               });
            diff --git a/files/fr/web/html/element/input/date/index.html b/files/fr/web/html/element/input/date/index.html
            index bfc6bb094f..f8107d4b50 100644
            --- a/files/fr/web/html/element/input/date/index.html
            +++ b/files/fr/web/html/element/input/date/index.html
            @@ -15,22 +15,8 @@ translation_of: Web/HTML/Element/input/date
             
             
            {{EmbedInteractiveExample("pages/tabbed/input-date.html", "tabbed-shorter")}}
            - -

            L'apparence du contrôle affiché dépend du navigateur utilisé et la prise en charge de cette fonctionnalité est hétérogène (cf. la section {{anch("Compatibilité des navigateurs")}} pour plus de détails). Pour les navigateurs qui ne prennent pas en charge ce type d'élément <input>, c'est un simple <input type="text"> qui sera affiché.

            -

            Si votre navigateur actuel prend en charge cette fonctionnalité, voici ce à quoi ressemble le contrôle sous Chrome/Opera :

            - -

            - -

            et pour Edge :

            - -

            - -

            Le contrôle de sélection de date pour Firefox ressemble à :

            - -

            Interface utilisateur du sélecteur de date dans Firefox

            -

            Valeur

            Une chaîne de caractères qui représente la valeur de la date saisie dans le contrôle. Le format à respecter est décrit dans dans cette section de l'article sur les formats. Il est possible de fournir une valeur par défaut en renseignant l'attribut {{htmlattrxref("value", "input")}} :

            @@ -136,7 +122,7 @@ dateControl.value = '2017-06-01';

            On ne peut donc ici que sélectionner une date en avril 2017. Seule la partie du contrôle consacrée aux jours sera éditable et on ne pourra pas sélectionner d'autres mois ou années..

            -

            Note : On devrait également pouvoir utiliser l'attribut {{htmlattrxref("step", "input")}} afin de faire varier le nombre de jours pour l'incrément de la date (par exemple afin de ne pouvoir sélectionner que les samedis). Cependant, cette fonctionnalité ne semble être présente dans aucune implémentation au moment où nous écrivons ces lignes.

            +

            Note : On devrait également pouvoir utiliser l'attribut {{htmlattrxref("step", "input")}} afin de faire varier le nombre de jours pour l'incrément de la date (par exemple afin de ne pouvoir sélectionner que les samedis). Cependant, cette fonctionnalité ne semble être présente dans aucune implémentation au moment où nous écrivons ces lignes.

            Contrôler la taille du champ de saisie

            @@ -168,10 +154,6 @@ dateControl.value = '2017-06-01';

            {{EmbedLiveSample('Validation', 600, 100)}}

            -

            Voici une capture d'écran illustrant ce qui se produit dans un navigateur qui implémente cette fonctionnalité :

            - -

            -

            Voici la feuille de style utilisée pour l'exemple. On utilise les pseudo-classes {{cssxref(":valid")}} et {{cssxref(":invalid")}} afin de mettre en forme un indicateur selon que la valeur est valide ou non. On place cet indicateur dans un élément {{htmlelement("span")}} séparé car pour Chrome, le contenu généré dans les pseudo-classes est intégré dans le contrôle du formulaire et ne peut être mis en forme ou affiché correctement.

            div {
            @@ -196,14 +178,12 @@ input:valid+span:after {
             }
            -

            Attention ! La validation des valeurs du formulaire HTML par le client ne remplace pas la validation côté serveur afin de vérifier que le format est bien celui attendu. Il est tout à fait possible de modifier le code HTML afin d'outrepasser ces mécanismes de validation ou d'envoyer directement des données au serveur. Il est donc nécessaire de valider les données lorsque celles-ci parviennent au serveur afin d'éviter les effets indésirables entraînés par l'injection de données mal formatées ou malveillantes.

            +

            Attention : La validation des valeurs du formulaire HTML par le client ne remplace pas la validation côté serveur afin de vérifier que le format est bien celui attendu. Il est tout à fait possible de modifier le code HTML afin d'outrepasser ces mécanismes de validation ou d'envoyer directement des données au serveur. Il est donc nécessaire de valider les données lorsque celles-ci parviennent au serveur afin d'éviter les effets indésirables entraînés par l'injection de données mal formatées ou malveillantes.

            Gérer la prise en charge des navigateurs

            -

            Comme indiqué ci-avant, le principal problème qu'on rencontre avec ces contrôles est l'hétérogénéité de la prise en charge par les différents navigateurs. Par exemple, le sélecteur de date implémenté dans Firefox pour Android ressemblera à :

            - -

            +

            Comme indiqué ci-avant, le principal problème qu'on rencontre avec ces contrôles est l'hétérogénéité de la prise en charge par les différents navigateurs.

            Les navigateurs qui ne prennent pas en charge ces contrôles utiliseront à la place des champs texte. Toutefois, cette solution de contournement entraîne deux problèmes : le premier concerne l'homogénéité de l'interface utilisateur (le contrôle affiché ne sera pas le même) et le second concerne la gestion des données.

            @@ -234,8 +214,7 @@ input:valid+span:after {

            Si vous tentez d'envoyer ce formulaire, vous pourrez voir que le navigateur affiche un message d'erreur et met en évidence la valeur invalide si la valeur saisie ne correspond pas au motif nnnn-nn-nn (avec n un chiffre entre 0 et 9). Bien entendu, cela n'empêche pas de saisir des dates invalides ou mal formatées (par exemple avec le motif yyyy-dd-mm alors qu'on souhaiterait avoir yyyy-mm-dd). Il reste donc un problème.

            -

            C'est pour cela que la meilleure solution consiste à avoir trois champs de saisie distincts à destination de l'utilisateur : un pour saisir les jours, le deuxième pour les mois et un troisième pour l'année (chacun avec un élément ({{htmlelement("select")}}). On peut également opter pour l'utilisation d'un bibliothèque JavaScript telle que le sélecteur de date jQuery (jQuery date picker).

            @@ -310,8 +288,7 @@ input:valid + span:after {

            Les mois sont écrits « en dur » (ce sont toujours les mêmes) alors que les valeurs pour les jours et les années sont générées dynamiquement en fonction du mois et de l'année sélectionnées (voir les commentaires ci-après qui expliquent le détail des fonctions).

            -

            Une autre partie intéressante est celle où on détecte si le navigateur prend charge la fonctionnalité native <input type="date">. Pour cela, on crée un nouvelle élément {{htmlelement("input")}} et on change son type en date puis ensuite, on vérifie immédiatement la valeur de son type : pour les navigateurs qui ne prennent pas en charge l'élément natif, ils renverront la valeur text car l'élément natif aura été « converti ». Dans ce cas, on masque le sélecteur natif et on affiche le sélecteur alternatif (celui qui contient les éléments {{htmlelement("select")}}).

            diff --git a/files/fr/web/html/element/input/datetime-local/index.html b/files/fr/web/html/element/input/datetime-local/index.html index bc4ab26cff..23f0f7da9a 100644 --- a/files/fr/web/html/element/input/datetime-local/index.html +++ b/files/fr/web/html/element/input/datetime-local/index.html @@ -16,8 +16,6 @@ translation_of: Web/HTML/Element/input/datetime-local
            {{EmbedInteractiveExample("pages/tabbed/input-datetime-local.html", "tabbed-shorter")}}
            - -

            L'interface utilisateur du contrôle varie selon les navigateurs. La prise en charge de cette fonctionnalité est hétérogène : Chrome/Opera et Edge l'implémentent pour les navigateurs de bureau et la plupart des navigateurs mobiles l'implémentent. Pour les navigateurs qui n'implémentent pas cette fonctionnalité, le contrôle utilisé est celui de <input type="text">.

            Les secondes ne sont pas prises en charge.

            @@ -28,21 +26,11 @@ translation_of: Web/HTML/Element/input/datetime-local

            Certains navigateurs pourront utiliser un contrôle avec un texte simple et vérifier que la valeur date/heure est correcte avant de l'envoyer au serveur. Toutefois, ce contrôle ayant lieu côté client, vous devrez nécessairement vérifier le bon format de la donnée côté serveur.

            -

            Voici, ci-après, un aperçu du contrôle obtenu dans un navigateur fonctionnel. En cliquant sur la flèche vers le bas, cela fait apparaître un sélecteur de date et il faut ensuite saisir l'heure manuellement. Pour Chrome / Opera :

            - -

            - -

            Pour Edge, le contrôle associé à datetime-local se décompose en deux sélecteurs : un pour la date et un pour l'heure qui apparaissent quand on clique sur les éléments respectifs du champ :

            - -

            - -

            -

            Valeur

            Une chaîne de caractères ({{domxref("DOMString")}}) qui représente la valeur de la date saisie dans le contrôle. Le format utilisable est décrit dans cette section de l'article sur les formats. Il est possible d'indiquer une date par défaut grâce à l'attribut {{htmlattrxref("value", "input")}} :

            -
            <label for="party">Veuillez saisir une date et une heure pour la fête :</label>
            +
            <label for="party">Veuillez saisir une date et une heure pour la fête :</label>
             <input id="party" type="datetime-local" name="partydate" value="2017-06-01T08:30">

            {{EmbedLiveSample('Valeur', 600, 60)}}

            @@ -50,12 +38,12 @@ translation_of: Web/HTML/Element/input/datetime-local

            On notera ici que le format de la date affichée n'est pas celui utilisé pour écrire la valeur de l'attribut value. Le format d'affichage de la date sera choisi en fonction de la locale du système d'exploitation de l'utilisateur. En revanche, l'attribut value sera toujours formaté de la façon suivante : yyyy-MM-ddThh:mm. Lorsque la valeur est envoyée au serveur, elle aura donc ce format : partydate=2017-06-01T08:30.

            -

            Note : Attention si les données sont envoyées avec la méthode HTTP GET, les deux points (:) devront être échappés pour être intégrés dans les paramètres de l'URL. Avec l'exemple précédent, cela signifie qu'on enverra partydate=2017-06-01T08%3A30. Si on souhaite échapper une chaîne de caractères de la même façon en JavaScript, on pourra utiliser {{jsxref("Objets_globaux/encodeURI", "encodeURI()")}}.

            +

            Note : Attention si les données sont envoyées avec la méthode HTTP GET, les deux points (:) devront être échappés pour être intégrés dans les paramètres de l'URL. Avec l'exemple précédent, cela signifie qu'on enverra partydate=2017-06-01T08%3A30. Si on souhaite échapper une chaîne de caractères de la même façon en JavaScript, on pourra utiliser {{jsxref("Objets_globaux/encodeURI", "encodeURI()")}}.

            En JavaScript, Il est également possible de définir la valeur de la date utilisée dans le contrôle via la propriété {{domxref("HTMLInputElement.value")}}. Par exemple :

            -
            var dateControl = document.querySelector('input[type="datetime-local"]');
            +
            var dateControl = document.querySelector('input[type="datetime-local"]');
             date.value = '2017-06-01T08:30';

            Plusieurs méthodes, fournies par JavaScript (cf. {{jsxref("Date")}}), peuvent être utilisée afin de convertir des informations numériques en une telle chaîne de caractères (par exemple la méthode {{jsxref("Date.toISOString()")}}).

            @@ -117,7 +105,7 @@ date.value = '2017-06-01T08:30';

            Dans sa forme la plus simple, <input type="datetime-local"> peut s'utilisere avec un élément <input> et un élément {{htmlelement("label")}} comme ceci :

            -
            <form>
            +
            <form>
                 <label for="party">Veuillez choisir une date et une heure pour la fête :</label>
                 <input id="party" type="datetime-local" name="partydate">
             </form>
            @@ -128,7 +116,7 @@ date.value = '2017-06-01T08:30';

            Les attributs {{htmlattrxref("min", "input")}} et {{htmlattrxref("max", "input")}} permettent de restreindre la fenêtre de dates qu'il est possible de choisir. Dans l'exemple qui suit, on indique une date/heure minimale au 2017-06-01T08:30 et une date maximale au 2017-06-30T16:30:

            -
              <form>
            +
              <form>
                 <label for="party">Veuillez choisir une date et une heure pour la fête :</label>
                 <input id="party" type="datetime-local" name="partydate" min="2017-06-01T08:30" max="2017-06-30T16:30">
               </form>
            @@ -143,7 +131,7 @@ date.value = '2017-06-01T08:30';
            -

            Note : L'attribut {{htmlattrxref("step", "input")}} devrait pouvoir être utilisé afin de faire varier l'incrément, en jours, pour sélectionner la date (par exemple afin de ne pouvoir sélectionner que les samedi). En revanche, à l'heure où nous rédigeons cet article, aucune implémentation ne semble proposer cette fonctionnalité.

            +

            Note : L'attribut {{htmlattrxref("step", "input")}} devrait pouvoir être utilisé afin de faire varier l'incrément, en jours, pour sélectionner la date (par exemple afin de ne pouvoir sélectionner que les samedi). En revanche, à l'heure où nous rédigeons cet article, aucune implémentation ne semble proposer cette fonctionnalité.

            Contrôler la taille du champ

            @@ -156,11 +144,11 @@ date.value = '2017-06-01T08:30';

            Ainsi, si vous créez un système où l'utilisateur est déjà connecté et que le fuseau horaire est déjà connu, celui-ci peut être fourni via un champ de type hidden. Par exemple :

            -
            <input type="hidden" id="timezone" name="timezone" value="-08:00">
            +
            <input type="hidden" id="timezone" name="timezone" value="-08:00">

            Sinon, on peut proposer la sélection d'un fuseau horaire grâce à un élément {{htmlelement("select")}} :

            -
            <select name="timezone_offset" id="timezone-offset" class="span5">
            +
            <select name="timezone_offset" id="timezone-offset" class="span5">
                 <option value="-12:00">(GMT -12:00) Eniwetok, Kwajalein</option>
                 <option value="-11:00">(GMT -11:00) Midway Island, Samoa</option>
                 <option value="-10:00">(GMT -10:00) Hawaii</option>
            @@ -175,7 +163,7 @@ date.value = '2017-06-01T08:30';

            Dans ces deux situations, le fuseau horaire et la date sont transmis au serveur séparément (c'est côté serveur que le choix de la représentation pour le stockage est effectué).

            -

            Note : Le fragment de code précédent est tiré de Tous les fuseaux horaires du monde dans un élément <select>.

            +

            Note : Le fragment de code précédent est tiré de Tous les fuseaux horaires du monde dans un élément <select>.

            Validation

            @@ -186,7 +174,7 @@ date.value = '2017-06-01T08:30';

            Prenons un exemple avec des dates mini/maxi et le champ obligatoire :

            -
            <form>
            +
            <form>
                 <div>
                     <label for="party">Veuillez choisir une date et une heure pour la fête (obligatoire, entre le 1er juin, 8h30 et le 30 juin, 16h30) :</label>
                     <input id="party" type="datetime-local" name="partydate" min="2017-06-01T08:30" max="2017-06-30T16:30" required>
            @@ -201,13 +189,10 @@ date.value = '2017-06-01T08:30';

            {{EmbedLiveSample('Validation', 600, 120)}}

            -

            Voici une capture d'écran illustrant un message d'erreur dans un navigateur qui prend en charge cette fonctionnalité :

            - -

            Vous trouverez ensuite la feuille de style CSS utilisée pour l'exemple. On utilise les pseudo-classes {{cssxref(":valid")}} et {{cssxref(":invalid")}} afin de mettre en forme le contrôle selon que sa valeur est valide ou non. Les icônes indicatives sont placées dans un élément {{htmlelement("span")}} séparé car, sous Chrome, le contenu généré automatiquement est placé à l'intériur du contrôle et ne peut pas être affiché/mis en forme efficacement.

            -
            div {
            +
            div {
                 margin-bottom: 10px;
                 display: flex;
                 align-items: center;
            @@ -229,14 +214,13 @@ input:valid+span:after {
             }
            -

            Important : La validation des données du formulaire HTML par le navigateur ne doit pas remplacer la validation des données reçues sur le serveur ! En effet, il est tout à fait possible pour quelqu'un de modifier le document HTML afin d'outrepasser ces contraintes (voire d'envoyer directement des données au serveur sans passer par le formulaire HTML). Si les mécanismes, côté serveur, échouent à valider les données, cela pourrait avoir des conséquences néfastes sur le stockage ou la sécurité de l'application.

            +

            Attention : La validation des données du formulaire HTML par le navigateur ne doit pas remplacer la validation des données reçues sur le serveur ! En effet, il est tout à fait possible pour quelqu'un de modifier le document HTML afin d'outrepasser ces contraintes (voire d'envoyer directement des données au serveur sans passer par le formulaire HTML). Si les mécanismes, côté serveur, échouent à valider les données, cela pourrait avoir des conséquences néfastes sur le stockage ou la sécurité de l'application.

            Gérer la prise en charge des navigateurs

            -

            Comme indiqué ci-avant, le principal problème qu'on rencontre avec ces contrôles est la prise en charge hétérogène des différents navigateurs : seuls Opera et Chrome implémentent cette fonctionnalité parmi les navigateurs de bureau et la plupart des navigateurs mobiles la prennent en charge. Voici, par exemple, l'interface utilisateur du sélecteur datetime-local de Firefox pour Android :

            +

            Comme indiqué ci-avant, le principal problème qu'on rencontre avec ces contrôles est la prise en charge hétérogène des différents navigateurs : seuls Opera et Chrome implémentent cette fonctionnalité parmi les navigateurs de bureau et la plupart des navigateurs mobiles la prennent en charge.

            -

            Les navigateurs qui n'implémentent pas cette fonctionnalité afficheront un contrôle de saisie textuelle. Toutefois, cela entraîne des problème de cohérence d'interface graphique d'une part et de représentation des données d'autre part.

            @@ -255,7 +239,7 @@ input:valid+span:after {

            Une façon de contourner ce problème est de placer un attribut {{htmlattrxref("pattern", "input")}} dans l'élément <input type="datetime-local">. Bien que cet élément n'utilise pas cet attribut, s'il est converti en <input type="text"> par le navigateur, le motif sera alors utilisé. Vous pouvez par exemple essayer le code suivant dans un navigateur qui ne prend pas en charge <input type="datetime-local"> :

            -
            <form>
            +
            <form>
               <div>
                  <label for="party">Veuillez choisir une date et une heure pour la fête (obligatoire, entre le 1er juin, 8h30 et le 30 juin, 16h30) :</label>
                 <input id="party" type="datetime-local" name="partydate"
            @@ -277,8 +261,7 @@ input:valid+span:after {
             
             

            Bref, il y a toujours un problème.

            -

            Actuellement, la meilleure façon de gérer les dates/heures d'une façon homogène pour les différents navigateurs est d'utiliser différents contrôles (via des éléments {{htmlelement("select")}}) pour sélectionner l'année, le jour, le mois, la date et l'heure. Il existe également des bibliothèques JavaScript telles que le sélecteur de date jQuery et le sélecteur d'heure jQuery.

            @@ -313,7 +295,7 @@ input:valid + span:after {

            Voici le fragment de code HTML utilisé :

            -
            <form>
            +
            <form>
               <div class="nativeDateTimePicker">
                 <label for="party">Veuillez sélectionner une date et une heure pour la fête :</label>
                 <input type="datetime-local" id="party" name="bday">
            @@ -367,8 +349,7 @@ input:valid + span:after {
             
             

            Les mois disponibles sont codés de façon statique (ce sont toujours les mêmes). En revanche, les valeurs pour les jours et les années sont générées dynamiquement selon le mois et l'année courante (voir les commentaires du script ci-après). Les heures et les minutes sont également générées dynamiquement.

            -

            Une partie intéressante du code est celle où on détecte la prise en charge de la fonctionnalité. Pour cela, dans le script, on crée un nouvel élément {{htmlelement("input")}} auquel on attribut le type datetime-local puis on vérifie son type juste après. Pour les navigateurs qui ne prennent pas en charge ce type de contrôle, le type aura changé et sera text. Si c'est le cas, on masque le contrôle natif et on utilise l'interface utilisateur alternative (composée avec les éléments ({{htmlelement("select")}})).

            -
            // On définit les différentes variables
            +
            // On définit les différentes variables
             var nativePicker = document.querySelector('.nativeDateTimePicker');
             var fallbackPicker = document.querySelector('.fallbackDateTimePicker');
             var fallbackLabel = document.querySelector('.fallbackLabel');
            diff --git a/files/fr/web/html/element/input/email/index.html b/files/fr/web/html/element/input/email/index.html
            index 84846c4aa5..2e6f223117 100644
            --- a/files/fr/web/html/element/input/email/index.html
            +++ b/files/fr/web/html/element/input/email/index.html
            @@ -9,12 +9,10 @@ translation_of: Web/HTML/Element/input/email
             ---
             
            {{HTMLRef}}
            -

            Les éléments {{HTMLElement("input")}} dont l'attribut type vaut "email" permettent à un utilisateur de saisir et d'éditer une adresse mail ou, si l'attribut {{htmlattrxref("multiple", "input")}} est indiqué, une liste d'adresses mail. La valeur saisie est automatiquement validée afin de vérifier que le champ est vide ou que l'adresse (ou la liste d'adresses) est correcte. Les pseudo-classes CSS {{cssxref(":valid")}} et {{cssxref(":invalid")}} sont appliquées automatiquement selon le cas.

            +

            Les éléments {{HTMLElement("input")}} dont l'attribut type vaut "email" permettent à un utilisateur de saisir et d'éditer une adresse mail ou, si l'attribut {{htmlattrxref("multiple", "input")}} est indiqué, une liste d'adresses mail. La valeur saisie est automatiquement validée afin de vérifier que le champ est vide ou que l'adresse (ou la liste d'adresses) est correcte. Les pseudo-classes CSS {{cssxref(":valid")}} et {{cssxref(":invalid")}} sont appliquées automatiquement selon le cas.

            {{EmbedInteractiveExample("pages/tabbed/input-email.html", "tabbed-shorter")}}
            - -

            Note : Les navigateurs qui ne prennent pas en charge le type "email" emploieront un élément <input> "text" à la place.

            @@ -236,9 +234,7 @@ translation_of: Web/HTML/Element/input/email

            On peut également fournir une valeur par défaut en remplissant l'attribut {{htmlattrxref("value", "input")}} de l'élément :

            -
            <input type="email" value="default@example.com">
            -

            {{EmbedLiveSample("Fournir_une_option_par_défaut", 600, 40)}}

            @@ -260,14 +256,12 @@ translation_of: Web/HTML/Element/input/email

            Lorsqu'on utilise l'élément {{HTMLElement("datalist")}} et l'élément {{HTMLElement("option")}}, le navigateur affichera les adresses suggérées lors de la saisie, généralement sous la forme d'une liste déroulante ou d'une popup. Bien que les détails d'interface puissent dépendre de chaque navigateur, cliquer sur le champ d'édition affichera généralement la liste sous forme d'un volet déroulant. Ensuite, la liste est restreinte au fur et à mesure des caractères saisis.

            -

            Animation: Using keyboard entry to filter the list of suggested email addresses

            -

            Validation

            Il existe deux niveaux de validation pour les champs de saisie de type "email". Tout d'abord, on a le niveau standard qui permet de vérifier automatiquement si l'adresse électronique est bien formatée. Ensuite, il est possible d'ajouter un filtre spécifique si besoin de répondre à des contraintes plus spécifiques.

            -

            Attention ! La validation du formulaire HTML par l'agent utilisateur ne saurait remplacer la vérification des données saisies côté serveur. En effet, il est relativement simple de modifier le document HTML avec son navigateur pour outrepasser les contraintes exprimées ici (quitte à les transmettre directement au serveur). Si les données ne sont pas vérifiées côté serveur, cela pourra entraîner des erreurs (valeurs trop grande, au mauvais format) voire des failles de sécurité.

            +

            Attention : La validation du formulaire HTML par l'agent utilisateur ne saurait remplacer la vérification des données saisies côté serveur. En effet, il est relativement simple de modifier le document HTML avec son navigateur pour outrepasser les contraintes exprimées ici (quitte à les transmettre directement au serveur). Si les données ne sont pas vérifiées côté serveur, cela pourra entraîner des erreurs (valeurs trop grande, au mauvais format) voire des failles de sécurité.

            Validation simple

            @@ -288,8 +282,7 @@ translation_of: Web/HTML/Element/input/email

            Le navigateur vérifie d'une part que l'adresse électronique est une adresse correctement formatée et que celle-ci respecte l'expression rationnelle indiquée avec {{htmlattrxref("pattern", "input")}}. Voici un exemple d'application :

            -
            <form>
              <div class="emailBox">
            @@ -333,9 +325,9 @@ label::after {
             
             

            Si on regarde le champ de saisie pour l'adresse électronique, on voit que les deux attributs {{htmlattrxref("size", "input")}} et {{htmlattrxref("maxlength", "input")}} ont la valeur 64 (on affiche une boîte de saisie large de 64 caractères et on ne peut saisir une adresse électronique d'au plus 64 caractères). L'attribut {{htmlattrxref("required", "input")}} est présent et l'adresse électronique est donc obligatoire pour l'envoi du formulaire.

            -

            L'attribut {{htmlattrxref("placeholder", "input")}} indique qu'une valeur semblable à "nomutilisateur@beststartupever.com" est attendue. L'intérêt de cette valeur est double : on indique qu'il faut saisir une adresse mail et on suggère que cette adresse provient d'un compte beststartupever.com. Le type "email" permet de valider le texte saisi afin de vérifier qu'il s'agit d'une adresse électronique valide.  Si la valeur saisie n'est pas une adresse valide, un message d'erreur sera affiché :

            +

            L'attribut {{htmlattrxref("placeholder", "input")}} indique qu'une valeur semblable à "nomutilisateur@beststartupever.com" est attendue. L'intérêt de cette valeur est double : on indique qu'il faut saisir une adresse mail et on suggère que cette adresse provient d'un compte beststartupever.com. Le type "email" permet de valider le texte saisi afin de vérifier qu'il s'agit d'une adresse électronique valide. Si la valeur saisie n'est pas une adresse valide, un message d'erreur sera affiché :

            -

            +

            Si on utilise uniquement les attributs qu'on vient de décrire, on restreint les valeurs saisissables aux adresses électroniques valides de 64 caractères. Or, on veut également valider le fait que l'adresse respecte le format "nomutilisateur@beststartupever.com". C'est pourquoi on utilise l'attribut {{htmlattrxref("pattern", "input")}} avec la valeur ".+@beststartupever.com". Cette valeur est une expression rationnelle qui permet de vérifier que la chaîne de caractère contient un ou plusieurs caractères quelconques, ensuite suivi d'une arobase (@) puis du nom de domaine "beststartupever.com".

            @@ -345,7 +337,7 @@ label::after {

            C'est pour cela qu'on indique la chaîne de caractères "Merci de fournir uniquement une adresse Best Startup Ever". Le message complet obtenu sera donc : "Le texte saisi ne correspond pas au motif requis. Merci de fournir uniquement une adresse Best Startup Ever."

            -

            +

            Note : Si vous rencontrez des problèmes à propos de l'expression rationnelle, n'hésitez pas à ouvrir la console du navigateur. Cette dernière peut contenir des messages d'erreur aidant à diagnostiquer et résoudre le problème.

            diff --git a/files/fr/web/html/element/input/file/index.html b/files/fr/web/html/element/input/file/index.html index 101a6a2f1b..924ba06e65 100644 --- a/files/fr/web/html/element/input/file/index.html +++ b/files/fr/web/html/element/input/file/index.html @@ -9,18 +9,16 @@ translation_of: Web/HTML/Element/input/file ---
            {{HTMLRef}}
            -

            Les éléments {{HTMLElement("input")}} dont l'attribut type vaut "file" permettent à un utilisateur de sélectionner un ou plusieurs fichiers depuis leur appareil et de les uploader vers un serveur via un formulaire ou grâce à du code JavaScript via l'API File.

            +

            Les éléments {{HTMLElement("input")}} dont l'attribut type vaut "file" permettent à un utilisateur de sélectionner un ou plusieurs fichiers depuis leur appareil et de les uploader vers un serveur via un formulaire ou grâce à du code JavaScript via l'API File.

            {{EmbedInteractiveExample("pages/tabbed/input-file.html", "tabbed-shorter")}}
            - -

            Valeur

            L'attribut {{htmlattrxref("value", "input")}} contient une chaîne de caractères ({{domxref("DOMString")}}) qui représente le chemin du/des fichier(s) sélectionné(s). Les autres fichiers peuvent être identifiés grâce à la propriété HTMLInputElement.files.

            -
            Note : - +
            +

            Note :

            1. Si plusieurs fichiers sont sélectionnés, la chaîne de caractères représente le chemin du premier fichier sélectionné. Il est possible d'accéder aux autres fichiers en JavaScript grâce à la propriété FileList.
            2. Si aucun fichier n'est sélectionné, la chaîne de caractères sera vide ("").
            3. @@ -72,7 +70,9 @@ translation_of: Web/HTML/Element/input/file

              Une chaîne de caractères qui indique la caméra à utiliser pour capturer des photos et des vidéos si l'attribut accept indique que le fichier est de ce type. Lorsque capture vaut "user", cela indique que la caméra qui fait face à l'utilisateur devrait être utilisée. Si l'attribut vaut "environment", c'est la caméra qui est tournée vers l'extérieur devrait être utilisée. Si l'attribut est absent, l'agent utilisateur pourra décider de laquelle utiliser. Si la caméra souhaitée par l'attribut n'est pas disponible, l'agent utilisateur pourra utiliser une autre caméra de l'appareil.

              -
              Note : capture était auparavant un attribut booléen qui, lorsqu'il était présent, indiquait que les capteurs de l'appareil (caméra/micro) devaient être utilisés plutôt qu'un fichier.
              +
              +

              Note : capture était auparavant un attribut booléen qui, lorsqu'il était présent, indiquait que les capteurs de l'appareil (caméra/micro) devaient être utilisés plutôt qu'un fichier.

              +

              {{htmlattrdef("files")}}

              @@ -139,18 +139,16 @@ translation_of: Web/HTML/Element/input/file </div> </form>
            -

            Ce fragment de code HTML produira le résultat suivant :

            {{EmbedLiveSample('Un_exemple_simple', 650, 60)}}

            -

            Note : Vous pouvez également trouver cet exemple sur GitHub — avec le code source et la démonstration.

            +

            Note : Vous pouvez également trouver cet exemple sur GitHub — avec le code source et la démonstration.

            Quel que soit l'appareil ou le système d'exploitation de l'utilisateur, l'élément <input type="file"> fournit un bouton qui ouvre un sélecteur de fichier permettant de choisir un fichier.

            @@ -204,24 +202,20 @@ translation_of: Web/HTML/Element/input/file </div> </form>
            -

            Voici le résultat produit :

            {{EmbedLiveSample('Restreindre_les_types_de_fichiers_acceptés', 650, 60)}}

            -

            Note : Vous pouvez également consulter cet exemple sur GitHub — voir le code source et la démonstration live.

            +

            Note : Vous pouvez également consulter cet exemple sur GitHub — voir le code source et la démonstration live.

            Le résultat peut sembler similaire à l'exemple précédent mais lorsque vous essayer de sélectionner un fichier, vous verrez que le sélecteur ne permet de sélectionner que les fichiers du/des type(s) indiqué(s) (il peut y avoir certaines différences selons les navigateurs et les systèmes d'exploitation).

            -

            Screenshot of a macOS file picker dialog. Files other than JPEG are grayed-out and unselectable.

            -

            L'attribut accept ne permet pas de valider/contrôler le type réel du/des fichier(s) sélectionné(s). Il fournit simplement une indication au navigateur pour aider l'utilisateur à sélectionner les bons fichiers. Toutefois, dans la plupart des cas, l'utilisateur peut toujours choisir une option dans le sélecteur afin de pouvoir choisir un fichier d'un autre type.

            Dans tous les cas (et comme pour les autres éléments envoyés au serveur), il est nécessaire de contrôler les données reçues par un mécanisme de validation côté serveur.

            @@ -245,7 +239,7 @@ input.value = "toto";

            Dans l'exemple qui suit, on présente sélecteur de fichiers plus avancé, qui tire parti des informations disponibles grâce à la propriété HTMLInputElement.files. On montre aussi quelques astuces.

            -

            Note : Le code source complet de cet exemple est disponible sur GitHub — file-example.html (voir la démonstration live associée). Nous n'expliquerons pas ici la feuille de style CSS mais plutôt le code JavaScript qui contient la logique.

            +

            Note : Le code source complet de cet exemple est disponible sur GitHub — file-example.html (voir la démonstration live associée). Nous n'expliquerons pas ici la feuille de style CSS mais plutôt le code JavaScript qui contient la logique.

            Tout d'abord, voici le fragment de code HTML utilisé :

            @@ -263,8 +257,7 @@ input.value = "toto"; </div> </form>
            -

            Pour l'instant, le fragment HTML ressemble à ce que nous avons déjà vu avant, rien de spécial.

            @@ -331,7 +323,7 @@ var preview = document.querySelector('.preview'); input.style.opacity = 0;
            -

            Note : La propriété opacity est utilisée pour masquer l'élément <input> plutôt que visibility: hidden ou display: none. En effet, avec ces derniers les technologies d'assistance (lecteurs d'écran par exemple) comprendraient que l'élément n'est pas interactif et ne peut pas être utilisé.

            +

            Note : La propriété opacity est utilisée pour masquer l'élément <input> plutôt que visibility: hidden ou display: none. En effet, avec ces derniers les technologies d'assistance (lecteurs d'écran par exemple) comprendraient que l'élément n'est pas interactif et ne peut pas être utilisé.

            Ensuite, on ajoute un gestionnaire d'évènement à l'élément <input> afin de réaliser certaines actions lorsque sa valeur (c'est-à-dire les fichiers sélectionnés) change. Ici, le gestionnaire d'évènement appelle la fonction updateImageDisplay() que nous décrirons juste après.

            diff --git a/files/fr/web/html/element/input/hidden/index.html b/files/fr/web/html/element/input/hidden/index.html index 159089ca79..5ec54ea676 100644 --- a/files/fr/web/html/element/input/hidden/index.html +++ b/files/fr/web/html/element/input/hidden/index.html @@ -12,25 +12,25 @@ translation_of: Web/HTML/Element/input/hidden

            Les éléments {{HTMLElement("input")}} de type "hidden" permettent aux développeurs web d'inclure des données qui ne peuvent pas être vues ou modifiées lorsque le formulaire est envoyé. Cela permet par exemple d'envoyer l'identifiant d'une commande ou un jeton de sécurité unique. Les champs de ce type sont invisibles sur la page.

            -

            Note : La ligne de code suivante est suivie du rendu associé... si l'exemple fonctionne correctement, vous ne devriez rien voir :)

            +

            Note : La ligne de code suivante est suivie du rendu associé... si l'exemple fonctionne correctement, vous ne devriez rien voir :)

            -
            +

            Exemple simple

            +
            <input id="prodId" name="prodId" type="hidden" value="xm234jq">
            -

            {{EmbedLiveSample('Basic_example', 600, 40)}}

            +

            {{EmbedLiveSample('Exemple_simple', 600, 40)}}

            -
            +

            Note : Attention, les évènements DOM input et change ne s'appliquent pas à ce type de contrôle. Les champs masqués ne peuvent pas recevoir le focus, y compris en JavaScript avec hiddenInput.focus()).

            -

            Valeur

            L'attribut {{htmlattrxref("value", "input")}} de l'élément contient une chaîne de caractères masquée qui est envoyée au serveur avec le formulaire. Cette valeur ne peut pas directement être éditée par l'utilisateur sur la page (mais elle est toujours accessible et modifiable via les outils de développement intégrés au navigateur).

            -

            Attention ! Bien que la valeur ne soit pas affichée sur la page, elle est visible et modifiable par l'utilisateur si ce dernier utilise les outils de développements intégrés aux navigateurs (par exemple "Afficher la source"). Le type hidden ne doit donc pas être utilisé comme mécanisme de sécurité.

            +

            Attention : Bien que la valeur ne soit pas affichée sur la page, elle est visible et modifiable par l'utilisateur si ce dernier utilise les outils de développements intégrés aux navigateurs (par exemple "Afficher la source"). Le type hidden ne doit donc pas être utilisé comme mécanisme de sécurité.

            Attributs supplémentaires

            @@ -157,7 +157,7 @@ textarea {

            {{EmbedLiveSample('Exemples', '100%', 200)}}

            -

            Note : Vous pouvez consulter l'exemple sur GitHub (cf. le code source et la démonstration live).

            +

            Note : Vous pouvez consulter l'exemple sur GitHub (cf. le code source et la démonstration live).

            Lorsque le formulaire est envoyé, les données envoyées au serveur ressembleront à :

            diff --git a/files/fr/web/html/element/input/image/index.html b/files/fr/web/html/element/input/image/index.html index aa4a5acd16..4d3fac19f5 100644 --- a/files/fr/web/html/element/input/image/index.html +++ b/files/fr/web/html/element/input/image/index.html @@ -15,8 +15,6 @@ translation_of: Web/HTML/Element/input/image
            {{EmbedInteractiveExample("pages/tabbed/input-image.html", "tabbed-standard")}}
            - -

            Valeur

            Les éléments <input type="image"> n'acceptent pas de valeur pour l'attribut value. Le chemin vers l'image à afficher est indiqué grâce à l'attribut src.

            @@ -190,7 +188,7 @@ translation_of: Web/HTML/Element/input/image

            Prenons un exemple simple qui utilise les attributs strictement nécessaires (qui fonctionnent de la même façon que pour un élément <img>) :

            -
            <input id="image" type="image" width="100" height="30" alt="Login"
            +
            <input id="image" type="image" width="100" height="30" alt="Login"
                    src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png">

            {{EmbedLiveSample('Les_fonctionnalités_essentielles', 600, 50)}}

            @@ -264,7 +262,7 @@ translation_of: Web/HTML/Element/input/image

            Voici le fragment de code HTML utilisé :

            -
            <form>
            +
            <form>
               <p>Connectez-vous</p>
               <div>
                 <label for="userId">Identifiant</label>
            @@ -281,7 +279,7 @@ translation_of: Web/HTML/Element/input/image
             
             

            Ensuite, on ajoute un feuille de style CSS pour mettre en forme les éléments :

            -
            div {
            +
            div {
               margin-bottom: 10px;
             }
             
            @@ -300,7 +298,7 @@ label {
             
             

            HTML

            -
            <form>
            +
            <form>
               <p>Connectez-vous</p>
               <div>
                 <label for="userId">Identifiant</label>
            @@ -317,7 +315,7 @@ label {
             
             

            CSS

            -
            div {
            +
            div {
               margin-bottom: 10px;
             }
             
            diff --git a/files/fr/web/html/element/input/index.html b/files/fr/web/html/element/input/index.html
            index a2433db59b..54df76bc7d 100644
            --- a/files/fr/web/html/element/input/index.html
            +++ b/files/fr/web/html/element/input/index.html
            @@ -16,9 +16,7 @@ translation_of: Web/HTML/Element/input
             
             
            {{EmbedInteractiveExample("pages/tabbed/input-text.html", "tabbed-shorter")}}
            - - -

            Les différents types de champs <input>

            +

            Les différents types de champs <input>

            La façon dont un élément <input> fonctionne dépend grandement de la valeur de son attribut type. Aussi, pour chacun de ces types, on aura une page de référence dédiée. Par défaut, lorsque l'attribut type n'est pas présent, il aura la valeur implicite text.

            @@ -37,7 +35,8 @@ translation_of: Web/HTML/Element/input
          • {{HTMLElement("input/month", "month")}} : {{HTMLVersionInline("5")}} un contrôle qui permet de saisir un mois et une année (sans fuseau horaire).
          • {{HTMLElement("input/number", "number")}} : {{HTMLVersionInline("5")}} un contrôle qui permet de saisir un nombre.
          • {{HTMLElement("input/password", "password")}} : un champ texte sur une seule ligne dont la valeur est masquée. Les attributs maxlength et minlength définissent la taille maximale et minimale de la valeur à saisir dans le champ. -
            Note : Tout formulaire comportant des données sensibles doit être servi via HTTPS. Les navigateurs alertent les utilisateurs lorsque les formulaires avec de telles données sont uniquement disponibles via HTTP.
            +
            +

            Note : Tout formulaire comportant des données sensibles doit être servi via HTTPS. Les navigateurs alertent les utilisateurs lorsque les formulaires avec de telles données sont uniquement disponibles via HTTP.

          • {{HTMLElement("input/radio", "radio")}} : un bouton radio qui permet de sélectionner une seule valeur parmi un groupe de différentes valeurs.
          • {{HTMLElement("input/range", "range")}} : {{HTMLVersionInline("5")}} un contrôle qui permet de saisir un nombre dont la valeur exacte n'est pas importante.
          • @@ -145,7 +144,7 @@ translation_of: Web/HTML/Element/input

            Seul un élément du document peut avoir l'attribut autofocus. Il n'est pas possible d'utiliser l'attribut autofocus sur les champs de type hidden car ces derniers, masqués, ne peuvent pas avoir le focus.

            -

            Attention ! Le focus automatique sur un champ de formulaire peut être source de confusion, notamment pour les personnes qui utilisent des lecteurs d'écran. En effet, lorsque autofocus est utilisé, les lecteurs d'écran « téléportent » l'utilisateur sur le contrôle du champ, sans aucun avertissement.

            +

            Attention : Le focus automatique sur un champ de formulaire peut être source de confusion, notamment pour les personnes qui utilisent des lecteurs d'écran. En effet, lorsque autofocus est utilisé, les lecteurs d'écran « téléportent » l'utilisateur sur le contrôle du champ, sans aucun avertissement.

            {{htmlattrdef("disabled")}}

            @@ -188,7 +187,7 @@ let hatSize = form.elements["hat-size"];

            Avec ce code, la variable guestName correspondra à l'élément {{domxref("HTMLInputElement")}} du champ guest et hatSize à l'objet pour le champ hat-size.

            -

            Attention ! Il est préférable de ne pas utiliser de valeurs pour name qui correspondent à une propriété native de l'objet du DOM car cela surchargerait la propriété préexistante avec une référence au champ concerné.

            +

            Attention : Il est préférable de ne pas utiliser de valeurs pour name qui correspondent à une propriété native de l'objet du DOM car cela surchargerait la propriété préexistante avec une référence au champ concerné.

            Le nom _charset_ possède une signification spéciale. Si cette valeur est utilisée comme nom pour un élément <input> de type hidden, la valeur du champ (l'attribut value) sera automatiquememnt renseignée par l'agent utilisateur et correspondra à l'encodage utilisé pour envoyer le formulaire.

            @@ -205,12 +204,8 @@ let hatSize = form.elements["hat-size"];

            disabled et readonly sont bien différents : readonly permet d'avoir un contrôle fonctionnel mais non éditable alors que les champs disabled ne fonctionnent pas comme des contrôles.

            -
            -

            Notes :

            - -

            L'attribut required n'est pas autorisé sur les éléments <input> avec l'attribut readonly.

            - -

            Seuls les champs textuels peuvent être mis en lecture seule. En effet, pour les autres contrôles (ex. les case à cocher et les boutons radio), il n'y a pas de réelle différence entre l'application de readonly ou de disabled.

            +
            +

            Note : L'attribut required n'est pas autorisé sur les éléments <input> avec l'attribut readonly. Seuls les champs textuels peuvent être mis en lecture seule. En effet, pour les autres contrôles (ex. les case à cocher et les boutons radio), il n'y a pas de réelle différence entre l'application de readonly ou de disabled.

            {{htmlattrdef("required")}}

            diff --git a/files/fr/web/html/element/input/month/index.html b/files/fr/web/html/element/input/month/index.html index 301cc38dc0..6f21f8d10d 100644 --- a/files/fr/web/html/element/input/month/index.html +++ b/files/fr/web/html/element/input/month/index.html @@ -9,21 +9,19 @@ translation_of: Web/HTML/Element/input/month ---
            {{HTMLRef}}
            -

            Les éléments {{htmlelement("input")}} dont l'attribut type vaut "month" permettent de créer des contrôles où l'utilisateur peut saisir un mois et année. La valeur associée à un tel élément suit le format "YYYY-MM", où YYYY représente l'année sur quatre chiffre et MM le mois sur deux chiffres.

            +

            Les éléments {{htmlelement("input")}} dont l'attribut type vaut "month" permettent de créer des contrôles où l'utilisateur peut saisir un mois et année. La valeur associée à un tel élément suit le format "YYYY-MM", où YYYY représente l'année sur quatre chiffre et MM le mois sur deux chiffres.

            {{EmbedInteractiveExample("pages/tabbed/input-month.html", "tabbed-shorter")}}
            - -

            L'interface utilisateur associée à ce contrôle varie d'un navigateur à l'autre et la prise en charge de cette fonctionnalité reste encore hétérogène : seuls Chrome, Opéra et Edge implémentent cette fonctionnalité sur ordinateur et la plupart des navigateurs mobiles possèdent une implémentation. Pour les navigateurs qui ne prennent pas en charge cette fonctionnalité, l'élément sera transformé en un simple <input type="text">.

            Si votre navigateur ne prend pas en charge ce type d'élément, voici ensuite une capture d'écran de Chrome : cliquer sur la flèche vers le bas permettra de faire apparaître un sélecteur de date qui permettra de choisir le mois et l'année.

            -

            +

            Voici un aperçu du contrôle sous Edge :

            -

            +

            Valeur

            @@ -31,12 +29,12 @@ translation_of: Web/HTML/Element/input/month

            Il est possible de définir une valeur par défaut pour le contrôle en utilisant l'attribut {{htmlattrxref("value", "input")}} de la façon suivante :

            -
            +

            Exemple 1

            +
            <label for="bday-month">Quel est le mois de votre naissance ?</label>
             <input id="bday-month" type="month" name="bday-month" value="2017-06">
            -

            {{EmbedLiveSample('value-example-1', 600, 60)}}

            -
            +

            {{EmbedLiveSample('Exemple_1', 600, 60)}}

            On notera que la façon dont la date est affichée peut varier selon la locale de l'utilisateur et être présentée sous un format différent. En revanche, d'un point de vue technique, la valeur de l'attribut value suivra toujours le format YYYY-MM.

            @@ -44,17 +42,16 @@ translation_of: Web/HTML/Element/input/month

            Il est également possible de manipuler la date en JavaScript grâce à la propriété {{domxref("HTMLInputElement.value")}}. Par exemple :

            -
            - -
            var monthControl = document.querySelector('input[type="month"]');
            +
             
            -

            {{EmbedLiveSample("value-example-2", 600, 60)}}

            -
            +

            {{EmbedLiveSample("Exemple_2", 600, 60)}}

            Attributs supplémentaires

            @@ -150,7 +147,7 @@ monthControl.value = '1978-06';
            -

            Note : L'attribut {{htmlattrxref("step", "input")}} devrait pouvoir être utilisé afin d'ajuster le pas d'incrémentation (par exemple si on ne veut pouvoir sélectionner que les mois de début de trimestre). Toutefois, à l'heure où nous écrivons ces lignes, aucun navigateur ne semble prendre correctement en charge cette fonctionnalité.

            +

            Note : L'attribut {{htmlattrxref("step", "input")}} devrait pouvoir être utilisé afin d'ajuster le pas d'incrémentation (par exemple si on ne veut pouvoir sélectionner que les mois de début de trimestre). Toutefois, à l'heure où nous écrivons ces lignes, aucun navigateur ne semble prendre correctement en charge cette fonctionnalité.

            Contrôler la taille du champ

            @@ -183,7 +180,7 @@ monthControl.value = '1978-06';

            Voici une capture d'écran qui illustre le résultat obtenu avec un navigateur prenant en charge cette fonctionnalité :

            -

            +

            Voici ensuite la feuille de style CSS utilisée dans l'exemple précédent. On utilise {{cssxref(":valid")}} et {{cssxref(":invalid")}} afin de mettre en forme le contrôle selon que la valeur saisie est invalide. Les icônes ajoutées sont placées dans un élément {{htmlelement("span")}} à part car Chrome ne permet pas de gérer du contenu généré à même le contrôle ni de mettre en forme ce contenu généré.

            @@ -213,14 +210,14 @@ input:valid+span:after { }
            -

            Attention ! Il est également important de vérifier le format de la valeur saisie côté serveur ! En effet, il est tout à fait possible pour un utilisateur de modifier le code HTML du site ou d'envoyer des données au serveur sans passer par le formulaire. Il est donc nécessaire de contrôler la valeur avant de s'en servir dans la logique de l'application côté serveur afin d'éviter des conséquences malheureuses.

            +

            Attention : Il est également important de vérifier le format de la valeur saisie côté serveur ! En effet, il est tout à fait possible pour un utilisateur de modifier le code HTML du site ou d'envoyer des données au serveur sans passer par le formulaire. Il est donc nécessaire de contrôler la valeur avant de s'en servir dans la logique de l'application côté serveur afin d'éviter des conséquences malheureuses.

            Gérer la prise en charge des navigateurs

            Comme évoqué plus haut, le problème principal relatif à ces contrôles est l'absence partielle de prise en charge des navigateurs. Seuls Chrome, Opera et Edge supportent ce type de contrôle sur ordinateurs et la plupart des navigateurs mobiles le prennent en charge. À titre d'exemple, voici une capture d'écran du contrôle sous Chrome pour Android :

            -

            +

            Les navigateurs qui ne prennent pas en charge cette fonctionnalité basculent sur un contrôle textuel classique mais cela pose problème à la fois en termes de cohérence de l'interface utilisateur et aussi par rapport à la gestion des données.

            @@ -255,8 +252,7 @@ input:valid+span:after {

            De plus, cela présage que l'utilisateur comprenne le format dans lequel il faut saisir la valeur. Bref, le problème subsiste.

            -

            La meilleure façon de gérer la saisie de mois pour l'ensemble des navigateurs consiste actuellement à saisir le mois et l'année dans deux contrôles séparés, représentés chacun par un élément {{htmlelement("select")}}. On peut également utiliser certaines bibliothèques JavaScript telles que jQuery date picker ou le plugin jQuery timepicker.

            @@ -329,8 +324,7 @@ input:valid+span:after {

            Les mois sont représentés statiquement (ce sont toujours les mêmes) et les valeurs pour les années sont générées dynamiquement à partir de l'année courante (voir les commentaires dans le code suivant).

            -

            Une partie intéressante du code est celle qui permet de détecter la prise en charge de fonctionnalité. Pour détecter si le navigateur prend en charge ce contrôle, on crée un nouvel élément {{htmlelement("input")}} dont on modifie le type afin qu'il vaille month puis on vérifie immédiatement la valeur associée au type : les navigateurs qui ne prennent pas en charge la fonctionnalité renverront text car le champ month a automatiquement transformé en text. Si c'est le cas, on masque le sélecteur natif et on affiche le sélecteur alternatif (celui construit avec les éléments {{htmlelement("select")}}).

            diff --git a/files/fr/web/html/element/input/number/index.html b/files/fr/web/html/element/input/number/index.html index 3c2b06a291..8e9cbf1e5b 100644 --- a/files/fr/web/html/element/input/number/index.html +++ b/files/fr/web/html/element/input/number/index.html @@ -10,14 +10,12 @@ translation_of: Web/HTML/Element/input/number ---
            {{HTMLRef}}
            -

            Les éléments {{HTMLElement("input")}} dont l'attribut type vaut number permettent à un utilisateur de saisir des nombres dans un formulaires. De tels contrôles incluent des mécanismes de validation natifs afin de rejeter les valeurs non-numériques. Le navigateur peut agrémenter le contrôle avec des flèches afin d'incrémenter/décrémenter la valeur grâce à la souris ou avec le doigt.

            +

            Les éléments {{HTMLElement("input")}} dont l'attribut type vaut number permettent à un utilisateur de saisir des nombres dans un formulaires. De tels contrôles incluent des mécanismes de validation natifs afin de rejeter les valeurs non-numériques. Le navigateur peut agrémenter le contrôle avec des flèches afin d'incrémenter/décrémenter la valeur grâce à la souris ou avec le doigt.

            {{EmbedInteractiveExample("pages/tabbed/input-number.html", "tabbed-shorter")}}
            - -
            -

            Note : Si un navigateur ne prend pas en charge le type number, le contrôle affiché sera le contrôle standard pour la saisie d'un texte (cf. text).

            +

            Note : Si un navigateur ne prend pas en charge le type number, le contrôle affiché sera le contrôle standard pour la saisie d'un texte (cf. text).

            Valeur

            @@ -81,7 +79,6 @@ translation_of: Web/HTML/Element/input/number

            {{htmlattrdef("step")}}

            -

            L'attribut step est un nombre qui définit la granularité de la valeur ou le mot-clé any. Seule les valeurs qui sont des multiples de cet attribut depuis le seuil {{anch("min")}} sont valides.

            Lorsque la chaîne de caractères any est utilisée, cela indique qu'aucun incrément spécifique n'est défini et que toute valeur (comprise entre {{anch("min")}} et {{anch("max")}}) est valide.

            @@ -89,7 +86,6 @@ translation_of: Web/HTML/Element/input/number

            Note : Lorsque les données saisies par l'utilisateur ne correspondent pas à l'incrément indiqué, l'agent utilisateur pourra arrondir à la valeur valide la plus proche (en choisissant les nombres les plus grands lorsque deux sont équidistants.

            -

            Pour les champs number, l'incrément par défaut est 1 et ne permet donc que de saisir des entiers si la valeur de base est entière. Ainsi, si on a min qui vaut -10 et value qui vaut 1.5, si on a step qui vaut 1, seules les valeurs 1.5, 2.5, 3.5,... -0.5, -1.5, -2.5,... seront valides.

            @@ -98,17 +94,15 @@ translation_of: Web/HTML/Element/input/number

            Les éléments <input type="number"> simplifient la saisie de valeurs numériques dans un formulaire. Lorsqu'on crée un tel contrôle, des mécanismes de validation automatiques sont appliqués afin de vérifier que le texte saisi est bien un nombre. Généralement un contrôle de saisie numérique incluera des boutons avec des curseurs pour augmenter/réduire la valeur.

            -

            Attention ! On notera qu'un utilisateur peut toujours saisir des valeurs qui ne sont pas numériques dans de tels champs (par exemple avec un navigateur de bureau). Toutefois, ce comportement semble différer selon les navigateurs (voir {{bug(1398528)}}). Les valeurs non-numériques seront considérées comme invalide (cf. {{anch("Validation")}} ci-après).

            +

            Attention : On notera qu'un utilisateur peut toujours saisir des valeurs qui ne sont pas numériques dans de tels champs (par exemple avec un navigateur de bureau). Toutefois, ce comportement semble différer selon les navigateurs (voir {{bug(1398528)}}). Les valeurs non-numériques seront considérées comme invalide (cf. {{anch("Validation")}} ci-après).

            -

            Note : Il est important de rappeler qu'un utilisateur peut tout à fait modifier le code HTML qui est utilisé. Le site ne doit donc pas se reposer sur les mécanismes de validation qui existent côté client pour considérer qu'une valeur est saine. Pour des raisons de contrôle et de sécurité, les valeurs envoyées via un formulaire doivent être vérifiées côté serveur.

            +

            Note : Il est important de rappeler qu'un utilisateur peut tout à fait modifier le code HTML qui est utilisé. Le site ne doit donc pas se reposer sur les mécanismes de validation qui existent côté client pour considérer qu'une valeur est saine. Pour des raisons de contrôle et de sécurité, les valeurs envoyées via un formulaire doivent être vérifiées côté serveur.

            De plus, les navigateurs mobiles peuvent adapter leur ergonomie en affichant un clavier adapté à la saisie de valeur numérique lorsque l'utilisateur appuie sur un tel contrôle. Voici le résultat qu'on obtient par exemple avec Firefox pour Android :

            -

            -

            Un contrôle simple

            Dans sa forme la plus simple, on peut implémenter un contrôle de saisie numérique avec le fragment HTML suivant :

            @@ -121,7 +115,7 @@ translation_of: Web/HTML/Element/input/number

            Un contrôle de saisie numérique considère que la valeur est valide si elle est vide ou quand un nombre est saisi. Dans les autres cas, la valeur est considérée invalide. Si l'attribut {{htmlattrxref("required", "input")}} est utilisé, la valeur vide n'est plus considérée valide.

            -

            Note : N'importe quel nombre est valide tant que c'est un nombre qui peut être représenté comme un nombre à virgule flottante (autrement dit, un nombre qui n'est pas {{jsxref("NaN")}} ou {{jsxref("Infinity")}}).

            +

            Note : N'importe quel nombre est valide tant que c'est un nombre qui peut être représenté comme un nombre à virgule flottante (autrement dit, un nombre qui n'est pas {{jsxref("NaN")}} ou {{jsxref("Infinity")}}).

            Indicateurs de saisie - placeholders

            @@ -249,7 +243,7 @@ input:valid+span:after {

            Ici, on a utilisé les pseudo-classes {{cssxref(":invalid")}} et {{cssxref(":valid")}} afin d'afficher une icône selon le cas, à côté de l'élément {{htmlelement("span")}} ajdacent. On utilise un élément <span> séparé pour plus de flexibilité : certains navigateurs n'affichent pas le contenu généré par les pseudo-classes pour certains types de contrôle (cf. <input type="date">).

            -

            Important : la validation des données des formulaires par le navigateur (côté client) doit toujours être complétée d'une validation des données côté serveur (l'utilisateur peut toujours modifier le HTML et envoyer les données au serveur).

            +

            Attention : la validation des données des formulaires par le navigateur (côté client) doit toujours être complétée d'une validation des données côté serveur (l'utilisateur peut toujours modifier le HTML et envoyer les données au serveur).

            Utilisation d'un motif de validation

            diff --git a/files/fr/web/html/element/input/password/index.html b/files/fr/web/html/element/input/password/index.html index 29df138c29..7585571836 100644 --- a/files/fr/web/html/element/input/password/index.html +++ b/files/fr/web/html/element/input/password/index.html @@ -15,8 +15,6 @@ translation_of: Web/HTML/Element/input/password
            {{EmbedInteractiveExample("pages/tabbed/input-password.html", "tabbed-standard")}}
            - -

            La façon dont le texte saisi est traité dépend du navigateur utilisé. Sur les appareils mobiles, par exemple, le caractère tapé est souvent laissé affiché un court instant afin que l'utilisateur puisse contrôler que c'est bien le bon caractère. Ainsi, même si le clavier est petit et viruel, on peut éviter de faire trop d'erreurs.

            @@ -30,7 +28,7 @@ translation_of: Web/HTML/Element/input/password

            Si l'attribut {{htmlattrxref("pattern", "input")}} est indiqué, le contenu du contrôle doit respecter l'expression rationnelle indiquée par l'attribut. Pour plus d'informations, voir la section {{anch("Validation")}} ci-après.

            -

            Note : Il n'est pas possible d'utiliser les caractères de fin de ligne (Line Feed) (code U+000A) et de retour chariot (Carriage Return) (code U+000D) dans la valeur d'un champ "password". Lorsqu'on saisit la valeur, ces caractères sont retirés si besoin.

            +

            Note : Il n'est pas possible d'utiliser les caractères de fin de ligne (Line Feed) (code U+000A) et de retour chariot (Carriage Return) (code U+000D) dans la valeur d'un champ "password". Lorsqu'on saisit la valeur, ces caractères sont retirés si besoin.

            Attributs supplémentaires

            @@ -115,7 +113,7 @@ translation_of: Web/HTML/Element/input/password

            {{EmbedLiveSample("Un_contrôle_basique", 600, 40)}}

            -

            Paramétrer l’autocomplétion

            +

            Paramétrer l'autocomplétion

            Afin de permettre au gestionnaire de mots de passe de saisir automatiquement le mot de passe, on pourra utiliser l'attribut {{htmlattrxref("autocomplete", "input")}}. Pour les mots de passe, celui-ci aura l'une des valeurs suivantes :

            @@ -130,12 +128,10 @@ translation_of: Web/HTML/Element/input/password
            Cette valeur indique au navigateur ou au gestionnaire de mots de passe qu'il faut générer un nouveau mot de passe et utiliser ce dernier pour remplir le champ. La génération automatique du mot de passe peut alors utiliser les autres attributs de l'élément. Cette valeur peut également être indiquée pour que le navigateur indique cette information d'un façon ou d'une autre.
            -
            <label for="userPassword">Mot de passe :</label>
             <input id="userPassword" type="password" autocomplete="current-password">
            -
            -

            {{EmbedLiveSample("Paramétrer_l’autocomplétion", 600, 40)}}

            +

            {{EmbedLiveSample("Paramétrer_l'autocomplétion", 600, 40)}}

            Rendre le champ obligatoire

            @@ -194,12 +190,10 @@ translation_of: Web/HTML/Element/input/password

            Dans cet exemple, il n'est possible de saisir qu'une valeur qui contient entre 4 et 8 caractères qui sont des caractères hexadécimaux.

            -
            <label for="hexId">Identifiant Hexa :</label>
             <input id="hexId" type="password" pattern="[0-9a-fA-F]{4,8}"
                    title="Veuillez saisir un identifiant avec 4 à 8 chiffres hexadécimaux."
                    autocomplete="nouveau-mot-de-passe">
            -

            {{EmbedLiveSample("Validation", 600, 40)}}

            diff --git a/files/fr/web/html/element/input/radio/index.html b/files/fr/web/html/element/input/radio/index.html index b5a3cf3c8c..8b8fd78f46 100644 --- a/files/fr/web/html/element/input/radio/index.html +++ b/files/fr/web/html/element/input/radio/index.html @@ -14,12 +14,10 @@ translation_of: Web/HTML/Element/input/radio
            {{EmbedInteractiveExample("pages/tabbed/input-radio.html", "tabbed-standard")}}
            - -

            On les appelle boutons radios par analogie avec les boutons qui étaient utilisés sur les anciens postes de radios.

            -

            Note : Les cases à cocher (checkboxes) ressemblent aux boutons radios. Toutefois, il existe une différence fondamentale : les boutons radio ne permettent de sélectionner qu'une seule option au sein d'un groupe alors que les cases à cocher permettent d'en sélectionner plusieurs.

            +

            Note : Les cases à cocher (checkboxes) ressemblent aux boutons radios. Toutefois, il existe une différence fondamentale : les boutons radio ne permettent de sélectionner qu'une seule option au sein d'un groupe alors que les cases à cocher permettent d'en sélectionner plusieurs.

            Valeur

            @@ -69,7 +67,7 @@ translation_of: Web/HTML/Element/input/radio

            Si l'attribut value n'est pas fourni dans le document HTML, la valeur par défaut utilisée sera on pour l'ensemble du groupe. Si c'était le cas avec notre exemple précédent et que l'utilisateur avait cliqué sur l'option « Téléphone » et envoyé le formulaire, les données envoyées auraient contenu "contact=on" ce qui ne s'avère pas très utile. Aussi, mieux vaut ne pas oublier les attributs value !

            -

            Note : Si aucun bouton radio n'est sélectionné au moment de l'envoi du formulaire, le groupe radio n'est pas inclus dans les données envoyées par le formulaire car il n'y a aucune valeur à fournir.

            +

            Note : Si aucun bouton radio n'est sélectionné au moment de l'envoi du formulaire, le groupe radio n'est pas inclus dans les données envoyées par le formulaire car il n'y a aucune valeur à fournir.

            Généralement, on souhaite qu'au moins une option soit sélectionné parmi les boutons d'un groupe et on inclue donc souvent un attribut checked sur l'un des boutons afin d'avoir une option sélectionnée par défaut.

            @@ -143,7 +141,7 @@ form.addEventListener("submit", function(event) {

            {{htmlattrdef("checked")}}

            -

            Un attribut booléen qui indique si c'est ce champ radio qui est sélectionné parmi le groupe.

            +

            Un attribut booléen qui indique si c'est ce champ radio qui est sélectionné parmi le groupe.

            À la différence des autres navigateurs, Firefox conservera l'état coché dynamique d'un bouton radio au fur et à mesure des chargements de la page. On pourra utiliser l'attribut {{htmlattrxref("autocomplete","input")}} afin de contrôler cette fonctionnalité.

            @@ -184,7 +182,7 @@ form.addEventListener("submit", function(event) {

            Ici, c'est le premier bouton radio qui sera sélectionné par défaut.

            -

            Note : Si l'attribut checked est placé sur plus d'un bouton, c'est le dernier bouton contenant l'attribut qui sera sélectionné. C'est donc l'ordre des valeurs qui déterminera la valeur par défaut. Pour rappel, il ne peut y avoir qu'un seul bouton radio du groupe qui soit sélectionné à un instant donné.

            +

            Note : Si l'attribut checked est placé sur plus d'un bouton, c'est le dernier bouton contenant l'attribut qui sera sélectionné. C'est donc l'ordre des valeurs qui déterminera la valeur par défaut. Pour rappel, il ne peut y avoir qu'un seul bouton radio du groupe qui soit sélectionné à un instant donné.

            Fournir une plus grande zone de sélection

            diff --git a/files/fr/web/html/element/input/range/index.html b/files/fr/web/html/element/input/range/index.html index eae6bb4f32..04f159c62d 100644 --- a/files/fr/web/html/element/input/range/index.html +++ b/files/fr/web/html/element/input/range/index.html @@ -14,8 +14,6 @@ translation_of: Web/HTML/Element/input/range

            {{EmbedInteractiveExample("pages/tabbed/input-range.html", "tabbed-standard")}}

            - -

            Si le navigateur de l'utilisateur ne prend pas en charge le type range, il utilisera le type text à la place.

            Valeur

            @@ -101,18 +99,18 @@ translation_of: Web/HTML/Element/input/range

            Par défaut, la granularité vaut 1, ce qui signifie que la valeur est toujours un entier. Cela peut être modifié grâce à l'attribut {{htmlattrxref("step")}} qui permet de contrôler la granularité. Ainsi, si on souhaite une valeur comprise entre 5 et 10 et précise avec deux chiffres après la virgule, on pourra utiliser l'attribut step avec la valeur 0.01 :

            -
            +

            Exemple 1

            <input type="range" min="5" max="10" step="0.01">
            -

            {{EmbedLiveSample("Granularity_sample1", 600, 40)}}

            -
            +

            {{EmbedLiveSample("Exemple_1", 600, 40)}}

            + +

            Exemple 2

            Si on souhaite prendre en charge n'importe quelle valeur, quel que soit le nombre de décimales, on pourra utiliser la valeur any pour l'attribut step :

            -
            <input type="range" min="0" max="3.14" step="any">
            -

            {{EmbedLiveSample("Granularity_sample2", 600, 40)}}

            +

            {{EmbedLiveSample("Exemple_2", 600, 40)}}

            Cet exemple permet à l'utilisateur de choisir une valeur entre 0 et 3.14 sans aucune restriction quant à la partie décimale.

            @@ -140,7 +138,7 @@ translation_of: Web/HTML/Element/input/range
             <input type="range">
            -
            +
            Élément
            <svg><svg> L'élément svg est un conteneur qui définit un nouveau système de coordonnées et une vue. Il est utilisé comme élément le plus externe des documents SVG, mais il peut également être utilisé pour intégrer un fragment SVG à l'intérieur d'un document SVG ou HTML.
            <math><math> L'élément de niveau supérieur en MathML est <math>. Chaque instance MathML valide doit être enveloppée dans des balises <math>. En outre, vous ne devez pas imbriquer un deuxième élément <math> dans un autre, mais vous pouvez avoir un nombre arbitraire d'autres éléments enfants dans celui-ci.
            Screenshot of a plain slider control on macOSCapture d'écran d'un contrôle curseur sur macOS
            @@ -175,7 +173,7 @@ translation_of: Web/HTML/Element/input/range </datalist> - Screenshot of a plain slider control on macOS + Capture d'écran un contrôle curseur sur macOS @@ -210,7 +208,7 @@ translation_of: Web/HTML/Element/input/range </datalist> - Screenshot of a plain slider control on macOS + Capture d'écran un contrôle curseur sur macOS @@ -221,47 +219,41 @@ translation_of: Web/HTML/Element/input/range

            Modifier l'orientation du curseur

            - +

            La spécification HTML recommande de dessiner les contrôles verticalement lorsque la hauteur de celui-ci est supérieure à la largeur. Malheureusement, aucun navigateur ne prend actuellement en charge cette fonctionnalité directement. On peut toutefois dessiner un contrôle vertical en appliquant une rotation sur un contrôle horizontal avec du code CSS et notamment {{cssxref("transform")}} pour tourner l'élément.

            -
            -

            HTML

            +

            Autre exemple

            + +
            HTML

            Il est nécessaire de placer l'élément {{HTMLElement("input")}} dans un élément {{HTMLElement("div")}} afin de corriger la disposition une fois la transformation appliquée :

            @@ -269,7 +261,7 @@ translation_of: Web/HTML/Element/input/range <input type="range" min="0" max="11" value="7" step="1"> </div> -

            CSS

            +
            CSS

            Ensuite, on applique quelques règles CSS. Voici la règle CSS pour l'élément div qui indique le mode d'affichage et la taille qu'on souhaite avoir pour que la page soit correctement organisée..

            @@ -292,10 +284,9 @@ Ensuite, on applique une transformation sur l'élément <input>Le contrôle mesure alors 150 pixels de long et 20 pixels de haut. Les marges sont nulles et {{cssxref("transform-origin")}} est décalé vers le milieu du contrôle. Le contrôle mesurant 150 pixels de large, décaler le centre de rotation permet d'avoir la zone de destination centrée avec 75 pixels de chaque côté.

            -

            Résultat

            +
            Résultat
            -

            {{EmbedLiveSample("Orientation_sample3", 200, 200, "https://mdn.mozillademos.org/files/14987/Orientation_sample3.png")}}

            -
            +

            {{EmbedLiveSample("Autre_exemple", 200, 200, "orientation_sample3.png")}}

            Validation

            diff --git a/files/fr/web/html/element/input/reset/index.html b/files/fr/web/html/element/input/reset/index.html index fe37b12b8b..3b8ac2bf95 100644 --- a/files/fr/web/html/element/input/reset/index.html +++ b/files/fr/web/html/element/input/reset/index.html @@ -10,33 +10,30 @@ translation_of: Web/HTML/Element/input/reset ---
            {{HTMLRef}}
            -

            Les éléments {{HTMLElement("input")}} de type "reset" sont affichés sous la forme de boutons permettant de réiniatiliser l'ensemble des champs du formulaire avec leurs valeurs initiales.

            +

            Les éléments {{HTMLElement("input")}} de type "reset" sont affichés sous la forme de boutons permettant de réiniatiliser l'ensemble des champs du formulaire avec leurs valeurs initiales.

            {{EmbedInteractiveExample("pages/tabbed/input-reset.html", "tabbed-standard")}}
            - -
            -

            Note : Il est généralement peu recommandé d'inclure des boutons de réinitialisation dans les formulaires. En effet, ils sont rarement utiles et peuvent être source de frustration lorsqu'on appuie dessus involontairement.

            +

            Note : Il est généralement peu recommandé d'inclure des boutons de réinitialisation dans les formulaires. En effet, ils sont rarement utiles et peuvent être source de frustration lorsqu'on appuie dessus involontairement.

            Valeur

            La valeur de l'attribut value d'un élément <input type="reset"> contient une chaîne de caractères ({{domxref("DOMString")}}) utilisée comme texte sur le bouton.

            -
            +

            Exemple 1

            <input type="reset" value="Réinitialiser le formulaire">
            -
            -

            {{EmbedLiveSample("summary-example3", 650, 30)}}

            +

            {{EmbedLiveSample("Exemple_1", 650, 30)}}

            Si aucune valeur n'est indiquée, le bouton aura le texte par défaut « Réinitialiser » :

            -
            +

            Exemple 2

            +
            <input type="reset">
            -
            -

            {{EmbedLiveSample("summary-example1", 650, 30)}}

            +

            {{EmbedLiveSample("Exemple_2", 650, 30)}}

            Utiliser les boutons de réinitialisation

            @@ -83,25 +80,23 @@ translation_of: Web/HTML/Element/input/reset

            {{EmbedLiveSample("Ajouter_un_raccourci_au_bouton", 650, 100)}}

            -

            Note : Le problème d'un tel raccourci est que l'utilisateur ne saura pas quelle touche clavier correspond au raccourci. Dans une situation réaliste, il est nécessaire de fournir l'information via un autre biais (sans interférer avec le design du site), par exemple grâce à un lien qui pointe vers la liste des différents raccourcis utilisés sur le site.

            +

            Note : Le problème d'un tel raccourci est que l'utilisateur ne saura pas quelle touche clavier correspond au raccourci. Dans une situation réaliste, il est nécessaire de fournir l'information via un autre biais (sans interférer avec le design du site), par exemple grâce à un lien qui pointe vers la liste des différents raccourcis utilisés sur le site.

            Désactiver/Activer un bouton

            Pour désactiver un bouton de réinitialisation, il suffit d'appliquer l'attribut {{htmlattrxref("disabled")}} sur l'élément :

            -
            <input type="reset" value="Désactivé" disabled>
            -

            On peut activer/désactiver le bouton lors de la navigation sur la page avec JavaScript en modifiant la valeur de l'attribut disabled pour la passer de true à false et vice versa (par exemple avec une instruction telle que btn.disabled = true).

            -

            Note : Pour plus d'exemples concernant l'activation/la désactivation de bouton, vous pouvez consulter la page <input type="button">.

            +

            Note : Pour plus d'exemples concernant l'activation/la désactivation de bouton, vous pouvez consulter la page <input type="button">.

            -

            Note : À la différence des autres navigateurs, Firefox conservera un état désactivé obtenu de façon dynamique lorsque la page est rechargée. L'attribut {{htmlattrxref("autocomplete","button")}} peut être utilisé afin de contrôler cette fonctionnalité.

            +

            Note : À la différence des autres navigateurs, Firefox conservera un état désactivé obtenu de façon dynamique lorsque la page est rechargée. L'attribut {{htmlattrxref("autocomplete","button")}} peut être utilisé afin de contrôler cette fonctionnalité.

            Validation

            diff --git a/files/fr/web/html/element/input/search/index.html b/files/fr/web/html/element/input/search/index.html index 5707359a30..ea54004693 100644 --- a/files/fr/web/html/element/input/search/index.html +++ b/files/fr/web/html/element/input/search/index.html @@ -9,12 +9,10 @@ translation_of: Web/HTML/Element/input/search ---
            {{HTMLRef}}
            -

            Les éléments {{HTMLElement("input")}} dont l'attribut type vaut search permettent à un utilisateur de saisir des termes de recherche.

            +

            Les éléments {{HTMLElement("input")}} dont l'attribut type vaut search permettent à un utilisateur de saisir des termes de recherche.

            {{EmbedInteractiveExample("pages/tabbed/input-search.html", "tabbed-standard")}}
            - -

            Valeur

            La valeur de l'attribut {{htmlattrxref("value", "input")}} contient une chaîne de caractères ({{domxref("DOMString")}}) qui représente la valeur du champ de recherche. En JavaScript, on peut récupérer cette information grâce à la propriété {{domxref("HTMLInputElement.value")}}.

            @@ -175,11 +173,11 @@ translation_of: Web/HTML/Element/input/search

            La différence principale est la façon dont les navigateurs gèrent cet élément. Premièrement, certains navigateurs affiche une icône de croix dans la zone de saisie qui peut être utilisée pour retirer le terme de la recherche. Voici par exemple un aperçu de la fonctionnalité sous Chrome:

            -

            +

            De plus, les navigateurs modernes proposent souvent une auto-complétion basée sur les termes de recherche déjà utilisés sur le site. Ainsi, quand on réutilise le champ, différentes suggestions peuvent être affichées et utilisées. Voici l'aperçu de cette fonctionnalité sous Firefox :

            -

            +

            Ajouter un texte indicatif

            @@ -226,7 +224,7 @@ translation_of: Web/HTML/Element/input/search

            Il n'y a aucune différence visuelle avec l'exemple précédent mais avec cette deuxième version, les personnes qui utilisent un lecteur d'écran disposeront de plus d'informations.

            -

            Note : Voir Signposts/Landmarks pour plus d'informations à propos de ces fonctionnalités relatives à l'accessibilité.

            +

            Note : Voir Signposts/Landmarks pour plus d'informations à propos de ces fonctionnalités relatives à l'accessibilité.

            Paramétrer la taille physique

            @@ -248,7 +246,7 @@ translation_of: Web/HTML/Element/input/search

            Les éléments <input> de type search possèdent les mêmes fonctionnalités de validation que les éléments <input type="text">. Il existe peu de raison de contraindre les termes d'une recherche mais voici quelques cas.

            -

            Note : Attention, la validation des données d'un formulaire de recherche HTML par le client ne doit pas remplacer la vérification de ces données lorsqu'elles sont reçues sur le serveur. En effet, il est tout à fait possible pour quelqu'un de modifier le code HTML de la page pour outrepasser les mécanismes de validation. Il est également possible d'envoyer des données directement au serveur. Si le serveur ne valide pas les données reçues, des données potentiellement mal formatées pourraient causer des dommages aux bases de données et autres composants sensibles.

            +

            Note : Attention, la validation des données d'un formulaire de recherche HTML par le client ne doit pas remplacer la vérification de ces données lorsqu'elles sont reçues sur le serveur. En effet, il est tout à fait possible pour quelqu'un de modifier le code HTML de la page pour outrepasser les mécanismes de validation. Il est également possible d'envoyer des données directement au serveur. Si le serveur ne valide pas les données reçues, des données potentiellement mal formatées pourraient causer des dommages aux bases de données et autres composants sensibles.

            Une note sur la mise en forme

            @@ -282,8 +280,7 @@ input:valid ~ span:after { </div> </form> -

            Voici le résultat obtenu :

            @@ -306,7 +302,7 @@ input:valid ~ span:after {

            De plus, si on essaie d'envoyer le formulaire sans aucun terme de recherche, le navigateur affichera un message. Voici par exemple, le résultat dans Firefox :

            -

            form field with attached message that says Please fill out this field

            +

            Champ de formulaire avec un message attaché indiquant 'veuillez remplir ce formulaire'

            Différents messages peuvent être affichés selon le type d'erreur liée à la saisie.

            @@ -327,8 +323,7 @@ input:valid ~ span:after { </div> </form> -

            Voici le résultat obtenu avec ce fragment de code HTML :

            @@ -368,8 +362,7 @@ input:valid ~ span:after { </div> </form> -

            Voici le résultat obtenu avec ce fragment HTML :

            diff --git a/files/fr/web/html/element/input/submit/index.html b/files/fr/web/html/element/input/submit/index.html index 20b704d1de..0dea8aeac7 100644 --- a/files/fr/web/html/element/input/submit/index.html +++ b/files/fr/web/html/element/input/submit/index.html @@ -11,13 +11,13 @@ translation_of: Web/HTML/Element/input/submit ---
            {{HTMLRef}}
            -

            Les éléments {{HTMLElement("input")}} dont l'attribut type vaut "submit" sont affichés comme des boutons permettant d'envoyer les données d'un formulaire. Cliquer sur un tel bouton déclenchera l'envoi des données du formulaire vers le serveur.

            +

            Les éléments {{HTMLElement("input")}} dont l'attribut type vaut "submit" sont affichés comme des boutons permettant d'envoyer les données d'un formulaire. Cliquer sur un tel bouton déclenchera l'envoi des données du formulaire vers le serveur.

            + +

            Exemple simple

            -
            <input type="submit" value="Envoyer le formulaire">
            -
            -

            {{EmbedLiveSample("summary-example2", 650, 30)}}

            +

            {{EmbedLiveSample("Exemple_simple", 650, 30)}}

            Valeur

            @@ -25,11 +25,11 @@ translation_of: Web/HTML/Element/input/submit

            Si on n'indique aucune valeur, ce sera un texte par défaut (dépendant du navigateur) qui sera utilisé ainsi que du système d'éxploitation:

            -
            +

            Exemple avec valeur par défaut

            +
            <input type="submit">
            -
            -

            {{EmbedLiveSample("summary-example1", 650, 30)}}

            +

            {{EmbedLiveSample("Exemple_avec_valeur_par_défaut", 650, 30)}}

            Attributs supplémentaires

            @@ -178,25 +178,23 @@ translation_of: Web/HTML/Element/input/submit

            {{EmbedLiveSample("Ajouter_un_raccourci_clavier", 650, 100)}}

            -

            Note : Un problème de cet exemple est que l'utilisateur ne saura pas quelle touche utiliser comme raccourci. Dans un cas concret, cette information serait affichée ou fournie via un lien simple d'accès qui décrirait les raccourcis disponibles.

            +

            Note : Un problème de cet exemple est que l'utilisateur ne saura pas quelle touche utiliser comme raccourci. Dans un cas concret, cette information serait affichée ou fournie via un lien simple d'accès qui décrirait les raccourcis disponibles.

            Activer et désactiver un bouton d'envoi

            Si on souhaite désactiver un bouton, il sufft d'utiliser l'attribut booléen universel {{htmlattrxref("disabled")}} :

            -
            <input type="submit" value="Disabled" disabled>
            -

            Pour activer / désactiver le bouton dynamiquement, on pourra manipuler l'attribut DOM disabled avec la valeur true ou false en JavaScript (avec une instruction similaire à btn.disabled = true).

            -

            Note : Voir la page <input type="button"> pour plus d'exemples concernant l'activation/désactivation des boutons liés à un formulaire.

            +

            Note : Voir la page <input type="button"> pour plus d'exemples concernant l'activation/désactivation des boutons liés à un formulaire.

            -

            Note : À la différence des autres navigateurs, Firefox conservera un état désactivé obtenu de façon dynamique lorsque la page est rechargée. L'attribut {{htmlattrxref("autocomplete","button")}} peut être utilisé afin de contrôler cette fonctionnalité.

            +

            Note : À la différence des autres navigateurs, Firefox conservera un état désactivé obtenu de façon dynamique lorsque la page est rechargée. L'attribut {{htmlattrxref("autocomplete","button")}} peut être utilisé afin de contrôler cette fonctionnalité.

            Validation

            diff --git a/files/fr/web/html/element/input/tel/index.html b/files/fr/web/html/element/input/tel/index.html index 04e08e0a6d..14356c7762 100644 --- a/files/fr/web/html/element/input/tel/index.html +++ b/files/fr/web/html/element/input/tel/index.html @@ -11,12 +11,10 @@ translation_of: Web/HTML/Element/input/tel ---
            {{HTMLRef}}
            -

            Les éléments {{HTMLElement("input")}} dont l'attribut type vaut "tel" permettent à un utilisateur de saisir un numéro de téléphone. Contrairement aux contrôles utilisés pour <input type="email"> et <input type="url"> , la valeur saisie n'est pas automatiquement validée selon un format donné car les formats des numéros de téléphone varient à travers le monde.

            +

            Les éléments {{HTMLElement("input")}} dont l'attribut type vaut "tel" permettent à un utilisateur de saisir un numéro de téléphone. Contrairement aux contrôles utilisés pour <input type="email"> et <input type="url"> , la valeur saisie n'est pas automatiquement validée selon un format donné car les formats des numéros de téléphone varient à travers le monde.

            {{EmbedInteractiveExample("pages/tabbed/input-tel.html", "tabbed-standard")}}
            - -

            Note : Les navigateurs qui ne prennent pas en charge le type "tel" utiliseront à la place un contrôle de type "text".

            @@ -129,20 +127,34 @@ translation_of: Web/HTML/Element/input/tel

            Les numéros de téléphone peuvent jouer un rôle important dans certains formulaires web. Un site de commerce en ligne, par exemple, peut vouloir enregistrer le numéro de téléphone d'un utilisateur pour le contacter lors de la livraison. Toutefois, un des problèmes relatifs aux numéros de téléphone est la variété de formats qui existent à travers le monde. Il est donc difficile (voire impossible) de valider les valeurs automatiquement.

            -

            Note : Des mécanismes de validation particuliers peuvent être ajoutés si besoin (cf. {{anch("Validation")}} ci-après).

            +

            Note : Des mécanismes de validation particuliers peuvent être ajoutés si besoin (cf. {{anch("Validation")}} ci-après).

            Claviers adaptés

            -

            L'un des avantages des contrôles de type tel est qu'ils permettent aux navigateurs mobiles de proposer un clavier adapté à la saisie de numéros de téléphone. Voici par exemple le clavier obtenu avec Firefox pour Android :

            +

            L'un des avantages des contrôles de type tel est qu'ils permettent aux navigateurs mobiles de proposer un clavier adapté à la saisie de numéros de téléphone.

            -

            + + + + + + + + + + + + + + +
            Exemples de claviers adaptés sur appareils mobiles.
            Firefox pour AndroidWebKit iOS (Safari/Chrome/Firefox)
            Capture d'écran pour Firefox pour AndroidCapture d'écran pour Firefox pour iOS

            Un contrôle simple

            Dans sa forme la plus simple, on peut implémenter un tel contrôle avec ce fragment HTML :

            -
            <input id="telNo" name="telNo" type="tel">
            +
            <input id="telNo" name="telNo" type="tel">

            {{EmbedLiveSample('Un_contrôle_simple', 600, 40)}}

            @@ -154,7 +166,7 @@ translation_of: Web/HTML/Element/input/tel

            Dans l'exemple suivant, on a un contrôle "tel" avec un attribut placeholder qui vaut "01 23 45 67 89". Vous pouvez manipuler le résultat obtenu pour voir comment ce texte est affiché selon qu'une valeur saisie ou que le champ est vide :

            -
            <input id="telNo" name="telNo" type="tel"
            +
            <input id="telNo" name="telNo" type="tel"
                    placeholder="01 23 45 67 89">

            {{EmbedLiveSample('Textes_indicatifs_-_placeholders', 600, 40)}}

            @@ -167,7 +179,7 @@ translation_of: Web/HTML/Element/input/tel

            La taille physique de la boîte de saisie peut être contrôlée avec l'attribut {{htmlattrxref("size", "input")}}. La valeur de cet attribut indique le nombre de caractères que la boîte peut afficher simultanément. Si, par exemple, on souhaite que le contrôle mesure 20 caractères de large, on pourra utiliser le code suivant :

            -
            <input id="telNo" name="telNo" type="tel"
            +
            <input id="telNo" name="telNo" type="tel"
                    size="20">

            {{EmbedLiveSample('La_taille_physique', 600, 40)}}

            @@ -178,23 +190,21 @@ translation_of: Web/HTML/Element/input/tel

            Dans l'exemple qui suit, on crée un contrôle qui mesure 20 caractères de large et dont le contenu doit être plus long que 9 caractères et plus court que 14 caractères.

            -
            <input id="telNo" name="telNo" type="tel"
            +
            <input id="telNo" name="telNo" type="tel"
                    size="20" minlength="9" maxlength="14">

            {{EmbedLiveSample("La_longueur_de_la_valeur", 600, 40)}}

            -

            Note : Ces deux attributs jouent un rôle lors de la {{anch("validation", "Validation")}}. Dans l'exemple précédent, la valeur sera considérée comme invalide si elle contient moins de 9 caractères ou plus de 14. La plupart des navigateurs ne permettront pas de saisir une valeur plus longue que la taille maximale.

            +

            Note : Ces deux attributs jouent un rôle lors de la {{anch("validation", "Validation")}}. Dans l'exemple précédent, la valeur sera considérée comme invalide si elle contient moins de 9 caractères ou plus de 14. La plupart des navigateurs ne permettront pas de saisir une valeur plus longue que la taille maximale.

            Fournir une valeur par défaut

            Il est possible de fournir une valeur par défaut en renseignant au préalable l'attribut {{htmlattrxref("value", "input")}} :

            -
            -
            <input id="telNo" name="telNo" type="tel"
            +
            <input id="telNo" name="telNo" type="tel"
                    value="01 23 45 67 89">
            -

            {{EmbedLiveSample("Fournir_une_valeur_par_défaut", 600, 40)}}

            @@ -202,7 +212,7 @@ translation_of: Web/HTML/Element/input/tel

            Si on souhaite aller plus loin, on peut fournir une liste de suggestions parmi lesquelles l'utilisateur pourra choisir (il pourra également saisir la valeur de son choix si celle-ci ne fait pas partie de la liste). Pour cela, on utilisera l'attribut {{htmlattrxref("list", "input")}} dont la valeur est l'identifiant d'un élément  {{HTMLElement("datalist")}} qui contient autant d'éléments  {{HTMLElement("option")}} que de valeurs suggérées. C'est la valeur de l'attribut value de chaque élément <option> qui sera utilisée comme suggestion.

            -
            <input id="telNo" name="telNo" type="tel" list="defaultTels">
            +
            <input id="telNo" name="telNo" type="tel" list="defaultTels">
             
             <datalist id="defaultTels">
               <option value="01 23 45 67 89">
            @@ -219,13 +229,15 @@ translation_of: Web/HTML/Element/input/tel
             
             

            Comme évoqué ci-avant, il est difficile de fournir une solution qui convienne pour l'ensemble des formats utilisés et qui permette de valider correctement les numéros de téléphone.

            -
            Attention ! Il est également important de vérifier le format de la valeur saisie côté serveur ! En effet, il est tout à fait possible pour un utilisateur de modifier le code HTML du site ou d'envoyer des données au serveur sans passer par le formulaire. Il est donc nécessaire de contrôler la valeur avant de s'en servir dans la logique de l'application côté serveur afin d'éviter des conséquences malheureuses.
            +
            +

            Attention : Il est également important de vérifier le format de la valeur saisie côté serveur ! En effet, il est tout à fait possible pour un utilisateur de modifier le code HTML du site ou d'envoyer des données au serveur sans passer par le formulaire. Il est donc nécessaire de contrôler la valeur avant de s'en servir dans la logique de l'application côté serveur afin d'éviter des conséquences malheureuses.

            +

            Rendre la valeur obligatoire

            Il est possible de rendre la saisie obligatoire avant de pouvoir envoyer le formulaire. Pour cela, on utilisera l'attribut {{htmlattrxref("required", "input")}} :

            -
            <form>
            +
            <form>
               <div>
                 <label for="telNo">Veuillez saisir un numéro de téléphone (obligatoire) : </label>
                 <input id="telNo" name="telNo" type="tel" required>
            @@ -238,7 +250,7 @@ translation_of: Web/HTML/Element/input/tel
             
             

            On utilisera la feuille de style suivante pour indiquer les éléments valides ou invalides du formulaire :

            -
            div {
            +
            div {
               margin-bottom: 10px;
               position: relative;
             }
            @@ -268,13 +280,13 @@ input:valid+span:after {
             
             

            {{EmbedLiveSample("Rendre_la_valeur_obligatoire", 700, 70)}}

            -

            Utiliser un format particulier

            +

            Utiliser un format particulier

            Si on souhaite restreindre le format de la valeur qui peut être saisie, on peut utiliser l'attribut {{htmlattrxref("pattern","input")}} dont la valeur est une expression rationnelle que la valeur doit respecter pour être valide.

            Dans cet exemple, on utilisera la même feuille de style que précédemment mais le code HTML sera celui-ci :

            -
            <form>
            +
            <form>
               <div>
                 <label for="telNo">Veuillez saisir un numéro de téléphone (obligatoire) : </label>
                 <input id="telNo" name="telNo" type="tel" required
            @@ -286,8 +298,7 @@ input:valid+span:after {
               </div>
             </form>
            -

            {{EmbedLiveSample("Utiliser_un_format_particulier", 700, 70)}}

            @@ -324,7 +334,7 @@ input:valid+span:after {

            Chaque boîte de saisie possède un attribut {{htmlattrxref("placeholder","input")}} qui indique le format pressenti. On utilise également l'attribut {{htmlattrxref("pattern","input")}} afin d'indiquer le nombre de caractères ainsi qu'un attribut aria-label qui pourra être lu par un lecteur d'écran ete qui décrit quoi saisir dans le contrôle.

            -
            <form>
            +
            <form>
               <div>
                 <label for="country">Veuillez choisir votre pays :</label>
                 <select id="country" name="country">
            @@ -361,7 +371,7 @@ input:valid+span:after {
             
             

            Le code JavaScript associé est relativement simple, il contient un gestionnaire d'évènements {{domxref("GlobalEventHandlers.onchange", "onchange")}} qui est déclenché lorsque la valeur du <select> est modifiée. Il met alors à jour les attributs pattern, placeholder, aria-label du contrôle pour adapter le format attendu au pays choisi.

            -
            var selectElem = document.querySelector("select");
            +
            var selectElem = document.querySelector("select");
             var inputElems = document.querySelectorAll("input");
             
             selectElem.onchange = function() {
            @@ -415,8 +425,7 @@ selectElem.onchange = function() {
             
             

            Bien entendu, si cette complexité est trop importante, on peut également faire le choix de contrôler la valeur côté serveur avant de faire un retour à l'utilisateur.

            -

            Résumé technique

            diff --git a/files/fr/web/html/element/input/text/index.html b/files/fr/web/html/element/input/text/index.html index 21e8cb6692..8e33c53029 100644 --- a/files/fr/web/html/element/input/text/index.html +++ b/files/fr/web/html/element/input/text/index.html @@ -10,12 +10,10 @@ translation_of: Web/HTML/Element/input/text ---
            {{HTMLRef}}
            -

            Les éléments {{HTMLElement("input")}} dont l'attribut type vaut "text" permettent de créer des champs de saisie avec du texte sur une seule ligne.

            +

            Les éléments {{HTMLElement("input")}} dont l'attribut type vaut "text" permettent de créer des champs de saisie avec du texte sur une seule ligne.

            {{EmbedInteractiveExample("pages/tabbed/input-text.html", "tabbed-standard")}}
            - -

            Valeur

            L'attribut {{htmlattrxref("value", "input")}} d'un tel élément contient une chaîne de caractères ({{domxref("DOMString")}}) qui correspond à la valeur contenue dans le champ texte. En JavaScript, cette valeur peut être récupérée avec la propriété JavaScript {{domxref("HTMLInputElement.value","value")}}.

            @@ -82,7 +80,6 @@ translation_of: Web/HTML/Element/input/text

            {{htmlattrdef("pattern")}}

            -

            L'attribut pattern est une expression rationnelle que doit respecter la valeur ({{htmlattrxref("value")}}) du champ afin d'être valide. Cette expression rationnelle doit être une expression rationnelle valide pour JavaScript (telle qu'utilisée par {{jsxref("RegExp")}} et telle que documentée dans ce guide). Le marqueur 'u' est fourni par le navigateur lors de la compilation de l'expression rationnelle afin que le motif soit traité comme une séquence de points de code Unicode plutôt que comme des caractères ASCII. Aucune barre oblique (/) ne devrait être utilisée autour du motif.

            Si l'expression rationnelle est invalide ou que cet attribut n'est pas défini, l'attribut est ignoré.

            @@ -90,7 +87,6 @@ translation_of: Web/HTML/Element/input/text

            Note : L'attribut {{htmlattrxref("title", "input")}} pourra être utilisé afin d'afficher une bulle d'informations qui explique les conditions à respecter. Il est également conseillé d'inclure un texte explicatif à proximité du champ.

            -

            Voir la section sur l'utilisation de cet attribut ci-après pour plus d'exemples.

            @@ -120,7 +116,6 @@ translation_of: Web/HTML/Element/input/text

            {{htmlattrdef("spellcheck")}}

            -

            spellcheck est un attribut universel qui est utilisé afin d'indiquer si la vérification orthographique doit être utilisée pour un élément. Il peut être utilisé pour n'importe quel contenu éditable mais possède certaines spécificités pour les éléments {{HTMLElement("input")}}. Les valeurs autorisées pour cet attribut sont :

            @@ -135,7 +130,6 @@ translation_of: Web/HTML/Element/input/text

            Un champ de saisie peut avoir la vérification orthographique activée s'il ne possède pas l'attribut {{anch("readonly")}} et qu'il n'est pas désactivé.

            La valeur renvoyée par l'attribut spellcheck peut ne pas refléter l'état réel de la vérification ortographique si certaines préférences de l'agent utilisateur surchargent le paramétrage par défaut.

            -

            Attributs non-standard

            @@ -162,7 +156,6 @@ translation_of: Web/HTML/Element/input/text

            {{htmlattrdef("autocorrect")}} {{non-standard_inline}}

            -

            Un attribut spécifique à Safari, sous la forme d'une chaîne de caractères, qui indique si la correction automatique doit être appliquée lors de l'édition du champ. Les valeurs autorisées pour cet attribut sont :

            @@ -171,11 +164,9 @@ translation_of: Web/HTML/Element/input/text
            off
            Toute correction automatique et tout remplacement de texte est désactivé.
            -

            {{htmlattrdef("mozactionhint")}} {{non-standard_inline}}

            -

            Un attribut spécifique à Mozilla (et plus particulièrement Firefox pour Android) qui fournit une indication quant au type d'action effectuée lorsque l'utilisateur appuie sur la touche Entrée ou Retour lors de l'édition. Cette information pourra être utilisée afin de choisir le libellé à afficher sur la touche Entrée du clavier virtuel.

            @@ -183,7 +174,6 @@ translation_of: Web/HTML/Element/input/text

            Les valeurs autorisées pour cet attribut sont : go, done, next, search et send. Le navigateur décide alors, selon la valeur, quel libellé utiliser pour la touche Entrée.

            -

            Utiliser <input type="text">

            @@ -251,7 +241,7 @@ translation_of: Web/HTML/Element/input/text

            Les éléments <input> de type text ne possède pas de mécanisme de validation automatique. En revanche, il est possible d'ajouter certaines contraintes qui seront vérifiées côté client et que nous allons voir ici.

            -

            Attention ! Il est également important de vérifier le format de la valeur saisie côté serveur ! En effet, il est tout à fait possible pour un utilisateur de modifier le code HTML du site ou d'envoyer des données au serveur sans passer par le formulaire. Il est donc nécessaire de contrôler la valeur avant de s'en servir dans la logique de l'application côté serveur afin d'éviter des conséquences malheureuses.

            +

            Attention : Il est également important de vérifier le format de la valeur saisie côté serveur ! En effet, il est tout à fait possible pour un utilisateur de modifier le code HTML du site ou d'envoyer des données au serveur sans passer par le formulaire. Il est donc nécessaire de contrôler la valeur avant de s'en servir dans la logique de l'application côté serveur afin d'éviter des conséquences malheureuses.

            Un aparté sur la mise en forme

            @@ -295,9 +285,7 @@ input:valid+span:after { </div> </form>
            - +

            Ce qui produira ce résultat :

            @@ -324,9 +312,7 @@ input:valid+span:after { </div> </form>
            - +

            Voici le résultat qui est alors obtenu :

            @@ -338,7 +324,7 @@ input:valid+span:after {

            Note : Si on indique minlength mais pas required, la valeur saisie est considérée comme valide car l'utilisateur peut ne pas saisir de valeur.

            -

            Contraindre un format spécifique - expression rationnelle

            +

            Contraindre un format spécifique - expression rationnelle

            L'attribut {{htmlattrxref("pattern","input")}} permet d'indiquer une expression rationnelle que devra respecter la valeur saisie afin d'être valide (cf. Valider un champ par rapport à une expression rationnelle pour une introduction).

            diff --git a/files/fr/web/html/element/input/time/index.html b/files/fr/web/html/element/input/time/index.html index d7ae5d56d9..ad51788acf 100644 --- a/files/fr/web/html/element/input/time/index.html +++ b/files/fr/web/html/element/input/time/index.html @@ -14,8 +14,6 @@ translation_of: Web/HTML/Element/input/time
            {{EmbedInteractiveExample("pages/tabbed/input-time.html", "tabbed-standard")}}
            - -

            L'interface utilisateur affichée pour le contrôle peut varier d'un navigateur à l'autre. À l'heure où nous écrivons ces lignes, seul Safari ne prend pas en charge ce type de contrôle. Pour ce dernier, l'élément sera transformé en simple <input type="text">.

            Apparence

            @@ -24,23 +22,25 @@ translation_of: Web/HTML/Element/input/time

            Pour Chrome/Opera, le contrôle time possède deux cases permettant de saisir les heures d'une part et les minutes d'autre part (sur 12 ou 24 heures selon la locale de l'ordinateur), deux flèches pour augmenter ou réduire la valeur et une croix permettant de supprimer la valeur.

            -

            Contrôle Chrome pour une saisie avec une locale sur 24hContrôle de Chrome pour une saisie avec une locale sur 12h

            +

            Contrôle Chrome pour une heure sur 12 heures12 heures

            + +

            Contrôle Chrome pour une heure sur 24 heures24 heures

            Firefox

            Pour Firefox, l'aspect du contrôle est similaire mais il ne possède pas les flèches d'incrément. L'horloge peut également s'utiliser sur un format 12 heures ou 24 heures (selon la locale du système). Un bouton rond avec une croix permet de réinitialiser la valeur du contrôle.

            -

            +

            Contrôle Firefox pour une heure sur 12 heures12 heures

            -

            +

            Contrôle Firefox pour une heure sur 24 heures24 heures

            Edge

            Pour Edge, le contrôle affiché est un plus élaboré : il affiche un sélecteur avec deux bandes déroulantes pour choisir l'heure et les minutes (sur 12 ou 24 heures selon la locale) :

            -

            Contrôle Edge pour la saisie sur 24h

            +

            Contrôle Edge pour la saisie sur 12 heures12 heures

            -

            Contrôle Edge pour la saisie sur 12 heures

            +

            Contrôle Edge pour la saisie sur 24 heures24 heures

            Valeur

            @@ -119,7 +119,9 @@ startTime.addEventListener("input", function() { -
            Note : À la différence d'autres types de donnée, les valeurs pour les heures sont sur un domaine périodique. Cela signifie qu'une fois la valeur maximale dépassée, on revient à la valeur minimale (autrement dit, on fait le tour de l'horloge). Ainsi, si on indique min avec la valeur "14:00" et max avec la valeur "2:00", cela signifie que les valeurs autorisées sont comprises entre 2 heures de l'après-midi et jusqu'à 2 heures du matin le jour suivant.
            +
            +

            Note : À la différence d'autres types de donnée, les valeurs pour les heures sont sur un domaine périodique. Cela signifie qu'une fois la valeur maximale dépassée, on revient à la valeur minimale (autrement dit, on fait le tour de l'horloge). Ainsi, si on indique min avec la valeur "14:00" et max avec la valeur "2:00", cela signifie que les valeurs autorisées sont comprises entre 2 heures de l'après-midi et jusqu'à 2 heures du matin le jour suivant.

            +

            {{htmlattrdef("max")}}

            @@ -249,13 +251,8 @@ input:valid+span:after {

            Si vous essayez de soumettre le formulaire sans avoir saisi de valeur (ou avec une heure en dehors des heures d'ouverture indiquées), le navigateur affichera une erreur. Vous pouvez manipuler le résultat obtenu :

            {{EmbedLiveSample('Rendre_la_saisie_obligatoire', 600, 120)}}

            - -

            Voici une capture d'écran (en anglais) si votre navigateur ne prend pas en charge cete fonctionnalité :

            - -

            -
            -

            Attention ! Il est également important de vérifier le format de la valeur saisie côté serveur ! En effet, il est tout à fait possible pour un utilisateur de modifier le code HTML du site ou d'envoyer des données au serveur sans passer par le formulaire. Il est donc nécessaire de contrôler la valeur avant de s'en servir dans la logique de l'application côté serveur afin d'éviter des conséquences malheureuses.

            +

            Attention : Il est également important de vérifier le format de la valeur saisie côté serveur ! En effet, il est tout à fait possible pour un utilisateur de modifier le code HTML du site ou d'envoyer des données au serveur sans passer par le formulaire. Il est donc nécessaire de contrôler la valeur avant de s'en servir dans la logique de l'application côté serveur afin d'éviter des conséquences malheureuses.

            Gérer la prise en charge des navigateurs

            @@ -264,7 +261,7 @@ input:valid+span:after {

            Pour les plateformes mobiles (Android et iOS par exemple), les systèmes d'exploitation fournissent des interfaces particulièrement adaptées aux environnements tactiles. Voici par exemple le sélecteur d'heure pour Chrome sur Android :

            -

            +

            Lorsqu'un navigateur ne prend pas en charge ce type d'élément, il utilise un champ texte (<input type="text">) à la place. Mais cela crée des problèmes, tant au niveau de l'interface utilisateur que de la cohérence des données et du format.

            @@ -301,8 +298,7 @@ input:valid+span:after {

            Il reste donc un problème.

            -

            Actuellement, la meilleure façon de gérer ce type de saisie pour les différents navigateurs consiste à utiliser deux contrôles (le premier pour la saisie des heures et le second pour la saisie des minutes) avec deux éléments {{htmlelement("select")}} (cf. ci-après) ou d'utiliser certaines bibliothèques JavaScript telles que jQuery date picker ou encore jQuery timepicker plugin.

            @@ -364,8 +359,7 @@ input:valid+span:after {

            Les valeurs pour les heures et les minutes seront générées dynamiquement en JavaScript.

            -

            La partie la plus intéressante du code est celle qui permet de détecter si le contrôle natif est pris en charge. Pour cela, on crée un nouvel élément {{htmlelement("input")}} et on modifie son attribut type afin qu'il vaille time, immédiatement après, on vérifie la valeur du type. Si le navigateur ne prend pas en charge l'élément, il renverra text car l'élément a été transformé en <input type="text">, dans ce cas, on masque le sélecteur natif et on affiche l'interface alternative avec les deux éléments {{htmlelement("select")}}.

            diff --git a/files/fr/web/html/element/input/url/index.html b/files/fr/web/html/element/input/url/index.html index 949a8aaf19..56d928e2ab 100644 --- a/files/fr/web/html/element/input/url/index.html +++ b/files/fr/web/html/element/input/url/index.html @@ -10,12 +10,10 @@ translation_of: Web/HTML/Element/input/url ---
            {{HTMLRef}}
            -

            Les éléments {{HTMLElement("input")}} dont l'attribut type vaut "url" sont employées afin de permettre à un utilisateur de saisir ou d'éditer une URL.

            +

            Les éléments {{HTMLElement("input")}} dont l'attribut type vaut "url" sont employées afin de permettre à un utilisateur de saisir ou d'éditer une URL.

            {{EmbedInteractiveExample("pages/tabbed/input-url.html", "tabbed-shorter")}}
            - -

            La valeur saisie est automatiquement validée par le navigateur qui vérifie qu'elle est vide ou formatée correctement avant que le formulaire puisse être envoyé. Les pseudo-classes {{cssxref(":valid")}} et {{cssxref(":invalid")}} sont appliquées auomatiquement selon le cas de figure.

            @@ -140,7 +138,7 @@ translation_of: Web/HTML/Element/input/url

            Toutefois, ce mécanisme ne vérifie pas que l'URL saisie existe bien ou correspond à l'utilisateur. Seule une vérification de format est effectuée.

            -

            Attention ! Il est également important de vérifier le format de la valeur saisie côté serveur ! En effet, il est tout à fait possible pour un utilisateur de modifier le code HTML du site ou d'envoyer des données au serveur sans passer par le formulaire. Il est donc nécessaire de contrôler la valeur avant de s'en servir dans la logique de l'application côté serveur afin d'éviter des conséquences malheureuses.

            +

            Attention : Il est également important de vérifier le format de la valeur saisie côté serveur ! En effet, il est tout à fait possible pour un utilisateur de modifier le code HTML du site ou d'envoyer des données au serveur sans passer par le formulaire. Il est donc nécessaire de contrôler la valeur avant de s'en servir dans la logique de l'application côté serveur afin d'éviter des conséquences malheureuses.

            Un simple champ

            @@ -192,17 +190,15 @@ translation_of: Web/HTML/Element/input/url

            {{EmbedLiveSample("La_longueur_de_la_valeur", 600, 40)}}

            -

            Note : Ces attributs jouent un rôle lors de la validation. Si la valeur saisie est plus courte que la longueur minimale indiquée ou plus grande que la longueur maximale indiquée, alors elle seera considérée comme invalide. De plus, la plupart des navigateurs ne permettent pas de saisir une valeur plus grande que la longueur maximale indiquée avec maxlength.

            +

            Note : Ces attributs jouent un rôle lors de la validation. Si la valeur saisie est plus courte que la longueur minimale indiquée ou plus grande que la longueur maximale indiquée, alors elle seera considérée comme invalide. De plus, la plupart des navigateurs ne permettent pas de saisir une valeur plus grande que la longueur maximale indiquée avec maxlength.

            Fournir des valeurs par défaut

            On peut fournir une valeur par défaut grâce à l'attribut {{htmlattrxref("value", "input")}} :

            -
            <input id="monURL" name="monURL" type="url"
                    value="http://www.example.com">
            -

            {{EmbedLiveSample("Fournir_des_valeurs_par_défaut", 600, 40)}}

            @@ -229,7 +225,7 @@ translation_of: Web/HTML/Element/input/url

            Il existe deux niveaux de validation pour les contrôles de type "url". Tout d'abord, le contrôle natif, toujours présent qui s'asssure que la valeur correspond à une URL bien formée. Ensuite, on peut ajouter des options supplémentaires pour personnaliser le format de l'URL attendue.

            -

            Attention ! Il est également important de vérifier le format de la valeur saisie côté serveur ! En effet, il est tout à fait possible pour un utilisateur de modifier le code HTML du site ou d'envoyer des données au serveur sans passer par le formulaire. Il est donc nécessaire de contrôler la valeur avant de s'en servir dans la logique de l'application côté serveur afin d'éviter des conséquences malheureuses.

            +

            Attention : Il est également important de vérifier le format de la valeur saisie côté serveur ! En effet, il est tout à fait possible pour un utilisateur de modifier le code HTML du site ou d'envoyer des données au serveur sans passer par le formulaire. Il est donc nécessaire de contrôler la valeur avant de s'en servir dans la logique de l'application côté serveur afin d'éviter des conséquences malheureuses.

            Validation simple

            @@ -240,18 +236,16 @@ translation_of: Web/HTML/Element/input/url

            Comme vu ci-avant, on peut rendre la saisie de l'URL obligatoire avec l'attribut {{htmlattrxref("required", "input")}} :

            -
            <form>
               <input id="monURL" name="monURL" type="url" required>
               <button>Envoyer</button>
             </form>
            -

            {{EmbedLiveSample("Rendre_le_champ_URL_obligatoire", 600, 40)}}

            Vous pouvez essayer d'envoyer le formulaire précédent sans valeur saisie et voir le résultat obtenu.

            -

            Utiliser un format particulier

            +

            Utiliser un format particulier

            S'il faut restreindre l'URL plus fortement, on peut utiliser l'attribut {{htmlattrxref("pattern", "input")}} afin d'indiquer une expression rationnelle que la valeur saisie doit respecter afin d'être valide.

            @@ -259,8 +253,7 @@ translation_of: Web/HTML/Element/input/url

            Les contrôles de type "url" utilisant la validation native pour vérifier que c'est une URL bien formée et une validation spécifique via l'attribut {{htmlattrxref("pattern", "input")}}, on peut implémenter cette contrainte facilement :

            - + } +
            <form>
               <div>
            @@ -318,7 +311,7 @@ translation_of: Web/HTML/Element/input/url
             

            C'est pourquoi nous avons écrit "L'URL doit être sur le domaine maboite" qui est plus détaillé.

            -

            Note : Si vous rencontrez des problèmes avec ces expressions rationnelles et qu'elles ne semblent pas fonctionner correctement, vérifiez la console de votre navigateur. Il est possible que des messages d'erreur y soient affichés et puissent vous aider à diagnostiquer le problème.

            +

            Note : Si vous rencontrez des problèmes avec ces expressions rationnelles et qu'elles ne semblent pas fonctionner correctement, vérifiez la console de votre navigateur. Il est possible que des messages d'erreur y soient affichés et puissent vous aider à diagnostiquer le problème.

            Exemples

            diff --git a/files/fr/web/html/element/input/week/index.html b/files/fr/web/html/element/input/week/index.html index f9a9fd6805..b010c0cf18 100644 --- a/files/fr/web/html/element/input/week/index.html +++ b/files/fr/web/html/element/input/week/index.html @@ -15,17 +15,15 @@ translation_of: Web/HTML/Element/input/week
            {{EmbedInteractiveExample("pages/tabbed/input-week.html", "tabbed-shorter")}}
            - -

            L'interface utilisateur offerte par un tel contrôle varie en fonction des navigateurs. Au moment où nous écrivons ces lignes, seuls Chrome/Opera et Edge prennent en charge cette fonctionnalité. Pour les navigateurs qui ne l'implémentent pas, l'élément est interprété comme un élément <input type="text">.

            Sous Chrome/Opera, le contrôle week fournit des emplacements pour les deux valeurs. Un calendrier est affiché afin de sélectionner plus faiclement la semaine et l'année. Un bouton avec une croix permet de supprimer la valeur saisie dans le contrôle.

            -

            +

            Pour Edge, le contrôle associé à month est plus élaboré et se compose de deux listes qu'on peut faire défiler séparement pour la semaine d'une part et l'année d'autre part.

            -

            +

            Valeur

            @@ -193,10 +191,10 @@ input:valid+span:after {

            Voici une capture d'écran du résultat obtenu si votre navigateur ne prend pas en charge cette fonctionnalité :

            -

            +

            -

            Important : la validation des données du formulaire HTML par le navigateur ne se substitue pas à la validation des données reçues côté serveur. En effet, il est tout à fait possible pour un utilisateur de modifier le HTML côté client et de passer outre les contraintes normalement appliquées. Il est également possible d'envoyer des données au serveur sans passer par le formulaire. Ne pas vérifier les données reçues côté serveur expose à des risques d'erreur voire d'attaques.

            +

            Attention : la validation des données du formulaire HTML par le navigateur ne se substitue pas à la validation des données reçues côté serveur. En effet, il est tout à fait possible pour un utilisateur de modifier le HTML côté client et de passer outre les contraintes normalement appliquées. Il est également possible d'envoyer des données au serveur sans passer par le formulaire. Ne pas vérifier les données reçues côté serveur expose à des risques d'erreur voire d'attaques.

            Gérer la prise en charge des navigateurs

            @@ -205,7 +203,7 @@ input:valid+span:after {

            Les plateformes mobiles comme Android et iOS fournissent un contrôle natif à l'ergonomie tactile adaptée. Voici par exemple le sélecteur week sur Chrome pour Android :

            -

            +

            Les navigateurs qui ne prennent pas en charge ce type de contrôle l'interprètent comme un champ texte mais cela crée des problèmes de cohérence tant au niveau de l'ergonomie qu'au niveau de la représentation des données.

            @@ -256,8 +254,7 @@ input:valid+span:after {

            On génère les valeurs des semaines dynamiquement.

            -

            Dans le fragment de code JavaScript qui suit, on montre comment détecter si la fonctionnalité est prise en charge ou non. Pour cela, on crée un nouvel élément {{htmlelement("input")}} et on règle son type sur week puis on vérifie immédiatement la valeur de son type. Les navigateurs qui ne prennent pas en charge la fonctionnalité renverront text. Si c'est le cas, on masque le sélecteur natif et on affiche le sélecteur alternatif composé des deux éléments {{htmlelement("select")}}.

            diff --git a/files/fr/web/html/element/ins/index.html b/files/fr/web/html/element/ins/index.html index fd10daf017..a0c81dc401 100644 --- a/files/fr/web/html/element/ins/index.html +++ b/files/fr/web/html/element/ins/index.html @@ -18,8 +18,6 @@ translation_of: Web/HTML/Element/ins
            {{EmbedInteractiveExample("pages/tabbed/ins.html", "tabbed-standard")}}
            - -

            Attributs

            On peut utiliser les attributs universels pour cet élément.

            diff --git a/files/fr/web/html/element/kbd/index.html b/files/fr/web/html/element/kbd/index.html index b74e3870ae..8df53af401 100644 --- a/files/fr/web/html/element/kbd/index.html +++ b/files/fr/web/html/element/kbd/index.html @@ -10,14 +10,12 @@ translation_of: Web/HTML/Element/kbd ---
            {{HTMLRef}}
            -

            L'élément HTML <kbd> représente une plage de texte en ligne indiquant la saisie de texte par l'utilisateur à partir d'un clavier, d'une saisie vocale ou de tout autre dispositif de saisie de texte. Par convention, le {{Glossary("user agent")}} rend par défaut le contenu d'un élément <kbd> en utilisant sa police monospace, bien que cela ne soit pas requis par le standard HTML.

            +

            L'élément HTML <kbd> représente une plage de texte en ligne indiquant la saisie de texte par l'utilisateur à partir d'un clavier, d'une saisie vocale ou de tout autre dispositif de saisie de texte. Par convention, le {{Glossary("user agent")}} rend par défaut le contenu d'un élément <kbd> en utilisant sa police monospace, bien que cela ne soit pas requis par le standard HTML.

            <kbd> peut être imbriqué dans diverses combinaisons avec {{HTMLElement("samp")}} (Sample Output) pour représenter diverses formes d'entrée ou d'entrée basées sur des repères visuels.

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

            Attributs

            Cet élément ne contient que les attributs universels.

            diff --git a/files/fr/web/html/element/keygen/index.html b/files/fr/web/html/element/keygen/index.html index 2c63fd89bf..391387046e 100644 --- a/files/fr/web/html/element/keygen/index.html +++ b/files/fr/web/html/element/keygen/index.html @@ -42,7 +42,7 @@ translation_of: Web/HTML/Element/keygen

            Pour les clés RSA, le paramètre keyparams n'est pas utilisé (ignoré s'il est présent). L'utilisateur peut avoir le choix pour la force des clés RSA à générer. Actuellement, l'utilisateur peut choisir entre « high » (élevé) pour 2048 bits et « medium » (moyen) pour 1024 bits.

            -

            Pour les clés DSA, le paramètre keyparams définit les paramètres DSA PQG à utiliser pendant le processus de génération de la clé. La valeur du paramètre pqg est encodée en DER en suivant la structure Dss-Parms comme énoncé dans le RFC 3279. L'utilisateur peut avoir le choix des tailles de clés DSA, permettant à l'utilisateur de choisir parmi les tailles de clés définies dans le standard DSA.

            +

            Pour les clés DSA, le paramètre keyparams définit les paramètres DSA PQG à utiliser pendant le processus de génération de la clé. La valeur du paramètre pqg est encodée en DER en suivant la structure Dss-Parms comme énoncé dans le RFC 3279. L'utilisateur peut avoir le choix des tailles de clés DSA, permettant à l'utilisateur de choisir parmi les tailles de clés définies dans le standard DSA.

            Pour les clés EC, le paramètre keyparams définit le nom de la courbe elliptique sur laquelle sera générée la clé. Normalement, c'est une chaîne de caractères du tableau nsKeygenHandler.cpp. (Il faut noter que seulement un sous-ensemble des courbes peut être supporté par n'importe quel navigateur.) Si le paramètre keyparams n'est pas reconnu comme une chaîne de caractères correspondant à une courbe, une courbe est choisie selon la force de la clé choisie par l'utilisateur (faible, moyenne, élevée). La courbe secp384r1 est utilisée pour une force élevée, la courbe secp256r1 est utilisée pour des clés moyennes.

            diff --git a/files/fr/web/html/element/label/index.html b/files/fr/web/html/element/label/index.html index f696538e0d..785a98dd0c 100644 --- a/files/fr/web/html/element/label/index.html +++ b/files/fr/web/html/element/label/index.html @@ -15,8 +15,6 @@ translation_of: Web/HTML/Element/label
            {{EmbedInteractiveExample("pages/tabbed/label.html", "tabbed-shorter")}}
            - -

            Rattacher un libellé à un élément de saisie ({{HTMLElement("input")}}) offre différents avantages :

              @@ -39,15 +37,16 @@ translation_of: Web/HTML/Element/label
              {{htmlattrdef("for")}}
              -
              L'identifiant (la valeur de l'attribut {{htmlattrxref("id")}}) de l'élément de formulaire associé, appartenant au même document que l'élément label. Le premier élément du document dont l'identifiant correspond est alors le contrôle étiqueté par l'élément. -
              Note : Un élément label peut simultanément avoir un attribut for et contenir un élément de contrôle tant que l'attribut for pointe vers l'élément contenu.
              +

              L'identifiant (la valeur de l'attribut {{htmlattrxref("id")}}) de l'élément de formulaire associé, appartenant au même document que l'élément label. Le premier élément du document dont l'identifiant correspond est alors le contrôle étiqueté par l'élément.

              +
              +

              Note : Un élément label peut simultanément avoir un attribut for et contenir un élément de contrôle tant que l'attribut for pointe vers l'élément contenu.

              +
              -
              - -
              {{htmlattrdef("form")}}
              -
              L'élément de formulaire auquel l'élément label est associé (son formulaire propriétaire). La valeur de cet attribut doit être l'identifiant d'un élément {{HTMLElement("form")}} contenu au sein du même document. Si l'attribut n'est pas renseigné, cet élément <label> doit être le descendant d'un élément {{HTMLElement("form")}}. Cet attribut permet de placer des éléments label dans le document sans qu'ils soient nécessairement imbriqués dans un formulaire. -
              Note : La spécification HTML a été mise à jour le 28 avril 2016 afin de déprécier l'attribut {{htmlattrxref("form")}}. Celui-ci est toujours disponible dans les scripts mais sa définition a changé, il renvoie désormais le contrôle associé au formulaire ou null s'il n'y a pas de contrôle associé (autrement dit si {{domxref("HTMLLabelElement.control")}} vaut null).
              +

              L'élément de formulaire auquel l'élément label est associé (son formulaire propriétaire). La valeur de cet attribut doit être l'identifiant d'un élément {{HTMLElement("form")}} contenu au sein du même document. Si l'attribut n'est pas renseigné, cet élément <label> doit être le descendant d'un élément {{HTMLElement("form")}}. Cet attribut permet de placer des éléments label dans le document sans qu'ils soient nécessairement imbriqués dans un formulaire.

              +
              +

              Note : La spécification HTML a été mise à jour le 28 avril 2016 afin de déprécier l'attribut {{htmlattrxref("form")}}. Celui-ci est toujours disponible dans les scripts mais sa définition a changé, il renvoie désormais le contrôle associé au formulaire ou null s'il n'y a pas de contrôle associé (autrement dit si {{domxref("HTMLLabelElement.control")}} vaut null).

              +
              diff --git a/files/fr/web/html/element/legend/index.html b/files/fr/web/html/element/legend/index.html index a20397aedc..0ec932fbd6 100644 --- a/files/fr/web/html/element/legend/index.html +++ b/files/fr/web/html/element/legend/index.html @@ -15,9 +15,6 @@ translation_of: Web/HTML/Element/legend
              {{EmbedInteractiveExample("pages/tabbed/legend.html", "tabbed-standard")}}
              - - -

              Attributs

              Cet élément contient uniquement les attributs universels.

              diff --git a/files/fr/web/html/element/li/index.html b/files/fr/web/html/element/li/index.html index dedc21148a..e8d7ca8a9e 100644 --- a/files/fr/web/html/element/li/index.html +++ b/files/fr/web/html/element/li/index.html @@ -10,38 +10,33 @@ translation_of: Web/HTML/Element/li ---
              {{HTMLRef}}
              -

              L'élément HTML <li> est utilisé pour représenter un élément dans une liste. Il doit être contenu dans un élément parent : une liste ordonnée ({{HTMLElement("ol")}}), une liste non ordonnée ({{HTMLElement("ul")}}) ou un menu ({{HTMLElement("menu")}}). Dans les menus et les listes non ordonnées, les éléments de liste sont habituellement affichés en utilisant des puces. Dans les listes ordonnées, ils sont habituellement affichés avec compteur croissant à gauche, tel qu'un nombre ou une lettre.

              +

              L'élément HTML <li> est utilisé pour représenter un élément dans une liste. Il doit être contenu dans un élément parent : une liste ordonnée ({{HTMLElement("ol")}}), une liste non ordonnée ({{HTMLElement("ul")}}) ou un menu ({{HTMLElement("menu")}}). Dans les menus et les listes non ordonnées, les éléments de liste sont habituellement affichés en utilisant des puces. Dans les listes ordonnées, ils sont habituellement affichés avec compteur croissant à gauche, tel qu'un nombre ou une lettre.

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

              Attributs

              -

              Cet élément inclut les attributs universels.

              +

              Cet élément inclut les attributs universels.

              {{htmlattrdef("value")}}
              -
              Cette valeur entière indique la valeur ordinale en cours de l'élément de liste tel que défini par l'élément {{HTMLElement("ol")}}. La seule valeur autorisée pour cet attribut est un nombre, même si la liste est affichée avec des chiffres romains ou des lettres. Les éléments de la liste qui suivent celui-ci continueront la numérotation à partir de la valeur indiquée. L'attribut value n'a pas de signification pour les listes non ordonnées ({{HTMLElement("ul")}}) ou pour les menus ({{HTMLElement("menu")}}). -
              Note : Cet attribut a été déprécié en HTML4 mais a été réintroduit en HTML5.
              - -
              Note : Avant {{Gecko("9.0")}}, des valeurs négatives étaient incorrectement converties en 0. A partir de {{Gecko("9.0")}}, toutes les valeurs entières ont été correctement analysées.
              +

              Cette valeur entière indique la valeur ordinale en cours de l'élément de liste tel que défini par l'élément {{HTMLElement("ol")}}. La seule valeur autorisée pour cet attribut est un nombre, même si la liste est affichée avec des chiffres romains ou des lettres. Les éléments de la liste qui suivent celui-ci continueront la numérotation à partir de la valeur indiquée. L'attribut value n'a pas de signification pour les listes non ordonnées ({{HTMLElement("ul")}}) ou pour les menus ({{HTMLElement("menu")}}).

              +

              Note : Cet attribut a été déprécié en HTML4 mais a été réintroduit en HTML5.

              +

              Note : Avant {{Gecko("9.0")}}, des valeurs négatives étaient incorrectement converties en 0. A partir de {{Gecko("9.0")}}, toutes les valeurs entières ont été correctement analysées.

              -
              - -
              {{htmlattrdef("type")}} {{Deprecated_inline}}
              -
              Cet attribut de caractère indique le type de numérotation utilisé pour la liste : +

              Cet attribut de caractère indique le type de numérotation utilisé pour la liste :

                -
              • a : lettres minuscules
              • -
              • A : lettres majuscules
              • +
              • a : lettres minuscules
              • +
              • A : lettres majuscules
              • i : chiffres romains en minuscules
              • I : chiffres romains en majuscules
              • 1 : nombres
              - Ce type surcharge celui utilisé par son élément parent {{HTMLElement("ol")}} si présent. - -
              Note d'utilisation : Cet attribut a été déprécié : utilisez la propriété CSS {{cssxref("list-style-type")}} à la place.
              +

              Ce type surcharge celui utilisé par son élément parent {{HTMLElement("ol")}} si présent.

              +
              +

              Note : Cet attribut a été déprécié : utilisez la propriété CSS {{cssxref("list-style-type")}} à la place.

              +
              @@ -90,7 +85,7 @@ translation_of: Web/HTML/Element/li

              {{EmbedLiveSample("Liste_non_ordonnée")}}

              -

              Note : Pour d'autres exemples plus détaillés, voir les pages {{HTMLElement("ol")}} et {{HTMLElement("ul")}}.

              +

              Note : Pour d'autres exemples plus détaillés, voir les pages {{HTMLElement("ol")}} et {{HTMLElement("ul")}}.

              Résumé technique

              @@ -138,17 +133,17 @@ translation_of: Web/HTML/Element/li {{SpecName('HTML WHATWG', 'semantics.html#the-li-element', '<li>')}} {{Spec2('HTML WHATWG')}} -   + {{SpecName('HTML5 W3C', 'grouping-content.html#the-li-element', '<li>')}} {{Spec2('HTML5 W3C')}} -   + {{SpecName('HTML4.01', 'struct/lists.html#h-10.2', '<li>')}} {{Spec2('HTML4.01')}} - L'attribut type a été déprécié. + L'attribut type a été déprécié. @@ -160,12 +155,12 @@ translation_of: Web/HTML/Element/li

              Voir aussi

                -
              • Les autres éléments liés aux listes : {{HTMLElement("ul")}}, {{HTMLElement("ol")}}, {{HTMLElement("menu")}} et {{HTMLElement("dir")}} (obsolète) ;
              • -
              • Les propriétés CSS qui peuvent être particulièrement utiles pour mettre en forme l'élément <li> : +
              • Les autres éléments liés aux listes : {{HTMLElement("ul")}}, {{HTMLElement("ol")}}, {{HTMLElement("menu")}} et {{HTMLElement("dir")}} (obsolète) ;
              • +
              • Les propriétés CSS qui peuvent être particulièrement utiles pour mettre en forme l'élément <li> :
                  -
                • la propriété {{cssxref("list-style")}}, pour choisir la manière d'afficher l'ordinal,
                • -
                • les compteurs CSS, pour gérer des listes imbriquées complexes,
                • -
                • la propriété {{cssxref("margin")}}, pour contrôler l'indentation de l'élément de liste.
                • +
                • la propriété {{cssxref("list-style")}}, pour choisir la manière d'afficher l'ordinal,
                • +
                • les compteurs CSS, pour gérer des listes imbriquées complexes,
                • +
                • la propriété {{cssxref("margin")}}, pour contrôler l'indentation de l'élément de liste.
              diff --git a/files/fr/web/html/element/link/index.html b/files/fr/web/html/element/link/index.html index 3ded73b0e3..33516d02d2 100644 --- a/files/fr/web/html/element/link/index.html +++ b/files/fr/web/html/element/link/index.html @@ -14,33 +14,31 @@ translation_of: Web/HTML/Element/link
              {{EmbedInteractiveExample("pages/tabbed/link.html")}}
              - -

              Pour lier une feuille de style externe, on inclut un élément <link> de la forme suivante à l'intérieur de l'élément {{htmlelement("head")}} :

              -
              <link href="main.css" rel="stylesheet">
              +
              <link href="main.css" rel="stylesheet">

              Dans cet exemple, on indique le chemin vers la feuille de style grâce à l'attribut href, l'attribut  rel possède une valeur stylesheet qui indique que c'est une feuille de style. rel signifie relationship qui correspond donc à la relation entre la ressource et le document courant. Il existe de nombreux types de liens possibles.

              Certains types sont assez fréquents. Ainsi, pour l'icône présentant le site dans l'onglet, on trouvera :

              -
              <link rel="icon" href="favicon.ico">
              +
              <link rel="icon" href="favicon.ico">

              Il existe différents types de relations pour préciser les icônes et qui permettent notamment de cibler certaines plateformes mobiles :

              -
              <link rel="apple-touch-icon-precomposed" sizes="114x114"
              +
              <link rel="apple-touch-icon-precomposed" sizes="114x114"
                     href="apple-icon-114.png" type="image/png">

              L'attribut sizes indique la taille de l'icône tandis que l'attribut type contient le type MIME de la ressource qui est liée. Ces attributs permettent alors au navigateur de sélectionner la ressource la plus adéquate.

              On peut également fournir l'attribut media afin d'utiliser telle ou telle ressource lorsqu'une requête média est vérifiée. Ainsi, on pourra utiliser ce qui suit afin d'avoir une feuille de style utilisée à l'impression et une autre dédiée au mobile :

              -
              <link href="print.css" rel="stylesheet" media="print">
              +
              <link href="print.css" rel="stylesheet" media="print">
               <link href="mobile.css" rel="stylesheet" media="screen and (max-width: 600px)">

              Certaines fonctionnalités relatives à la sécurité sont également disponibles avec certains attributs de <link>. Dans cet exemple :

              -
              <link rel="preload" href="myFont.woff2" as="font"
              +
              <link rel="preload" href="myFont.woff2" as="font"
                     type="font/woff2" crossorigin="anonymous">

              L'attribut rel vaut preload et indique que le navigateur doit précharger la ressource (voir Le préchargement du contenu avec rel="preload" pour plus de détails), l'attribut as indique la classe de contenu qui est récupéré et l'attribut crossorigin indique si la ressource doit être récupérée avec une requête CORS.

              @@ -97,8 +95,8 @@ translation_of: Web/HTML/Element/link
              {{htmlattrdef("integrity")}} {{experimental_inline}}
              Cet attribut contient des métadonnées en ligne qui correspondent à l'empreinte cryptographique de la ressource qu'on souhaite récupérer. Cela permet à l'agent utilisateur de contrôler que la ressource récupérée n'a pas été manipulée. Pour plus d'informations, consulter l'article sur le contrôle des sous-ressources.
              {{htmlattrdef("media")}}
              -
              Cet attribut indique le média auquel s'applique la ressource liée. Sa valeur doit être une requête média. Cet attribut est principalement utilisé pour permettre à l'agent utilisateur de sélectionner la meilleure feuille de style en fonction de l'appareil de l'utilisateur. -
              Note d'utilisation : +

              Cet attribut indique le média auquel s'applique la ressource liée. Sa valeur doit être une requête média. Cet attribut est principalement utilisé pour permettre à l'agent utilisateur de sélectionner la meilleure feuille de style en fonction de l'appareil de l'utilisateur.

              +

              Note :

              • En HTML4, la valeur de cet attribut était une liste de descripteurs de médias (des types ou des groupes de média) séparés par des espaces, par exemple print screen aural braille. HTML5 étend cet attribut à l'ensemble des requêtes média qui forment un surensemble des valeurs autorisées en HTML 4.
              • Les navigateurs qui ne prennent pas en charge les requêtes média CSS3 ne reconnaîtront pas nécessairement les liens adéquats et il faut donc toujours fournir des liens de recours.
              • @@ -124,7 +122,7 @@ translation_of: Web/HTML/Element/link
              • une liste de tailles, séparées par des espaces, dont chacune est de la forme <largeur en pixels>x<hauteur en pixels> ou <largeur en pixels>X<hauteur en pixels>. Pour chacune de ces dimensions, il doit exister une image correspondante dans la ressource.
              -
              Note d'utilisation : +

              Note :

              • La plupart des format d'icône permettent simplement de stocker une seule icône, c'est pour cela que, la plupart du temps, {{htmlattrxref("sizes")}} ne contient qu'un seul élément.
              • @@ -142,8 +140,8 @@ translation_of: Web/HTML/Element/link
                {{htmlattrdef("charset")}}{{obsolete_inline}}
                -
                Cet attribut définit l'encodage de la ressource lié. La valeur de cet attribut est une liste de jeux de caractères (tels que définis dans la RFC {{rfc(2045)}}) séparés par des espaces ou des virgules. La valeur par défaut de cet attribut est iso-8859-1. -
                Note d'utilisation : cet attribut est obsolète et ne doit pas être utilisé. Pour obtenir l'effet escompté, on utilisera l'en-tête HTTP {{httpheader("Content-Type")}} pour la ressource liée.
                +

                Cet attribut définit l'encodage de la ressource lié. La valeur de cet attribut est une liste de jeux de caractères (tels que définis dans la RFC {{rfc(2045)}}) séparés par des espaces ou des virgules. La valeur par défaut de cet attribut est iso-8859-1.

                +

                Note : cet attribut est obsolète et ne doit pas être utilisé. Pour obtenir l'effet escompté, on utilisera l'en-tête HTTP {{httpheader("Content-Type")}} pour la ressource liée.

                {{htmlattrdef("methods")}} {{Non-standard_inline}}
                La valeur de cet attribut fournit des informations quant aux fonctions qui peuvent être utilisées sur l'objet lié. Les valeurs sont généralement des méthodes HTTP mais elles peuvent également inclure des informations en avance sur le lien (le navigateur pourrait par exemple choisir un affichage différent pour un lien selon la méthode utilisée). Cet attribut n'est pas pris en charge de façon correcte, y compris par le navigateur qui le définit, Internet Explorer 4. Voir la page MSDN sur la propriété methods.
                @@ -151,10 +149,12 @@ translation_of: Web/HTML/Element/link
                Cet attribut permet d'identifier une ressource qui sera nécessaire dans la suite de la navigation et que l'agent utilisateur devrait télécharger. Cela permet à l'agent utilisateur d'avoir un meilleur temps de réponse lorsque la ressource sera nécessaire.
                {{htmlattrdef("rev")}}{{obsolete_inline}}
                La valeur de cet attribut décrit le lien entre le document courant et la ressource liée (définie par l'attribut {{htmlattrxref("href", "link")}}). Cet attribut définit donc la relation réciproque à la relation décrite par l'attribut rel. Les types de lien utilisés pour cet attribut sont semblables aux valeurs autorisés par {{htmlattrxref("rel", "link")}}. -
                Note d'utilisation : cet attribut est obsolète en HTML5 et ne doit pas être utilisé. Pour obtenir le même effet, on utilisera l'attribut {{htmlattrxref("rel", "link")}} avec la valeur réciproque pour le type de lien, (made devrait par exemple être remplacé par author). Cet attribut ne signifie pas « révision » et ne doit pas être utilisé comme un numéro de version.
                +
                +

                Note : cet attribut est obsolète en HTML5 et ne doit pas être utilisé. Pour obtenir le même effet, on utilisera l'attribut {{htmlattrxref("rel", "link")}} avec la valeur réciproque pour le type de lien, (made devrait par exemple être remplacé par author). Cet attribut ne signifie pas « révision » et ne doit pas être utilisé comme un numéro de version.

                +
                -

                Note : La spécification actuelle de HTML 5.2 du W3C n'indique plus l'attribut rev comme obsolète. En revanche, la spécification du WHATWG le considère toujours comme obsolète. Tant que cette incohérence n'est pas résolue, mieux vaut considérer cet attribut comme obsolète.

                +

                Note : La spécification actuelle de HTML 5.2 du W3C n'indique plus l'attribut rev comme obsolète. En revanche, la spécification du WHATWG le considère toujours comme obsolète. Tant que cette incohérence n'est pas résolue, mieux vaut considérer cet attribut comme obsolète.

                {{htmlattrdef("target")}}{{Non-standard_inline}}
                @@ -167,7 +167,7 @@ translation_of: Web/HTML/Element/link

                Pour associer une feuille de style à la page courante, on utilisera la syntaxe suivante :

                -
                <link href="style.css" rel="stylesheet">
                +
                <link href="style.css" rel="stylesheet">
                 

                Fournir des feuilles de style alternatives

                @@ -176,7 +176,7 @@ translation_of: Web/HTML/Element/link

                L'utilisateur pourra choisir parmi ces feuilles de style via le menu « Affichage > Style de la page ». Ainsi, un utilisateur pourra voir différentes versions d'une même page.

                -
                <link href="default.css" rel="stylesheet" title="Mise en forme par défaut">
                +
                <link href="default.css" rel="stylesheet" title="Mise en forme par défaut">
                 <link href="joli.css" rel="alternate stylesheet" title="Joli">
                 <link href="simple.css" rel="alternate stylesheet" title="Simple">
                 
                @@ -185,7 +185,7 @@ translation_of: Web/HTML/Element/link

                Il est possible de déterminer si une feuille de style a été chargée en écoutant l'évènement load. De la même façon, un évènement error indiquera qu'une erreur a eu lieu lors du traitement de la feuille de style:

                -
                <script>
                +
                <script>
                   function sheetLoaded() {
                     // faire quelque chose, sachant
                     // que la feuille a été chargéee
                @@ -201,7 +201,9 @@ translation_of: Web/HTML/Element/link
                   onerror="sheetError()">
                 
                -
                Note : L'évènement load est déclenché une fois que la feuille de style et que le contenu associé ont été chargés et analysés et immédiatement avant que la mise en forme soit appliquée au contenu.
                +
                +

                Note : L'évènement load est déclenché une fois que la feuille de style et que le contenu associé ont été chargés et analysés et immédiatement avant que la mise en forme soit appliquée au contenu.

                +

                Exemples avec preload

                diff --git a/files/fr/web/html/element/main/index.html b/files/fr/web/html/element/main/index.html index b9f73033d3..6f5982049c 100644 --- a/files/fr/web/html/element/main/index.html +++ b/files/fr/web/html/element/main/index.html @@ -16,8 +16,6 @@ translation_of: Web/HTML/Element/main
                {{EmbedInteractiveExample("pages/tabbed/main.html","tabbed-shorter")}}
                - -

                Attributs

                Cet élément prend uniquement en charge les attributs universels.

                @@ -73,7 +71,7 @@ translation_of: Web/HTML/Element/main

                Ajouter un attribut {{htmlattrxref("id")}} à l'élément <main> lui permet d'être une cible pour la navigation rapide.

                -
                <body>
                +
                <body>
                   <a href="#main-content">Aller au contenu principal</a>
                 
                   <!-- Contenu relatif à la navigation et en-tête du document -->
                @@ -81,7 +79,7 @@ translation_of: Web/HTML/Element/main
                   <main id="main-content">
                     <!-- Contenu principal de la page -->
                   </main>
                -</body>
                +</body>
                 
                  diff --git a/files/fr/web/html/element/map/index.html b/files/fr/web/html/element/map/index.html index 703b769c6c..0587aefb35 100644 --- a/files/fr/web/html/element/map/index.html +++ b/files/fr/web/html/element/map/index.html @@ -14,8 +14,6 @@ translation_of: Web/HTML/Element/map
                  {{EmbedInteractiveExample("pages/tabbed/map.html", "tabbed-standard")}}
                  - -

                  Attributs

                  Comme tous les autres éléments HTML, cet élément inclut les attributs universels.

                  @@ -27,21 +25,30 @@ translation_of: Web/HTML/Element/map

                  Exemples

                  -

                  Dans cet exemple, la partie gauche est un lien vers une page et la partie droite est inactive.

                  -

                  HTML

                  -
                  <map name="exemple-map-1">
                  -  <area shape="rect" coords="0,0 200,200" href="https://developer.mozilla.org" target="_blank" />
                  -  <area shape="default" />
                  +
                  <map name="primary">
                  +  <area shape="circle" coords="75,75,75" href="left.html">
                  +  <area shape="circle" coords="275,75,75" href="right.html">
                   </map>
                  -<img usemap="#exemple-map-1" src="https://mdn.mozillademos.org/files/14546/map.png">
                  +<img usemap="#primary" src="https://via.placeholder.com/350x150" alt="350 x 150 pic">
                   

                  Résultat

                  {{EmbedLiveSample("Exemples","450","230")}}

                  +

                  Résultat attendu

                  + +

                  L'exemple précédent devrait faire apparaître des images semblables (en utilisant la touche tab de votre clavier) :

                  + +

                  Pour le lien left.html :
                  +

                  + +

                  Pour le lien right.html 
                  +

                  + +

                  Résumé technique

                  diff --git a/files/fr/web/html/element/mark/index.html b/files/fr/web/html/element/mark/index.html index bea78cc4f4..df2379de82 100644 --- a/files/fr/web/html/element/mark/index.html +++ b/files/fr/web/html/element/mark/index.html @@ -14,8 +14,6 @@ translation_of: Web/HTML/Element/mark
                  {{EmbedInteractiveExample("pages/tabbed/mark.html", "tabbed-shorter")}}
                  - -

                  Attributs

                  Cet élément inclut uniquement les attributs universels.

                  diff --git a/files/fr/web/html/element/menu/index.html b/files/fr/web/html/element/menu/index.html index 171b9eba0f..760832b44d 100644 --- a/files/fr/web/html/element/menu/index.html +++ b/files/fr/web/html/element/menu/index.html @@ -99,7 +99,7 @@ translation_of: Web/HTML/Element/menu

                  Barre d’outils {{experimental_inline}}

                  -

                  Attention : Les menus sous forme de barres d'outils n'ont pas encore été implémentés dans les navigateurs.

                  +

                  Attention : Les menus sous forme de barres d'outils n'ont pas encore été implémentés dans les navigateurs.

                  HTML

                  diff --git a/files/fr/web/html/element/meta/index.html b/files/fr/web/html/element/meta/index.html index 1c4f6deedd..d02f6807b6 100644 --- a/files/fr/web/html/element/meta/index.html +++ b/files/fr/web/html/element/meta/index.html @@ -16,8 +16,8 @@ translation_of: Web/HTML/Element/meta

                  Comme tous les autres éléments, cet élément inclut les attributs universels.

                  -
                  -

                  Note :  Il faut préciser que l'attribut {{htmlattrxref("name", "meta")}} possède une signification spécifique à l'élément {{HTMLElement("meta")}} et que l'attribut {{htmlattrxref("itemprop")}} ne doit pas être utilisé quand l'un de ces attributs est déjà utilisé : {{htmlattrxref("name", "meta")}}, {{htmlattrxref("http-equiv", "meta")}} ou {{htmlattrxref("charset", "meta")}}.

                  +
                  +

                  Note : Il faut préciser que l'attribut {{htmlattrxref("name", "meta")}} possède une signification spécifique à l'élément {{HTMLElement("meta")}} et que l'attribut {{htmlattrxref("itemprop")}} ne doit pas être utilisé quand l'un de ces attributs est déjà utilisé : {{htmlattrxref("name", "meta")}}, {{htmlattrxref("http-equiv", "meta")}} ou {{htmlattrxref("charset", "meta")}}.

                  @@ -28,24 +28,24 @@ translation_of: Web/HTML/Element/meta
                • Les auteurs ne devraient pas utiliser d'encodage incompatible avec l'ASCII (c'est à dire ceux dont les codes 8-bits de 0x20 à 0x7E ne correspondent pas, de manière respective, aux codes Unicode 0x0020 à 0x007E) car ceux-ci représentent un risque de sécurité, les navigateurs ne les supportant pas pouvant traduire du contenu bénin en des éléments HTML. Ceci est le cas pour les jeux de caractères suivants : JIS_C6226-1983, JIS_X0212-1990, HZ-GB-2312, JOHAB, la famille d'encodage ISO-2022 et la famille d'encodage EBCDIC.
                • -

                  Les auteurs ne doivent pas utiliser CESU-8, UTF-7, BOCU-1 et SCSU. Ceux-ci rejoignent le cas précédents et n'ont pas été conçus pour être utilisés sur le web. Certaines attaques de types XSS (Cross-site scripting) ont pu être recensées avec ces encodages.

                  +

                  Attention : Les auteurs ne doivent pas utiliser CESU-8, UTF-7, BOCU-1 et SCSU. Ceux-ci rejoignent le cas précédents et n'ont pas été conçus pour être utilisés sur le web. Certaines attaques de types XSS (Cross-site scripting) ont pu être recensées avec ces encodages.

                • -

                  Les auteurs ne devraient pas utiliser UTF-32 car certains algorithmes d'encodage HTML5 ne peuvent différiencer UTF-32 de UTF-16.

                  +

                  Attention : Les auteurs ne devraient pas utiliser UTF-32 car certains algorithmes d'encodage HTML5 ne peuvent différiencer UTF-32 de UTF-16.

                • -
                  Notes : +

                  Note :

                  • Le jeux de caractères déclaré doit correspondre à celui utilisé dans la page. Il est inutile de déclarer un jeu de caractères incorrect (cela entraînant également une mauvaise expérience utilisateur).
                  • L'élément {{HTMLElement("meta")}} doit appartenir à l'élément {{HTMLElement("head")}} et doit apparaître parmi les 512 premiers octets de la page. En effet, certains navigateurs ne consultent seulement ces premiers octets pour déterminer l'encodage utilisé pour la page.
                  • L'élément {{HTMLElement("meta")}} ne représente qu'une partie de l'algorithme déterminant le jeu de caractères à appliquer sur la page par le navigateur. Ainsi, l'en-tête HTTP Content-Type et tous les éléments BOM auront une priorité supérieure à cet élément.
                  • Définir le jeu de caractères utilisé grâce à cet attribut représente une bonne pratique et est fortement recommandé. Si aucun encodage n'est défini pour la page, plusieurs techniques XSS peuvent porter atteinte à l'utilisateur (voir l'exemple de la technique XSS de recours à UTF-7). Toujours renseigner cet élément meta protégera contre ces dangers.
                  • -
                  • L'élément {{HTMLElement("meta")}} est un synonyme de <meta http-equiv="Content-Type" content="text/html; charset=IANAcharset"> utilisé avant HTML5. Ici IANAcharset correspond à la valeur de l'attribut  {{htmlattrxref("charset", "meta")}} correspondant. Bien qu'elle soit obsolète et qu'elle ne soit plus recommandée, cette syntaxe est toujours autorisée.
                  • +
                  • L'élément {{HTMLElement("meta")}} est un synonyme de <meta http-equiv="Content-Type" content="text/html; charset=IANAcharset"> utilisé avant HTML5. Ici IANAcharset correspond à la valeur de l'attribut {{htmlattrxref("charset", "meta")}} correspondant. Bien qu'elle soit obsolète et qu'elle ne soit plus recommandée, cette syntaxe est toujours autorisée.
                  @@ -56,13 +56,13 @@ translation_of: Web/HTML/Element/meta
                  content-language {{obsolete_inline}}
                  Définit la langue par défaut utilisée par une page -
                  Attention ! Cette valeur n'est plus recommandée et ne doit donc plus être utilisée. L'attribut lang de l'élément {{HTMLElement("body")}} doit être utilisé pour remplir cette fonction.
                  +

                  Attention : Cette valeur n'est plus recommandée et ne doit donc plus être utilisée. L'attribut lang de l'élément {{HTMLElement("body")}} doit être utilisé pour remplir cette fonction.

                  Content-Security-Policy
                  Cette valeur permet aux administrateurs de sites web de définir des règles de gestion de contenu pour les ressources qui sont servies. Cela permet notamment d'indiquer les origines valides et les points d'accès aux scripts afin de protéger contre les attaques XSS.
                  content-type {{obsolete_inline}}
                  Ce champ d'attribut définit le type MIME du document et peut être suivi par son jeu de caractères. Il respecte la même syntaxe que le champ content-type appartenant à l'en-tête HTTP. Cet attribut faisant, lui, partie d'un élément HTML, il n'est pas possible d'utiliser la plupart des valeurs. La syntaxe correcte pour son contenu est donc la chaîne de caractère 'text/html' éventuellement suivie par un jeu de caractères avec la syntaxe suivante : '; charset=IANAcharset' où IANAcharset est l'appellation MIME du jeu de caractères, présentée par l'IANA -
                  Notes d'utilisation +

                  Attention :

                  • Ce champ n'est plus recommandé et ne donc doit pas être utilisé. L'attribut {{htmlattrxref("charset", "meta")}} de l'élément {{HTMLElement("meta")}} doit être utilisé à la place.
                  • Étant donné que l'élément {{HTMLElement("meta")}} peut ne pas être utilisé pour changer le type d'un document XHTML, ou d'un document HTML5 précédé par une syntaxe XHTML, il ne faut pas utiliser ce champs pour définir un type MIME étant un type MIME XHTML. Cela serait incorrect.
                  • @@ -79,16 +79,16 @@ translation_of: Web/HTML/Element/meta
                  set-cookie {{obsolete_inline}}{{non-standard_inline}}
                  Ce champ définit un cookie pour la page. Son contenu doit respecter la syntaxe énoncée par la IETF HTTP Cookie Specification. -
                  Attention ! Ce champ est désormais obsolète et ne doit donc pas être utilisé. L'en-tête HTTP Set-Cookie doit être utilisée à la place.  Cette valeur a été retirée du standard et n'est plus prise en charge à partir de Firefox 68 et de Chrome 65.
                  +

                  Attention : Ce champ est désormais obsolète et ne doit donc pas être utilisé. L'en-tête HTTP Set-Cookie doit être utilisée à la place. Cette valeur a été retirée du standard et n'est plus prise en charge à partir de Firefox 68 et de Chrome 65.

                  {{htmlattrdef("name")}}
                  -
                  Cet attribut définit le nom d'un métadonnée au niveau du document. Il ne doit pas être utilisé si l'un des attributs  {{htmlattrxref("itemprop", "meta")}}, {{htmlattrxref("http-equiv", "meta")}} ou {{htmlattrxref("charset", "meta")}} est utilisé.
                  +
                  Cet attribut définit le nom d'un métadonnée au niveau du document. Il ne doit pas être utilisé si l'un des attributs {{htmlattrxref("itemprop", "meta")}}, {{htmlattrxref("http-equiv", "meta")}} ou {{htmlattrxref("charset", "meta")}} est utilisé.
                  Le nom de la métadonnée document est associé à une valeur contenue dans l'attribut {{htmlattrxref("content", "meta")}}. Les noms possibles et la signification de leurs valeurs (contenues dans l'attribut {{htmlattrxref("content", "meta")}}) sont :
                  • application-name, qui définit le nom de l'application web utilisée dans la page -
                    Notes : +

                    Note :

                    • Les navigateurs peuvent l'utiliser pour identifier l'application. Il est à distinguer de l'élément {{HTMLElement("title")}} qui contient généralement le nom de l'application mais qui contient aussi des informations comme le nom du document ou un statut
                    • Les pages web simples ne devraient pas utiliser cet attribut de métadonnée.
                    • @@ -139,11 +139,11 @@ translation_of: Web/HTML/Element/meta
                  -

                  Notes:

                  +

                  Note :

                  • Certains navigateurs prennent en charge les valeurs dépréciées always, default et never.
                  • -
                  • L'insertion dynamique de <meta name="referrer"> (grâce à  document.write ou appendChild) rend le comportement imprévisible.
                  • +
                  • L'insertion dynamique de <meta name="referrer"> (grâce à document.write ou appendChild) rend le comportement imprévisible.
                  • Lorsque plusieurs règles conflictuelles sont définies, c'est la règle no-referrer qui est appliquée.
                  @@ -253,7 +253,7 @@ translation_of: Web/HTML/Element/meta -
                  Notes : +

                  Note :

                  • Seuls les robots « respectueux » suivront ces règles. Il ne faut pas considérer cela comme une manière efficace de blocage (robots indexeurs cherchant des adresses e-mails pour le spam notamment)
                  • @@ -310,13 +310,13 @@ translation_of: Web/HTML/Element/meta user-scalable - un booléen  (yes ou no) + un booléen (yes ou no) Si la valeur est no, l'utilisateur ne pourra pas zoomer sur le document. Par défaut, la valeur est yes. -
                    Attention ! +

                    Attention :

                    • Bien qu'il ne fasse pas partie du standard, cet attribut est utilisé par plusieurs navigateurs mobiles comme Safari Mobile, Firefox pour Mobile ou Opera Mobile.
                    • @@ -329,7 +329,7 @@ translation_of: Web/HTML/Element/meta
              {{htmlattrdef("scheme")}} {{obsolete_inline}}
              Cet attribut définit le schéma dans lequel la métadonnée est décrite. Un schéma, de la même manière qu'un format, est un contexte permettant d'interpréter correctement la valeur de l'attribut {{htmlattrxref("content", "meta")}}. -
              Attention ! Cet attribut a été déprécié et ne doit donc plus être utilisé. Il n'y pas d'attributs ou d'éléments remplaçant sa fonction car cet attribut n'était pas usité.
              +

              Attention : Cet attribut a été déprécié et ne doit donc plus être utilisé. Il n'y pas d'attributs ou d'éléments remplaçant sa fonction car cet attribut n'était pas usité.

          diff --git a/files/fr/web/html/element/meter/index.html b/files/fr/web/html/element/meter/index.html index 1622ba42e1..117cc298f6 100644 --- a/files/fr/web/html/element/meter/index.html +++ b/files/fr/web/html/element/meter/index.html @@ -15,9 +15,6 @@ translation_of: Web/HTML/Element/meter
          {{EmbedInteractiveExample("pages/tabbed/meter.html", "tabbed-shorter")}}
          - - -

          Attributs

          Comme pour les autres éléments HTML, cet élément inclut également les attributs universels.

          @@ -33,24 +30,18 @@ translation_of: Web/HTML/Element/meter
          Cet attribut représente la valeur maximale que peut prendre la mesure. Il doit s'agir d'un nombre à virgule; s'il est invalide ou si l'attribut n'est pas défini, sa valeur par défaut est 1.0. Il doit être strictement plus grand que la valeur de l'attribut min.
          {{htmlattrdef("min")}}
          Cet attribut représente la valeur minimale que peut prendre la mesure. Il doit s'agir d'un nombre à virgule; s'il est invalide ou si l'attribut n'est pas défini, sa valeur par défaut est 0.0. Il doit être strictement plus petit que la valeur de l'attribut max.
          -
        - -
        {{htmlattrdef("optimum")}}
        Cet attribut représente la valeur idéale pour la mesure. Si cet attribut est défini, il doit s'agir d'un nombre à virgule compris entre les valeurs des attributs min et max. Si la valeur de optimum est inférieure à low, s'il est défini, cela signifie que les valeurs les plus petites sont meilleures; si sa valeur est supérieure à high, s'il est défini, cela signifie que les valeurs les plus grandes sont meilleures; enfin, s'il est compris entre low et high, cela signifie que les extrêmes ne sont pas les meilleures grandeurs.
        -
        - -
        {{htmlattrdef("value")}}
        Cette attribut représente la valeur courante de la mesure. Cet attribut est obligatoire.
        -

        Note d'utilisation : il est recommandé aux auteurs de dupliquer les valeurs des attributs min, max et value dans le contenu de cet élément de façon à permettre aux navigateurs ne supportant pas l'élément {{ HTMLElement("meter") }} de transmettre ces informations aux utilisateurs. Par exemple :

        +

        Note : il est recommandé aux auteurs de dupliquer les valeurs des attributs min, max et value dans le contenu de cet élément de façon à permettre aux navigateurs ne supportant pas l'élément {{ HTMLElement("meter") }} de transmettre ces informations aux utilisateurs. Par exemple :

        Utilisation de l'espace de stockage:
         <meter value=6 max=8>
           6 blocs utilisés (sur un total de 8)
         </meter>
        - Il n'y a pas de moyen sémantique de décrire l'unité de l'attribut value, néanmoins l'attribut global title peut être utilisé pour cela.
        +

        Il n'y a pas de moyen sémantique de décrire l'unité de l'attribut value, néanmoins l'attribut global title peut être utilisé pour cela.

      diff --git a/files/fr/web/html/element/nav/index.html b/files/fr/web/html/element/nav/index.html index 0bc51c3ffa..5d877594b7 100644 --- a/files/fr/web/html/element/nav/index.html +++ b/files/fr/web/html/element/nav/index.html @@ -14,9 +14,6 @@ translation_of: Web/HTML/Element/nav
      {{EmbedInteractiveExample("pages/tabbed/nav.html", "tabbed-standard")}}
      - - -

      Attributs

      Cet élément ne possède que les attributs universels.

      @@ -107,6 +104,6 @@ translation_of: Web/HTML/Element/nav diff --git a/files/fr/web/html/element/nobr/index.html b/files/fr/web/html/element/nobr/index.html index 314e12d697..25296e38fa 100644 --- a/files/fr/web/html/element/nobr/index.html +++ b/files/fr/web/html/element/nobr/index.html @@ -13,8 +13,8 @@ translation_of: Web/HTML/Element/nobr

      L'élément HTML <nobr> évite qu'un texte soit coupé par un retour à la ligne automatique ; il est donc affiché sur une seule ligne. Il peut être alors nécessaire d'utiliser les barres de défilement pour lire le texte en intégralité.

      -
      -

      Cet élément n'est pas standard en HTML et ne doit donc pas être utilisé. C'est la propriété CSS {{cssxref("white-space")}} doit être utilisée à la place, de cette manière :

      +
      +

      Attention : Cet élément n'est pas standard en HTML et ne doit donc pas être utilisé. C'est la propriété CSS {{cssxref("white-space")}} doit être utilisée à la place, de cette manière :

      <span style="white-space: nowrap">Un texte long sans retour à la ligne.</span>
      diff --git a/files/fr/web/html/element/noframes/index.html b/files/fr/web/html/element/noframes/index.html index e8482d17cd..fccceb6b8a 100644 --- a/files/fr/web/html/element/noframes/index.html +++ b/files/fr/web/html/element/noframes/index.html @@ -17,7 +17,9 @@ translation_of: Web/HTML/Element/noframes

      Cet élément pouvait être utilisé afin d'afficher un message explicatif, destiné à l'utilisateur. Idéalement, le contenu devait présenter des fonctionnalités analogues à la frame qui n'était pas prise en charge.

      -
      Note d'utilisation : Cet élément est aussi entièrement obsolète en HTML5, et doit être evité pour se conformer au standard.
      +
      +

      Note : Cet élément est aussi entièrement obsolète en HTML5, et doit être evité pour se conformer au standard.

      +

      Attributs

      diff --git a/files/fr/web/html/element/object/index.html b/files/fr/web/html/element/object/index.html index b0bb8bcd8b..fb4970dfbf 100644 --- a/files/fr/web/html/element/object/index.html +++ b/files/fr/web/html/element/object/index.html @@ -14,8 +14,6 @@ translation_of: Web/HTML/Element/object
      {{EmbedInteractiveExample("pages/tabbed/object.html", "tabbed-standard")}}
      - -

      Attributs

      Comme tous les autres éléments HTML, cet élément inclut les attributs universels.

      diff --git a/files/fr/web/html/element/ol/index.html b/files/fr/web/html/element/ol/index.html index 419254935b..c36383b0aa 100644 --- a/files/fr/web/html/element/ol/index.html +++ b/files/fr/web/html/element/ol/index.html @@ -11,7 +11,7 @@ translation_of: Web/HTML/Element/ol ---
      {{HTMLRef}}
      -

      L'élément HTML <ol> représente une liste ordonnée. Les éléments d'une telle liste sont généralement affichés avec un indicateur ordinal pouvant prendre la forme de nombres, de lettres, de chiffres romains ou de points. La mise en forme de la numérotation n'est pas utilisée dans la description HTML mais dans la feuille de style CSS associée grâce à la propriété list-style-type.

      +

      L'élément HTML <ol> représente une liste ordonnée. Les éléments d'une telle liste sont généralement affichés avec un indicateur ordinal pouvant prendre la forme de nombres, de lettres, de chiffres romains ou de points. La mise en forme de la numérotation n'est pas utilisée dans la description HTML mais dans la feuille de style CSS associée grâce à la propriété list-style-type.

      {{EmbedInteractiveExample("pages/tabbed/ol.html", "tabbed-shorter")}}
      @@ -53,11 +53,11 @@ translation_of: Web/HTML/Element/ol

      À l'instar des autres éléments HTML, il est possible d'utiliser les attributs universels sur cet élément.

      -
      reversed
      +
      reversed
      Cet attribut booléen indique que les éléments de la liste sont dans l'ordre inverse. Les éléments sont numérotés de haut en bas.
      -
      start
      +
      start
      Un nombre entier à partir duquel on commence à compter pour les éléments de la liste. Toujours un chiffre arabique (1, 2, 3, etc.), même lorsque le type de numérotation est constitué de lettres ou de chiffres romains. Par exemple, pour commencer à numéroter les éléments à partir de la lettre "d" ou du chiffre romain "iv", utilisez start="4".
      -
      type
      +
      type
      Définit le type de numérotation :
      • a pour les lettres minuscules
      • @@ -68,9 +68,8 @@ translation_of: Web/HTML/Element/ol

      Le type spécifié est utilisé pour l'ensemble de la liste, sauf si un attribut différent type est utilisé sur un élément <li> fermé.

      -
      -

      Note :

      -

      À moins que le type du numéro de la liste n'ait de l'importance (comme dans les documents juridiques ou techniques où les éléments sont référencés par leur numéro/lettre), utilisez plutôt la propriété CSS list-style-type.

      +
      +

      Note :À moins que le type du numéro de la liste n'ait de l'importance (comme dans les documents juridiques ou techniques où les éléments sont référencés par leur numéro/lettre), utilisez plutôt la propriété CSS list-style-type.

      diff --git a/files/fr/web/html/element/optgroup/index.html b/files/fr/web/html/element/optgroup/index.html index 7049d2b6fb..74834d660c 100644 --- a/files/fr/web/html/element/optgroup/index.html +++ b/files/fr/web/html/element/optgroup/index.html @@ -15,9 +15,6 @@ translation_of: Web/HTML/Element/optgroup
      {{EmbedInteractiveExample("pages/tabbed/optgroup.html", "tabbed-standard")}}
      - - -

      Note : Il n'est pas possible d'imbriquer plusieurs éléments <optgroup> entre eux.

      diff --git a/files/fr/web/html/element/option/index.html b/files/fr/web/html/element/option/index.html index b8db2dbec8..469756c960 100644 --- a/files/fr/web/html/element/option/index.html +++ b/files/fr/web/html/element/option/index.html @@ -15,8 +15,6 @@ translation_of: Web/HTML/Element/option
      {{EmbedInteractiveExample("pages/tabbed/option.html", "tabbed-standard")}}
      - -

      Attributs

      Comme tous les autres éléments HTML, cet élément inclut les attributs universels.

      @@ -36,7 +34,7 @@ translation_of: Web/HTML/Element/option

      HTML

      -
      <select name="select">
      +
      <select name="select">
         Elle est où la poulette ?
         <option value="value1">Avec les lapins</option>
         <option value="value2" selected>Avec les canards</option>
      diff --git a/files/fr/web/html/element/p/index.html b/files/fr/web/html/element/p/index.html
      index bcc41a5393..678b9bc74e 100644
      --- a/files/fr/web/html/element/p/index.html
      +++ b/files/fr/web/html/element/p/index.html
      @@ -14,8 +14,6 @@ translation_of: Web/HTML/Element/p
       
       
      {{EmbedInteractiveExample("pages/tabbed/p.html", "tabbed-standard")}}
      - -

      Étant des éléments de bloc, les paragraphes se fermeront automatiquement si un autre élément de bloc est analysé avant la balise de fermeture </p> (voir Omission de balises dans le tableau qui suit).

      diff --git a/files/fr/web/html/element/picture/index.html b/files/fr/web/html/element/picture/index.html index a7e60e4af6..92dda31bdd 100644 --- a/files/fr/web/html/element/picture/index.html +++ b/files/fr/web/html/element/picture/index.html @@ -14,8 +14,6 @@ translation_of: Web/HTML/Element/picture
      {{EmbedInteractiveExample("pages/tabbed/picture.html", "tabbed-standard")}}
      - -

      L'agent utilisateur examine chaque attribut présent dans <source> ({{htmlattrxref("srcset", "source")}}, {{htmlattrxref("media", "source")}}, and {{htmlattrxref("type", "source")}}) pour sélectionner l'URL de la meilleure ressource selon la disposition de la page, les caractéristiques de l'écran de l'appareil, etc.

      L'élément <picture> peut être utilisé pour :

      @@ -35,8 +33,8 @@ translation_of: Web/HTML/Element/picture

      Il est possible d'utiliser la propriété CSS {{cssxref("object-position")}} afin d'ajuster le positionnement de l'image dans le cadre de l'élément. La propriété {{cssxref("object-fit")}} permet quant à elle de contrôler la façon dont la taille de l'image est ajustée.

      -
      -

      Note : Ces propriétés doivent être utilisées sur les éléments <img> fils et pas sur l'élément <picture>.

      +
      +

      Note : Ces propriétés doivent être utilisées sur les éléments <img> fils et pas sur l'élément <picture>.

      Exemples

      diff --git a/files/fr/web/html/element/plaintext/index.html b/files/fr/web/html/element/plaintext/index.html index 70d0e09319..80b5a98b0c 100644 --- a/files/fr/web/html/element/plaintext/index.html +++ b/files/fr/web/html/element/plaintext/index.html @@ -13,7 +13,7 @@ translation_of: Web/HTML/Element/plaintext

      L'élément HTML <plaintext> permet d'afficher du texte qui n'est pas interprété comme du HTML. Il ne possède pas de balise de fermeture, car tout ce qui suit n'est plus considéré comme du HTML.

      -
      Note : Ne pas utiliser cet élément. +

      Note : Ne pas utiliser cet élément.

      • Il est déprécié depuis HTML 2, et n'a jamais été implementé par tous les navigateurs d'une manière cohérente. De plus, il est obsolète depuis HTML5, et pourra être rendu par les agents-utilisateurs qui l'acceptent comme un élément {{HTMLElement("pre")}}, qui interprètera le HTML contenu même si ce n'est pas ce qui est souhaité !
      • @@ -32,7 +32,7 @@ translation_of: Web/HTML/Element/plaintext

        Cet élément implémente l'interface {{domxref('HTMLElement')}}.

        -

        Note d'implémentation : Jusqu'à Gecko 1.9.2 inclus, Firefox implémente l'interface {{domxref('HTMLSpanElement')}} pour cet élément.

        +

        Note : Jusqu'à Gecko 1.9.2 inclus, Firefox implémente l'interface {{domxref('HTMLSpanElement')}} pour cet élément.

        Compatibilité des navigateurs

        diff --git a/files/fr/web/html/element/pre/index.html b/files/fr/web/html/element/pre/index.html index 423bc7d858..6b6aadfb0c 100644 --- a/files/fr/web/html/element/pre/index.html +++ b/files/fr/web/html/element/pre/index.html @@ -18,8 +18,6 @@ translation_of: Web/HTML/Element/pre
        {{EmbedInteractiveExample("pages/tabbed/pre.html", "tabbed-standard")}}
        - -

        Attributs

        Cet élément inclut uniquement les attributs universels.

        diff --git a/files/fr/web/html/element/progress/index.html b/files/fr/web/html/element/progress/index.html index 7253e5886b..ea62218a67 100644 --- a/files/fr/web/html/element/progress/index.html +++ b/files/fr/web/html/element/progress/index.html @@ -14,8 +14,6 @@ translation_of: Web/HTML/Element/progress
        {{EmbedInteractiveExample("pages/tabbed/progress.html", "tabbed-standard")}}
        - -

        Attributs

        Comme tous les autres éléments HTML, cet élément inclut les attributs universels.

        diff --git a/files/fr/web/html/element/q/index.html b/files/fr/web/html/element/q/index.html index 05dd579fd7..f4656745b2 100644 --- a/files/fr/web/html/element/q/index.html +++ b/files/fr/web/html/element/q/index.html @@ -14,10 +14,8 @@ translation_of: Web/HTML/Element/q
        {{EmbedInteractiveExample("pages/tabbed/q.html", "tabbed-shorter")}}
        - -
        -

        Note d'utilisation : la plupart des navigateurs récents ajoutent automatiquement des guillemets autours du contenu d'un élément <q> mais il peut être nécessaire d'ajouter une règle CSS pour les ajouter dans les anciens navigateurs.

        +

        Note : La plupart des navigateurs récents ajoutent automatiquement des guillemets autours du contenu d'un élément <q> mais il peut être nécessaire d'ajouter une règle CSS pour les ajouter dans les anciens navigateurs.

        Attributs

        diff --git a/files/fr/web/html/element/rb/index.html b/files/fr/web/html/element/rb/index.html index e51879285e..033176d14d 100644 --- a/files/fr/web/html/element/rb/index.html +++ b/files/fr/web/html/element/rb/index.html @@ -10,11 +10,7 @@ translation_of: Web/HTML/Element/rb ---
        {{HTMLRef}}
        -

        L'élément de base ruby (<rb>) est utilisé afin de délimiter le composant texte de base d'une annotation {{HTMLElement("ruby")}}. Autrement dit, le texte qui est annoté. Un élément <rb> devrait encadrer chaque segment atomique du texte de base.

        - - - - +

        L'élément de base ruby (<rb>) est utilisé afin de délimiter le composant texte de base d'une annotation {{HTMLElement("ruby")}}. Autrement dit, le texte qui est annoté. Un élément <rb> devrait encadrer chaque segment atomique du texte de base.

        Attributs

        @@ -46,35 +42,31 @@ translation_of: Web/HTML/Element/rb 字 <rp>(</rp><rt>ji</rt><rp>)</rp> </ruby>
      -

      Voici le résultat obtenu :

      -

      {{EmbedLiveSample("with-ruby", "100%", 60)}}

      +

      {{EmbedLiveSample("Avec_prise_en_charge_de_ruby", "100%", 60)}}

      Pour un navigateur qui ne prend pas en charge les annotations ruby, voici à quoi aurait ressemblé le résultat :

      -
      - -
      -

      {{EmbedLiveSample("without-ruby", "100%", 60)}}

      +

      {{EmbedLiveSample("Sans_prise_en_charge_de_ruby", "100%", 60)}}

      Note : Voir l'article sur l'élément {{HTMLElement("ruby")}} pour de plus amples exemples.

      diff --git a/files/fr/web/html/element/rp/index.html b/files/fr/web/html/element/rp/index.html index 40b8be5b98..f7db845a0f 100644 --- a/files/fr/web/html/element/rp/index.html +++ b/files/fr/web/html/element/rp/index.html @@ -19,49 +19,41 @@ translation_of: Web/HTML/Element/rp
      {{EmbedInteractiveExample("pages/tabbed/rp.html", "tabbed-shorter")}}
      - -

      Attributs

      Cet élément inclut uniquement les attributs universels.

      Exemples

      -
      -

      HTML

      +

      Avec prise en charge de ruby

      +

      HTML

      <ruby>
         漢 <rp>(</rp><rt>Kan</rt><rp>)</rp>
         字 <rp>(</rp><rt>ji</rt><rp>)</rp>
       </ruby>
      - -
      -

      Résultat

      +

      Résultat

      + +

      {{EmbedLiveSample("Avec_prise_en_charge_de_ruby","300","150")}}

      -

      {{EmbedLiveSample("with-ruby","300","150")}}

      +

      Sans prise en charge de ruby

      Avec un navigateur ne prenant pas en charge les annotations Ruby, on aurait :

      -
      - -
      -

      {{EmbedLiveSample("without-ruby", 600, 60)}}

      +

      {{EmbedLiveSample("Sans_prise_en_charge_de_ruby", 600, 60)}}

      Résumé technique

      diff --git a/files/fr/web/html/element/rt/index.html b/files/fr/web/html/element/rt/index.html index a5db6f5422..5cc3fcc684 100644 --- a/files/fr/web/html/element/rt/index.html +++ b/files/fr/web/html/element/rt/index.html @@ -15,16 +15,15 @@ translation_of: Web/HTML/Element/rt
      {{EmbedInteractiveExample("pages/tabbed/rt.html", "tabbed-shorter")}}
      - -

      Attributs

      Cet élément inclut uniquement les attributs universels.

      Exemples

      -
      -

      HTML

      +

      Avec prise en charge de ruby

      + +

      HTML

      <ruby>
         漢 <rt>Kan</rt>
      @@ -32,31 +31,27 @@ translation_of: Web/HTML/Element/rt
       </ruby>
       
      - -

      Résultat

      +

      Résultat

      -

      {{EmbedLiveSample("with-ruby","100%","130")}}

      +

      {{EmbedLiveSample("Avec_prise_en_charge_de_ruby","100%","130")}}

      + +

      Sans prise en charge de ruby

      Pour un navigateur sans prise en charge de Ruby, on aurait le résultat suivant :

      -
      - -
      -

      {{EmbedLiveSample("without-ruby", 600, 60)}}

      +

      {{EmbedLiveSample("Sans_prise_en_charge_de_ruby", 600, 60)}}

      Spécifications

      diff --git a/files/fr/web/html/element/rtc/index.html b/files/fr/web/html/element/rtc/index.html index b7d6cce3ac..c1b53d7ffa 100644 --- a/files/fr/web/html/element/rtc/index.html +++ b/files/fr/web/html/element/rtc/index.html @@ -15,10 +15,6 @@ translation_of: Web/HTML/Element/rtc
      {{EmbedInteractiveExample("pages/tabbed/rtc.html", "tabbed-standard")}}
      - - - -

      Attributs

      Cet élément peut utiliser les attributs universels.

      @@ -35,13 +31,11 @@ translation_of: Web/HTML/Element/rtc </ruby>
      -

      Résultat

      diff --git a/files/fr/web/html/element/ruby/index.html b/files/fr/web/html/element/ruby/index.html index 4526f838cc..89542e8bc2 100644 --- a/files/fr/web/html/element/ruby/index.html +++ b/files/fr/web/html/element/ruby/index.html @@ -15,8 +15,6 @@ translation_of: Web/HTML/Element/ruby
      {{EmbedInteractiveExample("pages/tabbed/ruby.html", "tabbed-shorter")}}
      - -

      Attributs

      Cet élément inclut uniquement les attributs globaux.

      diff --git a/files/fr/web/html/element/s/index.html b/files/fr/web/html/element/s/index.html index 33f93d323a..01b03545fe 100644 --- a/files/fr/web/html/element/s/index.html +++ b/files/fr/web/html/element/s/index.html @@ -14,8 +14,6 @@ translation_of: Web/HTML/Element/s
      {{EmbedInteractiveExample("pages/tabbed/s.html", "tabbed-shorter")}}
      - -

      Attributs

      Cet élément inclut uniquement les attributs universels.

      diff --git a/files/fr/web/html/element/samp/index.html b/files/fr/web/html/element/samp/index.html index bf23e8667f..f6b73cc9e6 100644 --- a/files/fr/web/html/element/samp/index.html +++ b/files/fr/web/html/element/samp/index.html @@ -14,8 +14,6 @@ translation_of: Web/HTML/Element/samp
      {{EmbedInteractiveExample("pages/tabbed/samp.html", "tabbed-shorter")}}
      - -

      Attributs

      Cet élément inclut uniquement les attributs universels.

      diff --git a/files/fr/web/html/element/script/index.html b/files/fr/web/html/element/script/index.html index 7c2e297073..30e0122fa1 100644 --- a/files/fr/web/html/element/script/index.html +++ b/files/fr/web/html/element/script/index.html @@ -12,7 +12,7 @@ translation_of: Web/HTML/Element/script

      L'élément HTML <script> est utilisé pour intégrer ou faire référence à un script exécutable. Cela fait généralement référence à du code JavaScript mais ce peut également être un autre type de script (par exemple WebGL).

      -

      Les scripts sans attribut async ou defer sont chargés et exécutés immédiatement avant que le navigateur continue l'analyse de la page.

      +

      Les scripts sans attribut async ou defer sont chargés et exécutés immédiatement avant que le navigateur continue l'analyse de la page.

      Attributs

      @@ -20,24 +20,23 @@ translation_of: Web/HTML/Element/script
      {{htmlattrdef("async")}}
      -
      Cet attribut booléen indique si le navigateur doit, dans la mesure du possible, exécuter les scripts de manière asynchrone. Cet attribut ne doit pas être utilisé si l'attribut src est absent (c'est-à-dire pour les scripts « inline » déclarés dans les éléments), dans ce cas il n'aurait aucun effet.
      -
      Par défaut, les navigateurs prennent l'hypothèse la plus pessimiste et chargent les scripts de façon synchrone (autrement dit, le comportement par défaut est async="false") lors de l'analyse du document HTML.
      -
      Les scripts insérés dynamiquement (via {{domxref("document.createElement()")}}) sont exécutés de façon asynchrone par défaut. Pour activer le mode d'exécution synchrone, il faudra explicitement indiquer async="false".
      -
      - Se référer au tableau de compatibilité ci-après pour les informations concernant la prise en charge par les navigateurs. Voir aussi la page sur les scripts asynchrones avec asm.js.
      +

      Cet attribut booléen indique si le navigateur doit, dans la mesure du possible, exécuter les scripts de manière asynchrone. Cet attribut ne doit pas être utilisé si l'attribut src est absent (c'est-à-dire pour les scripts « inline » déclarés dans les éléments), dans ce cas il n'aurait aucun effet.

      +

      Par défaut, les navigateurs prennent l'hypothèse la plus pessimiste et chargent les scripts de façon synchrone (autrement dit, le comportement par défaut est async="false") lors de l'analyse du document HTML.

      +

      Les scripts insérés dynamiquement (via {{domxref("document.createElement()")}}) sont exécutés de façon asynchrone par défaut. Pour activer le mode d'exécution synchrone, il faudra explicitement indiquer async="false".

      +

      Se référer au tableau de compatibilité ci-après pour les informations concernant la prise en charge par les navigateurs. Voir aussi la page sur les scripts asynchrones avec asm.js.

      {{htmlattrdef("crossorigin")}}
      Les balises de script classiques enverront un minimum d'informations à {{domxref('GlobalEventHandlers.onerror', 'window.onerror')}} pour les scripts qui ne respectent pas les contrôles standard du CORS. Afin de disposer de plus de renseignements sur les erreurs pour les sites utilisant des domaines séparés pour des documents statiques, on pourra utiliser cet attribut. Voir la page de réglages des attributs CORS pour plus d'explications quant aux valeurs valides.
      {{htmlattrdef("defer")}}
      -
      Cet attribut booléen permet d'indiquer au navigateur que le script doit être exécuté après l'analyse du document et avant l'évènement {{event("DOMContentLoaded")}}. Cet attribut ne doit pas être utilisé si l'attribut src est absent (c'est-à-dire pour les scripts contenus déclarés dans les éléments), dans ce cas il n'aurait aucun effet. Pour obtenir un effet similaire avec les scripts insérés de façon dynamique, on utilisera explicitement async=false. Les scripts qui possèdent un attribut defer seront exécutés dans l'ordre dans lequel ils apparaissent dans le document.
      -
      Les scripts qui utilisent l'attribut defer empêche le déclenchement de l'évènement DOMContentLoaded tant que le script n'a pas été chargé et que son évaluation n'est pas terminée.
      +

      Cet attribut booléen permet d'indiquer au navigateur que le script doit être exécuté après l'analyse du document et avant l'évènement {{event("DOMContentLoaded")}}. Cet attribut ne doit pas être utilisé si l'attribut src est absent (c'est-à-dire pour les scripts contenus déclarés dans les éléments), dans ce cas il n'aurait aucun effet. Pour obtenir un effet similaire avec les scripts insérés de façon dynamique, on utilisera explicitement async=false. Les scripts qui possèdent un attribut defer seront exécutés dans l'ordre dans lequel ils apparaissent dans le document.

      +

      Les scripts qui utilisent l'attribut defer empêche le déclenchement de l'évènement DOMContentLoaded tant que le script n'a pas été chargé et que son évaluation n'est pas terminée.

      {{htmlattrdef("integrity")}}
      Cet attribut contient des métadonnées que l'agent utilisateur peut vérifier afin de contrôler qu'une ressource téléchargée n'a pas été modifiée de façon frauduleuse. Pour plus d'informations, consulter la page relative à l'intégrité des sous-ressources.
      {{htmlattrdef("nomodule")}}
      Cet attribut booléen indique que le script ne doit pas être exécuté dans le navigateur si celui prend en charge les modules ES6. En pratique, de tels scripts seront utilisés pour couvrir les cas où le navigateur ne prend pas en charge les modules JavaScript.
      {{htmlattrdef("nonce")}}
      Un nonce cryptographique utilisé pour inscrire les scripts en ligne sur une liste blanche pour la règle script-src de la CSP (Content Security Policy). Le serveur doit générer un nonce unique chaque fois qu'il transmet une règle de sécurité. Ce nonce ne doit pas pouvoir être deviné car sinon, il devient trivial d'outrepasser la règle de sécurité.
      -
      {{htmlattrdef("referrerpolicy")}}
      -
      Une chaîne de caractères qui indique le référent (referrer) à utiliser lors de la récupération du script : +
      {{htmlattrdef("referrerpolicy")}}
      +

      Une chaîne de caractères qui indique le référent (referrer) à utiliser lors de la récupération du script :

      • no-referrer signifie que l'en-tête {{HTTPHeader("Referer")}} ne sera pas envoyé.
      • no-referrer-when-downgrade signifie qu'aucune en-tête Referrer ne sera envoyé lorsqu'on navigue vers une origine qui n'utilise pas TLS (HTTPS). C'est le comportement par défaut de l'agent utilisateur.
      • @@ -161,17 +160,17 @@ translation_of: Web/HTML/Element/script {{SpecName("HTML5.1", "semantics-scripting.html#the-script-element", "<script>")}} {{Spec2("HTML5.1")}} -   + {{SpecName("HTML5 W3C", "scripting-1.html#script", "<script>")}} {{Spec2("HTML5 W3C")}} -   + {{SpecName("HTML4.01", "interact/scripts.html#h-18.2.1", "<script>")}} {{Spec2("HTML4.01")}} -   + {{SpecName("Subresource Integrity", "#htmlscriptelement", "<script>")}} diff --git a/files/fr/web/html/element/section/index.html b/files/fr/web/html/element/section/index.html index 25f2318220..b532475bba 100644 --- a/files/fr/web/html/element/section/index.html +++ b/files/fr/web/html/element/section/index.html @@ -14,8 +14,6 @@ translation_of: Web/HTML/Element/section
        {{EmbedInteractiveExample("pages/tabbed/section.html", "tabbed-standard")}}
        - -

        Ainsi, un menu de navigation devrait être délimité par un élément {{htmlelement("nav")}} mais une liste de résultat de recherche, qui ne dispose pas d'élément spécifique pour être représentée, pourrait être englobée dans un élément <section>.

        diff --git a/files/fr/web/html/element/select/index.html b/files/fr/web/html/element/select/index.html index 0995c6498f..e941bc306d 100644 --- a/files/fr/web/html/element/select/index.html +++ b/files/fr/web/html/element/select/index.html @@ -15,8 +15,6 @@ translation_of: Web/HTML/Element/select
        {{EmbedInteractiveExample("pages/tabbed/select.html", "tabbed-standard")}}
        - -

        L'exemple ci-avant illustre une utilisation simple de <select> où l'attribut id peut être associé à un élément {{htmlelement("label")}} qui permettra d'avoir un libellé accessible pour ce champ et où un attribut name représente le nom de la donnée qui sera envoyée au serveur. Chaque option est définie grâce à un élément {{htmlelement("option")}} qui se situe à l'intérieur de l'élément <select>.

        Chaque élément <option> doit avoir un attribut value qui contient la valeur qui sera envoyée au serveur lorsque l'option est sélectionnée. Si aucune valeur n'est fournie, la valeur par défaut sera le texte contenu dans l'élément. Il est possible d'inclure un attribut selected sur un élément <option> afin que cette option soit sélectionnée par défaut au chargement de la page.

        @@ -102,9 +100,9 @@ translation_of: Web/HTML/Element/select </label> -

        Cet exemple n'est pas disponible de façon interactive (le moteur de MDN supprime l'attribut multiple lors de l'affichage de la page) mais vous pouvez voir l'exemple sur GitHub.

        +

        Cet exemple n'est pas disponible de façon interactive (le moteur de MDN supprime l'attribut multiple lors de l'affichage de la page) mais vous pouvez voir l'exemple sur GitHub.

        -

        Vous pourrez voir que :

        +

        Vous pourrez voir que :

        • Plusieurs options peuvent être sélectionnées grâce à l'attribut multiple.
        • @@ -114,7 +112,7 @@ translation_of: Web/HTML/Element/select
        -

        Note : Sur un ordinateur de bureau, on pourra maintenir les touches Ctrl, Command, ou Shift en cliquant afin de sélectionner/déselectionner plusieurs options.

        +

        Note : Sur un ordinateur de bureau, on pourra maintenir les touches Ctrl, Command, ou Shift en cliquant afin de sélectionner/déselectionner plusieurs options.

        Sélectionner plusieurs options

        @@ -123,8 +121,8 @@ translation_of: Web/HTML/Element/select

        Pour les personnes qui utilisent la souris, il est possible de maintenir les touches Ctrl, Command ou Shift (selon le système d'exploitation utilisé) et de cliquer sur les différentes options afin de les sélectionner/déselectionner.

        -
        -

        Attention ! Les moyens décrits ci-après pour sélectionner des options qui ne sont pas contigües semblent ne fonctionner qu'avec Firefox. On notera également que sur macOS, les raccourcis Ctrl + Bas et Ctrl + Haut sont utilisées par défaut par le système d'exploitation et qu'il faut les désactiver si on souhaite qu'ils fonctionnent dans le navigateurs.

        +
        +

        Attention : Les moyens décrits ci-après pour sélectionner des options qui ne sont pas contigües semblent ne fonctionner qu'avec Firefox. On notera également que sur macOS, les raccourcis Ctrl + Bas et Ctrl + Haut sont utilisées par défaut par le système d'exploitation et qu'il faut les désactiver si on souhaite qu'ils fonctionnent dans le navigateurs.

        Les utilisateurs du clavier pourront sélectionner des options contigües de la façon suivante :

        diff --git a/files/fr/web/html/element/shadow/index.html b/files/fr/web/html/element/shadow/index.html index ceeba8d6d5..3d493de32a 100644 --- a/files/fr/web/html/element/shadow/index.html +++ b/files/fr/web/html/element/shadow/index.html @@ -62,7 +62,7 @@ translation_of: Web/HTML/Element/shadow

        Résultat statique

        -

        shadow example

        +

        Exemple pour shadow

        Résumé technique

        diff --git a/files/fr/web/html/element/slot/index.html b/files/fr/web/html/element/slot/index.html index bfa3c09685..ce9967dc3e 100644 --- a/files/fr/web/html/element/slot/index.html +++ b/files/fr/web/html/element/slot/index.html @@ -20,13 +20,13 @@ translation_of: Web/HTML/Element/slot
        {{htmlattrdef("name")}}
        -
        Le nom de l'emplacement créé.
        -
        Un « slot » nommé est un élément <slot> avec un attribut name.
        +

        Le nom de l'emplacement créé.

        +

        Un « slot » nommé est un élément <slot> avec un attribut name.

        Exemples

        -
        <template id="element-details-template">
        +
        <template id="element-details-template">
           <style>
             details {font-family: "Open Sans Light", Helvetica, Arial, sans-serif }
             .name {font-weight: bold; color: #217ac0; font-size: 120% }
        diff --git a/files/fr/web/html/element/small/index.html b/files/fr/web/html/element/small/index.html
        index eeaaf73169..cf38e99a93 100644
        --- a/files/fr/web/html/element/small/index.html
        +++ b/files/fr/web/html/element/small/index.html
        @@ -14,8 +14,6 @@ translation_of: Web/HTML/Element/small
         
         
        {{EmbedInteractiveExample("pages/tabbed/small.html", "tabbed-shorter")}}
        - -

        Attributs

        Cet élément inclut uniquement les attributs universels.

        diff --git a/files/fr/web/html/element/source/index.html b/files/fr/web/html/element/source/index.html index 14152a49d7..31882e6eed 100644 --- a/files/fr/web/html/element/source/index.html +++ b/files/fr/web/html/element/source/index.html @@ -15,8 +15,6 @@ translation_of: Web/HTML/Element/source
        {{EmbedInteractiveExample("pages/tabbed/source.html", "tabbed-standard")}}
        - -

        Attributs

        Cet élément inclut les attributs universels.

        diff --git a/files/fr/web/html/element/span/index.html b/files/fr/web/html/element/span/index.html index 0840ed8d1b..da8b897455 100644 --- a/files/fr/web/html/element/span/index.html +++ b/files/fr/web/html/element/span/index.html @@ -14,8 +14,6 @@ translation_of: Web/HTML/Element/span
        {{EmbedInteractiveExample("pages/tabbed/span.html", "tabbed-shorter")}}
        - -

        Attributs

        Cet élément inclut uniquement les attributs universels.

        @@ -24,7 +22,7 @@ translation_of: Web/HTML/Element/span

        HTML

        -
        <p><span>Un peu de texte</span></p>
        +
        <p><span>Un peu de texte</span></p>

        CSS

        diff --git a/files/fr/web/html/element/strike/index.html b/files/fr/web/html/element/strike/index.html index 6d52cef6f3..60b89cf846 100644 --- a/files/fr/web/html/element/strike/index.html +++ b/files/fr/web/html/element/strike/index.html @@ -12,7 +12,9 @@ translation_of: Web/HTML/Element/strike

        L'élément HTML <strike> permet de représenter du texte barré ou avec une ligne le traversant.

        -
        Note d'utilisation : Comme tous les éléments se limitant à la présentation, {{HTMLElement("strike")}} a été déprécié en HTML 4 et XHTML 1, et rendu obsolète dans HTML5. Si on souhaite représente du contenu supprimé, on utilisera l'élément {{HTMLElement("del")}} ; dans les autres cas, on utilisera un élément {{HTMLElement("s")}}.
        +
        +

        Note : Comme tous les éléments se limitant à la présentation, {{HTMLElement("strike")}} a été déprécié en HTML 4 et XHTML 1, et rendu obsolète dans HTML5. Si on souhaite représente du contenu supprimé, on utilisera l'élément {{HTMLElement("del")}} ; dans les autres cas, on utilisera un élément {{HTMLElement("s")}}.

        +

        Attributs

        @@ -23,7 +25,7 @@ translation_of: Web/HTML/Element/strike

        Cet élément implémente l'interface {{domxref("HTMLElement")}}.

        -

        Note d'implémentation : Jusqu'à Gecko 1.9.2 inclus, Firefox implémente l'interface {{domxref("HTMLSpanElement")}} pour cet élément.

        +

        Note : Jusqu'à Gecko 1.9.2 inclus, Firefox implémente l'interface {{domxref("HTMLSpanElement")}} pour cet élément.

        Exemples

        diff --git a/files/fr/web/html/element/strong/index.html b/files/fr/web/html/element/strong/index.html index 8a2f9b3436..7417f8927b 100644 --- a/files/fr/web/html/element/strong/index.html +++ b/files/fr/web/html/element/strong/index.html @@ -14,10 +14,6 @@ translation_of: Web/HTML/Element/strong
        {{EmbedInteractiveExample("pages/tabbed/strong.html", "tabbed-shorter")}}
        - - - -

        Attributs

        Cet élément inclut uniquement les attributs universels.

        diff --git a/files/fr/web/html/element/style/index.html b/files/fr/web/html/element/style/index.html index 19f88c0027..711ca24e97 100644 --- a/files/fr/web/html/element/style/index.html +++ b/files/fr/web/html/element/style/index.html @@ -14,8 +14,6 @@ translation_of: Web/HTML/Element/style
        {{EmbedInteractiveExample("pages/tabbed/style.html", "tabbed-standard")}}
        - -

        L'élément <style> peut être inclus dans l'élément {{htmlelement("head")}} ou dans l'élément {{htmlelement("body")}} du document et les styles seront appliqués. Toutefois, il est recommandé de placer les styles dans l'élément <head> afin de clairement séparer la présentation du contenu autant que possible. La méthode idéale en ce sens consiste à utiliser des feuilles de style dans des fichiers externes et de les appliquer au document grâce à des éléments {{htmlelement("link")}}.

        Si plusieurs éléments <style> et <link> sont appliqués au document, ils seront appliqués dans l'ordre dans lequel ils sont inclus dans le document. Aussi, vérifiez l'ordre afin d'éviter tout problème de cascade.

        diff --git a/files/fr/web/html/element/sub/index.html b/files/fr/web/html/element/sub/index.html index 1b1d229624..0ee9e2ed6d 100644 --- a/files/fr/web/html/element/sub/index.html +++ b/files/fr/web/html/element/sub/index.html @@ -14,8 +14,6 @@ translation_of: Web/HTML/Element/sub
        {{EmbedInteractiveExample("pages/tabbed/sub.html", "tabbed-shorter")}}
        - -

        Attributs

        Cet élément inclut uniquement les attributs universels.

        diff --git a/files/fr/web/html/element/summary/index.html b/files/fr/web/html/element/summary/index.html index 44a31a1c43..3097055b73 100644 --- a/files/fr/web/html/element/summary/index.html +++ b/files/fr/web/html/element/summary/index.html @@ -14,8 +14,6 @@ translation_of: Web/HTML/Element/summary
        {{EmbedInteractiveExample("pages/tabbed/summary.html","tabbed-shorter")}}
        - -

        Attributs

        Cet élément inclut uniquement les attributs universels.

        diff --git a/files/fr/web/html/element/sup/index.html b/files/fr/web/html/element/sup/index.html index bd0d2cee18..d91282a561 100644 --- a/files/fr/web/html/element/sup/index.html +++ b/files/fr/web/html/element/sup/index.html @@ -14,8 +14,6 @@ translation_of: Web/HTML/Element/sup
        {{EmbedInteractiveExample("pages/tabbed/sup.html", "tabbed-shorter")}}
        - -

        Attributs

        Cet élément inclut uniquement les attributs universels.

        diff --git a/files/fr/web/html/element/table/index.html b/files/fr/web/html/element/table/index.html index 472aac0dbf..a6fd16e72c 100644 --- a/files/fr/web/html/element/table/index.html +++ b/files/fr/web/html/element/table/index.html @@ -15,8 +15,6 @@ translation_of: Web/HTML/Element/table
        {{EmbedInteractiveExample("pages/tabbed/table.html","tabbed-standard")}}
        - -

        Attributs

        Cet élément inclut les attributs universels. Les attributs listés ci-après sont désormais tous dépréciés.

        @@ -33,7 +31,7 @@ translation_of: Web/HTML/Element/table  
      -
      Note :  +

      Note :

      • Cet attribut ne doit pas être utilisé car il a été déprécié : l'élément {{HTMLElement("table")}} devrait être stylisé en utilisant CSS. Pour obtenir un effet similaire à celui réalisé par l'attribut align, les propriétés CSS {{cssxref("text-align")}} et {{cssxref("vertical-align")}} devraient être utilisées.
      • @@ -41,93 +39,30 @@ translation_of: Web/HTML/Element/table
      -
      - -
      {{htmlattrdef("bgcolor")}} {{Deprecated_inline}}
      -
      Cet attribut définit la couleur d'arrière-plan de toutes les cellules. C'est un code à 6 chiffres hexadécimaux comme défini par le sRGB. Il est précédé d'un '#'. Un de ces seize mot-clé peut également être utilisé. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
       black = "#000000" green = "#008000"
       silver = "#C0C0C0" lime = "#00FF00"
       gray = "#808080" olive = "#808000"
       white = "#FFFFFF" yellow = "#FFFF00"
       maroon = "#800000" navy = "#000080"
       red = "#FF0000" blue = "#0000FF"
       purple = "#800080" teal = "#008080"
       fuchsia = "#FF00FF" aqua = "#00FFFF"
      - -
      Note d'utilisation : Il est fortement conseillé de ne pas utiliser cet attribut car celui-ci a été déprécié. La mise en forme d'un tableau doit se faire en utilisant CSS. Il est possible d'utiliser la propriété CSS {{cssxref("background-color")}} pour cet effet.
      +

      Cet attribut définit la couleur d'arrière-plan de toutes les cellules. C'est un code à 6 chiffres hexadécimaux comme défini par le sRGB. Il est précédé d'un '#'. Un des mots-clés préfédinis pour les couleurs peut également être utilisé.

      +
      +

      Note : Il est fortement conseillé de ne pas utiliser cet attribut car celui-ci a été déprécié. La mise en forme d'un tableau doit se faire en utilisant CSS. Il est possible d'utiliser la propriété CSS {{cssxref("background-color")}} pour cet effet.

      +
      -
      - -
      {{htmlattrdef("border")}} {{Deprecated_inline}}
      Cet attribut entier définit, en pixels, la taille de la bordure entourant le tableau. S'il vaut 0, cela implique que l'attribut {{htmlattrxref("frame", "table")}} est vide. -
      Note d'utilisation : Cet attribut ayant été déprécié, il ne doit pas être utilisé. La mise en forme d'un tableau doit s'effectuer en utilisant CSS. Les propriétés CSS {{cssxref("border")}}, {{cssxref("border-color")}}, {{cssxref("border-width")}} et {{cssxref("border-style")}} devraient être utilisées à la place.
      +

      Note :Cet attribut ayant été déprécié, il ne doit pas être utilisé. La mise en forme d'un tableau doit s'effectuer en utilisant CSS. Les propriétés CSS {{cssxref("border")}}, {{cssxref("border-color")}}, {{cssxref("border-width")}} et {{cssxref("border-style")}} devraient être utilisées à la place.

      -
      - -
      {{htmlattrdef("cellpadding")}} {{Deprecated_inline}}
      Cet attribut définit la taille de l'espace entre le contenu d'une cellule et sa bordure, qu'lle soit affichée ou non. Si cet attribut est exprimé en pixels, le décalage sera appliqué sur les quatre côtés. S'il est exprimé en pourcents, le contenu sera centré verticalement et la somme des espaces en haut et en bas représentera le pourcentage, il en va de même pour l'espace horizontal (droite et gauche). -
      Note d'utilisation : Cet attribut ayant été déprécié, il ne doit pas être utilisé. La mise en forme d'un tableau doit s'effectuer en utilisant CSS. Pour réaliser un effet similaire, la propriété {{cssxref("border-collapse")}} avec la valeur collapse doit être utilisée sur l'élément {{HTMLElement("table")}} et la propriété {{cssxref("padding")}} sur l'élément {{HTMLElement("td")}}.
      +

      Note : Cet attribut ayant été déprécié, il ne doit pas être utilisé. La mise en forme d'un tableau doit s'effectuer en utilisant CSS. Pour réaliser un effet similaire, la propriété {{cssxref("border-collapse")}} avec la valeur collapse doit être utilisée sur l'élément {{HTMLElement("table")}} et la propriété {{cssxref("padding")}} sur l'élément {{HTMLElement("td")}}.

      -
      - -
      {{htmlattrdef("cellspacing")}} {{Deprecated_inline}}
      Cet attribut définit la taille (en pourcents ou pixels) de l'espace (vertical et horizontal) entre deux cellules, entre la haut du tableau et les cellules de la première ligne, la gauche du tableau et les cellules de la première colonne, puis de la même manière pour le bas et le côté droit du tableau. -
      Note d'utilisation : Cet attribut ayant été déprécié, il ne doit pas être utilisé. La mise en forme d'un tableau doit s'effectuer en utilisant CSS. Pour réaliser un effet similaire, la propriété {{cssxref("border-collapse")}} avec la valeur collapse doit être utilisée sur l'élément {{HTMLElement("table")}} et la propriété {{cssxref("margin")}} sur l'élément {{HTMLElement("td")}}.
      +

      Note : Cet attribut ayant été déprécié, il ne doit pas être utilisé. La mise en forme d'un tableau doit s'effectuer en utilisant CSS. Pour réaliser un effet similaire, la propriété {{cssxref("border-collapse")}} avec la valeur collapse doit être utilisée sur l'élément {{HTMLElement("table")}} et la propriété {{cssxref("margin")}} sur l'élément {{HTMLElement("td")}}.

      {{htmlattrdef("frame")}} {{Deprecated_inline}}
      Cet attribut à valeurs multiples définit les côtés du tableau sur lesquels dessiner une bordure. Il peut prendre les valeurs suivantes : above, hsides, lhs, border, void, below, vsides, rhs, box. -
      Note d'utilisation : Cet attribut ayant été déprécié, il ne doit pas être utilisé. La mise en forme d'un tableau doit s'effectuer en utilisant CSS. Pour réaliser un effet similaire, les propriétés {{cssxref("border-style")}} et {{cssxref("border-width")}} doivent être utilisées.
      +

      Note : Cet attribut ayant été déprécié, il ne doit pas être utilisé. La mise en forme d'un tableau doit s'effectuer en utilisant CSS. Pour réaliser un effet similaire, les propriétés {{cssxref("border-style")}} et {{cssxref("border-width")}} doivent être utilisées.

      @@ -142,7 +77,7 @@ translation_of: Web/HTML/Element/table
    • all, tous les traits seront affichés (entre les lignes et entre les colonnes).
    -
    Note : +

    Note :

    • L'apparence de ces traits dépend du navigateur utilisé et ne peut être modifiée.
    • @@ -155,7 +90,7 @@ translation_of: Web/HTML/Element/table
      {{htmlattrdef("summary")}} {{Deprecated_inline}}
      Cet attribut définit un texte alternatif à utiliser afin de décrire le tableau. Un tel texte peut être utilisé par un agent utilisateur qui ne pourrait pas afficher le tableau. Il est généralement utilisé pour les personnes souffrant d'une déficience visuelle, comme par exemple les aveugles qui navigueront sur des pages web en utilisant un écran Braille. Si l'information contenue dans cet attribut serait également utile aux autres utilisateurs, il faudra plutôt utiliser l'élément {{HTMLElement("caption")}}. L'attribut summary n'est pas obligatoire et peut être omis lorsqu'un élément {{HTMLElement("caption")}} remplit ce rôle. -
      Note d'utilisation : Cet attribut ayant été déprécié, il ne doit pas être utilisé. Les façons suivantes peuvent être envisagées pour cette expression : +

      Note : Cet attribut ayant été déprécié, il ne doit pas être utilisé. Les façons suivantes peuvent être envisagées pour cette expression :

      • Grâce à un texte entourant le tableau, cette manière est la plus faible du point de vue de la sémantique
      • Grâce à l'élément {{HTMLElement("caption")}}
      • @@ -171,21 +106,19 @@ translation_of: Web/HTML/Element/table
        {{htmlattrdef("width")}} {{Deprecated_inline}}
        Cet attribut définit la largeur du tableau. Elle peut être exprimée en pixels ou en pourcent (représentant alors la fraction du conteneur que le tableau peut occuper). -
        Note d'utilisation : Cet attribut ayant été déprécié, il ne doit pas être utilisé. La propriété CSS {{cssxref("width")}} doit être utilisée à la place.
        +

        Note : Cet attribut ayant été déprécié, il ne doit pas être utilisé. La propriété CSS {{cssxref("width")}} doit être utilisée à la place.

        Exemples

        - -
        {{EmbedInteractiveExample("pages/tabbed/table.html")}}

        Tableau simple

        HTML

        -
        <table>
        +
        <table>
           <tr>
             <td>Jean</td>
             <td>Biche</td>
        @@ -374,10 +307,7 @@ translation_of: Web/HTML/Element/table
           
            Contenu autorisé
            
        -    
        -

        Dans cet ordre :

        -
        • Un élément facultatif {{HTMLElement("caption")}}
        • Zéro ou plusieurs éléments {{HTMLElement("colgroup")}}
        • @@ -390,8 +320,6 @@ translation_of: Web/HTML/Element/table
        • un élément {{HTMLElement("tfoot")}} optionnel
        -
        -
        diff --git a/files/fr/web/html/element/tbody/index.html b/files/fr/web/html/element/tbody/index.html index 91c7935b7b..cc5ebc205e 100644 --- a/files/fr/web/html/element/tbody/index.html +++ b/files/fr/web/html/element/tbody/index.html @@ -11,12 +11,10 @@ translation_of: Web/HTML/Element/tbody ---
        {{HTMLRef}}
        -

        L’élément HTML <tbody> permet de regrouper un ou plusieurs éléments {{HTMLElement("tr")}} afin de former le corps d'un tableau HTML ({{HTMLElement("table")}}).

        +

        L'élément HTML <tbody> permet de regrouper un ou plusieurs éléments {{HTMLElement("tr")}} afin de former le corps d'un tableau HTML ({{HTMLElement("table")}}).

        {{EmbedInteractiveExample("pages/tabbed/tbody.html","tabbed-taller")}}
        - -

        L'élément <tbody>, ainsi que les éléments {{HTMLElement("thead")}} et {{HTMLElement("tfoot")}}, fournit des informations sémantiques qui sont utilisées pour l'affichage à l'écran, l'impression et l'accessibilité.

        Attributs

        @@ -27,104 +25,48 @@ translation_of: Web/HTML/Element/tbody
        {{htmlattrdef("align")}} {{Deprecated_inline}} en {{HTMLVersionInline(4.01)}}, {{obsolete_inline}} en {{HTMLVersionInline(5)}}
        -
        Cet attribut à valeurs définit l’alignement horizontal pour le contenu de chaque cellule de la colonne. Les valeurs possibles sont : +

        Cet attribut à valeurs définit l'alignement horizontal pour le contenu de chaque cellule de la colonne. Les valeurs possibles sont :

          -
        • left : le contenu de la cellule est alligné à gauche de la cellule ;
        • -
        • center : le contenu de la cellule est centré horizontalement ;
        • -
        • right : le contenu de la cellule est aligné à droite de la cellule ;
        • -
        • justify : ajuste la largeur des espaces du contenu texte afin que le contenu de la cellule soit justifié ;
        • -
        • char : aligne le contenu texte de la cellule selon un caractère spécial avec un décalage minimum défini par les attributs {{htmlattrxref("char", "tbody")}} et {{htmlattrxref("charoff", "tbody")}} {{unimplemented_inline(2212)}}.
        • +
        • left : le contenu de la cellule est alligné à gauche de la cellule ;
        • +
        • center : le contenu de la cellule est centré horizontalement ;
        • +
        • right : le contenu de la cellule est aligné à droite de la cellule ;
        • +
        • justify : ajuste la largeur des espaces du contenu texte afin que le contenu de la cellule soit justifié ;
        • +
        • char : aligne le contenu texte de la cellule selon un caractère spécial avec un décalage minimum défini par les attributs {{htmlattrxref("char", "tbody")}} et {{htmlattrxref("charoff", "tbody")}} {{unimplemented_inline(2212)}}.
        -

        Si cet attribut n’est pas renseigné, la valeur left est prise par défaut.

        +

        Si cet attribut n'est pas renseigné, la valeur left est prise par défaut.

        -
        Notes :cet attribut est devenu obsolète dans le dernier standard. +
        +

        Note :cet attribut est devenu obsolète dans le dernier standard.

          -
        • Pour réaliser le même effet qu’avec les valeurs left, center, right ou justify, utilisez la propriété CSS {{cssxref("text-align")}} sur cet élément.
        • -
        • Pour réaliser le même effet qu’avec char, vous pouvez, en CSS3, utiliser la valeur de {{htmlattrxref("char", "tbody")}} comme valeur pour la propriété {{cssxref("text-align")}} {{unimplemented_inline}}.
        • +
        • Pour réaliser le même effet qu'avec les valeurs left, center, right ou justify, utilisez la propriété CSS {{cssxref("text-align")}} sur cet élément.
        • +
        • Pour réaliser le même effet qu'avec char, vous pouvez, en CSS3, utiliser la valeur de {{htmlattrxref("char", "tbody")}} comme valeur pour la propriété {{cssxref("text-align")}} {{unimplemented_inline}}.
        {{htmlattrdef("bgcolor")}} {{Non-standard_inline}}
        -
        Cet attribut définit la couleur d’arrière-plan de toutes les cellules. C’est un code hexadécimal à 6 chiffres comme défini par le sRGB. Il est précédé d’un #. Un de ces seize mots-clés peut également être utilisé. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
         black = "#000000" green = "#008000"
         silver = "#C0C0C0" lime = "#00FF00"
         gray = "#808080" olive = "#808000"
         white = "#FFFFFF" yellow = "#FFFF00"
         maroon = "#800000" navy = "#000080"
         red = "#FF0000" blue = "#0000FF"
         purple = "#800080" teal = "#008080"
         fuchsia = "#FF00FF" aqua = "#00FFFF"
        - -
        Note d’utilisation : il est fortement conseillé de ne pas utiliser cet attribut car il n’est pas standard et n’a été implémenté que sous certaines versions d’Internet Explorer. L’élément {{HTMLElement("tbody")}} doit être mis en forme grâce aux propriétés CSS. Pour fournir un effet semblable à celui produit par l’attribut bgcolor, il est possible d’utiliser la propriété CSS {{cssxref("background-color")}} sur les éléments {{HTMLElement("td")}} ou {{HTMLElement("th")}} souhaités.
        +

        Cet attribut définit la couleur d'arrière-plan de toutes les cellules. C'est un code hexadécimal à 6 chiffres comme défini par le sRGB. Il est précédé d'un #. Un des mots-clés préfédinis pour les couleurs peut également être utilisé.

        +

        Note : il est fortement conseillé de ne pas utiliser cet attribut car il n'est pas standard et n'a été implémenté que sous certaines versions d'Internet Explorer. L'élément {{HTMLElement("tbody")}} doit être mis en forme grâce aux propriétés CSS. Pour fournir un effet semblable à celui produit par l'attribut bgcolor, il est possible d'utiliser la propriété CSS {{cssxref("background-color")}} sur les éléments {{HTMLElement("td")}} ou {{HTMLElement("th")}} souhaités.

        {{htmlattrdef("char")}} {{Deprecated_inline}} en {{HTMLVersionInline(4.01)}}, {{obsolete_inline}} en {{HTMLVersionInline(5)}}
        -
        Cet attribut est utilisé pour définir le caractère sur lequel aligner les cellules d’une colonne. Les valeurs de cet attribut contiennent généralement un point (.) pour aligner des nombres ou des valeurs monétaires. Si l’attribut {{htmlattrxref("align", "tbody")}} ne vaut pas char, l’attribut est ignoré.
        -
        -
        Note d’utilisation : cet attribut est obsolète et son utilisation est donc fortement déconseillé. De fait, il n’est pas pris en charge par la dernière recommandation. Pour réaliser le même effet qu’avec {{htmlattrxref("char", "tbody")}}, en utilisant CSS3 en attribuant la même valeur à la propriété {{cssxref("text-align")}}.{{unimplemented_inline}}.
        +

        Cet attribut est utilisé pour définir le caractère sur lequel aligner les cellules d'une colonne. Les valeurs de cet attribut contiennent généralement un point (.) pour aligner des nombres ou des valeurs monétaires. Si l'attribut {{htmlattrxref("align", "tbody")}} ne vaut pas char, l'attribut est ignoré.

        +

        Note : cet attribut est obsolète et son utilisation est donc fortement déconseillé. De fait, il n'est pas pris en charge par la dernière recommandation. Pour réaliser le même effet qu'avec {{htmlattrxref("char", "tbody")}}, en utilisant CSS3 en attribuant la même valeur à la propriété {{cssxref("text-align")}}.{{unimplemented_inline}}.

        -
        - -
        {{htmlattrdef("charoff")}} {{Deprecated_inline}} en {{HTMLVersionInline(4.01)}}, {{obsolete_inline}} en {{HTMLVersionInline(5)}}
        -
        Cet attribut est utilisé pour indiquer le décalage, en nombre de caractères, depuis le caractère définit par l’attribut char à appliquer au contenu des cellules. -
        Note d’utilisation: Cet attribut ne doit plus être utilisé car il est maintenant obsolète et n’est plus supporté dans le dernier standard.
        +

        Cet attribut est utilisé pour indiquer le décalage, en nombre de caractères, depuis le caractère définit par l'attribut char à appliquer au contenu des cellules.

        +

        Note : Cet attribut ne doit plus être utilisé car il est maintenant obsolète et n'est plus supporté dans le dernier standard.

        {{htmlattrdef("valign")}} {{Deprecated_inline}} en {{HTMLVersionInline(4.01)}}, {{obsolete_inline}} en {{HTMLVersionInline(5)}}
        -
        Cet attribut définit l’alignement vertical du texte des cellules de la colonne. Les valeurs possibles de cet attribut sont : +

        Cet attribut définit l'alignement vertical du texte des cellules de la colonne. Les valeurs possibles de cet attribut sont :

          -
        • baseline qui alignera le texte sur la ligne la plus basse possible en utilisant la ligne de base des caractères. Si les caractères ont tous la même taille, cela aura le même effet que la valeur bottom ;
        • -
        • bottom qui placera le texte au plus bas de la cellule ;
        • -
        • middle qui centrera verticalement le texte dans la cellule ;
        • +
        • baseline qui alignera le texte sur la ligne la plus basse possible en utilisant la ligne de base des caractères. Si les caractères ont tous la même taille, cela aura le même effet que la valeur bottom ;
        • +
        • bottom qui placera le texte au plus bas de la cellule ;
        • +
        • middle qui centrera verticalement le texte dans la cellule ;
        • top qui placera le texte au plus haut de la cellule.
        -
        Note d’utilisation : cet attribut étant maintenant obsolète (et n’étant plus pris en charge), il est fortement déconseillé de l’utiliser. La propriété CSS {{cssxref("vertical-align")}} doit être utilisée à la place.
        +

        Note : cet attribut étant maintenant obsolète (et n'étant plus pris en charge), il est fortement déconseillé de l'utiliser. La propriété CSS {{cssxref("vertical-align")}} doit être utilisée à la place.

        @@ -222,12 +164,12 @@ translation_of: Web/HTML/Element/tbody {{SpecName('HTML WHATWG','tables.html#the-tbody-element','tbody element')}} {{Spec2('HTML WHATWG')}} -   + {{SpecName('HTML5 W3C','tabular-data.html#the-tbody-element','tbody element')}} {{Spec2('HTML5 W3C')}} -   + diff --git a/files/fr/web/html/element/td/index.html b/files/fr/web/html/element/td/index.html index 30ba4fcd53..35df89f043 100644 --- a/files/fr/web/html/element/td/index.html +++ b/files/fr/web/html/element/td/index.html @@ -15,8 +15,6 @@ translation_of: Web/HTML/Element/td
        {{EmbedInteractiveExample("pages/tabbed/td.html","tabbed-taller")}}
        - -

        Attributs

        Cet élément inclut les attributs universels.

        @@ -24,7 +22,7 @@ translation_of: Web/HTML/Element/td
        {{htmlattrdef("colspan")}}
        Cet attribut contient un entier positif indiquant le nombre de colonnes sur lesquelles s'étend la cellule. La valeur par défaut est 1, si la valeur est 0, la cellule s'étend jusqu'à la fin du  {{HTMLElement("colgroup")}} auquel appartient la cellule, même si celui-ci est défini implicitement. Des valeurs supérieures à 1000 peuvent être considérées comme incorrectes et seront interprétées comme valant la valeur par défaut (1). -
        Note : En {{HTMLVersionInline(5)}} cet attribut ne peut valoir qu'un nombre strictement positif car il ne doit pas être utilisé pour faire chevaucher des cellules. Par ailleurs, Firefox est le seul navigateur supportant la valeur 0 définie par la spécification {{HTMLVersionInline(4.01)}}.
        +

        Note : En {{HTMLVersionInline(5)}} cet attribut ne peut valoir qu'un nombre strictement positif car il ne doit pas être utilisé pour faire chevaucher des cellules. Par ailleurs, Firefox est le seul navigateur supportant la valeur 0 définie par la spécification {{HTMLVersionInline(4.01)}}.

        {{htmlattrdef("headers")}}
        Cet attribut est une liste de chaînes de caractères séparées par des espace. Chacune correspond à l'attribut id de l'élément {{HTMLElement("th")}} qui s'applique à la cellule courante.
        @@ -36,11 +34,11 @@ translation_of: Web/HTML/Element/td
        {{htmlattrdef("abbr")}} {{obsolete_inline("html5")}}
        -
        Cet attribut contient une description courte et abrégée du contenu de la cellule. Certains outils utilisateurs, comme la synthèse vocale, peuvent décrire cette information avant le contenu lui-même. -
        Note : Cet attribut est obsolète dans le dernier standard et ne doit donc plus être utilisé. Il faut dans ces cas introduire la description au sein de la cellule comme un élément {{HTMLElement("abbr")}} indépendant ou utiliser l'attribut title de la cellule pour représenter le contenu et la cellule elle-même pour représenter le contenu abrégé.
        +

        Cet attribut contient une description courte et abrégée du contenu de la cellule. Certains outils utilisateurs, comme la synthèse vocale, peuvent décrire cette information avant le contenu lui-même.

        +

        Note : Cet attribut est obsolète dans le dernier standard et ne doit donc plus être utilisé. Il faut dans ces cas introduire la description au sein de la cellule comme un élément {{HTMLElement("abbr")}} indépendant ou utiliser l'attribut title de la cellule pour représenter le contenu et la cellule elle-même pour représenter le contenu abrégé.

        {{htmlattrdef("align")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}
        -
        Cet attribut à valeurs définit l'alignement horizontal pour le contenu de chaque cellule de la colonne. Les valeurs possibles sont : +

        Cet attribut à valeurs définit l'alignement horizontal pour le contenu de chaque cellule de la colonne. Les valeurs possibles sont :

        • left : le contenu de la cellule est alligné à gauche de la cellule
        • center : le contenu de la cellule est centré horizontalement
        • @@ -51,7 +49,7 @@ translation_of: Web/HTML/Element/td

          Si cet attribut n'est pas renseigné, la valeur left est prise par défaut.

          -
          Notes : Cet attribut est devenu obsolète dans le dernier standard et ne doit donc plus être utilisé. +

          Note : Cet attribut est devenu obsolète dans le dernier standard et ne doit donc plus être utilisé.

          • Pour réaliser les mêmes effets que les valeurs left, center, right ou justify, il faut utiliser la propriété CSS {{cssxref("text-align")}} sur l'élément
          • @@ -59,16 +57,12 @@ translation_of: Web/HTML/Element/td
        -
        - -
        {{htmlattrdef("axis")}} {{obsolete_inline("html5")}}
        -
        Cet attribut contient une liste de chaîne de caractères (séparées par des espaces). Chaque chaîne de caractère est l'identifiant d'un groupe de cellule auquel cet en-tête s'applique.
        -
        -
        Note : Cet attribut est obsolète dans le dernier standard et ne doit donc plus être utilisé. L'attribut {{htmlattrxref("scope", "td")}} doit être utilisé pour le remplacer.
        +

        Cet attribut contient une liste de chaîne de caractères (séparées par des espaces). Chaque chaîne de caractère est l'identifiant d'un groupe de cellule auquel cet en-tête s'applique.

        +

        Note : Cet attribut est obsolète dans le dernier standard et ne doit donc plus être utilisé. L'attribut {{htmlattrxref("scope", "td")}} doit être utilisé pour le remplacer.

        {{htmlattrdef("bgcolor")}} {{Non-standard_inline}}
        -
        Cet attribut définit la couleur d'arrière-plan de toutes les cellules de la colonne. C'est un code à 6 chiffres hexadécimaux comme défini par le sRGB. Il est précédé d'un '#'. Un de ces seize mot-clé peut également être utilisé. +

        Cet attribut définit la couleur d'arrière-plan de toutes les cellules de la colonne. C'est un code à 6 chiffres hexadécimaux comme défini par le sRGB. Il est précédé d'un '#'. Un de ces seize mot-clé peut également être utilisé.

        @@ -124,22 +118,18 @@ translation_of: Web/HTML/Element/td
        -
        Note d'utilisation : Il est fortement conseillé de ne pas utiliser cet attribut car celui-ci n'est pas un attribut standard et n'a été implémentée que sous certaines versions d'Internet Explorer. L'élément {{HTMLElement("td")}} doit être mis en forme grâce au CSS. Pour fournir un effet semblable à celui achevé par l'attribut bgcolor, il est possible d'utiliser la propriété CSS {{cssxref("background-color")}}.
        +

        Note : Il est fortement conseillé de ne pas utiliser cet attribut car celui-ci n'est pas un attribut standard et n'a été implémentée que sous certaines versions d'Internet Explorer. L'élément {{HTMLElement("td")}} doit être mis en forme grâce au CSS. Pour fournir un effet semblable à celui achevé par l'attribut bgcolor, il est possible d'utiliser la propriété CSS {{cssxref("background-color")}}.

        -
        - -
        {{htmlattrdef("char")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}
        -
        Cet attribut est utilisé pour définir le caractère sur lequel aligner les cellules d'une colonne. Les valeurs de cet attribut contiennent généralement un point (.) pour aligner des nombres ou des valeurs monétaires. Si l'attribut {{htmlattrxref("align", "td")}} ne vaut pas char, l'attribut est ignoré.
        -
        -
        Note d'utilisation : Cet attribut est obsolète et il est donc fortement déconseillé de l'utiliser. De fait, il n'est pas supporté par le dernier standard. Pour réaliser le même effet qu'avec {{htmlattrxref("char", "td")}}, il faut utiliser CSS3 en attribuant la même valeur à la propriété {{cssxref("text-align")}}.{{unimplemented_inline}}.
        +

        Cet attribut est utilisé pour définir le caractère sur lequel aligner les cellules d'une colonne. Les valeurs de cet attribut contiennent généralement un point (.) pour aligner des nombres ou des valeurs monétaires. Si l'attribut {{htmlattrxref("align", "td")}} ne vaut pas char, l'attribut est ignoré.

        +

        Note : Cet attribut est obsolète et il est donc fortement déconseillé de l'utiliser. De fait, il n'est pas supporté par le dernier standard. Pour réaliser le même effet qu'avec {{htmlattrxref("char", "td")}}, il faut utiliser CSS3 en attribuant la même valeur à la propriété {{cssxref("text-align")}}.{{unimplemented_inline}}.

        {{htmlattrdef("charoff")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}
        -
        Cet attribut est utilisé pour indiquer le décalage, en nombre de caractères, depuis le caractère définit par l'attribut char à appliquer au contenu des cellules. -
        Note d'utilisation : Cet attribut ne doit plus être utilisé car il est maintenant obsolète et n'est plus supporté dans le dernier standard.
        +

        Cet attribut est utilisé pour indiquer le décalage, en nombre de caractères, depuis le caractère définit par l'attribut char à appliquer au contenu des cellules.

        +

        Note : Cet attribut ne doit plus être utilisé car il est maintenant obsolète et n'est plus supporté dans le dernier standard.

        {{htmlattrdef("valign")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}
        -
        Cet attribut définit l'alignement vertical du texte des cellules de la colonne. Les valeurs possibles de cet attribut sont : +

        Cet attribut définit l'alignement vertical du texte des cellules de la colonne. Les valeurs possibles de cet attribut sont :

        • baseline qui alignera le texte à la ligne la plus basse possible en utilisant la ligne de base des caractères. Si les caractères ont tous la même taille, cela aura le même effet que la valeur bottom.
        • bottom qui placera le texte au plus bas de la cellule
        • @@ -147,11 +137,11 @@ translation_of: Web/HTML/Element/td
        • top qui placera le texte au plus haut de la cellule.
        -
        Note : Cet attribut est obsolète dans le dernier standard, la propriété CSS {{cssxref("vertical-align")}} doit être utilisée à la place.
        +

        Note : Cet attribut est obsolète dans le dernier standard, la propriété CSS {{cssxref("vertical-align")}} doit être utilisée à la place.

        {{htmlattrdef("width")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}
        -
        Cet attribut est utilisé afin de définir la largeur recommandée pour une cellule. Les propriétés cellspacing et cellpadding peuvent être utilisées pour ajouter un espace supplémentaire et la largeur de l'élément {{HTMLElement("col")}} peut avoir un effet. En général, si la largeur d'une colonne est trop étroite pour afficher une cellule correctement, elle sera élargie lors de l'affichage. -
        Note : Cet attribut est obsolète dans le dernier standard, la propriété CSS {{cssxref("width")}} doit être utilisée à la place.
        +

        Cet attribut est utilisé afin de définir la largeur recommandée pour une cellule. Les propriétés cellspacing et cellpadding peuvent être utilisées pour ajouter un espace supplémentaire et la largeur de l'élément {{HTMLElement("col")}} peut avoir un effet. En général, si la largeur d'une colonne est trop étroite pour afficher une cellule correctement, elle sera élargie lors de l'affichage.

        +

        Note : Cet attribut est obsolète dans le dernier standard, la propriété CSS {{cssxref("width")}} doit être utilisée à la place.

        diff --git a/files/fr/web/html/element/template/index.html b/files/fr/web/html/element/template/index.html index c9fb9daf78..de36c2e5ef 100644 --- a/files/fr/web/html/element/template/index.html +++ b/files/fr/web/html/element/template/index.html @@ -84,14 +84,12 @@ if ("content" in document.createElement("template")) {

        Le résultat correspond au tableau HTML original avec deux lignes supplémentaires qui ont été ajoutées grâce au code JavaScript :

        -

        {{EmbedLiveSample("Exemples", 500, 120)}}

        diff --git a/files/fr/web/html/element/textarea/index.html b/files/fr/web/html/element/textarea/index.html index aefe4f44f3..21de08f3c6 100644 --- a/files/fr/web/html/element/textarea/index.html +++ b/files/fr/web/html/element/textarea/index.html @@ -15,8 +15,6 @@ translation_of: Web/HTML/Element/textarea
        {{EmbedInteractiveExample("pages/tabbed/textarea.html", "tabbed-standard")}}
        - -

        Dans les exemples ci-avant, on peut voir plusieurs fonctionnalités de <textarea>. Le premier exemple illustre l'utilisation la plus simple avec seul un attribut id qui permet d'associer l'élément <textarea> avec un élément {{HTMLElement("label")}} à des fins d'accessibilité ainsi qu'un attribut name qui permet de nommer la donnée qui sera envoyée au serveur lors de l'envoi du formulaire.

        Le deuxième exemple détaille des fonctionnalités plus complexes :

        diff --git a/files/fr/web/html/element/tfoot/index.html b/files/fr/web/html/element/tfoot/index.html index 242c70de62..57d1c73ebe 100644 --- a/files/fr/web/html/element/tfoot/index.html +++ b/files/fr/web/html/element/tfoot/index.html @@ -11,12 +11,10 @@ translation_of: Web/HTML/Element/tfoot ---
        {{HTMLRef}}
        -

        L'élément HTML <tfoot> permet de définir un ensemble de lignes qui résument les colonnes d'un tableau.

        +

        L'élément HTML <tfoot> permet de définir un ensemble de lignes qui résument les colonnes d'un tableau.

        {{EmbedInteractiveExample("pages/tabbed/tfoot.html","tabbed-taller")}}
        - -

        Attributs

        Cet élément inclut les attributs universels.

        @@ -36,7 +34,7 @@ translation_of: Web/HTML/Element/tfoot

        Si cet attribut n'est pas renseigné, la valeur left est prise par défaut.

        -
        Notes : Cet attribut est devenu obsolète dans le dernier standard. +

        Note : Cet attribut est devenu obsolète dans le dernier standard.

        • Pour réaliser le même effet qu'avec les valeurs left, center, right ou justify, utilisez la propriété CSS {{cssxref("text-align")}} sur cet élément.
        • @@ -44,9 +42,6 @@ translation_of: Web/HTML/Element/tfoot
      -
      - -
      {{htmlattrdef("bgcolor")}} {{Non-standard_inline}}
      Cet attribut définit la couleur d'arrière-plan de toutes les cellules. C'est un code à 6 chiffres hexadécimaux comme défini par le sRGB. Il est précédé d'un '#'. Un de ces seize mot-clé peut également être utilisé. @@ -86,28 +81,18 @@ translation_of: Web/HTML/Element/tfoot
      -
      Note d'utilisation : Il est fortement conseillé de ne pas utiliser cet attribut car celui-ci n'est pas un attribut standard et n'a été implémentée que sous certaines versions d'Internet Explorer. L'élément {{HTMLElement("tfoot")}} doit être mis en forme grâce au CSS. Pour fournir un effet semblable à celui achevé par l'attribut bgcolor, il est possible d'utiliser la propriété CSS {{cssxref("background-color")}} sur les éléments  {{HTMLElement("td")}} ou {{HTMLElement("th")}} souhaités.
      +

      Note : Il est fortement conseillé de ne pas utiliser cet attribut car celui-ci n'est pas un attribut standard et n'a été implémentée que sous certaines versions d'Internet Explorer. L'élément {{HTMLElement("tfoot")}} doit être mis en forme grâce au CSS. Pour fournir un effet semblable à celui achevé par l'attribut bgcolor, il est possible d'utiliser la propriété CSS {{cssxref("background-color")}} sur les éléments  {{HTMLElement("td")}} ou {{HTMLElement("th")}} souhaités.

      -
      - -
      {{htmlattrdef("char")}} {{Deprecated_inline}} en {{HTMLVersionInline("4")}}, {{obsolete_inline}} en {{HTMLVersionInline("5")}}
      -
      Cet attribut est utilisé pour définir le caractère sur lequel aligner les cellules d'une colonne. Les valeurs de cet attribut contiennent généralement un point (.) pour aligner des nombres ou des valeurs monétaires. Si l'attribut {{htmlattrxref("align", "tfoot")}} ne vaut pas char, l'attribut est ignoré.
      -
      -
      Note d'utilisation : Cet attribut est obsolète et il est donc fortement déconseillé de l'utiliser. De fait, il n'est pas supporté par le dernier standard. Pour réaliser le même effet qu'avec {{htmlattrxref("char", "tfoot")}}, on peut utiliser CSS3 en attribuant la même valeur à la propriété {{cssxref("text-align")}}.{{unimplemented_inline}}.
      +

      Cet attribut est utilisé pour définir le caractère sur lequel aligner les cellules d'une colonne. Les valeurs de cet attribut contiennent généralement un point (.) pour aligner des nombres ou des valeurs monétaires. Si l'attribut {{htmlattrxref("align", "tfoot")}} ne vaut pas char, l'attribut est ignoré.

      +

      Note : Cet attribut est obsolète et il est donc fortement déconseillé de l'utiliser. De fait, il n'est pas supporté par le dernier standard. Pour réaliser le même effet qu'avec {{htmlattrxref("char", "tfoot")}}, on peut utiliser CSS3 en attribuant la même valeur à la propriété {{cssxref("text-align")}}.{{unimplemented_inline}}.

      -
      - -
      {{htmlattrdef("charoff")}} {{Deprecated_inline}} en {{HTMLVersionInline("4")}}, {{obsolete_inline}} en {{HTMLVersionInline("5")}}
      -
      Cet attribut est utilisé pour indiquer le décalage, en nombre de caractères, depuis le caractère définit par l'attribut char à appliquer au contenu des cellules. -
      Note d'utilisation: Cet attribut ne doit plus être utilisé car il est maintenant obsolète et n'est plus supporté dans le dernier standard.
      +

      Cet attribut est utilisé pour indiquer le décalage, en nombre de caractères, depuis le caractère définit par l'attribut char à appliquer au contenu des cellules.

      +

      Note : Cet attribut ne doit plus être utilisé car il est maintenant obsolète et n'est plus supporté dans le dernier standard.

      -
      - -
      {{htmlattrdef("valign")}} {{Deprecated_inline}} en {{HTMLVersionInline("4")}}, {{obsolete_inline}} en {{HTMLVersionInline("5")}}
      -
      Cet attribut définit l'alignement vertical du texte des cellules de la colonne. Les valeurs possibles de cet attribut sont : +

      Cet attribut définit l'alignement vertical du texte des cellules de la colonne. Les valeurs possibles de cet attribut sont :

      • baseline qui alignera le texte à la ligne la plus basse possible en utilisant la ligne de base des caractères. Si les caractères ont tous la même taille, cela aura le même effet que la valeur bottom.
      • bottom qui placera le texte au plus bas de la cellule
      • @@ -115,7 +100,7 @@ translation_of: Web/HTML/Element/tfoot
      • top qui placera le texte au plus haut de la cellule.
      -
      Note d'utilisation : Cet attribut étant maintenant obsolète (et n'étant plus supporté), il est fortement déconseillé de l'utiliser. La propriété CSS {{cssxref("vertical-align")}} doit être utilisée à la place.
      +

      Note : Cet attribut étant maintenant obsolète (et n'étant plus supporté), il est fortement déconseillé de l'utiliser. La propriété CSS {{cssxref("vertical-align")}} doit être utilisée à la place.

      diff --git a/files/fr/web/html/element/th/index.html b/files/fr/web/html/element/th/index.html index 5327b416b5..daa21a6309 100644 --- a/files/fr/web/html/element/th/index.html +++ b/files/fr/web/html/element/th/index.html @@ -15,8 +15,6 @@ translation_of: Web/HTML/Element/th
      {{EmbedInteractiveExample("pages/tabbed/th.html","tabbed-taller")}}
      - -

      Attributs

      Cet élément inclut les attributs universels.

      @@ -57,7 +55,8 @@ translation_of: Web/HTML/Element/th

      Si cet attribut n'est pas renseigné, la valeur left est prise par défaut.

      -
      Notes : Cet attribut est devenu obsolète dans le dernier standard et ne doit donc plus être utilisé. +
      +

      Note : Cet attribut est devenu obsolète dans le dernier standard et ne doit donc plus être utilisé.

      • Pour réaliser les mêmes effets que les valeurs left, center, right ou justify, il faut utiliser la propriété CSS {{cssxref("text-align")}} sur l'élément
      • @@ -65,91 +64,22 @@ translation_of: Web/HTML/Element/th
    -
    - -
    {{htmlattrdef("axis")}} {{obsolete_inline}} en {{HTMLVersionInline("5")}}
    -
    Cet attribut contient une liste de chaîne de caractères (séparées par des espaces). Chaque chaîne de caractère est l'identifiant d'un groupe de cellule auquel cet en-tête s'applique.
    -
    -
    Note : Cet attribut est obsolète dans le dernier standard et ne doit donc plus être utilisé. L'attribut {{htmlattrxref("scope", "td")}} doit être utilisé pour le remplacer.
    +

    Cet attribut contient une liste de chaîne de caractères (séparées par des espaces). Chaque chaîne de caractère est l'identifiant d'un groupe de cellule auquel cet en-tête s'applique.

    +

    Note : Cet attribut est obsolète dans le dernier standard et ne doit donc plus être utilisé. L'attribut {{htmlattrxref("scope", "td")}} doit être utilisé pour le remplacer.

    {{htmlattrdef("bgcolor")}} {{Non-standard_inline}}
    -
    Cet attribut définit la couleur d'arrière-plan de toutes les cellules de la colonne. C'est un code à 6 chiffres hexadécimaux comme défini par le sRGB. Il est précédé d'un '#'. Un de ces seize mot-clé peut également être utilisé. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
     black = "#000000" green = "#008000"
     silver = "#C0C0C0" lime = "#00FF00"
     gray = "#808080" olive = "#808000"
     white = "#FFFFFF" yellow = "#FFFF00"
     maroon = "#800000" navy = "#000080"
     red = "#FF0000" blue = "#0000FF"
     purple = "#800080" teal = "#008080"
     fuchsia = "#FF00FF"  -

    aqua = "#00FFFF"

    -
    - -
    Note d'utilisation : Il est fortement conseillé de ne pas utiliser cet attribut car celui-ci n'est pas un attribut standard et n'a été implémentée que sous certaines versions d'Internet Explorer. L'élément {{HTMLElement("th")}} doit être mis en forme grâce au CSS. Pour fournir un effet semblable à celui achevé par l'attribut bgcolor, il est possible d'utiliser la propriété CSS {{cssxref("background-color")}}.
    +

    Cet attribut définit la couleur d'arrière-plan de toutes les cellules de la colonne. C'est un code à 6 chiffres hexadécimaux comme défini par le sRGB. Il est précédé d'un '#'. Un des mots-clés préfédinis pour les couleurs peut également être utilisé.

    +

    Note : Il est fortement conseillé de ne pas utiliser cet attribut car celui-ci n'est pas un attribut standard et n'a été implémentée que sous certaines versions d'Internet Explorer. L'élément {{HTMLElement("th")}} doit être mis en forme grâce au CSS. Pour fournir un effet semblable à celui achevé par l'attribut bgcolor, il est possible d'utiliser la propriété CSS {{cssxref("background-color")}}.

    -
    - -
    {{htmlattrdef("char")}} {{obsolete_inline}} {{HTMLVersionInline("5")}}
    -
    Cet attribut est utilisé pour définir le caractère sur lequel aligner les cellules d'une colonne. Les valeurs de cet attribut contiennent généralement un point (.) pour aligner des nombres ou des valeurs monétaires. Si l'attribut {{htmlattrxref("align", "th")}} ne vaut pas char, l'attribut est ignoré.
    -
    -
    Note d'utilisation : Cet attribut est obsolète et il est donc fortement déconseillé de l'utiliser. De fait, il n'est pas supporté par le dernier standard. Pour réaliser le même effet qu'avec {{htmlattrxref("char", "th")}}, on peut utiliser CSS3 en attribuant la même valeur à la propriété {{cssxref("text-align")}}.{{unimplemented_inline}}.
    +

    Cet attribut est utilisé pour définir le caractère sur lequel aligner les cellules d'une colonne. Les valeurs de cet attribut contiennent généralement un point (.) pour aligner des nombres ou des valeurs monétaires. Si l'attribut {{htmlattrxref("align", "th")}} ne vaut pas char, l'attribut est ignoré.

    +

    Note : Cet attribut est obsolète et il est donc fortement déconseillé de l'utiliser. De fait, il n'est pas supporté par le dernier standard. Pour réaliser le même effet qu'avec {{htmlattrxref("char", "th")}}, on peut utiliser CSS3 en attribuant la même valeur à la propriété {{cssxref("text-align")}}.{{unimplemented_inline}}.

    -
    - -
    {{htmlattrdef("charoff")}} {{obsolete_inline}} {{HTMLVersionInline("5")}}
    -
    Cet attribut est utilisé pour indiquer le décalage, en nombre de caractères, depuis le caractère définit par l'attribut char à appliquer au contenu des cellules. -
    Note d'utilisation: Cet attribut ne doit plus être utilisé car il est maintenant obsolète et n'est plus supporté dans le dernier standard.
    +

    Cet attribut est utilisé pour indiquer le décalage, en nombre de caractères, depuis le caractère définit par l'attribut char à appliquer au contenu des cellules.

    +

    Note : Cet attribut ne doit plus être utilisé car il est maintenant obsolète et n'est plus supporté dans le dernier standard.

    -
    - -
    {{htmlattrdef("valign")}} {{Deprecated_inline}} en {{HTMLVersionInline("4")}}, {{obsolete_inline}} en {{HTMLVersionInline("5")}}
    Cet attribut définit l'alignement vertical du texte des cellules de la colonne. Les valeurs possibles de cet attribut sont :
      @@ -159,7 +89,7 @@ translation_of: Web/HTML/Element/th
    • top qui placera le texte au plus haut de la cellule.
    -
    Note: Cet attribut est obsolète dans le dernier standard, la propriété CSS {{cssxref("vertical-align")}} doit être utilisée à la place.
    +

    Note : Cet attribut est obsolète dans le dernier standard, la propriété CSS {{cssxref("vertical-align")}} doit être utilisée à la place.

    @@ -204,7 +134,7 @@ translation_of: Web/HTML/Element/th Contenu autorisé
    -
    Contenu de flux sans titre, pied de page, contenu sectionnant ou descendants d'un élément de titre.
    +
    Contenu de flux sans titre, pied de page, contenu sectionnant ou descendants d'un élément de titre.
    diff --git a/files/fr/web/html/element/thead/index.html b/files/fr/web/html/element/thead/index.html index 760260e65d..fc81dbd4b4 100644 --- a/files/fr/web/html/element/thead/index.html +++ b/files/fr/web/html/element/thead/index.html @@ -15,8 +15,6 @@ translation_of: Web/HTML/Element/thead
    {{EmbedInteractiveExample("pages/tabbed/thead.html","tabbed-taller")}}
    - -

    Attributs

    Comme tous les autres éléments HTML, cet élément inclut les attributs universels.

    @@ -25,7 +23,7 @@ translation_of: Web/HTML/Element/thead
    {{htmlattrdef("align")}} {{Deprecated_inline}} en {{HTMLVersionInline("4")}}, {{obsolete_inline}} en {{HTMLVersionInline("5")}}
    -
    Cet attribut à valeurs définit l'alignement horizontal pour le contenu de chaque cellule. Les valeurs possibles sont : +

    Cet attribut à valeurs définit l'alignement horizontal pour le contenu de chaque cellule. Les valeurs possibles sont :

    • left : le contenu de la cellule est alligné à gauche de la cellule
    • center : le contenu de la cellule est centré horizontalement
    • @@ -36,7 +34,7 @@ translation_of: Web/HTML/Element/thead

      Si cet attribut n'est pas renseigné, la valeur left est prise par défaut.

      -
      Notes : Cet attribut est devenu obsolète dans le dernier standard. +

      Note : Cet attribut est devenu obsolète dans le dernier standard.

      • Pour réaliser le même effet qu'avec les valeurs left, center, right ou justify, utilisez la propriété CSS {{cssxref("text-align")}} sur cet élément.
      • @@ -44,86 +42,20 @@ translation_of: Web/HTML/Element/thead
    -
    - -
    {{htmlattrdef("bgcolor")}} {{Non-standard_inline}}
    -
    Cet attribut définit la couleur d'arrière-plan de toutes les cellules. C'est un code à 6 chiffres hexadécimaux comme défini par le sRGB. Il est précédé d'un '#'. Un de ces seize mot-clé peut également être utilisé. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
     black = "#000000" green = "#008000"
     silver = "#C0C0C0" lime = "#00FF00"
     gray = "#808080" olive = "#808000"
     white = "#FFFFFF" yellow = "#FFFF00"
     maroon = "#800000" navy = "#000080"
     red = "#FF0000" blue = "#0000FF"
     purple = "#800080" teal = "#008080"
     fuchsia = "#FF00FF" aqua = "#00FFFF"
    - -
    Note d'utilisation : Il est fortement conseillé de ne pas utiliser cet attribut car celui-ci n'est pas un attribut standard et n'a été implémentée que sous certaines versions d'Internet Explorer. L'élément {{HTMLElement("thead")}} doit être mis en forme grâce au CSS. Pour fournir un effet semblable à celui achevé par l'attribut bgcolor, il est possible d'utiliser la propriété CSS {{cssxref("background-color")}} sur les éléments  {{HTMLElement("td")}} ou {{HTMLElement("th")}} souhaités.
    +

    Cet attribut définit la couleur d'arrière-plan de toutes les cellules. C'est un code à 6 chiffres hexadécimaux comme défini par le sRGB. Il est précédé d'un '#'. Un des mots-clés préfédinis pour les couleurs peut également être utilisé.

    +

    Note : Il est fortement conseillé de ne pas utiliser cet attribut car celui-ci n'est pas un attribut standard et n'a été implémentée que sous certaines versions d'Internet Explorer. L'élément {{HTMLElement("thead")}} doit être mis en forme grâce au CSS. Pour fournir un effet semblable à celui achevé par l'attribut bgcolor, il est possible d'utiliser la propriété CSS {{cssxref("background-color")}} sur les éléments  {{HTMLElement("td")}} ou {{HTMLElement("th")}} souhaités.

    -
    - -
    {{htmlattrdef("char")}} {{Deprecated_inline}} en {{HTMLVersionInline("4")}}, {{obsolete_inline}} en {{HTMLVersionInline("5")}}
    -
    Cet attribut est utilisé pour définir le caractère sur lequel aligner les cellules d'une colonne. Les valeurs de cet attribut contiennent généralement un point (.) pour aligner des nombres ou des valeurs monétaires. Si l'attribut {{htmlattrxref("align", "thead")}} ne vaut pas char, l'attribut est ignoré.
    -
    -
    Note d'utilisation : Cet attribut est obsolète et il est donc fortement déconseillé de l'utiliser. De fait, il n'est pas supporté par le dernier standard. Pour réaliser le même effet qu'avec {{htmlattrxref("char", "thead")}}, on peut utiliser CSS3 en attribuant la même valeur à la propriété {{cssxref("text-align")}}.{{unimplemented_inline}}.
    +

    Cet attribut est utilisé pour définir le caractère sur lequel aligner les cellules d'une colonne. Les valeurs de cet attribut contiennent généralement un point (.) pour aligner des nombres ou des valeurs monétaires. Si l'attribut {{htmlattrxref("align", "thead")}} ne vaut pas char, l'attribut est ignoré.

    +

    Note : Cet attribut est obsolète et il est donc fortement déconseillé de l'utiliser. De fait, il n'est pas supporté par le dernier standard. Pour réaliser le même effet qu'avec {{htmlattrxref("char", "thead")}}, on peut utiliser CSS3 en attribuant la même valeur à la propriété {{cssxref("text-align")}}.{{unimplemented_inline}}.

    -
    - -
    {{htmlattrdef("charoff")}} {{Deprecated_inline}} en {{HTMLVersionInline("4")}}, {{obsolete_inline}} en {{HTMLVersionInline("5")}}
    -
    Cet attribut est utilisé pour indiquer le décalage, en nombre de caractères, depuis le caractère définit par l'attribut char à appliquer au contenu des cellules. -
    Note d'utilisation: Cet attribut ne doit plus être utilisé car il est maintenant obsolète et n'est plus supporté dans le dernier standard.
    +

    Cet attribut est utilisé pour indiquer le décalage, en nombre de caractères, depuis le caractère définit par l'attribut char à appliquer au contenu des cellules.

    +

    Note : Cet attribut ne doit plus être utilisé car il est maintenant obsolète et n'est plus supporté dans le dernier standard.

    -
    - -
    {{htmlattrdef("valign")}} {{Deprecated_inline}} en {{HTMLVersionInline("4")}}, {{obsolete_inline}} en {{HTMLVersionInline("5")}}
    -
    Cet attribut définit l'alignement vertical du texte des cellules de la colonne. Les valeurs possibles de cet attribut sont : +

    Cet attribut définit l'alignement vertical du texte des cellules de la colonne. Les valeurs possibles de cet attribut sont :

    • baseline qui alignera le texte à la ligne la plus basse possible en utilisant la ligne de base des caractères. Si les caractères ont tous la même taille, cela aura le même effet que la valeur bottom.
    • bottom qui placera le texte au plus bas de la cellule
    • @@ -131,7 +63,7 @@ translation_of: Web/HTML/Element/thead
    • top qui placera le texte au plus haut de la cellule.
    -
    Note d'utilisation : Cet attribut étant maintenant obsolète (et n'étant plus supporté), il est fortement déconseillé de l'utiliser. La propriété CSS {{cssxref("vertical-align")}} doit être utilisée à la place.
    +

    Note : Cet attribut étant maintenant obsolète (et n'étant plus supporté), il est fortement déconseillé de l'utiliser. La propriété CSS {{cssxref("vertical-align")}} doit être utilisée à la place.

    diff --git a/files/fr/web/html/element/time/index.html b/files/fr/web/html/element/time/index.html index b759c4b7ed..4716eb779a 100644 --- a/files/fr/web/html/element/time/index.html +++ b/files/fr/web/html/element/time/index.html @@ -22,8 +22,6 @@ translation_of: Web/HTML/Element/time
    {{EmbedInteractiveExample("pages/tabbed/time.html", "tabbed-shorter")}}
    - -

    Attributs

    Comme tous les autres éléments HTML, cet élément inclut les attributs universels.

    @@ -45,8 +43,7 @@ translation_of: Web/HTML/Element/time
    Une chaîne de caractères représentant une année
    -
    2011
    -
    0001
    +
    2011 ou 0001
    Une chaîne de caractères représentant une année et un mois
    2011-11
    Une chaîne de caractères représentant une date
    @@ -56,19 +53,11 @@ translation_of: Web/HTML/Element/time
    Une chaîne de caractères représentant une semaine
    2011-W47
    Une chaîne de caractères représentant une heure
    -
    14:54
    -
    14:54:39
    -
    14:54:39.929
    +
    14:54 ou 14:54:39 ou 14:54:39.929
    Une chaîne de caractères représentant une date et une heure locale
    -
    2011-11-18T14:54:39.929
    -
    2011-11-18 14:54:39.929
    +
    2011-11-18T14:54:39.929 ou 2011-11-18 14:54:39.929
    Une chaîne de caractères représentant une date et une heure universelle
    -
    2011-11-18T14:54:39.929Z
    -
    2011-11-18T14:54:39.929-0400
    -
    2011-11-18T14:54:39.929-04:00
    -
    2011-11-18 14:54:39.929Z
    -
    2011-11-18 14:54:39.929-0400
    -
    2011-11-18 14:54:39.929-04:00
    +
    2011-11-18T14:54:39.929Z ou 2011-11-18T14:54:39.929-0400 ou 2011-11-18T14:54:39.929-04:00 ou 2011-11-18 14:54:39.929Z ou 2011-11-18 14:54:39.929-0400 ou 2011-11-18 14:54:39.929-04:00
    Une chaîne de caractères représentant une durée
    PT4H18M3S
    diff --git a/files/fr/web/html/element/tr/index.html b/files/fr/web/html/element/tr/index.html index 26ae6e681c..e0bde5e355 100644 --- a/files/fr/web/html/element/tr/index.html +++ b/files/fr/web/html/element/tr/index.html @@ -21,8 +21,8 @@ browser-compat: html.elements.tr

    Attributs dépréciés ou obsolètes

    -
    align{{deprecated_inline}}
    -
    Une chaîne de caractère qui définit l'alignement horizontal pour le contenu de chaque cellule. C'est un raccourci pour définir l'alignement sur l'ensemble de la ligne plutôt que pour chaque cellule. Les valeurs possibles sont : +
    align{{deprecated_inline}}
    +

    Une chaîne de caractère qui définit l'alignement horizontal pour le contenu de chaque cellule. C'est un raccourci pour définir l'alignement sur l'ensemble de la ligne plutôt que pour chaque cellule. Les valeurs possibles sont :

    left
    Le contenu de la cellule est aligné à gauche de la cellule.
    @@ -38,28 +38,27 @@ browser-compat: html.elements.tr

    Si cet attribut n'est pas renseigné, la valeur est héritée du nœud parent.

    -
    Note : Cet attribut est devenu obsolète dans le dernier standard et ne doit donc plus être utilisé. - +
    +

    Note : Cet attribut est devenu obsolète dans le dernier standard et ne doit donc plus être utilisé.

    • Pour réaliser les mêmes effets que les valeurs left, center, right ou justify, il faut utiliser la propriété CSS text-align sur l'élément
    • Pour réaliser le même effet qu'avec la valeur char. Il est possible d'utiliser la valeur de l'attribut char comme valeur de la propriété text-align.
    -
    bgcolor {{deprecated_inline}}
    -
    Une chaîne de caractères qui définit la couleur d'arrière-plan de toutes les cellules de la colonne. Il peut s'agit d'une notation hexadécimale #RRGGGBB ou #RGB ou bien d'un mot-clé pour une couleur. L'absence de cet attribut (ou sa déclaration à null en JavaScript) fera que la couleur des cellules de la ligne sera héritée de la couleur d'arrière-plan de l'élément parent. -
    Note : L'élément <tr> doit être mis en forme grâce au CSS. Pour fournir un effet semblable à celui achevé par l'attribut bgcolor, il est possible d'utiliser la propriété CSS background-color.
    +
    bgcolor {{deprecated_inline}}
    +

    Une chaîne de caractères qui définit la couleur d'arrière-plan de toutes les cellules de la colonne. Il peut s'agit d'une notation hexadécimale #RRGGGBB ou #RGB ou bien d'un mot-clé pour une couleur. L'absence de cet attribut (ou sa déclaration à null en JavaScript) fera que la couleur des cellules de la ligne sera héritée de la couleur d'arrière-plan de l'élément parent.

    +

    Note : L'élément <tr> doit être mis en forme grâce au CSS. Pour fournir un effet semblable à celui achevé par l'attribut bgcolor, il est possible d'utiliser la propriété CSS background-color.

    -
    char{{deprecated_inline}}
    -
    Une chaîne de caractère qui définit le caractère sur lequel aligner les cellules d'une colonne. Les valeurs de cet attribut contiennent généralement un point ou une virgule pour aligner des nombres ou des valeurs monétaires. Si l'attribut align ne vaut pas char, l'attribut est ignoré.
    -
    -
    Note : Cet attribut est obsolète et peu implémenté : il est donc fortement déconseillé de l'utiliser. Pour réaliser le même effet qu'avec char, il faut utiliser la propriété CSS text-align.
    +
    char{{deprecated_inline}}
    +

    Une chaîne de caractère qui définit le caractère sur lequel aligner les cellules d'une colonne. Les valeurs de cet attribut contiennent généralement un point ou une virgule pour aligner des nombres ou des valeurs monétaires. Si l'attribut align ne vaut pas char, l'attribut est ignoré.

    +

    Note : Cet attribut est obsolète et peu implémenté : il est donc fortement déconseillé de l'utiliser. Pour réaliser le même effet qu'avec char, il faut utiliser la propriété CSS text-align.

    -
    charoff {{deprecated_inline}}
    -
    Une chaîne de caractères utilisée pour indiquer le nombre de caractères à afficher après le caractère défini par l'attribut char. Cela peut par exemple servir à indiquer qu'on souhaite afficher deux chiffres après la virgule pour les valeurs monétaires afin d'indiquer les centimes. -
    Note : Cet attribut ne doit plus être utilisé, car il est maintenant obsolète et que sa compatibilité n'était pas répandue.
    +
    charoff {{deprecated_inline}}
    +

    Une chaîne de caractères utilisée pour indiquer le nombre de caractères à afficher après le caractère défini par l'attribut char. Cela peut par exemple servir à indiquer qu'on souhaite afficher deux chiffres après la virgule pour les valeurs monétaires afin d'indiquer les centimes.

    +

    Note : Cet attribut ne doit plus être utilisé, car il est maintenant obsolète et que sa compatibilité n'était pas répandue.

    -
    valign {{deprecated_inline}}
    +
    valign {{deprecated_inline}}

    Une chaîne de caractères qui définit l'alignement vertical du texte des cellules de la ligne. Les valeurs possibles de cet attribut sont :

    baseline
    @@ -72,7 +71,7 @@ browser-compat: html.elements.tr
    Place le texte au plus haut de la cellule.
    -
    Note: Cet attribut est obsolète dans le dernier standard, la propriété CSS vertical-align doit être utilisée à la place.
    +

    Note : Cet attribut est obsolète dans le dernier standard, la propriété CSS vertical-align doit être utilisée à la place.

    diff --git a/files/fr/web/html/element/track/index.html b/files/fr/web/html/element/track/index.html index 149a37aec8..c70add3466 100644 --- a/files/fr/web/html/element/track/index.html +++ b/files/fr/web/html/element/track/index.html @@ -15,8 +15,6 @@ translation_of: Web/HTML/Element/track
    {{EmbedInteractiveExample("pages/tabbed/track.html", "tabbed-standard")}}
    - -

    Attributs

    À l'instar des autres éléments HTML, cet élément inclut les attributs universels.

    diff --git a/files/fr/web/html/element/tt/index.html b/files/fr/web/html/element/tt/index.html index 02a25bd7e5..f10fc657d2 100644 --- a/files/fr/web/html/element/tt/index.html +++ b/files/fr/web/html/element/tt/index.html @@ -15,7 +15,9 @@ translation_of: Web/HTML/Element/tt

    Cet élément est désormais obsolète et un élément {{HTMLElement("code")}}, {{HTMLElement("kbd")}}, {{HTMLElement("samp")}} ou {{HTMLElement("var")}} pourra être utilisé à la place s'il faut afficher du texte en incise avec une police à chasse fixe. On pourra utiliser l'élément {{HTMLElement("pre")}} pour afficher un bloc de contenu préformaté (également généralement affiché dans une police à chasse fixe).

    -
    Note : Si aucun de ces éléments ne correspond à la sémantique portée par votre contenu (lorsque, par exemple, il ne s'agit que d'un effet de mise en forme), vous pouvez utiliser un élément {{HTMLElement("span")}} mis en forme avec CSS (par exemple la propriété {{cssxref("font-family")}}).
    +
    +

    Note : Si aucun de ces éléments ne correspond à la sémantique portée par votre contenu (lorsque, par exemple, il ne s'agit que d'un effet de mise en forme), vous pouvez utiliser un élément {{HTMLElement("span")}} mis en forme avec CSS (par exemple la propriété {{cssxref("font-family")}}).

    +

    Attributs

    diff --git a/files/fr/web/html/element/u/index.html b/files/fr/web/html/element/u/index.html index 435347fe3b..169e81d6bb 100644 --- a/files/fr/web/html/element/u/index.html +++ b/files/fr/web/html/element/u/index.html @@ -13,13 +13,11 @@ translation_of: Web/HTML/Element/u

    L'élément HTML <u> permet d'afficher un fragment de texte qui est annoté avec des éléments non textuels. Par défaut, le contenu de l'élément est souligné. Cela pourra par exemple être le cas pour marquer un texte comme étant un nom propre chinois, ou pour marquer un texte qui a été mal orthographié.

    -

    Attention ! Cet élément était auparavant appelé underline pour les anciennes versions des spécifications HTML. Si on souhaite simplement souligner du texte, il ne faudra pas utiliser cet élément mais la propriété CSS {{cssxref("text-decoration")}} avec la valeur "underline".

    +

    Attention : Cet élément était auparavant appelé underline pour les anciennes versions des spécifications HTML. Si on souhaite simplement souligner du texte, il ne faudra pas utiliser cet élément mais la propriété CSS {{cssxref("text-decoration")}} avec la valeur "underline".

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

    Attributs

    Cet élément inclut uniquement les attributs universels.

    @@ -106,7 +104,6 @@ Soupe de potiron avec un soupçon de noix de muscade

    Indiquer le titre pour un livre

    -

    Les titres de livres doivent être indiqués avec un élément {{HTMLElement("cite")}} et non avec <u> ou <i>.

    HTML
    @@ -116,19 +113,7 @@ Soupe de potiron avec un soupçon de noix de muscade au cours du premier trimestre. </p> -
    Résultat avec la mise en forme par défaut
    - -

    {{EmbedLiveSample("example-unstyled-cite", 650, 80)}}

    -
    - -

    On notera que, par défaut, un élément <cite> est affiché en italique. Ceci peut être modifié grâce à CSS :

    - -
    cite {
    -  font-style: normal;
    -  text-decoration: underline;
    -}
    - -
    Résultat
    +
    Résultat

    {{EmbedLiveSample("Indiquer_le_titre_pour_un_livre", 650, 80)}}

    diff --git a/files/fr/web/html/element/ul/index.html b/files/fr/web/html/element/ul/index.html index f09eaea7e3..41919488a2 100644 --- a/files/fr/web/html/element/ul/index.html +++ b/files/fr/web/html/element/ul/index.html @@ -14,8 +14,6 @@ translation_of: Web/HTML/Element/ul
    {{EmbedInteractiveExample("pages/tabbed/ul.html", "tabbed-standard")}}
    - -

    Attributs

    À l'instar des différents éléments HTML, cet élément inclut les attributs universels.

    @@ -25,11 +23,9 @@ translation_of: Web/HTML/Element/ul
    {{htmlattrdef("compact")}}{{Deprecated_inline}}
    Cet attribut booléen fournit une indication pour afficher la liste en mode compact. L'interprétation de cet attribut est laissée à la discrétion de l'agent utilisateur et ne fonctionne pas pour tous les navigateurs. -
    Attention !Cet attribut a été déprécié et ne doit pas être utilisé. Pour obtenir le même effet, on pourra utiliser la propriété {{cssxref("line-height")}} avec la valeur 80% pour l'élément <ul>.
    +
    +

    Attention : Cet attribut a été déprécié et ne doit pas être utilisé. Pour obtenir le même effet, on pourra utiliser la propriété {{cssxref("line-height")}} avec la valeur 80% pour l'élément <ul>.

    -
    - -
    {{htmlattrdef("type")}}{{Deprecated_inline}}
    Cet attribut permet de définir le style de puce utilisé pour la liste. Les valeurs définies au sein des spécifications pour HTML3.2 et HTML 4.0/4.01 sont :
      @@ -40,7 +36,9 @@ translation_of: Web/HTML/Element/ul

      Un quatrième type a été défini dans l'interface WebTV : triangle mais tous les navigateurs ne l'implémentent pas.

      -
      Attention !Cet attribut a été déprécié et ne doit pas être utilisé. Pour obtenir le même effet, on pourra utiliser la propriété CSS {{cssxref("list-style-type")}} à la place.
      +
      +

      Attention :Cet attribut a été déprécié et ne doit pas être utilisé. Pour obtenir le même effet, on pourra utiliser la propriété CSS {{cssxref("list-style-type")}} à la place.

      +
    diff --git a/files/fr/web/html/element/var/index.html b/files/fr/web/html/element/var/index.html index 02bb65da37..7a06f26bf4 100644 --- a/files/fr/web/html/element/var/index.html +++ b/files/fr/web/html/element/var/index.html @@ -14,8 +14,6 @@ translation_of: Web/HTML/Element/var
    {{EmbedInteractiveExample("pages/tabbed/var.html", "tabbed-shorter")}}
    - -

    Attributs

    Cet élément inclut les attributs universels.

    diff --git a/files/fr/web/html/element/video/index.html b/files/fr/web/html/element/video/index.html index 1801eaa76a..af53240556 100644 --- a/files/fr/web/html/element/video/index.html +++ b/files/fr/web/html/element/video/index.html @@ -17,8 +17,6 @@ translation_of: Web/HTML/Element/video
    {{EmbedInteractiveExample("pages/tabbed/video.html", "tabbed-standard")}}
    - -

    L'exemple précédent illustre comment utiliser l'élément <video> simplement, à la façon d'un élément {{htmlelement("img")}}. Le chemin vers le média à afficher est fourni via l'attribut src et on peut inclure d'autres attributs afin de spécifier la largeur et la hauteur, la lecture automatique et/ou en boucle, les contrôles affichés, etc.

    Le contenu fourni entre les balises <video></video> est affiché comme contenu alternatif par les navigateurs qui ne prennent pas en charge l'élément.

    @@ -49,32 +47,26 @@ translation_of: Web/HTML/Element/video
    {{htmlattrdef("autoplay")}}
    -
    Un attribut booléen qui indique que la vidéo doit automatiquement être lancée dès qu'elle peut être jouée sans être arrêtée par le chargement des données.
    -
    -

    Note : la lecture automatique peut être source de nuisance pour les utilisateurs. Mieux vaut l'éviter lorsque c'est possible ou proposer à l'utilisateur de choisir cette option. Cette valeur peut être utile lors de la création de vidéos dont la source sera définie a posteriori.

    - -

    Note : Cet attribut est un attribut booléen et indiquer autoplay="false" ne suffira pas à retirer la lecture automatique. Pour ce faire, il faut complètement retirer l'attribut.

    - -

    Note :  Pour certains navigateurs (ex. Chrome 70), l'attribut autoplay ne fonctionne pas si aucun attribut muten'est présent.

    +

    Un attribut booléen qui indique que la vidéo doit automatiquement être lancée dès qu'elle peut être jouée sans être arrêtée par le chargement des données.

    +

    Note : la lecture automatique peut être source de nuisance pour les utilisateurs. Mieux vaut l'éviter lorsque c'est possible ou proposer à l'utilisateur de choisir cette option. Cette valeur peut être utile lors de la création de vidéos dont la source sera définie a posteriori.

    +

    Note : Cet attribut est un attribut booléen et indiquer autoplay="false" ne suffira pas à retirer la lecture automatique. Pour ce faire, il faut complètement retirer l'attribut.

    +

    Note : Pour certains navigateurs (ex. Chrome 70), l'attribut autoplay ne fonctionne pas si aucun attribut muten'est présent.

    -
    - -
    {{htmlattrdef("buffered")}}
    Un attribut qui peut être lu afin de déterminer l'intervalle temporel mis en mémoire tampon. Cet attribut contient un objet {{domxref("TimeRanges")}}.
    {{htmlattrdef("controls")}}
    Si cet attribut est présent, le navigateur affichera des contrôles pour permettre à l'utilisateur de contrôler la lecture de la vidéo, le volume et la mise sur pause.
    {{htmlattrdef("controlslist")}} {{experimental_inline}}
    -
    L'attribut controlslist, lorsqu'il est indiqué, aide le navigateur à choisir les contrôles à afficher pour la manipulation du média lorsque l'attribut controls est utilisé.
    -
    Les valeurs autorisées pour cet attribut sont nodownload, nofullscreen et noremoteplayback.
    - On utilisera l'attribut disablePictureInPicture afin de désactiver ce mode et les contrôles associés.
    +

    L'attribut controlslist, lorsqu'il est indiqué, aide le navigateur à choisir les contrôles à afficher pour la manipulation du média lorsque l'attribut controls est utilisé.

    +

    Les valeurs autorisées pour cet attribut sont nodownload, nofullscreen et noremoteplayback.

    +

    On utilisera l'attribut disablePictureInPicture afin de désactiver ce mode et les contrôles associés.

    {{htmlattrdef("crossorigin")}}
    -
    Cet attribut à valeur contrainte permet d'indiquer si le CORS doit être utilisé pour récupérer la vidéo. Les ressources avec le CORS activé peuvent être réutilisées dans un élément {{HTMLElement("canvas")}} sans le corrompre. Les valeurs autorisées sont : +

    Cet attribut à valeur contrainte permet d'indiquer si le CORS doit être utilisé pour récupérer la vidéo. Les ressources avec le CORS activé peuvent être réutilisées dans un élément {{HTMLElement("canvas")}} sans le corrompre. Les valeurs autorisées sont :

    • anonymous : une requête cross-origine est envoyée sans information d'authentification. Autrement dit, un en-tête HTTP {{HTTPHeader("Origin")}} est envoyé, sans cookie, certificat X.509 ou sans authentification HTTP simple. Si le serveur ne fournit pas d'informations d'authentification au site d'origine (c'est-à-dire en n'envoyant pas l'en-tête HTTP {{HTTPHeader("Access-Control-Allow-Origin")}}), la vidéo sera corrompue et son utilisation sera restreinte.
    • use-credentials : une requête cross-origine est envoyée avec une information d'authentification. Autrement dit, un en-tête HTTP Header est envoyé, avec un cookie, une certification ou une authentification HTTP simple. Si le serveur ne fournit pas d'informations d'authentification au site d'origine (c'est-à-dire en n'envoyant pas l'en-tête HTTP {{HTTPHeader("Access-Control-Allow-Origin")}}), la vidéo sera corrompue et son utilisation sera restreinte.
    - Lorsque cet attribut n'est pas présent, la ressource est récupérée sans requête CORS (l'en-tête HTTP {{HTTPHeader("Origin")}}) n'est pas envoyé) et elle ne peut pas être utilisée dans un élément {{HTMLElement('canvas')}}. Si la valeur est invalide, elle sera gérée comme si le mot-clé anonymous était utilisé. Pour plus d'informations, consulter l'article sur les attributs de paramétrage du CORS.
    +

    Lorsque cet attribut n'est pas présent, la ressource est récupérée sans requête CORS (l'en-tête HTTP {{HTTPHeader("Origin")}}) n'est pas envoyé) et elle ne peut pas être utilisée dans un élément {{HTMLElement('canvas')}}. Si la valeur est invalide, elle sera gérée comme si le mot-clé anonymous était utilisé. Pour plus d'informations, consulter l'article sur les attributs de paramétrage du CORS.

    {{htmlattrdef("height")}}
    La hauteur de la zone où afficher la vidéo, exprimée en pixels CSS (en valeur absolue uniquement).
    {{htmlattrdef("intrinsicsize")}} {{experimental_inline}}
    @@ -88,7 +80,7 @@ translation_of: Web/HTML/Element/video
    {{htmlattrdef("playsinline")}}
    Un attribut booléen qui indique que la vidéo doit être jouée en incise, c'est-à-dire au sein de la zone de lecture de l'élément. À noter : l'absence de cet attribut n'implique pas que la vidéo sera lancée en plein écran.
    {{htmlattrdef("preload")}}
    -
    Cet attribut à valeur contrainte est une indication destinée au navigateur sur la meilleure façon de charger la vidéo (selon l'auteur de la page). Il peut prendre l'une des valeurs suivantes : +

    Cet attribut à valeur contrainte est une indication destinée au navigateur sur la meilleure façon de charger la vidéo (selon l'auteur de la page). Il peut prendre l'une des valeurs suivantes :

    • none : la vidéo ne doit pas être préchargée.
    • metadata : seules les métadonnées de la vidéo (sa durée par exemple) sont récupérées.
    • @@ -98,7 +90,7 @@ translation_of: Web/HTML/Element/video

      La valeur par défaut peut être différente selon le navigateur. La spécification conseille d'utiliser la valeur metadata.

      -
      Notes d'utilisation : +

      Note :

      • L'attribut autoplay a la priorité sur preload. Si autoplay est défini, le navigateur doit nécessairement télécharger la vidéo pour la lancer.
      • diff --git a/files/fr/web/html/element/wbr/index.html b/files/fr/web/html/element/wbr/index.html index dec0ece17d..84cf91e56c 100644 --- a/files/fr/web/html/element/wbr/index.html +++ b/files/fr/web/html/element/wbr/index.html @@ -14,8 +14,6 @@ translation_of: Web/HTML/Element/wbr
        {{EmbedInteractiveExample("pages/tabbed/wbr.html", "tabbed-shorter")}}
        - -

        Attributs

        Comme tous les autres éléments HTML, cet élément inclut les attributs universels.

        diff --git a/files/fr/web/html/element/xmp/index.html b/files/fr/web/html/element/xmp/index.html index 90a3ecb86d..d210e8b57b 100644 --- a/files/fr/web/html/element/xmp/index.html +++ b/files/fr/web/html/element/xmp/index.html @@ -13,7 +13,8 @@ translation_of: Web/HTML/Element/xmp

        L'élément HTML <xmp> (pour example) affiche le texte entre les balises d'ouverture et de fermeture sans interpréter le HTML qu'il contient et en utilisant une police à chasse fixe. La spécification HTML 2 recommande un affichage suffisamment large pour contenir 80 caractères par ligne.

        -
        Note : Ne pas utiliser cet élément. +
        +

        Note : Ne pas utiliser cet élément.

        • Il a été déprécié depuis HTML3.2 et n'a pas été implémenté d'une manière cohérente. Il a été complètement retiré du langage dans HTML5.
        • @@ -31,7 +32,7 @@ translation_of: Web/HTML/Element/xmp

          Cet élément implémente l'interface {{domxref('HTMLElement')}}.

          -

          Note d'implémentation : Jusqu'à Gecko 1.9.2 inclus, Firefox implémentait l'interface {{domxref('HTMLSpanElement')}} pour cet élément.

          +

          Note : Jusqu'à Gecko 1.9.2 inclus, Firefox implémentait l'interface {{domxref('HTMLSpanElement')}} pour cet élément.

          Compatibilité des navigateurs

          diff --git a/files/fr/web/html/global_attributes/accesskey/index.html b/files/fr/web/html/global_attributes/accesskey/index.html index 8f7fd77d4a..498b67629a 100644 --- a/files/fr/web/html/global_attributes/accesskey/index.html +++ b/files/fr/web/html/global_attributes/accesskey/index.html @@ -15,8 +15,6 @@ original_slug: Web/HTML/Attributs_universels/accesskey
          {{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.

          @@ -35,7 +33,7 @@ original_slug: Web/HTML/Attributs_universels/accesskey Firefox - Alt + Shift + touche + Alt + 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
          @@ -45,16 +43,16 @@ original_slug: Web/HTML/Attributs_universels/accesskey Edge Alt + touche - N/A + N/A Internet Explorer Alt + touche - N/A + N/A Google Chrome - Alt + touche + Alt + touche Control + Alt + touche @@ -65,12 +63,12 @@ original_slug: Web/HTML/Attributs_universels/accesskey Opera 15+ - Alt + key + Alt + key Control + Alt + key Opera 12 - Shift + 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 + Shift + 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 diff --git a/files/fr/web/html/global_attributes/autofocus/index.html b/files/fr/web/html/global_attributes/autofocus/index.html index 931b00a6f0..8b087d74e5 100644 --- a/files/fr/web/html/global_attributes/autofocus/index.html +++ b/files/fr/web/html/global_attributes/autofocus/index.html @@ -12,13 +12,13 @@ translation_of: 'Web/HTML/Global_attributes/autofocus'

          L'attribut autofocus ne devrait pas être placé sur plus d'un élément au sein du document. S'il est placé sur plusieurs éléments, c'est le premier qui recevra le focus.

          -
          -

          Note : L'attribut autofocus s'applique à tous les éléments, et pas seulement aux contrôles de formulaires. Par exemple, il peut être utilisé sur une zone contenteditable.

          +
          +

          Note : L'attribut autofocus s'applique à tous les éléments, et pas seulement aux contrôles de formulaires. Par exemple, il peut être utilisé sur une zone contenteditable.

          Remarques sur l'accessibilité de la fonctionnalité

          -

          Le fait de placer automatiquement le focus sur un élément de formulaire peut poser des difficultés aux personnes utilisant des technologies d'assistance telles que les lecteurs d'écrans et les personnes portant un handicap cognitif. Lorsque l'attribut autofocus est assigné, les lecteurs d'écrans vont « téléporter » le visiteur sur l'élément de formulaire sans pouvoir l'avertir au préalable.

          +

          Le fait de placer automatiquement le focus sur un élément de formulaire peut poser des difficultés aux personnes utilisant des technologies d'assistance telles que les lecteurs d'écrans et les personnes portant un handicap cognitif. Lorsque l'attribut autofocus est assigné, les lecteurs d'écrans vont « téléporter » le visiteur sur l'élément de formulaire sans pouvoir l'avertir au préalable.

          Concernant l'accessibilité, l'attribut autofocus doit être utilisé avec précaution. Placer automatiquement le focus sur un élément de formulaire peut déclencher un défilement intempestif de la page lors de son chargement. Le focus peut aussi déclencher l'ouverture intempestive du clavier virtuel sur les appareils tactiles. Enfin, il faut noter que comme les lecteurs d'écrans annoncent le libellé d'un élément de formulaire recevant le focus, aucun autre élément placé avant le libellé ne sera lu par l'outil d'assistance. D'ailleurs, les personnes utilisant un appareil disposant d'un petit écran perdront également le contexte fourni par les éléments situés au-dessus de l'élément de formulaire recevant le focus.

          diff --git a/files/fr/web/html/global_attributes/class/index.html b/files/fr/web/html/global_attributes/class/index.html index d236b6333a..e4aa07e5e9 100644 --- a/files/fr/web/html/global_attributes/class/index.html +++ b/files/fr/web/html/global_attributes/class/index.html @@ -15,8 +15,6 @@ original_slug: Web/HTML/Attributs_universels/class
          {{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

          diff --git a/files/fr/web/html/global_attributes/contenteditable/index.html b/files/fr/web/html/global_attributes/contenteditable/index.html index 6587821ca2..be68b5e9b3 100644 --- a/files/fr/web/html/global_attributes/contenteditable/index.html +++ b/files/fr/web/html/global_attributes/contenteditable/index.html @@ -15,8 +15,6 @@ original_slug: Web/HTML/Attributs_universels/contenteditable
          {{EmbedInteractiveExample("pages/tabbed/attribute-contenteditable.html","tabbed-shorter")}}
          - -

          Les valeurs autorisées pour cet attribut sont :

            diff --git a/files/fr/web/html/global_attributes/contextmenu/index.html b/files/fr/web/html/global_attributes/contextmenu/index.html index 84ea955ed0..ef40b4361f 100644 --- a/files/fr/web/html/global_attributes/contextmenu/index.html +++ b/files/fr/web/html/global_attributes/contextmenu/index.html @@ -12,14 +12,13 @@ original_slug: Web/HTML/Attributs_universels/contextmenu
            {{HTMLSidebar("Global_attributes")}}{{obsolete_header}}
            -

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

            +

            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 :

            @@ -81,7 +80,6 @@ function changeImage(){

            Résultat

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

            Spécifications

            diff --git a/files/fr/web/html/global_attributes/data-_star_/index.html b/files/fr/web/html/global_attributes/data-_star_/index.html index c9e29ffead..0c0e955533 100644 --- a/files/fr/web/html/global_attributes/data-_star_/index.html +++ b/files/fr/web/html/global_attributes/data-_star_/index.html @@ -15,8 +15,6 @@ original_slug: Web/HTML/Attributs_universels/data-*
            {{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 :

            diff --git a/files/fr/web/html/global_attributes/dir/index.html b/files/fr/web/html/global_attributes/dir/index.html index 2c2d9b4b2b..d3a9537cef 100644 --- a/files/fr/web/html/global_attributes/dir/index.html +++ b/files/fr/web/html/global_attributes/dir/index.html @@ -15,8 +15,6 @@ original_slug: Web/HTML/Attributs_universels/dir
            {{EmbedInteractiveExample("pages/tabbed/attribute-dir.html","tabbed-standard")}}
            - -

            Les valeurs autorisées pour cet attribut sont :

              @@ -26,8 +24,7 @@ original_slug: Web/HTML/Attributs_universels/dir
            -

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

            +

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

            • diff --git a/files/fr/web/html/global_attributes/hidden/index.html b/files/fr/web/html/global_attributes/hidden/index.html index ecff0d50f7..78965d4351 100644 --- a/files/fr/web/html/global_attributes/hidden/index.html +++ b/files/fr/web/html/global_attributes/hidden/index.html @@ -15,8 +15,6 @@ original_slug: Web/HTML/Attributs_universels/hidden
              {{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.

              diff --git a/files/fr/web/html/global_attributes/id/index.html b/files/fr/web/html/global_attributes/id/index.html index 19963293f4..efaedba85f 100644 --- a/files/fr/web/html/global_attributes/id/index.html +++ b/files/fr/web/html/global_attributes/id/index.html @@ -15,10 +15,8 @@ original_slug: Web/HTML/Attributs_universels/id
              {{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.

              +
              +

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

              diff --git a/files/fr/web/html/global_attributes/index.html b/files/fr/web/html/global_attributes/index.html index 7a9d96d740..29656a207e 100644 --- a/files/fr/web/html/global_attributes/index.html +++ b/files/fr/web/html/global_attributes/index.html @@ -20,7 +20,7 @@ original_slug: Web/HTML/Attributs_universels
              • {{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 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.
              diff --git a/files/fr/web/html/global_attributes/inputmode/index.html b/files/fr/web/html/global_attributes/inputmode/index.html index 8762c498df..6574f06ffd 100644 --- a/files/fr/web/html/global_attributes/inputmode/index.html +++ b/files/fr/web/html/global_attributes/inputmode/index.html @@ -11,7 +11,7 @@ original_slug: Web/HTML/Attributs_universels/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 :

              +

              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
              diff --git a/files/fr/web/html/global_attributes/itemid/index.html b/files/fr/web/html/global_attributes/itemid/index.html index ae09c4124b..bb31c1e8c8 100644 --- a/files/fr/web/html/global_attributes/itemid/index.html +++ b/files/fr/web/html/global_attributes/itemid/index.html @@ -23,7 +23,9 @@ original_slug: Web/HTML/Attributs_universels/itemid
              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.

              +
              +

              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

              @@ -48,7 +50,7 @@ original_slug: Web/HTML/Attributs_universels/itemid itemscope itemtype: itemid -
              http://vocab.example.net/book: urn:isbn:0-330-34032-8
              + http://vocab.example.net/book: urn:isbn:0-330-34032-8 @@ -60,7 +62,7 @@ original_slug: Web/HTML/Attributs_universels/itemid itemprop author -
              Peter F. Hamilton
              + Peter F. Hamilton diff --git a/files/fr/web/html/global_attributes/itemprop/index.html b/files/fr/web/html/global_attributes/itemprop/index.html index 7436b55d7d..0511713043 100644 --- a/files/fr/web/html/global_attributes/itemprop/index.html +++ b/files/fr/web/html/global_attributes/itemprop/index.html @@ -272,7 +272,9 @@ original_slug: Web/HTML/Attributs_universels/itemprop
-

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.

+
+

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

diff --git a/files/fr/web/html/global_attributes/itemref/index.html b/files/fr/web/html/global_attributes/itemref/index.html index 789a1a7502..5942220cc7 100644 --- a/files/fr/web/html/global_attributes/itemref/index.html +++ b/files/fr/web/html/global_attributes/itemref/index.html @@ -17,7 +17,9 @@ original_slug: Web/HTML/Attributs_universels/itemref

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.

+
+

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

@@ -25,7 +27,7 @@ original_slug: Web/HTML/Attributs_universels/itemref
itemref
-

Exemple

+

Exemple

HTML

diff --git a/files/fr/web/html/global_attributes/itemscope/index.html b/files/fr/web/html/global_attributes/itemscope/index.html index 741ea904ed..b09fa56d2b 100644 --- a/files/fr/web/html/global_attributes/itemscope/index.html +++ b/files/fr/web/html/global_attributes/itemscope/index.html @@ -82,7 +82,7 @@ Directions: <br> itemprop image: -
https://c1.staticflickr.com/1/30/42759561_8631e2f905_n.jpg
+ https://c1.staticflickr.com/1/30/42759561_8631e2f905_n.jpg @@ -128,8 +128,7 @@ Directions: <br> itemprop recipeInstructions: - -
1. Cut and peel apples 2. Mix sugar and cinnamon. Use additional sugar for tart apples .
+ 1. Cut and peel apples 2. Mix sugar and cinnamon. Use additional sugar for tart apples . @@ -180,7 +179,7 @@ Directions: <br>
-

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.

+

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

diff --git a/files/fr/web/html/global_attributes/lang/index.html b/files/fr/web/html/global_attributes/lang/index.html index e11a25d00d..8bb1022cd3 100644 --- a/files/fr/web/html/global_attributes/lang/index.html +++ b/files/fr/web/html/global_attributes/lang/index.html @@ -15,8 +15,6 @@ original_slug: Web/HTML/Attributs_universels/lang
{{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!".

diff --git a/files/fr/web/html/global_attributes/spellcheck/index.html b/files/fr/web/html/global_attributes/spellcheck/index.html index 00df957f95..b15ac3d517 100644 --- a/files/fr/web/html/global_attributes/spellcheck/index.html +++ b/files/fr/web/html/global_attributes/spellcheck/index.html @@ -15,8 +15,6 @@ original_slug: Web/HTML/Attributs_universels/spellcheck
{{EmbedInteractiveExample("pages/tabbed/attribute-spellcheck.html","tabbed-shorter")}}
- -

Les valeurs autorisées pour cet attribut sont :

    diff --git a/files/fr/web/html/global_attributes/style/index.html b/files/fr/web/html/global_attributes/style/index.html index 225a7c13c6..abebdb3092 100644 --- a/files/fr/web/html/global_attributes/style/index.html +++ b/files/fr/web/html/global_attributes/style/index.html @@ -15,10 +15,8 @@ original_slug: Web/HTML/Attributs_universels/style
    {{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")}}.

    +

    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

    diff --git a/files/fr/web/html/global_attributes/tabindex/index.html b/files/fr/web/html/global_attributes/tabindex/index.html index b6d50755bd..9e0bbf1b3c 100644 --- a/files/fr/web/html/global_attributes/tabindex/index.html +++ b/files/fr/web/html/global_attributes/tabindex/index.html @@ -15,8 +15,6 @@ original_slug: Web/HTML/Attributs_universels/tabindex
    {{EmbedInteractiveExample("pages/tabbed/attribute-tabindex.html","tabbed-standard")}}
    - -

    Cet attribut peut prendre l'une des valeurs suivantes :

      @@ -27,12 +25,12 @@ original_slug: Web/HTML/Attributs_universels/tabindex
    • 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.

      +

      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.

      +

      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.

    diff --git a/files/fr/web/html/global_attributes/title/index.html b/files/fr/web/html/global_attributes/title/index.html index b9b4a0ad96..ccd0ef2b45 100644 --- a/files/fr/web/html/global_attributes/title/index.html +++ b/files/fr/web/html/global_attributes/title/index.html @@ -15,8 +15,6 @@ original_slug: Web/HTML/Attributs_universels/title
    {{EmbedInteractiveExample("pages/tabbed/attribute-title.html","tabbed-shorter")}}
    - -

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

      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 index a7b19f1bbc..817e5996bb 100644 --- a/files/fr/web/html/global_attributes/x-ms-acceleratorkey/index.html +++ b/files/fr/web/html/global_attributes/x-ms-acceleratorkey/index.html @@ -37,7 +37,7 @@ original_slug: Web/HTML/Attributs_universels/x-ms-acceleratorkey
    • "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

    +

    Voir aussi

    • L'attribut universel accesskey
    • 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 index b6d12e24e9..8218568bf7 100644 --- 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 @@ -54,7 +54,7 @@ original_slug: Web/HTML/Attributs_universels/x-ms-format-detection

      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

      +

      Voir aussi

      • Les extensions spécifiques à Microsoft
      • diff --git a/files/fr/web/html/index.html b/files/fr/web/html/index.html index 05eccb44b5..b9b45a43ae 100644 --- a/files/fr/web/html/index.html +++ b/files/fr/web/html/index.html @@ -11,7 +11,7 @@ translation_of: Web/HTML ---
        {{HTMLSidebar}}
        -

        HTML signifie « HyperText Markup Language » qu'on peut traduire par « langage de balises pour l'hypertexte ». Il est utilisé afin de créer et de représenter le contenu d'une page web et sa structure. D'autres technologies sont utilisées avec HTML pour décrire la présentation d'une page (CSS) et/ou ses fonctionnalités interactives (JavaScript).

        +

        HTML signifie « HyperText Markup Language » qu'on peut traduire par « langage de balises pour l'hypertexte ». Il est utilisé afin de créer et de représenter le contenu d'une page web et sa structure. D'autres technologies sont utilisées avec HTML pour décrire la présentation d'une page (CSS) et/ou ses fonctionnalités interactives (JavaScript).

        L'« hypertexte » désigne les liens qui relient les pages web entre elles, que ce soit au sein d'un même site web ou entre différents sites web. Les liens sont un aspect fondamental du Web. Ce sont eux qui forment cette « toile » (ce mot est traduit par web en anglais). En téléchargeant du contenu sur l'Internet et en le reliant à des pages créées par d'autres personnes, vous devenez un participant actif du World Wide Web.

        @@ -37,7 +37,7 @@ translation_of: Web/HTML

        Nous avons élaboré un cours qui comprend toutes les informations essentielles dont vous avez besoin pour atteindre votre objectif.

        -

        Commencer +

        Commencer

diff --git a/files/fr/web/html/inline_elements/index.html b/files/fr/web/html/inline_elements/index.html index 823dc1dd6e..541c51b8c2 100644 --- a/files/fr/web/html/inline_elements/index.html +++ b/files/fr/web/html/inline_elements/index.html @@ -13,9 +13,9 @@ tags: translation_of: Web/HTML/Inline_elements original_slug: Web/HTML/Éléments_en_ligne --- -

Les éléments HTML (Hypertext Markup Language) étaient historiquement catégorisés comme des éléments de type « bloc » (block en anglais) ou de type « en ligne » (inline en anglais). Comme il s'agit d'une caractéristique de présentation, elle est aujourd'hui spécifiée par CSS dans le module de spécification Flow Layout qui définit l'organisation visuelle par défaut des éléments (le « flux » normal). Les éléments en lignes n'occupent que l'espace entre leurs balises et s'insèrent dans le flux du contenu plutôt que de créer un nouveau « bloc » visuel. Dans cet article, nous verrons en détails ces éléments en ligne et leurs différences par rapport aux éléments de bloc.

+

Les éléments HTML (Hypertext Markup Language) étaient historiquement catégorisés comme des éléments de type « bloc » (block en anglais) ou de type « en ligne » (inline en anglais). Comme il s'agit d'une caractéristique de présentation, elle est aujourd'hui spécifiée par CSS dans le module de spécification Flow Layout qui définit l'organisation visuelle par défaut des éléments (le « flux » normal). Les éléments en lignes n'occupent que l'espace entre leurs balises et s'insèrent dans le flux du contenu plutôt que de créer un nouveau « bloc » visuel. Dans cet article, nous verrons en détails ces éléments en ligne et leurs différences par rapport aux éléments de bloc.

-
+

Note : Un élément en ligne ne commence pas sur une nouvelle ligne et prend uniquement la largeur qui lui est nécessaire.

@@ -39,10 +39,7 @@ ligne.</p>

{{EmbedLiveSample("Inline", "", 120)}}

-

Élément de bloc

@@ -61,10 +57,7 @@ ligne.</p> son arrière-plan est coloré afin d'illustrer la zone couverte par cet élément de bloc.</p> -

Et voici le résultat qu'on obtient :

diff --git a/files/fr/web/html/link_types/index.html b/files/fr/web/html/link_types/index.html index 0ed90a4804..8e06e6866b 100644 --- a/files/fr/web/html/link_types/index.html +++ b/files/fr/web/html/link_types/index.html @@ -12,7 +12,7 @@ original_slug: Web/HTML/Types_de_lien ---
{{HTMLSidebar}}
-

En HTML, les types de lien indiquent la relation entre deux documents, reliés ensemble grâce à un élément <a>, <area>, <form> ou <link>.

+

En HTML, les types de lien indiquent la relation entre deux documents, reliés ensemble grâce à un élément <a>, <area>, <form> ou <link>.

@@ -326,12 +326,12 @@ original_slug: Web/HTML/Types_de_lien - + - + diff --git a/files/fr/web/html/link_types/noopener/index.html b/files/fr/web/html/link_types/noopener/index.html index 90d47ba83c..96771dbb1c 100644 --- a/files/fr/web/html/link_types/noopener/index.html +++ b/files/fr/web/html/link_types/noopener/index.html @@ -1,5 +1,5 @@ --- -title: 'Types de liens : noopener' +title: 'Types de liens : noopener' slug: Web/HTML/Link_types/noopener browser-compat: html.elements.a.rel.noopener translation_of: 'Web/HTML/Link_types/noopener' @@ -10,8 +10,8 @@ translation_of: 'Web/HTML/Link_types/noopener'

Veuillez noter que lorsque noopener est utilisé, les noms de cibles non vides et différents de _top, _self et _parent sont tous traités en tant que _blank pour déterminer si le lien doit s'ouvrir ou non dans un nouvel onglet/fenêtre.

-
-

Note : l'utilisation de target="_blank" sur des éléments <a> fournit désormais implicitement le même comportement pour l'attribut rel que si l'on avait utilisé rel="noopener", c'est à dire l'absence de mise en place de window.opener. Voir la compatibilité navigateur pour plus d'informations sur l'implémentation actuelle dans les navigateurs.

+
+

Note : l'utilisation de target="_blank" sur des éléments <a> fournit désormais implicitement le même comportement pour l'attribut rel que si l'on avait utilisé rel="noopener", c'est à dire l'absence de mise en place de window.opener. Voir la compatibilité navigateur pour plus d'informations sur l'implémentation actuelle dans les navigateurs.

Spécifications

diff --git a/files/fr/web/html/link_types/preload/index.html b/files/fr/web/html/link_types/preload/index.html index 3de13453b6..6a5c4dd6df 100644 --- a/files/fr/web/html/link_types/preload/index.html +++ b/files/fr/web/html/link_types/preload/index.html @@ -78,11 +78,11 @@ translation_of: 'Web/HTML/Link_types/preload'
-

Note : le préchargement de l'élément video est inclut dans la spécification Preload mais n'est pas encore implémenté par les navigateurs.

+

Note : le préchargement de l'élément video est inclut dans la spécification Preload mais n'est pas encore implémenté par les navigateurs.

-

Note : pour davantage de détails sur ces valeurs et sur la façon dont la spécification Preload prévoit de les traiter, consultez link element extensions (en anglais). Notez également que la liste complète des valeurs acceptées par l'attribut as est déterminé par la spécification Fetch — voir la spécification request destinations (en anglais).

+

Note : pour davantage de détails sur ces valeurs et sur la façon dont la spécification Preload prévoit de les traiter, consultez link element extensions (en anglais). Notez également que la liste complète des valeurs acceptées par l'attribut as est déterminé par la spécification Fetch — voir la spécification request destinations (en anglais).

Inclure un type MIME

diff --git a/files/fr/web/html/microdata/index.html b/files/fr/web/html/microdata/index.html index cd51409509..aecd248fbe 100644 --- a/files/fr/web/html/microdata/index.html +++ b/files/fr/web/html/microdata/index.html @@ -12,7 +12,7 @@ tags: translation_of: Web/HTML/Microdata original_slug: Web/HTML/Microdonnées --- -

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

@@ -25,7 +25,7 @@ original_slug: Web/HTML/Microdonnées

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.

-
+

Note : Pour en savoir plus sur les attributs itemtype, consultez le site http://schema.org/Thing.

diff --git a/files/fr/web/html/microformats/index.html b/files/fr/web/html/microformats/index.html index dee6a2c39f..cfa423e69c 100644 --- a/files/fr/web/html/microformats/index.html +++ b/files/fr/web/html/microformats/index.html @@ -12,7 +12,7 @@ tags: - Search translation_of: Web/HTML/microformats --- -

Les microformats (parfois abrégés μF) sont des normes utilisées pour intégrer la sémantique et les données structurées dans le HTML, et fournir une API à utiliser par les moteurs de recherche, les agrégateurs et autres outils. Ces modèles minimaux de HTML sont utilisés pour marquer des entités allant d'informations fondamentales à des informations spécifiques à un domaine, telles que des personnes, des organisations, des événements et des lieux. Les microformats utilisent des vocabulaires de soutien pour décrire les objets et des paires nom-valeur pour attribuer des valeurs à leurs propriétés. Les propriétés sont transportées dans des attributs de classe qui peuvent être ajoutés à tout élément HTML, tandis que les valeurs des données réutilisent le contenu des éléments HTML et les attributs sémantiques. Microformats2 est une mise à jour de microformats qui offre un moyen plus simple d'annoter la syntaxe structurée et les vocabulaires HTML que les approches précédentes utilisant RDFa et microdata qui nécessitent l'apprentissage de nouveaux attributs.

+

Les microformats (parfois abrégés μF) sont des normes utilisées pour intégrer la sémantique et les données structurées dans le HTML, et fournir une API à utiliser par les moteurs de recherche, les agrégateurs et autres outils. Ces modèles minimaux de HTML sont utilisés pour marquer des entités allant d'informations fondamentales à des informations spécifiques à un domaine, telles que des personnes, des organisations, des événements et des lieux. Les microformats utilisent des vocabulaires de soutien pour décrire les objets et des paires nom-valeur pour attribuer des valeurs à leurs propriétés. Les propriétés sont transportées dans des attributs de classe qui peuvent être ajoutés à tout élément HTML, tandis que les valeurs des données réutilisent le contenu des éléments HTML et les attributs sémantiques. Microformats2 est une mise à jour de microformats qui offre un moyen plus simple d'annoter la syntaxe structurée et les vocabulaires HTML que les approches précédentes utilisant RDFa et microdata qui nécessitent l'apprentissage de nouveaux attributs.

Les microformats sont pris en charge par tous les principaux moteurs de recherche. Les moteurs de recherche bénéficient grandement d'un accès direct à ces données structurées, car elles leur permettent de comprendre les informations contenues dans les pages Web et de fournir des résultats plus pertinents aux utilisateurs. En plus d'être lisible par les machines, leur format est conçu pour être facilement lu par les humains.

@@ -81,7 +81,6 @@ translation_of: Web/HTML/microformats

Exemple de h-card

-
<p class="h-card">
   <img class="u-photo" src="http://example.org/photo.png" alt="" />
   <a class="p-name u-url" href="http://example.org">Joe Bloggs</a>
@@ -90,7 +89,6 @@ translation_of: Web/HTML/microformats
   <span class="p-locality">Reykjavík</span>
   <span class="p-country-name">Iceland</span>
 </p>
-
Liste des types de lien HTML et leur signification
{{SpecName("HTML3.2", "#link", "<link>")}}ObsoleteObsolete Ajout de top, contents, index, glossary, copyright, next, previous, help et search.
{{RFC(1866, "HTML 2.0")}}ObsoleteObsolete Définition initiale.
@@ -164,7 +162,7 @@ translation_of: Web/HTML/microformats }] } -
+

Note : Le h-card imbriqué récupère des valeurs implicites pour name et url.

@@ -270,7 +268,6 @@ translation_of: Web/HTML/microformats

Example h-feed

-
<div class="h-feed">
   <h1 class="p-name">Microformats Blogs</h1>
   <article class="h-entry">
@@ -282,7 +279,6 @@ translation_of: Web/HTML/microformats
   <div class="e-content"> <p>Blah blah blah</p> </div>
   </article>
 </div>
-

Propriétés

@@ -320,7 +316,6 @@ translation_of: Web/HTML/microformats

Le microformat h-event permet de représenter des évènements.

-
<div class="h-event">
   <h1 class="p-name">Microformats Meetup</h1>
   <p>From
@@ -329,7 +324,6 @@ translation_of: Web/HTML/microformats
   at <span class="p-location">Some bar in SF</span></p>
   <p class="p-summary">Get together and discuss all things microformats-related.</p>
 </div>
-

Propriétés

diff --git a/files/fr/web/html/quirks_mode_and_standards_mode/index.html b/files/fr/web/html/quirks_mode_and_standards_mode/index.html index 375a7686fa..048f15b862 100644 --- a/files/fr/web/html/quirks_mode_and_standards_mode/index.html +++ b/files/fr/web/html/quirks_mode_and_standards_mode/index.html @@ -12,7 +12,7 @@ translation_of: Web/HTML/Quirks_Mode_and_Standards_Mode ---

{{HTMLRef}}

-

Par le passé, les pages web étaient souvent écrites sous deux versions : une destinée à Netscape Navigator et l'autre à Microsoft Internet Explorer. Lorsque les standards du Web sont apparus avec le W3C, les navigateurs ne pouvaient pas simplement commencer à les utiliser car leur mise en place rendrait inutilisable la plupart des sites web existant. Les navigateurs ont alors introduit deux modes afin de traiter les sites respectants les standards des autres sites historiques.

+

Par le passé, les pages web étaient souvent écrites sous deux versions : une destinée à Netscape Navigator et l'autre à Microsoft Internet Explorer. Lorsque les standards du Web sont apparus avec le W3C, les navigateurs ne pouvaient pas simplement commencer à les utiliser car leur mise en place rendrait inutilisable la plupart des sites web existant. Les navigateurs ont alors introduit deux modes afin de traiter les sites respectants les standards des autres sites historiques.

Il existe aujourd'hui trois modes utilisés par les moteurs de rendu des navigateurs web : le mode quirks, le mode quasi-standard et le mode standard total. En mode quirks, le moteur de mise en page émule le comportement non-standard de Navigator 4 et d'Internet Explorer 5. Ce mode permet de prendre en charge les sites web rédigés avant l'adoption généralisée des standards web. En mode standard total, le comportement du navigateur est entièrement (aux bugs près) celui décrit par les spécifications HTML et CSS. En mode quasi-standard, très peu de déviations sont implémentées.

diff --git a/files/fr/web/html/reference/index.html b/files/fr/web/html/reference/index.html index 01aa0aa9e6..9ede740ea8 100644 --- a/files/fr/web/html/reference/index.html +++ b/files/fr/web/html/reference/index.html @@ -10,7 +10,7 @@ translation_of: Web/HTML/Reference ---
{{HTMLSidebar}}
-

Cette référence HTML décrit l'ensemble des éléments et des attributs qui peuvent être utilisés en HTML, y compris les attributs universels qui peuvent s'appliquer sur tous les éléments.

+

Cette référence HTML décrit l'ensemble des éléments et des attributs qui peuvent être utilisés en HTML, y compris les attributs universels qui peuvent s'appliquer sur tous les éléments.

Référence des éléments HTML
diff --git a/files/fr/web/html/viewport_meta_tag/index.html b/files/fr/web/html/viewport_meta_tag/index.html index 764a8cb910..02d55f1aec 100644 --- a/files/fr/web/html/viewport_meta_tag/index.html +++ b/files/fr/web/html/viewport_meta_tag/index.html @@ -10,7 +10,7 @@ tags: - viewport translation_of: Web/HTML/Viewport_meta_tag --- -

Le viewport du navigateur est la zone de la fenêtre dans laquelle le contenu web peut être vu. Souvent, cette zone n'a pas la même taille que la page rendue, auquel cas le navigateur fournit des barres de défilement pour que l'utilisateur et l'utilisatrice puissent faire défiler la page et accéder à tout le contenu.

+

Le viewport du navigateur est la zone de la fenêtre dans laquelle le contenu web peut être vu. Souvent, cette zone n'a pas la même taille que la page rendue, auquel cas le navigateur fournit des barres de défilement pour que l'utilisateur et l'utilisatrice puissent faire défiler la page et accéder à tout le contenu.

Contexte

@@ -36,8 +36,8 @@ translation_of: Web/HTML/Viewport_meta_tag

La propriété initial-scale contrôle le niveau de zoom lors du premier chargement de la page. Les propriétés maximum-scale, minimum-scale et user-scalable contrôlent la manière dont les utilisateurs et utilisatrices sont autorisé·e·s à zoomer ou dézoomer la page.

-
-

L'utilisation du user-scalable=no peut causer des problèmes d'accessibilité aux utilisateurs et utilisatrices ayant des déficiences visuelles telles qu'une vision faible.

+
+

Attention : L'utilisation du user-scalable=no peut causer des problèmes d'accessibilité aux utilisateurs et utilisatrices ayant des déficiences visuelles telles qu'une vision faible.

Un pixel n'est pas un pixel

-- cgit v1.2.3-54-g00ecf