From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../fr/web/html/appliquer_des_couleurs/index.html | 506 ++++++++++++++ .../fr/web/html/attributs/autocomplete/index.html | 228 ++++++ files/fr/web/html/attributs/index.html | 767 +++++++++++++++++++++ files/fr/web/html/attributs/pattern/index.html | 161 +++++ .../html/attributs_universels/accesskey/index.html | 143 ++++ .../attributs_universels/autocapitalize/index.html | 49 ++ .../web/html/attributs_universels/class/index.html | 63 ++ .../contenteditable/index.html | 85 +++ .../attributs_universels/contextmenu/index.html | 118 ++++ .../attributs_universels/data-_star_/index.html | 83 +++ .../web/html/attributs_universels/dir/index.html | 90 +++ .../html/attributs_universels/draggable/index.html | 71 ++ .../html/attributs_universels/dropzone/index.html | 48 ++ .../html/attributs_universels/hidden/index.html | 69 ++ .../fr/web/html/attributs_universels/id/index.html | 72 ++ files/fr/web/html/attributs_universels/index.html | 196 ++++++ .../html/attributs_universels/inputmode/index.html | 65 ++ .../fr/web/html/attributs_universels/is/index.html | 67 ++ .../html/attributs_universels/itemid/index.html | 116 ++++ .../html/attributs_universels/itemprop/index.html | 436 ++++++++++++ .../html/attributs_universels/itemref/index.html | 97 +++ .../html/attributs_universels/itemscope/index.html | 228 ++++++ .../html/attributs_universels/itemtype/index.html | 113 +++ .../web/html/attributs_universels/lang/index.html | 86 +++ .../web/html/attributs_universels/slot/index.html | 49 ++ .../attributs_universels/spellcheck/index.html | 153 ++++ .../web/html/attributs_universels/style/index.html | 92 +++ .../html/attributs_universels/tabindex/index.html | 115 +++ .../web/html/attributs_universels/title/index.html | 129 ++++ .../html/attributs_universels/translate/index.html | 71 ++ .../x-ms-acceleratorkey/index.html | 45 ++ .../x-ms-format-detection/index.html | 60 ++ files/fr/web/html/contenu_editable/index.html | 36 + files/fr/web/html/element/a/index.html | 333 +++++++++ files/fr/web/html/element/abbr/index.html | 203 ++++++ files/fr/web/html/element/acronym/index.html | 77 +++ files/fr/web/html/element/address/index.html | 127 ++++ files/fr/web/html/element/applet/index.html | 147 ++++ files/fr/web/html/element/area/index.html | 184 +++++ files/fr/web/html/element/article/index.html | 151 ++++ files/fr/web/html/element/aside/index.html | 122 ++++ files/fr/web/html/element/audio/index.html | 371 ++++++++++ files/fr/web/html/element/b/index.html | 119 ++++ files/fr/web/html/element/base/index.html | 122 ++++ files/fr/web/html/element/basefont/index.html | 66 ++ files/fr/web/html/element/bdi/index.html | 199 ++++++ files/fr/web/html/element/bdo/index.html | 113 +++ files/fr/web/html/element/bgsound/index.html | 59 ++ files/fr/web/html/element/big/index.html | 67 ++ files/fr/web/html/element/blink/index.html | 82 +++ files/fr/web/html/element/blockquote/index.html | 119 ++++ files/fr/web/html/element/body/index.html | 172 +++++ files/fr/web/html/element/br/index.html | 135 ++++ files/fr/web/html/element/button/index.html | 255 +++++++ files/fr/web/html/element/canvas/index.html | 206 ++++++ files/fr/web/html/element/caption/index.html | 164 +++++ files/fr/web/html/element/center/index.html | 97 +++ files/fr/web/html/element/cite/index.html | 145 ++++ files/fr/web/html/element/code/index.html | 118 ++++ files/fr/web/html/element/col/index.html | 277 ++++++++ files/fr/web/html/element/colgroup/index.html | 276 ++++++++ files/fr/web/html/element/command/index.html | 117 ++++ files/fr/web/html/element/content/index.html | 116 ++++ files/fr/web/html/element/data/index.html | 107 +++ files/fr/web/html/element/datalist/index.html | 114 +++ files/fr/web/html/element/dd/index.html | 117 ++++ files/fr/web/html/element/del/index.html | 144 ++++ files/fr/web/html/element/details/index.html | 265 +++++++ files/fr/web/html/element/dfn/index.html | 196 ++++++ files/fr/web/html/element/dialog/index.html | 166 +++++ files/fr/web/html/element/dir/index.html | 58 ++ files/fr/web/html/element/div/index.html | 154 +++++ files/fr/web/html/element/dl/index.html | 199 ++++++ files/fr/web/html/element/dt/index.html | 123 ++++ files/fr/web/html/element/element/index.html | 73 ++ files/fr/web/html/element/em/index.html | 122 ++++ files/fr/web/html/element/embed/index.html | 134 ++++ files/fr/web/html/element/fieldset/index.html | 180 +++++ files/fr/web/html/element/figcaption/index.html | 108 +++ files/fr/web/html/element/figure/index.html | 188 +++++ files/fr/web/html/element/font/index.html | 46 ++ files/fr/web/html/element/footer/index.html | 130 ++++ files/fr/web/html/element/form/index.html | 216 ++++++ files/fr/web/html/element/frame/index.html | 68 ++ files/fr/web/html/element/frameset/index.html | 53 ++ files/fr/web/html/element/head/index.html | 125 ++++ files/fr/web/html/element/header/index.html | 128 ++++ .../web/html/element/heading_elements/index.html | 252 +++++++ files/fr/web/html/element/hgroup/index.html | 146 ++++ files/fr/web/html/element/hr/index.html | 138 ++++ files/fr/web/html/element/html/index.html | 126 ++++ files/fr/web/html/element/i/index.html | 126 ++++ files/fr/web/html/element/iframe/index.html | 274 ++++++++ files/fr/web/html/element/image/index.html | 39 ++ files/fr/web/html/element/img/index.html | 379 ++++++++++ files/fr/web/html/element/index.html | 117 ++++ files/fr/web/html/element/input/button/index.html | 348 ++++++++++ .../fr/web/html/element/input/checkbox/index.html | 344 +++++++++ files/fr/web/html/element/input/color/index.html | 215 ++++++ files/fr/web/html/element/input/date/index.html | 516 ++++++++++++++ .../html/element/input/datetime-local/index.html | 613 ++++++++++++++++ .../fr/web/html/element/input/datetime/index.html | 24 + files/fr/web/html/element/input/email/index.html | 437 ++++++++++++ files/fr/web/html/element/input/file/index.html | 502 ++++++++++++++ files/fr/web/html/element/input/hidden/index.html | 232 +++++++ files/fr/web/html/element/input/image/index.html | 399 +++++++++++ files/fr/web/html/element/input/index.html | 465 +++++++++++++ files/fr/web/html/element/input/month/index.html | 465 +++++++++++++ files/fr/web/html/element/input/number/index.html | 432 ++++++++++++ .../fr/web/html/element/input/password/index.html | 289 ++++++++ files/fr/web/html/element/input/radio/index.html | 357 ++++++++++ files/fr/web/html/element/input/range/index.html | 382 ++++++++++ files/fr/web/html/element/input/reset/index.html | 171 +++++ files/fr/web/html/element/input/search/index.html | 460 ++++++++++++ files/fr/web/html/element/input/submit/index.html | 275 ++++++++ files/fr/web/html/element/input/tel/index.html | 513 ++++++++++++++ files/fr/web/html/element/input/text/index.html | 458 ++++++++++++ files/fr/web/html/element/input/time/index.html | 517 ++++++++++++++ files/fr/web/html/element/input/url/index.html | 397 +++++++++++ files/fr/web/html/element/input/week/index.html | 389 +++++++++++ files/fr/web/html/element/ins/index.html | 145 ++++ files/fr/web/html/element/isindex/index.html | 70 ++ files/fr/web/html/element/kbd/index.html | 221 ++++++ files/fr/web/html/element/keygen/index.html | 120 ++++ files/fr/web/html/element/label/index.html | 209 ++++++ files/fr/web/html/element/legend/index.html | 114 +++ files/fr/web/html/element/li/index.html | 173 +++++ files/fr/web/html/element/link/index.html | 306 ++++++++ files/fr/web/html/element/listing/index.html | 48 ++ files/fr/web/html/element/main/index.html | 186 +++++ files/fr/web/html/element/map/index.html | 116 ++++ files/fr/web/html/element/mark/index.html | 159 +++++ files/fr/web/html/element/marquee/index.html | 127 ++++ files/fr/web/html/element/menu/index.html | 217 ++++++ files/fr/web/html/element/menuitem/index.html | 155 +++++ files/fr/web/html/element/meta/index.html | 467 +++++++++++++ files/fr/web/html/element/meter/index.html | 152 ++++ files/fr/web/html/element/multicol/index.html | 37 + files/fr/web/html/element/nav/index.html | 114 +++ files/fr/web/html/element/nextid/index.html | 59 ++ files/fr/web/html/element/nobr/index.html | 52 ++ files/fr/web/html/element/noembed/index.html | 42 ++ files/fr/web/html/element/noframes/index.html | 80 +++ files/fr/web/html/element/noscript/index.html | 102 +++ files/fr/web/html/element/object/index.html | 162 +++++ files/fr/web/html/element/ol/index.html | 237 +++++++ files/fr/web/html/element/optgroup/index.html | 128 ++++ files/fr/web/html/element/option/index.html | 120 ++++ files/fr/web/html/element/output/index.html | 115 +++ files/fr/web/html/element/p/index.html | 138 ++++ files/fr/web/html/element/param/index.html | 116 ++++ files/fr/web/html/element/picture/index.html | 126 ++++ files/fr/web/html/element/plaintext/index.html | 49 ++ files/fr/web/html/element/pre/index.html | 153 ++++ files/fr/web/html/element/progress/index.html | 118 ++++ files/fr/web/html/element/q/index.html | 118 ++++ files/fr/web/html/element/rb/index.html | 148 ++++ files/fr/web/html/element/rp/index.html | 134 ++++ files/fr/web/html/element/rt/index.html | 100 +++ files/fr/web/html/element/rtc/index.html | 126 ++++ files/fr/web/html/element/ruby/index.html | 121 ++++ files/fr/web/html/element/s/index.html | 135 ++++ files/fr/web/html/element/samp/index.html | 167 +++++ files/fr/web/html/element/script/index.html | 206 ++++++ files/fr/web/html/element/section/index.html | 123 ++++ files/fr/web/html/element/select/index.html | 217 ++++++ files/fr/web/html/element/shadow/index.html | 116 ++++ files/fr/web/html/element/slot/index.html | 130 ++++ files/fr/web/html/element/small/index.html | 114 +++ files/fr/web/html/element/source/index.html | 146 ++++ files/fr/web/html/element/spacer/index.html | 55 ++ files/fr/web/html/element/span/index.html | 109 +++ files/fr/web/html/element/strike/index.html | 82 +++ files/fr/web/html/element/strong/index.html | 130 ++++ files/fr/web/html/element/style/index.html | 205 ++++++ files/fr/web/html/element/sub/index.html | 136 ++++ files/fr/web/html/element/summary/index.html | 154 +++++ files/fr/web/html/element/sup/index.html | 156 +++++ files/fr/web/html/element/table/index.html | 456 ++++++++++++ files/fr/web/html/element/tbody/index.html | 251 +++++++ files/fr/web/html/element/td/index.html | 247 +++++++ files/fr/web/html/element/template/index.html | 165 +++++ files/fr/web/html/element/textarea/index.html | 244 +++++++ files/fr/web/html/element/tfoot/index.html | 226 ++++++ files/fr/web/html/element/th/index.html | 264 +++++++ files/fr/web/html/element/thead/index.html | 242 +++++++ files/fr/web/html/element/time/index.html | 171 +++++ files/fr/web/html/element/title/index.html | 131 ++++ files/fr/web/html/element/tr/index.html | 422 ++++++++++++ files/fr/web/html/element/track/index.html | 174 +++++ files/fr/web/html/element/tt/index.html | 151 ++++ files/fr/web/html/element/u/index.html | 206 ++++++ files/fr/web/html/element/ul/index.html | 195 ++++++ files/fr/web/html/element/var/index.html | 140 ++++ files/fr/web/html/element/video/index.html | 411 +++++++++++ files/fr/web/html/element/wbr/index.html | 113 +++ files/fr/web/html/element/xmp/index.html | 48 ++ .../fr/web/html/formats_date_heure_html/index.html | 457 ++++++++++++ .../index.html" | 117 ++++ files/fr/web/html/index.html | 98 +++ files/fr/web/html/index/index.html | 9 + files/fr/web/html/introduction_to_html5/index.html | 40 ++ "files/fr/web/html/microdonn\303\251es/index.html" | 140 ++++ files/fr/web/html/microformats/index.html | 446 ++++++++++++ .../index.html | 36 + .../html/pr\303\251charger_du_contenu/index.html" | 237 +++++++ .../html/quirks_mode_and_standards_mode/index.html | 53 ++ files/fr/web/html/reference/index.html | 30 + .../html/reglages_des_attributs_cors/index.html | 96 +++ .../index.html | 375 ++++++++++ files/fr/web/html/types_de_lien/index.html | 368 ++++++++++ .../index.html | 244 +++++++ .../web/html/utiliser_application_cache/index.html | 338 +++++++++ .../index.html" | 103 +++ .../\303\251l\303\251ments_en_bloc/index.html" | 126 ++++ .../\303\251l\303\251ments_en_ligne/index.html" | 169 +++++ 216 files changed, 39257 insertions(+) create mode 100644 files/fr/web/html/appliquer_des_couleurs/index.html create mode 100644 files/fr/web/html/attributs/autocomplete/index.html create mode 100644 files/fr/web/html/attributs/index.html create mode 100644 files/fr/web/html/attributs/pattern/index.html create mode 100644 files/fr/web/html/attributs_universels/accesskey/index.html create mode 100644 files/fr/web/html/attributs_universels/autocapitalize/index.html create mode 100644 files/fr/web/html/attributs_universels/class/index.html create mode 100644 files/fr/web/html/attributs_universels/contenteditable/index.html create mode 100644 files/fr/web/html/attributs_universels/contextmenu/index.html create mode 100644 files/fr/web/html/attributs_universels/data-_star_/index.html create mode 100644 files/fr/web/html/attributs_universels/dir/index.html create mode 100644 files/fr/web/html/attributs_universels/draggable/index.html create mode 100644 files/fr/web/html/attributs_universels/dropzone/index.html create mode 100644 files/fr/web/html/attributs_universels/hidden/index.html create mode 100644 files/fr/web/html/attributs_universels/id/index.html create mode 100644 files/fr/web/html/attributs_universels/index.html create mode 100644 files/fr/web/html/attributs_universels/inputmode/index.html create mode 100644 files/fr/web/html/attributs_universels/is/index.html create mode 100644 files/fr/web/html/attributs_universels/itemid/index.html create mode 100644 files/fr/web/html/attributs_universels/itemprop/index.html create mode 100644 files/fr/web/html/attributs_universels/itemref/index.html create mode 100644 files/fr/web/html/attributs_universels/itemscope/index.html create mode 100644 files/fr/web/html/attributs_universels/itemtype/index.html create mode 100644 files/fr/web/html/attributs_universels/lang/index.html create mode 100644 files/fr/web/html/attributs_universels/slot/index.html create mode 100644 files/fr/web/html/attributs_universels/spellcheck/index.html create mode 100644 files/fr/web/html/attributs_universels/style/index.html create mode 100644 files/fr/web/html/attributs_universels/tabindex/index.html create mode 100644 files/fr/web/html/attributs_universels/title/index.html create mode 100644 files/fr/web/html/attributs_universels/translate/index.html create mode 100644 files/fr/web/html/attributs_universels/x-ms-acceleratorkey/index.html create mode 100644 files/fr/web/html/attributs_universels/x-ms-format-detection/index.html create mode 100644 files/fr/web/html/contenu_editable/index.html create mode 100644 files/fr/web/html/element/a/index.html create mode 100644 files/fr/web/html/element/abbr/index.html create mode 100644 files/fr/web/html/element/acronym/index.html create mode 100644 files/fr/web/html/element/address/index.html create mode 100644 files/fr/web/html/element/applet/index.html create mode 100644 files/fr/web/html/element/area/index.html create mode 100644 files/fr/web/html/element/article/index.html create mode 100644 files/fr/web/html/element/aside/index.html create mode 100644 files/fr/web/html/element/audio/index.html create mode 100644 files/fr/web/html/element/b/index.html create mode 100644 files/fr/web/html/element/base/index.html create mode 100644 files/fr/web/html/element/basefont/index.html create mode 100644 files/fr/web/html/element/bdi/index.html create mode 100644 files/fr/web/html/element/bdo/index.html create mode 100644 files/fr/web/html/element/bgsound/index.html create mode 100644 files/fr/web/html/element/big/index.html create mode 100644 files/fr/web/html/element/blink/index.html create mode 100644 files/fr/web/html/element/blockquote/index.html create mode 100644 files/fr/web/html/element/body/index.html create mode 100644 files/fr/web/html/element/br/index.html create mode 100644 files/fr/web/html/element/button/index.html create mode 100644 files/fr/web/html/element/canvas/index.html create mode 100644 files/fr/web/html/element/caption/index.html create mode 100644 files/fr/web/html/element/center/index.html create mode 100644 files/fr/web/html/element/cite/index.html create mode 100644 files/fr/web/html/element/code/index.html create mode 100644 files/fr/web/html/element/col/index.html create mode 100644 files/fr/web/html/element/colgroup/index.html create mode 100644 files/fr/web/html/element/command/index.html create mode 100644 files/fr/web/html/element/content/index.html create mode 100644 files/fr/web/html/element/data/index.html create mode 100644 files/fr/web/html/element/datalist/index.html create mode 100644 files/fr/web/html/element/dd/index.html create mode 100644 files/fr/web/html/element/del/index.html create mode 100644 files/fr/web/html/element/details/index.html create mode 100644 files/fr/web/html/element/dfn/index.html create mode 100644 files/fr/web/html/element/dialog/index.html create mode 100644 files/fr/web/html/element/dir/index.html create mode 100644 files/fr/web/html/element/div/index.html create mode 100644 files/fr/web/html/element/dl/index.html create mode 100644 files/fr/web/html/element/dt/index.html create mode 100644 files/fr/web/html/element/element/index.html create mode 100644 files/fr/web/html/element/em/index.html create mode 100644 files/fr/web/html/element/embed/index.html create mode 100644 files/fr/web/html/element/fieldset/index.html create mode 100644 files/fr/web/html/element/figcaption/index.html create mode 100644 files/fr/web/html/element/figure/index.html create mode 100644 files/fr/web/html/element/font/index.html create mode 100644 files/fr/web/html/element/footer/index.html create mode 100644 files/fr/web/html/element/form/index.html create mode 100644 files/fr/web/html/element/frame/index.html create mode 100644 files/fr/web/html/element/frameset/index.html create mode 100644 files/fr/web/html/element/head/index.html create mode 100644 files/fr/web/html/element/header/index.html create mode 100644 files/fr/web/html/element/heading_elements/index.html create mode 100644 files/fr/web/html/element/hgroup/index.html create mode 100644 files/fr/web/html/element/hr/index.html create mode 100644 files/fr/web/html/element/html/index.html create mode 100644 files/fr/web/html/element/i/index.html create mode 100644 files/fr/web/html/element/iframe/index.html create mode 100644 files/fr/web/html/element/image/index.html create mode 100644 files/fr/web/html/element/img/index.html create mode 100644 files/fr/web/html/element/index.html create mode 100644 files/fr/web/html/element/input/button/index.html create mode 100644 files/fr/web/html/element/input/checkbox/index.html create mode 100644 files/fr/web/html/element/input/color/index.html create mode 100644 files/fr/web/html/element/input/date/index.html create mode 100644 files/fr/web/html/element/input/datetime-local/index.html create mode 100644 files/fr/web/html/element/input/datetime/index.html create mode 100644 files/fr/web/html/element/input/email/index.html create mode 100644 files/fr/web/html/element/input/file/index.html create mode 100644 files/fr/web/html/element/input/hidden/index.html create mode 100644 files/fr/web/html/element/input/image/index.html create mode 100644 files/fr/web/html/element/input/index.html create mode 100644 files/fr/web/html/element/input/month/index.html create mode 100644 files/fr/web/html/element/input/number/index.html create mode 100644 files/fr/web/html/element/input/password/index.html create mode 100644 files/fr/web/html/element/input/radio/index.html create mode 100644 files/fr/web/html/element/input/range/index.html create mode 100644 files/fr/web/html/element/input/reset/index.html create mode 100644 files/fr/web/html/element/input/search/index.html create mode 100644 files/fr/web/html/element/input/submit/index.html create mode 100644 files/fr/web/html/element/input/tel/index.html create mode 100644 files/fr/web/html/element/input/text/index.html create mode 100644 files/fr/web/html/element/input/time/index.html create mode 100644 files/fr/web/html/element/input/url/index.html create mode 100644 files/fr/web/html/element/input/week/index.html create mode 100644 files/fr/web/html/element/ins/index.html create mode 100644 files/fr/web/html/element/isindex/index.html create mode 100644 files/fr/web/html/element/kbd/index.html create mode 100644 files/fr/web/html/element/keygen/index.html create mode 100644 files/fr/web/html/element/label/index.html create mode 100644 files/fr/web/html/element/legend/index.html create mode 100644 files/fr/web/html/element/li/index.html create mode 100644 files/fr/web/html/element/link/index.html create mode 100644 files/fr/web/html/element/listing/index.html create mode 100644 files/fr/web/html/element/main/index.html create mode 100644 files/fr/web/html/element/map/index.html create mode 100644 files/fr/web/html/element/mark/index.html create mode 100644 files/fr/web/html/element/marquee/index.html create mode 100644 files/fr/web/html/element/menu/index.html create mode 100644 files/fr/web/html/element/menuitem/index.html create mode 100644 files/fr/web/html/element/meta/index.html create mode 100644 files/fr/web/html/element/meter/index.html create mode 100644 files/fr/web/html/element/multicol/index.html create mode 100644 files/fr/web/html/element/nav/index.html create mode 100644 files/fr/web/html/element/nextid/index.html create mode 100644 files/fr/web/html/element/nobr/index.html create mode 100644 files/fr/web/html/element/noembed/index.html create mode 100644 files/fr/web/html/element/noframes/index.html create mode 100644 files/fr/web/html/element/noscript/index.html create mode 100644 files/fr/web/html/element/object/index.html create mode 100644 files/fr/web/html/element/ol/index.html create mode 100644 files/fr/web/html/element/optgroup/index.html create mode 100644 files/fr/web/html/element/option/index.html create mode 100644 files/fr/web/html/element/output/index.html create mode 100644 files/fr/web/html/element/p/index.html create mode 100644 files/fr/web/html/element/param/index.html create mode 100644 files/fr/web/html/element/picture/index.html create mode 100644 files/fr/web/html/element/plaintext/index.html create mode 100644 files/fr/web/html/element/pre/index.html create mode 100644 files/fr/web/html/element/progress/index.html create mode 100644 files/fr/web/html/element/q/index.html create mode 100644 files/fr/web/html/element/rb/index.html create mode 100644 files/fr/web/html/element/rp/index.html create mode 100644 files/fr/web/html/element/rt/index.html create mode 100644 files/fr/web/html/element/rtc/index.html create mode 100644 files/fr/web/html/element/ruby/index.html create mode 100644 files/fr/web/html/element/s/index.html create mode 100644 files/fr/web/html/element/samp/index.html create mode 100644 files/fr/web/html/element/script/index.html create mode 100644 files/fr/web/html/element/section/index.html create mode 100644 files/fr/web/html/element/select/index.html create mode 100644 files/fr/web/html/element/shadow/index.html create mode 100644 files/fr/web/html/element/slot/index.html create mode 100644 files/fr/web/html/element/small/index.html create mode 100644 files/fr/web/html/element/source/index.html create mode 100644 files/fr/web/html/element/spacer/index.html create mode 100644 files/fr/web/html/element/span/index.html create mode 100644 files/fr/web/html/element/strike/index.html create mode 100644 files/fr/web/html/element/strong/index.html create mode 100644 files/fr/web/html/element/style/index.html create mode 100644 files/fr/web/html/element/sub/index.html create mode 100644 files/fr/web/html/element/summary/index.html create mode 100644 files/fr/web/html/element/sup/index.html create mode 100644 files/fr/web/html/element/table/index.html create mode 100644 files/fr/web/html/element/tbody/index.html create mode 100644 files/fr/web/html/element/td/index.html create mode 100644 files/fr/web/html/element/template/index.html create mode 100644 files/fr/web/html/element/textarea/index.html create mode 100644 files/fr/web/html/element/tfoot/index.html create mode 100644 files/fr/web/html/element/th/index.html create mode 100644 files/fr/web/html/element/thead/index.html create mode 100644 files/fr/web/html/element/time/index.html create mode 100644 files/fr/web/html/element/title/index.html create mode 100644 files/fr/web/html/element/tr/index.html create mode 100644 files/fr/web/html/element/track/index.html create mode 100644 files/fr/web/html/element/tt/index.html create mode 100644 files/fr/web/html/element/u/index.html create mode 100644 files/fr/web/html/element/ul/index.html create mode 100644 files/fr/web/html/element/var/index.html create mode 100644 files/fr/web/html/element/video/index.html create mode 100644 files/fr/web/html/element/wbr/index.html create mode 100644 files/fr/web/html/element/xmp/index.html create mode 100644 files/fr/web/html/formats_date_heure_html/index.html create mode 100644 "files/fr/web/html/images_avec_le_contr\303\264le_d_acc\303\250s_http/index.html" create mode 100644 files/fr/web/html/index.html create mode 100644 files/fr/web/html/index/index.html create mode 100644 files/fr/web/html/introduction_to_html5/index.html create mode 100644 "files/fr/web/html/microdonn\303\251es/index.html" create mode 100644 files/fr/web/html/microformats/index.html create mode 100644 files/fr/web/html/optimizing_your_pages_for_speculative_parsing/index.html create mode 100644 "files/fr/web/html/pr\303\251charger_du_contenu/index.html" create mode 100644 files/fr/web/html/quirks_mode_and_standards_mode/index.html create mode 100644 files/fr/web/html/reference/index.html create mode 100644 files/fr/web/html/reglages_des_attributs_cors/index.html create mode 100644 files/fr/web/html/sections_and_outlines_of_an_html5_document/index.html create mode 100644 files/fr/web/html/types_de_lien/index.html create mode 100644 files/fr/web/html/utilisation_d'audio_et_video_en_html5/index.html create mode 100644 files/fr/web/html/utiliser_application_cache/index.html create mode 100644 "files/fr/web/html/utiliser_dash_avec_les_vid\303\251os_en_html/index.html" create mode 100644 "files/fr/web/html/\303\251l\303\251ments_en_bloc/index.html" create mode 100644 "files/fr/web/html/\303\251l\303\251ments_en_ligne/index.html" (limited to 'files/fr/web/html') diff --git a/files/fr/web/html/appliquer_des_couleurs/index.html b/files/fr/web/html/appliquer_des_couleurs/index.html new file mode 100644 index 0000000000..58015bad66 --- /dev/null +++ b/files/fr/web/html/appliquer_des_couleurs/index.html @@ -0,0 +1,506 @@ +--- +title: Appliquer des couleurs sur des éléments HTML grâce à CSS +slug: Web/HTML/Appliquer_des_couleurs +tags: + - CSS + - Débutant + - Guide + - HTML +translation_of: Web/HTML/Applying_color +--- +
{{HTMLRef}}
+ +

La couleur fait partie intégrante des moyens d'expressions. Lorsqu'on écrit un site web, il est naturel d'y ajouter des couleurs dans la mise en forme. Avec CSS, il existe de nombreuses façons d'ajouter de la couleur aux éléments HTML afin d'obtenir le résultat souhaité. Cet article est une introduction détaillée aux différentes méthodes permettant d'appliquer des couleurs CSS en HTML.

+ +

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

+ +

Nous allons voir ici la liste de ce qui peut être coloré, la liste des propriétés CSS impliquées, les différentes façons de décrire une couleur, comment utiliser des couleurs dans les feuilles de style et dans les scripts. Nous verrons également comment permettre à un utilisateur de sélectionner une couleur.

+ +

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

+ +

Ce qui peut être coloré

+ +

On peut appliquer une couleur sur chaque élément HTML. Voyons plutôt quels sont les choses que l'on peut dessiner sur les éléments : le texte, la bordure, etc. Pour chacune de ces choses, nous verrons la liste des propriétés CSS qui permettent de les colorer.

+ +

De façon générale, la propriété {{cssxref("color")}} permet de définir la couleur de premier plan pour le contenu d'un élément HTML et la propriété {{cssxref("background-color")}} permete de définir la couleur utilisé pour l'arrière-plan de l'élément. Ces propriétés peuvent être utilisées sur la quasi-totalité des éléments HTML.

+ +

Texte

+ +

Lorsqu'un élément est affiché à l'écran, les propriétés suivantes déterminent la couleur du texte, celle de son arrière-plan et celle des décorations.

+ +
+
{{cssxref("color")}}
+
Cette propriété correspondra à la couleur utilisée pour dessiner le texte ainsi que ses décorations (tels que le soulignement, le surlingement, les rayures, etc.).
+
{{cssxref("background-color")}}
+
Cette propriété correspondra à la couleur utilisée en arrière-plan du texte.
+
{{cssxref("text-shadow")}}
+
Cette propriété permet d'ajouter un effet d'ombre au texte. Parmi les options de cette ombre, on a la couleur de base de l'ombre (qui participe au flou et qui est fusionnée avec l'arrière-plan selon les autres paramètres. Voir ce paragraphe pour en savoir plus.
+
{{cssxref("text-decoration-color")}}
+
Par défaut, les décorations du texte (le soulignement, les rayures, etc.) utilise la propriété color pour leurs couleurs. Il est cependant possible de passer outre cette valeur et de fournir une couleur différente avec la propriété text-decoration-color.
+
{{cssxref("text-emphasis-color")}}
+
Cette propriété correspondra à la couleur utilisée pour dessiner les symboles d'emphase utilisés à côté des caractères du texte. Ces symboles sont principalement utilisés dans des textes écrits dans des langues d'Asie orientale.
+
{{cssxref("caret-color")}}
+
Cette  propriété correspondra à la couleur utilisée pour dessiner le curseur de saisie de texte dans l'élément. Cette propriété est uniquement pertinente pour les éléments qui sont éditables (par exemple {{HTMLElement("input")}} et {{HTMLElement("textarea")}} ou les éléments dont l'attribut {{htmlattrxref("contenteditable")}} est activé).
+
+ +

Boîtes

+ +

Chaque élément est une boîte avec du contenu. Cette boîte possède un arrière-plan et une bordure, quel que soit le contenu qu'elle renferme

+ +
+
{{anch("Bordures")}}
+
Voir la section {{anch("Bordures")}} pour la liste des propriétés CSS qui peuvent être utilisées pour colorer la bordure d'une boîte.
+
{{cssxref("background-color")}}
+
Cette propriété correspondra à la couleur d'arrière-plan, utilisée dans les zones où l'élément ne possède pas de contenu au premier plan.
+
{{cssxref("column-rule-color")}}
+
Cette propriété correspondra à la couleur utilisée pour dessiner la ligne qui sépare des colonnes de texte.
+
{{cssxref("outline-color")}}
+
Cette propriété correspondra à la couleur utilisée pour le contour de l'élément. Le contour est différent de la bordure car il occupe un espace autour de la boîte et peut alors chevaucher le contenu d'une autre boîte. Le contour est généralement utilisé afin d'indiquer que l'élément a le focus et ainsi montrer quel élément reçoit les évènements de saisie.
+
+ +

Bordures

+ +

Tout élément possède une bordure dessinée autour. Une bordure simple est représentée par une ligne dessinant un rectangle autour du contenu de l'élément. Vous pouvez lire la mise en forme des bordures grâce à CSS afin d'approfondir ce sujet.

+ +

Il est possible d'utiliser la propriété raccourcie {{cssxref("border")}} qui permet de configurer l'ensemble des caractéristiques d'une bordure en une seule règle (y compris les caractéristiques qui ne sont pas liées aux couleurs comme la largeur, le style (ligne pleine, pointillés, etc.) et ainsi de suite).

+ +
+
{{cssxref("border-color")}}
+
Cette propriété correspondra à la couleur qui sera utilisée pour chacun des côtés de la bordure.
+
{{cssxref("border-left-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-top-color")}}, {{cssxref("border-bottom-color")}}
+
Ces propriétés permettent d'indiquer une couleur différente pour chaque côté de la bordure de l'élément.
+
{{cssxref("border-block-start-color")}} et {{cssxref("border-block-end-color")}}
+
Ces propriétés permettent de définir les couleurs utilisées pour les côtés de la bordure dans l'axe orthogonal au sens d'écriture. Ainsi, si le texte est écrit en français (de gauche à droite), border-block-start-color permettra de définir le côté haut de la bordure et border-block-end-color le côté bas.
+
{{cssxref("border-inline-start-color")}} et {{cssxref("border-inline-end-color")}}
+
Ces propriétés permettent de définir les couleurs utilisées pour les bordures pour les côtés sur l'axe du sens d'écriture. Les côtés impactés dépendent donc des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}} qui permettent, la plupart du temps, d'ajuster la directionnalité du texte en fonction de la langue utilisée. Si le texte est écrit de droite à gauche, border-inline-start-color correspondra à la couleur appliquée sur le côté droit.
+
+ +

Les autres méthodes pour utiliser de la couleur

+ +

CSS n'est pas la seule technologie web qui gère des couleurs. Voici les autres technologies qui permettent d'apporter de la couleur sur une page web.

+ +
+
L'API Canvas
+
Cette API permet de dessiner des graphiques matriciels en deux dimensions à l'intérieur d'un élément {{HTMLElement("canvas")}}. Vous pouvez lire le tutoriel sur l'API Canvas pour en savoir plus.
+
SVG (Scalable Vector Graphics)
+
Ce format permet de dessiner des images en indiquant des commandes pour dessiner des formes, des motifs et des lignes afin de composer une image. Les commandes SVG sont construites dans un fichier XML et peuvent être embarquées dans une page web grâce à un élément {{HTMLElement("img")}}.
+
WebGL
+
L'API Web Graphics Library est une API basée sur OpenGL ES qui permet de dessiner en deux ou trois dimensions sur le Web. Voir Apprendre WebGL pour les graphismes en 2D et 3D afin d'en savoir plus.
+
+ +

Comment décrire une couleur

+ +

Afin de représente une couleur en CSS, il est nécessaire de trouver une méthode pour « traduire » le concept analogique de couleur dans un format numérique qu'un ordinateur pourra utiliser. Pour ce faire, on décompose la couleur en différentes composantes. Cela peut être la part de chaque couleur primaire ou bien la teinte et la luminosité de la couleur. Bref, il existe différentes façons de décrire une couleur en CSS.

+ +

Pour des informations plus détaillées sur chaque type de valeur, vous pouvez consulter la page de la référence CSS à propos de l'unité {{cssxref("<color>")}}.

+ +

Mots-clés

+ +

Un ensemble standard de noms de couleurs a été défini et il est possible d'utiliser l'un de ces mots-clés plutôt qu'une représentation numérique s'il existe un mot-clé pour la valeur qu'on souhaite utiliser. Les mots-clés désignant les couleurs regroupent les couleurs primaires et secondaires (tels quered pour rouge, blue pour bleu, orange), les tons de gris (allant de black pour noir à  white pour blanc et incluant des niveaux tels que darkgray (gris foncé) et lightgrey (gris clair)). D'autres couleurs sont également disponibles avec un mot-clé comme lightseagreen, cornflowerblue ou rebeccapurple.

+ +

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

+ +

Valeurs RGB

+ +

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

+ +

La notation hexadécimale

+ +

On peut utiliser une chaîne de caractères avec des chiffres hexadécimaux afin de représenter chacune des composantes (rouge, verte, bleue). On peut également décrire une quatrième composante pour l'opacité. Chaque composante est représentée par un nombre entre 0 et 255 (ce qui correspond à 0x00 et 0xFF en notation hexadécimale) ou par un nombre entre 0 et 15 (ce qui correspond à 0x0 et 0xF en notation hexadécimale). Toutes les composantes doivent être indiquées avec le même nombre de chiffres. Si c'est la notation à un seul chiffre qui est utilisée, la couleur finale sera calculée avec chaque composante doublée, autrement dit, "#D" sera converti en "#DD".

+ +

Lorsqu'on utilise une chaîne de caractères avec un code hexadécimale, la chaîne de caractères commence toujours par le caractère "#". Le reste de la chaîne correspond aux chiffres hexadécimaux. L'utilisation des majuscules ou minuscules n'a pas d'importance.

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

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

+ +

La notation fonctionnelle RGB

+ +

La notation fonctionnelle RGB permet, comme les chaînes de caractères hexadécimales, de représenter des couleurs avec leurs composantes rouge, verte, bleue et éventuellement avec une composante alpha pour l'opacité. Toutefois, au lieu d'utiliser une chaîne de caractères, on utilise ici la fonction CSS {{cssxref("Type_color","rgb()","#rgb()")}}. Cette fonction prend trois arguments pour chacune des composantes (dans cet ordre) rouge, verte et bleue. Un quatrième paramètre, optionnel, permet d'indiquer la valeur du canal alpha.

+ +

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

+ +
+
red, green et blue
+
Chaque composante doit être un entier (type {{cssxref("<integer>")}}) compris entre 0 et 255 (inclus) ou un pourcentage (type {{cssxref("<percentage>")}}) compris entre 0% et 100%.
+
alpha
+
Le canal alpha est un nombre entre 0.0 (la couleur est alors totalement transparente) et 1.0 (complètement opaque). On peut également utiliser un pourcentage où 0% correspondra à la valeur 0.0 et 100% correspondra à la valeur 1.0.
+
+ +

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

+ +

La notation fonctionnelle HSL

+ +

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

+ +
+
HSL color cylinder +
Figure 1. Le cylindre HSL. Hue (la teinte) définit la couleur sur un axe radial qui parcourt les couleurs du spectre visible. La saturation est un pourcentage de la teinte entre un gris total et la couleur de la teinte vive. Enfin, la luminosité permet d'avoir des couleurs plus sombres (noir pour une luminosité nulle ou blanc pour une luminosité maximale). Cette image a été créée par SharkD sur Wikipédia et est distribuée avec la licence CC BY-SA 3.0.
+
+
+ +

La valeur de la teinte (H) est un angle qui début au rouge, parcourt le jaune, le vert, le cyan, le bleu et le magenta (avant de revenir à rouge avec un angle de 360°). Cette valeur identifie la teinte de base. La valeur utilisée est de type {{cssxref("<angle>")}} et on peut utiliser différentes unités disponibles en CSS comme les degrés (deg), les radians (rad), les grades (grad) ou les tours (turn).

+ +

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

+ +

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

+ +
    +
  1. On commence avec une peinture de base qui possède l'intensité la plus forte pour une couleur donnée (par exemple, le bleu le plus intense qui puisse être affiché) : c'est la teinte (hue) (H). En CSS, c'est un angle qui détermine la couleur parmi une roue de couleurs.
    2. +
  2. Ensuite, on choisit une peinture avec un niveau de gris qui la force de la couleur. Est-ce qu'on veut qu'elle soit claire ou sombre, voire complètement noire ? C'est la luminosité (L). En CSS, c'est un pourcentage, 0% indiquant une couleur noire et 100% une couleur blanche.
    3. +
  3. Enfin, avec ces deux peintures, on décide de la proportion de chacune pour le mélange final : c'est la saturation (S). Plus cette valeur est élevée, plus on utilise la couleur de base, plus cette valeur est faible et plus on utilise la peinture grise.
    4. +
+ +

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

+ +

Voici quelques exemples utilisant la notation HSL :

+ +
+ + +

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

+
+ +
+

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

+
+ +

Utiliser les couleurs

+ +

Maintenant qu'on connaît les différentes propriétés CSS, comment décrire une couleur et dans quel format, on peut assembler cela pour utiliser les couleurs dans un document web. Comme on l'a vu précédemment, de nombreuses choses peuvent être colorées. Pour ce faire, on peut utiliser deux mécanismes : une « feuille de style » et du code JavaScript pour modifier et ajouter des couleurs dynamiquement.

+ +

Indiquer les couleurs via une feuille de style

+ +

La façon la plus simple (et la plus fréquemment utilisée) pour appliquer des couleurs est d'utiliser une feuille de style CSS qui sera traitée par le navigateur au moment d'afficher les éléments à l'écran. Par la suite, nous verrons plusieurs exemples (sans pour autant exploiter toutes ces propriétés).

+ +

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

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

HTML

+ +

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

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

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

+ +

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

+ +

CSS

+ +

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

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

Le sélecteur de classe .conteneur permet d'appliquer des styles à l'élément {{HTMLElement("div")}} qui enveloppe le reste du contenu. Pour ce style, on indique une largeur avec la propriété {{cssxref("width")}} et une hauteur avec la propriété {{cssxref("height")}}, on définit aussi une marge et une zone de remplissage avec {{cssxref("margin")}} et {{cssxref("padding")}}.

+ +

La règle la plus intéressante est celle où on manipule la propriété {{cssxref("border")}} afin de dessiner une bordure sur l'extérieur de l'élément. Cette bordure sera une ligne pleine de 6 pixels avec la couleur mediumturquoise.

+ +

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

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

Pour résumer, les styles ciblés par .boite indiquent la taille de la boîte, la configuration de la police de caractères utilisée, centrent le contenu des boîtes grâce aux boîtes flexibles CSS. Pour cela, on utilise le mode d'affichage flex avec {{cssxref("display", "display: flex")}} et on paramètre les propriétés {{cssxref("justify-content")}} et {{cssxref("align-items")}} avec la valeur center. Ensuite, on crée une classe pour chacune des deux boîtes dont chacune définit les propriétés qui diffèrent entre ces éléments.

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

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

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

Enfin, la classe .boiteDroite décrit les propriétés de la boîte dessinée à droite. On configure cette boîte afin qu'elle flotte à droite de la boîte précédente. Ensuite, on paramètre les couleurs suivantes :

+ + + +

Permettre à l'utilisateur de choisir une couleur

+ +

Il existe différentes situations où l'on peut/doit permettre à l'utilisateur de sélectionner une couleur. Il peut s'agir d'une interface personnalisable, d'une application de dessin, d'une application d'édition où on peut choisir la couleur du texte, etc. Bien que, par le passé, il fut nécessaire d'implémenter son propre sélecteur de couleur, HTML fournit désormais au navigateurs une façon homogène de le faire avec un élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type", "input")}} vaut "color".

+ +

Lorsqu'on choisit une couleur via un élément <input>, la valeur stockée dans le document et envoyée via le formulaire est représentée avec une chaîne de caractères hexadécimale.

+ +

Exemple : sélectionner une couleur

+ +

Prenons un exemple simple où l'utilisateur choisit une couleur qui est immédiatement appliquée sur la bordure de l'exemple. Une fois la couleur finale sélectionnée, la valeur du sélecteur de couleur est affichée.

+ +

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

+ +
+

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

+
+ +

HTML

+ +

Voici le fragment HTML qui permet de créer une boîte qui contient un sélecteur de couleur avec un libellé associé (l'élément {{HTMLElement("label")}}) ainsi qu'un paragraphe ({{HTMLElement("p")}}) vide dans lequel nous placerons plus tard du texte avec JavaScript.

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

CSS

+ +

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

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

JavaScript

+ +

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

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

L'évènement {{event("input")}} est envoyé chaque fois que la valeur de l'élément change, c'est-à-dire chaque fois que l'utilisateur ajuste la couleur via le sélecteur. Pour chacun de ces évènements, on modifie la couleur de la bordure afin qu'elle corresponde à celle du sélecteur.

+ +

L'évènement {{event("change")}} est reçu lors de la finalisation du choix de la couleur via le sélecteur. Lorsque cet évènement suvient, on modifie le contenu de l'élément <p> (le paragraphe) qui possède l'identifiant "output" en y ajoutant une chaîne de caractères qui décrit la couleur choisie.

+ +

L'art de choisir une couleur

+ +

Choisir les bonnes couleurs lors de la conception d'un site web peut s'avérer plus compliqué qu'il n'y paraît. Un mauvais choix de couleur peut nuire à l'attractivité du site voire empêcher les utilisateurs de consulter le contenu si le contraste est trop faible ou les couleurs trop criardes. Dans le pire des cas, le site peut être inutilisable à cause des couleurs choisies pour les personnes qui ont des handicaps visuels.

+ +

Trouver les bonnes couleurs

+ +

Il existe des outils qui permettent de faciliter la sélection des couleurs. Bien qu'ils ne remplacent pas un bon designer, ils permettent au moins de commencer.

+ +

La couleur de base

+ +

La première étape consiste à choisir la couleur de base. C'est la couleur principale qui participe à la définition du site web ou du sujet dont il est question. Par exemple, on associe la couleur jaune à La Poste, le bleu au ciel ou à quelque chose de marin, etc. Voici quelques idées (parmi les nombreuses qui existent) pour choisir une couleur de base :

+ + + +

Une fois la couleur de base sélectionnéee, vous pouvez utiliser certaines extensions de navigateur pour « prélever » des couleurs existantes sur le web. Le site web ColorZilla, par exemple, propose une extension (Chrome / Firefox) qui permet d'utiliser une pipette pour identifier les couleurs utilisées à un endroit d'une page web. Cette extension permet également de mesurer la couleur moyenne des pixels d'une zone donnée.

+ +
+

Note : On peut s'apercevoir qu'un site contient plusieurs couleurs très proches les unes des autres, utiliser une « moyenne » permet alors de récupérer le ton principal sous la forme d'une seule couleur.

+
+ +

Agrémenter la palette

+ +

Une fois la couleur de base sélectionnée et identifiée, il existe de nombreux outils qui permettent de construire une palette de couleurs qui pourront être utilisées avec cette couleur de base. Ces outils utilisent la théorie des couleurs pour déterminer les couleurs appropriées. Certains de ces outils permettent également de voir les couleurs « filtrées » afin de visualiser ce qu'une personne daltonienne verrait.

+ +

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

+ + + +

Lorsque vous concevez votre palette de couleurs, gardez à l'esprit qu'en plus des couleurs générées par ces outils, il faudra vraisemblablement prévoir des couleurs neutres (telles que le blanc ou un ton de blanc, du noir ou un ton de noir et certaines nuances de gris).

+ +
+

Note : On utilise généralement le moins de couleurs possibles afin de garder une cohérence. En utilisant des couleurs afin d'accentuer certains éléments plutôt que d'en utiliser pour tous les éléments de la page, on rend le contenu plus facile à lire et à parcourir. De plus, les couleurs ont ainsi plus d'impact

+
+ +

Quelques ressources sur la théorie des couleurs

+ +

Décrire l'ensemble des notions liées à la théorie des couleurs dépasse le sujet de cet article. Toutefois, il existe de nombreux articles traitant de ce sujet ainsi que des cours pour apprendre ces notions. Voici quelques unes des ressources disponibles en ligne à propos de la théorie des couleurs :

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

Les couleurs et l'accessibilité

+ +

Une couleur peut poser différents problèmes d'accessibilité. Une couleur mal choisie pourra empêcher certaines personnes d'utiliser l'interface du site, ce qui peut se traduire par une baisse de fréquentation, une mauvaise image (au sens propre comme au figuré), etc.

+ +

Pour commencer, n'hésitez pas à vous renseigner sur le daltonisme et les différents types de daltonisme : confusion rouge/vert, confusion sur l'ensemble des couleurs.

+ +
+

Note : Une règle d'or consiste à ne jamais utiliser une couleur comme seule façon d'indiquer une information. Si, par exemple, vous souhaitez indiquer une réussite ou un échec en changeant uniquement la couleur d'un symbole (un drapeau par exemple), les utilisateurs souffrant de daltonismes et avec une confusion rouge/vert ne pourront pas lire cette information. Il est sans doute préférable d'utiliser du texte et de la couleur afin que tout le monde puisse être en mesure de comprendre ce qui a changé.

+
+ +

Pour plus d'informations sur le daltonisme, vous pouvez consulter les articles suivants (en anglais, n'hésitez pas à éditer la page pour ajouter des ressources francophones) :

+ + + +

Un exemple de conception de palette

+ +

Considérons un exemple rapide pour construire une palette. Imaginons qu'on souhaite construire un site web pour un jeu dont l'action se déroule sur Mars. On peut rechercher des images relatives à Mars sur Google ou sur un autre moteur de recherche. On utilise un sélecteur de couleur pour sélectionner un échantillon de couleur.

+ +

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

+ +

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

+ +

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

+ +

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

+ +

After entering base color

+ +

On obtient alors une palette monochromatique, basée sur la couleur sélectionnée. Si vous avez besoin d'un nuancier autour de cette couleur, la palette monochromatique pourra sans doute vous aider. Mais ici, on souhaite plutôt avoir une couleur qui ressorte, pour cela on clique sur le case "add complementary"sous le menu permettant de sélectionner le type de palette (et qui vaut "Monochromatic"). Paletteon calcule alors une couleur complémentaire appropriée et indique le code de cette nouvelle couleur dans le coin inférieur droit : #508D7C.

+ +

Now with complementary colors included.

+ +

Si vous n'êtes pas satisfait du résultat obtenu, vous pouvez faire varier le schéma de composition. Ainsi, on pourra utiliser le thème "Triad" qui fournira le résultat suivant :

+ +

Triad color scheme selected

+ +

On obtient alors un bleu gris en haut à droite. En cliquant dessus, on obtient le code #556E8D. On pourra utiliser cette couleur afin d'accentuer certains éléments tels que les titres ou les onglets mis en évidence ou bien d'autres indicateurs sur le site :

+ +

Triad color scheme selected

+ +

Maintenant, nous disposons d'une couleur de base, d'une couleur d'accentuation ainsi que de variations autour de celles-ci au cas où nous aurions besoin de dégradés.  On peut exporter les couleurs sous différents formats afin de les utiliser.

+ +

Avec ces couleurs, il faudra probablement sélectionner quelques couleurs neutres. Une pratique courante consiste à trouver le contraste suffisant pour que le texte soit pleinement lisible mais sans que ce contraste soit trop fort. Il est facile de s'égarer dans l'une ou l'autre des directions : n'hésitez pas à demander des retours sur les couleurs que vous avez sélectionnées. Si le contraste est trop faible, le texte sera illisible et on ne pourra pas le distinger de l'arrière-plan, cela pourra également poser des problèmes d'accessibilité. Si le contraste est trop élevé, le site pourra paraître criard.

+ +

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

+ +

Le rendu d'un document peut être différent selon que ce dernier est affiché sur un écran ou sur du papier. De plus, sur papier, on peut chercher à économiser l'encre superflu. Lorsqu'un utilisateur imprime une page, il n'est par exemple peut-être pas nécessaire d'imprimer les arrière-plans. Par défaut, la plupart des navigateurs retire les images d'arrière-plan à l'impression.

+ +

Si les couleurs d'arrière-plan ou les images sont importantes pour l'ensemble du document, on peut utiliser la propriété {{cssxref("color-adjust")}} afin d'indiquer au navigateur qu'il ne faut pas modifier l'apparence du contenu.

+ +

Par défaut, la propriété color-adjust vaut economy et indique au navigateur qu'il peut modifier l'apparence afin d'optimiser la lisibilité du contenu et d'économiser de l'encre selon le support d'imprimerie.

+ +

color-adjust peut être paramétré avec la valeur exact afin d'indiquer au navigateur qu'un ou plusieurs éléments doivent être conservés tels quels afin que l'ensemble du document ne soit pas détérioré.

+ +
+

Note : Il n'est pas garanti que le navigateur respecte exactement la feuille de style utilisée avec color-adjust: exact. En effet, si le navigateur fournit une option à l'utilisateur pour ne pas imprimer les arrière-plans, ce réglage prendra le pas sur la feuille de style.

+
+ +

Voir aussi

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

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

+ +

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

+ +

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

+ +

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

+ +
+

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

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

Valeurs

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

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

+ +
+

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

+
+ +

Les niveaux administratifs pour les adresses

+ +

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

+ +

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

+ +

Disposition du formulaire

+ +

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

+ +

Variations

+ +

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

+ +

États-Unis

+ +

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

+ +

432 Anywhere St
+ Exampleville CA 95555

+ +

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

+ +

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

+ +

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

+ +

Royaume-Uni

+ +

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

+ +

Chine

+ +

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

+ +

Spécifications

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

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

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

Chaque élément HTML peut avoir un ou plusieurs attributs. Ces attributs sont des valeurs supplémentaires qui permettent de configurer les éléments ou d'adapter leur comportement.

+ +

Liste des attributs

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

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

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

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

+ +

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

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

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

+ +
+

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

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

Cet attribut indique la largeur de la bordure.

+ +
+

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

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

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

+ +
+

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

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

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

+ +
+

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

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

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

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

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

+ +

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

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

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

+ +
+

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

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

Attribut de contenu ou attribut IDL ?

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

Attributs booléens

+ +

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

+ +

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

+ + + +

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

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

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

+ +

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

+ +

Voir aussi

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

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

+ +

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

+ +
+

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

+ +

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

+ +
+

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

+
+
+ +

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

+ +

Utilisabilité

+ +

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

+ +

Validation des contraintes

+ +

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

+ +

Exemples

+ +

Avec le fragment de code HTML suivant :

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

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

+ +

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

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

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

+
+ +

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

+ +

Indiquer un motif

+ +

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

+ +

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

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

Résultat

+ +

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

+ +

Accessibilité

+ +

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

+ +

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

+ +

Spécifications

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

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

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

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

+ +
+

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

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

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

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

Accessibilité

+ +

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

+ + + +

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

+ + + +

Spécifications

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

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

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

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

+ + + +

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

+ +

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

+ +

Spécifications

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

Compatibilité des navigateurs

+ + + +

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

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

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

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

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

+ +

Spécifications

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

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

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

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

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

Les valeurs autorisées pour cet attribut sont :

+ + + +

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

+ +

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

+ +

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

+ +

Spécifications

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

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

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

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

+
+ +

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

+ +

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

+ +
+

Exemples

+ +

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

+ +

HTML

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

JavaScript

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

Résultat

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

Spécifications

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

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

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

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

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

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

+ + + +

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

+ +

Utilisation

+ +

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

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

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

+ +

Spécifications

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

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

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

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

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

Les valeurs autorisées pour cet attribut sont :

+ + + +
+

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

+ + +
+ +

Spécifications

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

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

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

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

+ + + +

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

+ +

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

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

En revanche, on pourra correctement utiliser :

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

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

+ +

Spécifications

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

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

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

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

+ + + +

Spécifications

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

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

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

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

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

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

+ +

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

+ +

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

+ +
+

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

+
+ + + +

Spécifications

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

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

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

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

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

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

+
+ +

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

+ +
+

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

+
+ +

Spécifications

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

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

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

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

+ +

Les attributs universels peuvent être définis sur tous les éléments HTML, y compris pour les éléments non définis dans le standard. Autrement dit, les éléments non-standards doivent pouvoir accepter ces attributs. Cela permettra au navigateur de les gérer selon certains des aspects de la spécification. Par exemple, pour un navigateur conforme, un élément <toto hidden>...</toto> sera masqué bien que <toto> ne soit pas un élément HTML valide.

+ +

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

+ + + +

Liste des attributs universels

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

Spécifications

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

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

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

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

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

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

+ +

Spécifications

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

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

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

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

+ +

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

+ +

Exemples

+ +

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

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

Spécifications

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

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

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

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

+ +

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

+ +

Syntaxe

+ +

Syntaxe formelle

+ +
itemid="URN"
+ +

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

+ +

Exemple

+ +

HTML

+ +

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

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

Données structurées correspondantes

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

Spécifications

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

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

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

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

+ +

Un exemple simple

+ +

HTML

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

Structure de données

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

Propriétés

+ +

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

+ +

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

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

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

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

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

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

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

+ +

Un exemple de mesure

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

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

+ +

Une propriété de date

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

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

+ +

Imbrication de propriétés

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

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

+ +

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

+ +

Séparation des objets

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

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

+ +

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

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

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

+ +

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

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

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

+ +

Équivalence sémantique

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

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

+ +

Les noms et les valeurs

+ +

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

+ +

Exemples de noms

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

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

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

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

+ +

Valeurs

+ +

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

+ + + +

Sinon :

+ + + +

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

+ +

Ordre des noms

+ +

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

+ +

Exemples équivalents

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

Syntaxe

+ +

Syntaxe formelle

+ +
itemprop = "name", value
+ +

Exemples

+ +

HTML

+ +

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

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

Spécifications

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

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

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

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

+ +

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

+ +

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

+ +

Syntaxe

+ +

Syntaxe formelle

+ +
itemref
+ +

Exemple

+ +

HTML

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

Structure de données correspondante

+ +

Au format JSON-LD :

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

Spécifications

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

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

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

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

+ +

Les identifiants rattachés à itemscope

+ +

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

+ +

Syntaxe

+ +

Syntaxe formelle

+ +
itemscope
+ +

Exemple

+ +

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

+ +

HTML

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

Structure des données

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

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

+
+ +

Spécifications

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

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

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

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +
+

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

+
+ +

Syntaxe

+ +

Syntaxe formelle

+ +
itemtype = URL
+ +

Exemple simple

+ +

HTML

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

Structure de données

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

Spécifications

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

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

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

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

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

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

+ +

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

+ +

Syntaxe des balises de langue

+ +

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

+ +

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

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

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

+ +

Spécifications

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

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

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

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

+ +

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

+ +

Spécifications

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

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

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

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

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

Les valeurs autorisées pour cet attribut sont :

+ + + +

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

+ +

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

+ +
<label spellcheck>Label exemple</label>
+ +

sera invalide, la formulation correcte étant :

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

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

+ +

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

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

Exemples

+ +

HTML

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

Résultat

+ +

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

+ +

Spécifications

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

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

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

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

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

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

+
+ +

Exemples

+ +

HTML

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

CSS

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

Résultat

+ +

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

+ +

Spécifications

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

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

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

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

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

Cet attribut peut prendre l'une des valeurs suivantes :

+ + + +

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

+ +
+

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

+
+ +

Exemples

+ +

HTML

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

Résultat

+ +

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

+ +

Accessibilité

+ +

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

+ +

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

+ + + +

Spécifications

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

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

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

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

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

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

+ + + +

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

+ +

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

+ +

Titre sur plusieurs lignes

+ +

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

+ +

HTML

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

Résultat

+ +

{{EmbedLiveSample("Titre_sur_plusieurs_lignes")}}

+ +

Héritage de title

+ +

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

+ +

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

+ +

HTML

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

Résultat

+ +

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

+ +

Accessibilité

+ +

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

+ + + +

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

+ + + +

Spécifications

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

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

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

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

+ + + +
+

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

+
+ +

Exemples

+ +

HTML

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

Résultat

+ +

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

+ +

Spécifications

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

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

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

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

+ +
+

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

+
+ +

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

+ +

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

+ + + +

Syntaxe

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

Valeur

+ +

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

+ + + +

Voir aussi

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

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

+ +
+

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

+
+ +

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

+ +

Syntaxe

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

Valeurs

+ +

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

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

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

+
+ +

Exemples

+ +

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

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

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

+ +

Voir aussi

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

Introduction

+

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

+

Compatibilité

+

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

+ +

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

+

Comment ça marche ?

+

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

+

Exemples

+

Un exemple simple :

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

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

+

Voir aussi

+

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

+
+ {{ languages({ "ja": "ja/HTML/Content_Editable", "zh-cn": "zh-cn/HTML/Content_Editable" }) }}
diff --git a/files/fr/web/html/element/a/index.html b/files/fr/web/html/element/a/index.html new file mode 100644 index 0000000000..e9ea38803c --- /dev/null +++ b/files/fr/web/html/element/a/index.html @@ -0,0 +1,333 @@ +--- +title: ' : l''élément d''ancre' +slug: Web/HTML/Element/a +tags: + - Contenu + - Element + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/a +--- +
{{HTMLRef}}
+ +

L'élément <a> (pour ancre ou anchor en anglais) définit un hyperlien vers un autre endroit de la même page ou vers une autre page sur le Web.

+ +
{{EmbedInteractiveExample("pages/tabbed/a.html")}}
+ + + +

Attributs

+ +

Cet élément inclut les attributs universels.

+ +
+
{{htmlattrdef("download")}} {{HTMLVersionInline(5)}}
+
Cet attribut indique au navigateur de télécharger l'objet vers lequel pointe l'URL plutôt que d'y diriger l'utilisateur. Cela ouvre une invite pour enregistrer la cible du lien comme un fichier local. Si l'attribut a une valeur, le navigateur doit l'interpréter comme le nom de fichier par défaut pour l'invite qui s'ouvre (l'utilisateur pourra bien entendu modifier le nom de fichier avant de cliquer sur « Enregistrer »). Il n'y a aucune limitation sur les valeurs autorisées, mais il faut se souvenir ici que la plupart des systèmes de fichiers ont des limitations concernant la ponctuation dans les noms de fichier, et que les navigateurs procéderont sûrement à des ajustements en conséquence (par exemple, les barres obliques et barres obliques inversées seront sans doute converties en tirets bas). +
+

Note :

+ +
    +
  • Cet attribut ne fonctionne que pour les URL partageant la même origine mais jamais pour les URI utilisant le schéma file:.
    • +
  • Bien que les URL HTTPS doivent provenir de la même origine, les URL blob:, data: et filesystem: peuvent être utilisées afin de simplifier le téléchargement de contenus générés par un programme JavaScript (ex. : une image générée automatiquement).
    • +
  • Si l'en-tête HTTP {{HTTPHeader("Content-Disposition")}} est présent et fournit un nom de fichier différent que celui fourni par l'attribut alors ce sera l'en-tête HTTP qui aura la priorité sur l'attribut.
    • +
  • Si l'attribut est présent et que Content-Disposition: vaut inline, Firefox donnera la priorité à l'en-tête, Chrome donnera la priorité à l'attribut.
    • +
  • Cet attribut est uniquement respecté pour les liens des ressources de la même origine.
    • +
+
+
+
{{htmlattrdef("href")}}
+
L'attribut href indique la cible du lien sous la forme d'une URL ou d'un fragment d'URL. Un fragment d'URL est un nom précédé par un dièse (#), qui indique une cible interne au document (un ID). Les URL ne se limitent pas au documents web sur HTTP. Les URL peuvent utiliser n'importe quel protocole supporté par le navigateur. Par exemple, file, ftp et mailto fonctionnent avec la plupart des agents-utilisateur. +
+

Note : Le fragment spécial href="#top" ou le fragment vide href="#" peuvent être utilisés pour créer un lien de retour vers le haut de la page ; par exemple <a href="#top">Retourner en haut</a>. Ce comportement est défini par HTML5.

+
+
+
{{htmlattrdef("hreflang")}}
+
Cet attribut indique la langue de la ressource liée. Il est purement indicatif. Les valeurs permises pour HTML5 sont définies par BCP47 et pour HTML 4 par la RFC1766. Cet attribut ne doit être utilisé que si l'attribut {{htmlattrxref("href", "a")}} est présent.
+
{{htmlattrdef("ping")}}
+
Contient une liste d'URL séparées par des espaces vers lesquelles sont envoyées des requêtes {{HTTPMethod("POST")}} avec le corps PING lorsque l'utilisateur suit le lien. Cet attribut est généralement utilisé pour tracer un utilisateur.
+
{{htmlattrdef("referrerpolicy")}} {{experimental_inline}}
+
Une chaîne de caractères qui indique le référent à utiliser lors de la récupération de la ressource : +
    +
  • 'no-referrer' indique que l'en-tête Referer ne sera pas envoyé.
    • +
  • 'no-referrer-when-downgrade' indique que l'en-tête Referer ne sera pas envoyé lorsque l'utilisateur navigue depuis une origine sans TLS/HTTPS. C'est le comportement par défaut de l'agent utilisateur si aucune autre politique n'est spécifiée.
    • +
  • 'origin' indique que le référent sera l'origine de la page (ce qui correspond au schéma utilisé, à l'hôte et au port).
    • +
  • 'origin-when-cross-origin' indique que lorsqu'on navigue sur d'autres origines, seule l'origine du document sera envoyée. Lorsqu'on navigue sur la même origine, le chemin de la ressource sera inclus dans le référent.
    • +
  • 'strict-origin-when-cross-origin' fonctionne comme origin-when-cross-origin mais les en-têtes d'origine sont envoyés via HTTPS plutôt que par HTTP.
    • +
  • '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.
    • +
+
+
{{htmlattrdef("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.
+
{{htmlattrdef("target")}}
+
Cet attribut indique où afficher la ressource liée. Il s'agit du nom, ou du mot-clé, d'un contexte de navigation (par exemple, un onglet, une fenêtre, ou une {{HTMLElement("iframe")}}). Les mots-clés suivants ont un sens particulier : +
    +
  • _self : charge la réponse dans le contexte de navigation courant. Il s'agit de la valeur par défaut quand l'attribut n'est pas renseigné.
    • +
  • _blank : charge la réponse dans un nouveau contexte de navigation. +
      +
    • Ajouter un lien vers une autre page en utilisant target="_blank" exécutera la page dans le même processus que la page courante. Si la nouvelle page consomme de nombreuses ressources, les performances de la page courante pourront en pâtir. Pour éviter ce problème, on pourra utiliser rel="noopener".
      • +
    +
    • +
  • _parent : charge la réponse dans le {{HTMLElement("frameset")}} HTML4 parent de la frame courante ou dans le contexte de navigation HTML5 parent relativement au contexte courant). S'il n'y a pas de parent, l'option se comporte de la même façon que _self.
    • +
  • _top : En HTML4 : charge la réponse dans la fenêtre originale, annulant toutes les autres frames. En HTML5 : charge la réponse dans le contexte de navigation de plus haut niveau (c'est à dire, le contexte de navigation parent par rapport à l'actuel, et qui n'a lui-même aucun parent). S'il n'y a pas de parent, l'option se comporte de la même façon que _self.
    • +
+ +

Lorsque target est utilisé, on pourra ajouter rel="noopener noreferrer" afin d'éviter la fuite de données via l'API Window.opener.

+
+
{{htmlattrdef("type")}}
+
Cet attribut indique le type de média de la cible du lien, sous la forme d'un type MIME. Généralement, il s'agit d'une information purement indicative.
+
+ +

Attributs obsolètes

+ +
+
{{htmlattrdef("charset")}} {{Obsolete_Inline("HTML5")}}
+
Cet attribut définit le jeu de caractères de la ressource liée. La valeur est une liste de jeux de caractères (défini dans RFC 2045) séparés par des espaces ou des virgules. La valeur par défaut est ISO-8859-1. +
+

Note d'utilisation : Cet attribut est obsolète en HTML5, et ne doit plus être utilisé par les auteurs. Pour obtenir le même effet, utiliser l'entête HTTP Content-Type sur la ressource liée.

+
+
+
{{htmlattrdef("coords")}} {{HTMLVersionInline(4)}} seulement, {{Obsolete_Inline("HTML5")}}
+
Pour utiliser avec des formes géométriques. Cet attribut utilise une liste de nombres séparés par des virgules, définissant les coordonnées de l'objet sur la page.
+
{{htmlattrdef("name")}} {{HTMLVersionInline(4)}} seulement, {{Obsolete_Inline("HTML5")}}
+
Cet attribut est utilisé pour définir une ancre cible au sein de la page. La valeur de name est similaire à la valeur de l'attribut global id, et doit être un identifiant alphanumérique unique au document. Sous la spécification HTML 4.01, id et name peuvent être tous les deux utilisés sur un élément <a> s'ils ont des valeurs identiques. +
+

Note d'utilisation : Cet attribut est obsolète en HTML5, il faut utiliser l'attribut global id à la place.

+
+
+
{{htmlattrdef("rev")}} {{HTMLVersionInline(4)}} seulement, {{Obsolete_Inline("HTML5")}}
+
L'attribut indique un lien inversé : la relation inverse de l'attribut rel. Il est utile pour indiquer l'origine d'un objet, tel que l'auteur d'un document. +
+

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("shape")}} {{HTMLVersionInline(4)}} seulement, {{Obsolete_Inline("HTML5")}}
+
Cet attribut est utilisé pour définir une zone cliquable pour un lien associé à une image, pour créer une image map. Les valeurs pour cet attribut sont circle, default, polygon, et rect. Le format de l'attribut coords dépend de la valeur de shape. Pour circle, la valeur est x,y,r où x et y sont les coordonnées en pixel pour le centre du cercle et r est le rayon du cercle en pixel. Pour rect, l'attribut coords doit être x,y,w,h. Les valeurs x,y définissent le coin supérieur gauche du rectangle, pendant w et h définissent respectivement la largeur et la hauteur. Une valeur polygon pour shape nécessite les valeurs x1,y1,x2,y2,... pour coords. Chaque paire de x,y définissent un point du polygone, avec les points successifs joints par des lignes droites, et le dernier point joint au premier. La valeur default pour shape nécessite que la totalité de la zone, habituellement une image, soit utilisée. +
Note : Il est préférable d'utiliser l'attribut {{htmlattrxref("usemap","img")}} de l'élément {{HTMLElement("img")}} et l'élément {{HTMLElement("map")}} associé, pour définir des zones d'actions, à la place de l'attribut shape.
+
+
+ +

Exemples

+ +

Hyperlien vers une ressource externe

+ +
<a href="https://www.mozilla.com/">
+Lien externe
+</a>
+ +

Résultat

+ +

{{EmbedLiveSample("Hyperlien_vers_une_ressource_externe")}}

+ +

Créer une image cliquable

+ +

Ce petit exemple utilise une image qui redirige vers la page d'accueil de MDN. La page d'accueil s'ouvrira dans un nouveau contexte de navigation, c'est une nouvelle page ou un nouvel onglet.

+ +
+

Dans le cas d'une image cliquable, le texte alternatif doit contenir l'objet du lien, tel qu'indiqué dans l'exemple 9 des WCAG 1.1.1 relatives aux alternatives textuelles.

+
+ +
<a href="https://developer.mozilla.org/fr/" target="_blank">
+ <img src="https://mdn.mozillademos.org/files/6851/mdn_logo.png" alt="Documentation du web - MDN" />
+</a>
+ +

Résultat

+ +

{{EmbedLiveSample("Exemple_Cr%C3%A9er_une_image_cliquable", "320", "64")}}

+ +

Créer un lien vers un numéro de téléphone

+ +

Lorsqu'on utilise des appareils connectés à des téléphones, il peut être pratique d'utiliser des liens avec le schéma tel: :

+ +
<a href="tel:+615701564">+6 15 70 15 64</a>
+
+ +

Pour plus de détails sur ce schéma, se référer à la RFC {{RFC(3966)}}.

+ +

Créer un lien pour écrire un e-mail

+ +

Il est courant de créer des boutons ou des hyperliens qui vont ouvrir l'application de messagerie de l'utilisateur pour lui permettre d'envoyer un nouveau message. Cela est possible en utilisant un lien mailto. Voici un exemple simple:

+ +
<a href="mailto:personne@mozilla.org">Envoyer un courriel à personne</a>
+ +

Cela produit comme résultat, un lien qui ressemble à ceci: Envoyer un courriel à personne.
+ Pour plus de détails sur le schéma URL de mailto, comme comment inclure un sujet, un corps de texte, ou tout autre contenu prédéterminé, voir les liens Emails ou {{RFC(6068)}}.

+ +

Utiliser l'attribut download pour sauvegarder un canvas en PNG

+ +

Si on souhaite permettre à un utilisateur de télécharger un canvas HTML comme une image, on peut créer un lien avec un attribut download et lui associer les données liées au {{HTMLElement('canvas')}} pour construire une URL de fichier.

+ +
var link = document.createElement('a');
+link.textContent = 'Télécharger une image';
+link.addEventListener('click', function(ev) {
+    link.href = canvas.toDataURL();
+    link.download = "maToile.png";
+}, false);
+document.body.appendChild(link);
+ +

Vous pouvez voir le résultat de ce code ici https://jsfiddle.net/codepo8/V6ufG/2/

+ +

Notes

+ + + +

Sécurité et vie privée

+ +

Bien que l'élément <a> soit la plupart du temps utilisé innocemment, les informations qu'il peut transporter peuvent avoir des effets indésirables sur la sécurité et sur la vie privée des utilisateurs. Pour plus d'informations, voir cet article sur l'en-tête Referer et les problématiques qu'il soulève.

+ +

L'utilisation de target="_blank" sans rel="noreferrer" et sans rel="noopener" peut rendre un site vulnérable à certaines formes d'attaques utilisant l'API window.opener (voir ce billet).

+ +

Accessibilité

+ +

Évènements onclick

+ +

Les ancres sont souvent détournées avec l'évènement onclick afin de créer des pseudo-boutons avec l'attribut href qui vaut "#" ou "javascript:void(0)" pour empêcher le rafraîchissement de la page.

+ +

Ces valeurs produisent des résultats inadéquats lorsqu'on copie/déplace des liens, qu'on ouvre des liens dans de nouveaux onglets ou fenêtres, qu'on ajoute des marque-pages ou lorsque le JavaScript est encore en train d'être téléchargé. De plus, la sémantique exposée par le document, utilisée par les outils d'assistance, est incorrecte.

+ +

Dans ces cas, on privilégiera plutôt l'utilisation d'un bouton {{HTMLElement("button")}}. De façon générale, une ancre ne doit être utilisée que pour naviguer vers une URL correcte.

+ +

Liens externes, liens vers des ressources non-HTML

+ +

Les liens qui ouvrent un nouvel onglet ou une nouvelle fenêtre grâce à target="_blank", ainsi que le liens qui ouvrent des fichiers devraient fournir une indication sur ce qui se produira lorsqu'on cliquera sur ces liens.

+ +

Les personnes qui utilisent des outils d'assistance à la navigation comme des lecteurs d'écran et/ou qui souffrent de troubles de la vision, cognitifs peuvent être confuses lorsqu'un nouvel onglet, fichier ou une nouvelle fenêtre s'ouvre de façon inattendue. Les anciennes versions des lecteurs d'écran peuvent également ne pas annoncer ce comportement.

+ +

Lien vers un nouvel onglet ou une nouvelle fenêtre

+ +
<a target="_blank" href="https://www.wikipedia.org/">Wikipédia (s'ouvre dans une nouvelle fenêtre)</a>
+
+ +

Lien vers une ressource non-HTML

+ +
<a target="_blank" href="2017-rapport-annuel.ppt">Rapport annuel 2017 (PowerPoint)</a>
+
+ +

Si une icône est utilisée en lieu et place du texte pour indiquer ce comportement, on s'assurera qu'elle contient bien une description alternative.

+ + + +

Skip links - liens pour l'accès rapide au contenu

+ +

Un skip link (aussi appelé skipnav en anglais) est un élément a qui est placé le plus près possible de l'élément {{HTMLElement("body")}} et qui renvoie au début du contenu principal de la page.

+ +

Ce lien permet alors de passer plus facilement le contenu qui se répète sur l'ensemble des pages (l'en-tête et la barre de navigation par exemple).

+ +

Les skip links sont particulièrement utiles pour les personnes qui naviguent à l'aide d'outils d'assistance (commande vocale, stylets buccal ou frontal) pour lesquels devoir passer par des liens répétés peut freiner la lecture du document.

+ + + +

Dimensionnement et proximité

+ +

Dimensionnement - taille

+ +

Les éléments interactifs tels que les liens doivent fournir une surface suffisamment grande pour qu'il soit facile de les activer. Cela facilitera la tâche à une variété de personnes : celles qui ont des problèmes moteur, celles qui utilisent des dispositifs de pointage peu précis (doigt ou stylet). La taille interactive minimale recommandée est de 44x44 pixels CSS.

+ + + +

Proximité

+ +

Lorsque plusieurs contenus interactifs (y compris les ancres) sont placés les uns à côté des autres, il est nécessaire de les espacer suffisamment pour minimiser le risque d'activer le mauvais contenu lors de la navigation.

+ +

Un tel espacement peut être obtenu grâce à la propriété CSS {{cssxref("margin")}}.

+ + + +

Résumé technique

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Catégories de contenuContenu de flux, contenu phrasé, contenu interactif, contenu tangible.
Contenu autoriséContenu transparent qui contient du contenu de flux (mais pas de contenu interactif) ou du contenu phrasé.
Omission de balises{{no_tag_omission}}
Parents autorisésTout élément qui accepte du contenu phrasé ou tout élément qui accepte du contenu de flux. (un élément <a> ne peut pas avoir d'élément parent qui soit également un élément <a>).
Rôles ARIA autorisés{{ARIARole("button")}}, {{ARIARole("checkbox")}}, {{ARIARole("menuitem")}}, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("menuitemradio")}}, {{ARIARole("option")}}, {{ARIARole("radio")}}, {{ARIARole("switch")}}, {{ARIARole("tab")}}, {{ARIARole("treeitem")}}
Interface DOM{{domxref("HTMLAnchorElement")}}
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrer attribute')}}{{Spec2('Referrer Policy')}}Ajout de l'attribut referrer.
{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-a-element', '<a>')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-a-element', '<a>')}}{{Spec2('HTML5 W3C')}}
{{SpecName('HTML4.01', 'struct/links.html#h-12.2', '<a>')}}{{Spec2('HTML4.01')}}
+ +
+

Note : HTML 3.2. définit uniquement les attributs name, href, rel, rev et title.

+
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ + diff --git a/files/fr/web/html/element/abbr/index.html b/files/fr/web/html/element/abbr/index.html new file mode 100644 index 0000000000..920bcc3a7e --- /dev/null +++ b/files/fr/web/html/element/abbr/index.html @@ -0,0 +1,203 @@ +--- +title: +slug: Web/HTML/Element/abbr +tags: + - Element + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/abbr +--- +
{{HTMLRef}}
+ +

L'élément <abbr> représente une abréviation ou un acronyme et permet, de façon optionnelle, d'en fournir une description complète. S'il est présent, l'attribut {{htmlattrxref("title")}} doit contenir cette même description complète et rien d'autre.

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

Note : Voir cet article introductif pour la mise en forme du texte en général.

+
+ +

Attributs

+ +

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

+ +

On notera que l'attribut {{htmlattrdef("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évations identiques qui suivent.

+ +

Notes d'utilisation

+ +

Cas d'usage généraux

+ +

Il n'est pas obligatoire d'utiliser <abbr> pour toutes les abrévations d'un document mais voici quelques cas où cet élément s'avère pertinent :

+ + + +

Grammaire

+ +

Lorsqu'il est présent, le nombre (grammatical) du texte de l'attribut title devrait correspondre à celui du contenu de l'élément abbr. C'est également le cas dans les langues avec plus de deux genres grammaticaux (par exemple, l'Arabe, en plus des catégories pour le singulier et le pluriel, possède également une catégorie double).

+ +

Mise en forme par défaut

+ +

Le but de cet élément est purement explicatif. Tous les navigateurs l'affichent en ligne ({{cssxref('display')}}: inline) par défaut mais le reste de la mise en forme par défaut peut varier d'un navigateur à l'autre :

+ + + +

Exemples

+ +

Baliser une abrévation pour marquer la sémantique

+ +

On peut baliser une abrévation sans fournir de description ou de définition, il suffit d'utiliser <abbr> sans attribut.

+ +

HTML

+ +
<p>Nous allons voir le <abbr>HTML</abbr> qui sert à construire des pages web.</p>
+ +

Résultat

+ +

{{EmbedLiveSample("Baliser_une_abréviation_pour_marquer_la_sémantique")}}

+ +

Mettre en forme des abréviations

+ +

CSS peut être utilisé pour appliquer une mise en forme particulière sur les abréviations.

+ +

HTML

+ +
<p>Avec <abbr>CSS</abbr>, on peut mettre en forme les éléments.</p>
+ +

CSS

+ +
abbr {
+  font-variant: all-small-caps;
+}
+ +

Résultat

+ +

{{EmbedLiveSample("Mettre_en_forme_des_abréviations")}}

+ +

Fournir une description

+ +

On peut ajouter un attribut {{htmlattrxref("title")}} afin de fournir une description de l'abréviation ou de l'acronyme.

+ +

HTML

+ +
<p>Et là je lui ai répondu <abbr title="Laugh Out Loud">LOL</abbr>.</p>
+ +

Résultat

+ +

{{EmbedLiveSample("Fournir_une_description")}}

+ +

Définir une abréviation

+ +

Il est possible d'utiliser l'élément <abbr> avec {{HTMLElement("dfn")}} afin de formellement définir une abréviation.

+ +

HTML

+ +
<p><dfn id="html"><abbr title="HyperText Markup Language">HTML</abbr>
+</dfn> est un langage de balise qui permet de créer la structure et d'organiser
+la sémantique d'une page web.</p>
+
+<p>Une <dfn id="spec">Spécification</dfn>
+(<abbr title="Specification">spec</abbr>) est un document qui décrit, de façon
+détaillée comme une technologie ou une API fonctionne et comment l'utiliser.</p>
+ +

Résultat

+ +

{{EmbedLiveSample("Définir_une_abréviation", 600, 120)}}

+ +

Accessibilité

+ +

C'est une bonne pratique que d'épeler l'acronyme ou l'abréviation lorsqu'elle est utilisée pour la première fois. Cela permet au lecteur de mieux comprendre le terme, notamment si celui-ci est technique ou appartient à un jargon spécifique.

+ +

Exemple

+ +
<p>JavaScript Object Notation (<abbr>JSON</abbr>) est un format léger d'échange de données.</p>
+
+ +

Cela peut servir aux personnes qui découvrent ces concepts pour la première fois ou pour les personnes souffrant de troubles cognitifs.

+ +

Résumé technique

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Catégories de contenuContenu de flux, contenu phrasé, contenu tangible.
Contenu autoriséContenu phrasé.
Omission de balises{{no_tag_omission}}
Parents autorisésTout élément acceptant du contenu phrasé.
Rôles ARIA autorisésTous les rôles sont autorisés.
Interface DOM{{domxref("HTMLElement")}}
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'semantics.html#the-abbr-element', '<abbr>')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-abbr-element', '<abbr>')}}{{Spec2('HTML5 W3C')}} 
{{SpecName('HTML4.01', 'struct/text.html#edef-ABBR', '<abbr>')}}{{Spec2('HTML4.01')}} 
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ + diff --git a/files/fr/web/html/element/acronym/index.html b/files/fr/web/html/element/acronym/index.html new file mode 100644 index 0000000000..cd1d71fa0a --- /dev/null +++ b/files/fr/web/html/element/acronym/index.html @@ -0,0 +1,77 @@ +--- +title: +slug: Web/HTML/Element/acronym +tags: + - Element + - HTML + - Obsolete + - Reference + - Web +translation_of: Web/HTML/Element/acronym +--- +
{{obsolete_header}}{{HTMLRef}}
+ +

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 d'utilisation : Cet élément n'existe plus en HTML5 et ne devrait plus être utilisé. Les développeurs web devraient utiliser l'élément {{HTMLElement("abbr")}} à la place.
+ +

Attributs

+ +

Cet élément n'a pas d'autres attributs que les attributs universels, communs à tous les éléments.

+ +

Interface DOM

+ +

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

Exemple

+ +
<p>
+   Le <acronym title="World Wide Web" lang="en">WWW</acronym>
+   n'est qu'une facette d'Internet.
+</p>
+
+ +

Style par défaut

+ +

Bien que le but de cette balise ne soit simplement qu'un avantage pratique pour l'auteur, son style par défaut varie selon les navigateurs :

+ +
    +
  • Certains navigateurs comme Internet Explorer lui attribuent le même style qu'un élément {{HTMLElement("span")}}.
    • +
  • Opera, Firefox, et quelques autres ajoutent une ligne pointillée sous le contenu de l'élément.
    • +
  • Quelques navigateurs ajoutent une ligne pointillée en dessous et mettent le contenu en petites majuscules. Pour éviter ce comportement, il est possible d'ajouter {{cssxref('font-variant')}}: none à la feuille de style CSS.
    • +
+ +

Il est donc fortement recommandé que les développeurs web ne s'attendent pas à un comportement uniforme concernant ce style par défaut.

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('HTML4.01', 'struct/text.html#edef-ACRONYM', '<acronym>')}}{{Spec2('HTML4.01')}} 
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ +
    +
  • L'élément HTML {{HTMLElement("abbr")}}
    • +
diff --git a/files/fr/web/html/element/address/index.html b/files/fr/web/html/element/address/index.html new file mode 100644 index 0000000000..2ac2eaa488 --- /dev/null +++ b/files/fr/web/html/element/address/index.html @@ -0,0 +1,127 @@ +--- +title: '
: l''élément d''adresse de contact' +slug: Web/HTML/Element/address +tags: + - Element + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/address +--- +
{{HTMLRef}}
+ +

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

L'information de contact fournie via cet élément peut prendre n'importe quelle forme pertinente : ce peut être une adresse physique, une URL, une adresse électronique, un numéro de téléphone, des coordonnées géographiques, etc. Ces informations devraient contenir le nom de la personne, du groupe de personne ou de l'organisation à laquelle le contact fait référence.

+ +

Cet élément peut être employé dans un élément {{HTMLElement("article")}} ou faire référence à l'ancêtre {{HTMLElement("body")}} ; dans ce dernier cas, cela s'applique au document entier.

+ + +

Attributs

+ +

Cet élément n'a pas d'autres attributs que les attributs universels, communs à tous les éléments.

+ +

Notes d'utilisation

+ +
    +
  • Pour représenter une adresse arbitraire, qui n'est pas relative à l'information de contact, on utilisera l'élément {{HTMLElement("p")}} plutôt que l'élément <address>.
    • +
  • Cet élément ne doit pas contenir plus d'informations que l'information de contact, par exemple une date de publication (qui appartiendrait à l'élément {{HTMLElement("time")}}).
    • +
  • Typiquement un élément <address> peut être placé dans l'élément  {{HTMLElement("footer")}} de la section courante, s'il y en a une.
    • +
+ +

Exemples

+ +

HTML

+ +
<address>
+  Vous pouvez contacter l'auteur à l'adresse <a href="http://www.undomaine.com/contact">www.undomaine.com</a>.<br>
+  Si vous relevez quelques bogues que ce soient, merci de contacter <a href="mailto:webmaster@somedomain.com">le webmaster</a>.<br>
+  Vous pouvez aussi venir nous voir :<br>
+  Mozilla Foundation<br>
+  1981 Landings Drive<br>
+  Building K<br>
+  Mountain View, CA 94043-0801<br>
+  USA
+</address>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemple")}}

+ +

Bien que le rendu par défaut du texte de l'élément <address> utilise le même style par défaut que les éléments {{HTMLElement("i")}} ou {{HTMLElement("em")}}, il est plus approprié d'utiliser cet élément lorsque l'on traite d'informations de contact, étant donné qu'il apporte des informations sémantiques supplémentaires.

+

Résumé technique

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Catégories de contenuContenu de flux, contenu tangible.
Contenu autoriséContenu de flux, mais sans élément <address> inclus, sans contenu de titre  ({{HTMLElement("hgroup")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}), sans contenu de section ({{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}}), et sans {{HTMLElement("header")}} ou élément {{HTMLElement("footer")}}.
Omission de balises{{no_tag_omission}}
Parents autorisésTout élément qui accepte un contenu de flux mais pas d'éléments <address>.
Rôles ARIA autorisésAucun.
Interface DOM{{domxref("HTMLElement")}}. Avant Gecko 2.0 (Firefox 4), Gecko implémentait cet élément en utilisant l'interface {{domxref("HTMLSpanElement")}}.
+

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', 'semantics.html#the-address-element', '<address>')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'sections.html#the-address-element', '<address>')}}{{Spec2('HTML5 W3C')}} 
{{SpecName('HTML4.01', 'struct/global.html#h-7.5.6', '<address>')}}{{Spec2('HTML4.01')}} 
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ +
    +
  • Les autres éléments liés aux sections d'un document : {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("footer")}}, {{HTMLElement("section")}}, {{HTMLElement("header")}} ;
    • +
  • Sections et titres d'un document HTML5
    • +
diff --git a/files/fr/web/html/element/applet/index.html b/files/fr/web/html/element/applet/index.html new file mode 100644 index 0000000000..2515ada501 --- /dev/null +++ b/files/fr/web/html/element/applet/index.html @@ -0,0 +1,147 @@ +--- +title: ' : l''élément d''applet Java embarqué' +slug: Web/HTML/Element/applet +tags: + - Element + - HTML + - Obsolete + - Reference + - Web +translation_of: Web/HTML/Element/applet +--- +
{{HTMLRef}}{{obsolete_header}}
+ +
+

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 HTML <applet>, pour les applets, définit l'intégration d'une applet Java. Cet élément est désormais déprécié en faveur de {{HTMLElement("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.

+ +

Attributs

+ +

Cet élément peut utiliser les attributs universels.

+ +
+
{{htmlattrdef("align")}}
+
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.
+
{{htmlattrdef("alt")}}
+
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.
+
{{htmlattrdef("archive")}}
+
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.
+
{{htmlattrdef("code")}}
+
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.
+
{{htmlattrdef("codebase")}}
+
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.
+
{{htmlattrdef("datafld")}}
+
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 {{HTMLElement("param")}} envoyés à l'applet Java.
+
{{htmlattrdef("datasrc")}}
+
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ément {{HTMLElement("param")}} associés à l'applet.
+
{{htmlattrdef("height")}}
+
Cet attribut définit la hauteur dont l'applet à besoin, en pixels.
+
{{htmlattrdef("hspace")}}
+
Cet attribut définit l'espace horizontal supplémentaire qui doit être réservé à côté de l'applet, en pixels.
+
{{htmlattrdef("mayscript")}}
+
Cet attribut, concerné par l'implémentation effectuée dans Netscape, permet l'accès à l'applet par les scripts contenus dans le document.
+
{{htmlattrdef("name")}}
+
Cet attribut donne un nom à l'applet afin qu'elle soit possiblement identifiée par d'autres ressources, notamment les scripts.
+
{{htmlattrdef("object")}}
+
Cet attribut définit l'URL d'une représentation de l'applet.
+
{{htmlattrdef("src")}}
+
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.
+
{{htmlattrdef("vspace")}}
+
Cet attribut définit l'espace supplémentaire qui doit être réservé en haut et en bas de l'applet, en pixels.
+
{{htmlattrdef("width")}}
+
Cet attribut définit la largeur, en pixels, dont l'applet a besoin
+
+ +

Exemples

+ +

HTML

+ +
<applet code="game.class" align="left" archive="game.zip" height="250" width="350">
+  <param name="difficulte" value="facile">
+  <b>Vous avez besoin de Java pour activer cela.</b>
+</applet>
+
+ +

Résultat

+ +

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

+ +

Résumé technique

+ + + + + + + + + + + + + + + + + + + + + + + + +
Catégories de contenuContenu de flux, contenu phrasé, contenu intégré, contenu interactif, contenu tangible.
Contenu autoriséZéro ou plusieurs {{HTMLElement("param")}} suivi d'un contenu transparent.
Omission de baliseAucune. La balise de début et la balise de fin sont obligatoires.
Parents autorisésTout élément qui accepte du contenu intégré.
Interface DOM{{DOMxRef("HTMLAppletElement")}}
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("HTML WHATWG", "obsolete.html#applet", "<applet>")}}{{Spec2("HTML WHATWG")}}Retrait de l'élément, seule une note rappelle qu'il a existé.
{{SpecName("HTML5.2", "obsolete.html#the-applet-element", "<applet>")}}{{Spec2("HTML5.2")}} 
{{SpecName("HTML5.1", "obsolete.html#the-applet-element", "<applet>")}}{{Spec2("HTML5.1")}} 
{{SpecName("HTML5 W3C", "obsolete.html#the-applet-element", "<applet>")}}{{Spec2("HTML5 W3C")}}L'élément est rendu obsolète.
{{SpecName("HTML4.01", "struct/objects.html#h-13.4", "<applet>")}}{{Spec2("HTML4.01")}}Élément déprécié et remplacé par {{HTMLElement("object")}}
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Notes

+ +

La spécification W3C désapprouve l'utilisation de l'élément <applet> et conseille l'utilisation de l'élément {{HTMLElement("object")}}. Pour HTML 4.01 cet élément est déprécié et est devenu entièrement obsolète sous HTML5.

diff --git a/files/fr/web/html/element/area/index.html b/files/fr/web/html/element/area/index.html new file mode 100644 index 0000000000..bf162fa477 --- /dev/null +++ b/files/fr/web/html/element/area/index.html @@ -0,0 +1,184 @@ +--- +title: +slug: Web/HTML/Element/area +tags: + - Element + - HTML + - Multimedia + - Reference + - Web +translation_of: Web/HTML/Element/area +--- +
{{HTMLRef}}
+ +

L'élément HTML <area> définit une zone particulière d'une image et peut lui associer un {{Glossary("Hyperlink", "lien hypertexte")}}. Cet élément n'est utilisé qu'au sein d'un élément {{HTMLElement("map")}}.

+ +
{{EmbedInteractiveExample("pages/tabbed/area.html", "tabbed-taller")}}
+ + + +

Attributs

+ +

Cet élément inclut les attributs universels.

+ +
+
{{htmlattrdef("alt")}}
+
Un texte alternatif que les navigateurs doivent afficher afin de remplacer l'image si elle ne peut pas être affichée. Le texte doit être phrasé de façon à offrir les mêmes choix qui auraient été offerts par l'image. En HTML4, cet attribut est obligatoire mais peut prendre la valeur "" (la chaîne de caractères vide). En HTML5, cet attribut est requis uniquement si l'attribut href est utilisé.
+
{{htmlattrdef("coords")}}
+
A set of values specifying the coordinates of the hot-spot region. The number and meaning of the values depend upon the value specified for the shape attribute.
+
+
    +
  • rect or rectangle: the coords value is two x,y pairs: left, top, right, bottom.
    • +
  • circle: the value is x,y,r where x,y is a pair specifying the center of the circle and r is a value for the radius.
    • +
  • poly or polygon: the value is a set of x,y pairs for each point in the polygon: x1,y1,x2,y2,x3,y3, and so on.
    • +
+ In HTML4, the values are numbers of pixels or percentages, if a percent sign (%) is appended; in HTML5, the values are numbers of CSS pixels.
+
{{htmlattrdef("href")}}
+
Le lien hypertexte porté par la zone d'intérêt. Ce doit être une URL valide. En HTML4, l'un des deux attributs href ou nohref doit être présent. En HTML5, cet attribut peut être absent et dans ce cas, la zone d'intérêt ne représente pas de lien hypertexte.
+
{{htmlattrdef("hreflang")}} {{HTMLVersionInline("5")}}
+
Indique la langue de la ressource liée. Les valeurs que peut prendre cet attribut sont définis dans le BCP47. Cet attribut ne doit être utilisé que si l'attribut href est présent.
+
{{htmlattrdef("ping")}} {{HTMLVersionInline("5")}}
+
Cet attribut contient une liste d'URL séparées par des espaces vers lesquelles sont envoyées des requêtes HTTP {{HTTPMethod("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.
+
{{htmlattrdef("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é.
    • +
  • 'no-referrer-when-downgrade' indique que l'en-tête Referer ne sera pas envoyé lorsque l'utilisateur navigue depuis une origine sans TLS/HTTPS. C'est le comportement par défaut de l'agent utilisateur si aucune autre politique n'est spécifiée.
    • +
  • 'origin' indique que le référent sera l'origine de la page (ce qui correspond au schéma utilisé, à l'hôte et au port).
    • +
  • 'origin-when-cross-origin' indique que lorsqu'on navigue sur d'autres origines, seule l'origine du document sera envoyée. Lorsqu'on navigue sur la même origine, le chemin de la ressource sera inclus dans le référent.
    • +
  • '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.
    • +
+
+
{{htmlattrdef("rel")}} {{HTMLVersionInline("5")}}
+
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 ne doit être utilisé seulement si l'attribut href est présent.
+
{{htmlattrdef("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. Ces valeurs sont {{Non-standard_inline}}.
+
{{htmlattrdef("target")}}
+
Cet attribut précise où afficher la ressource liée. En HTML4 c'est le nom (ou un mot-clé) d'un cadre. En HTML5, c'est le nom (ou le mot-clé) d'un contexte de navigation (un onglet, une fenêtre, ou une frame inline). Les mots-clés peuvent avoir les significations suivantes : +
    +
  • _self : Charge la réponse dans le même cadre HTML4 ou dans le même contexte de navigation HTML5. Cette valeur est la valeur par défaut si l'attribut n'est pas précisé.
    • +
  • _blank : Charge la réponse dans une nouvelle fenêtre (sans nom) avec HTML4 ou dans un nouveau contenu de navigation HTML5 (sans nom).
    • +
  • _parent : Charge la réponse dans le même cadre que le parent  du cadre de l'élément actuel en HTML4. En HTML5 on a la même situation avec le contexte de navigation. S'il n'y pas de parent, cette valeur aura le même rôle que la valeur _self.
    • +
  • _top : En HTML4 la réponse sera chargée dans toute la fenêtre d'origine annulant ainsi les autres cadres. En HTML5 la réponse sera chargée dans le contexte de navigation avec le plus haut niveau (autrement dit l'ancêtre du contexte actuel qui n'a pas de parent). Si le contexte actuel n'a pas de parent alors cette valeur aura le même effet que la valeur _self.
    • +
+ +

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

+
+
+ +

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

+ +
+
{{htmlattrdef("accesskey")}} {{HTMLVersionInline("4")}} seulement, {{obsolete_inline("5.0")}}
+
Définit un raccourci clavier pour cet élément. Appuyer sur la touche ALT (ou une autre touche similaire) et sur la touche définie par l'attribut sélectionnera l'action associée à cette séquence. Il est conseillé de ne pas utiliser les combinaisons de touches déjà utilisées par les navigateurs. Cet attribut est global depuis HTML5.
+
{{htmlattrdef("name")}} {{HTMLVersionInline("4")}} seulement, {{obsolete_inline("5.0")}}
+
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.
+
{{htmlattrdef("nohref")}} {{HTMLVersionInline("4")}} seulement, {{obsolete_inline("5.0")}}
+
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 d'utilisation : Cet attribut est obsolète en HTML5, ne pas utiliser l'attribut href suffit.

+
+
+
{{htmlattrdef("tabindex")}} {{HTMLVersionInline("4")}} seulement, {{obsolete_inline("5.0")}}
+
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.
+
{{htmlattrdef("type")}}{{obsolete_inline("5.1")}}
+
Cet attribut définit le type MIME de la cible du lien. Cet attribut a généralement une fonction indicative. Cependant les prochains navigateurs pourraient ajouter une petite icône pour les types multimédia. Voir http://www.w3.org/TR/html4/references.html#ref-MIMETYPES pour une liste complète des types MIME reconnus. Cet attribut ne doit être utilisé que si l'attribut href est présent.
+
+ +

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" alt="Page d'accueil MDN" />
+  <area shape="default" />
+</map>
+<img usemap="#exemple-map-1" src="https://mdn.mozillademos.org/files/14546/map.png">
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples","450","230")}}

+ +

Résumé technique

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Catégories de contenuContenu de flux, contenu phrasé
Contenu autoriséAucun, cet élément est un {{Glossary("élément vide ", "élément vide")}}.
Omission de balisesCet élément doit avoir une balise de fin et ne pas avoir de balise de début.
Parents autorisésTout élément acceptant du contenu phrasé. L'élément <area> doit avoir un élément {{HTMLElement("map")}} parmi ses ancêtres mais ce dernier n'a pas besoin d'être son parent direct.
Rôles ARIA autorisésAucun.
Interface DOM{{domxref("HTMLAreaElement")}}
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrerpolicy attribute')}}{{Spec2('Referrer Policy')}}Ajout de l'attribut referrerpolicy.
{{SpecName('HTML WHATWG', 'the-map-element.html#the-area-element', '<area>')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'embedded-content-0.html#the-area-element', '<area>')}}{{Spec2('HTML5 W3C')}} 
{{SpecName('HTML4.01', 'struct/objects.html#h-13.6.1', '<area>')}}{{Spec2('HTML4.01')}} 
+ +

Notes

+ +
    +
  • Dans les spécifications HTML des versions 3.2, 4.0, et 5, la balise de fermeture </area> est proscrite.
    • +
  • La spécification XHTML 1.0 demande l'utilisation d'une barre oblique avant le chevron fermant : <area />.
    • +
  • Les attributs id, class et style ont la même signification que ceux qui avaient été définis dans la spécification HTML 4. Cependant cette spécification n'avait été définie que par Microsoft et Netscape.
    • +
  • Les navigateurs Netscape de niveau 1 n'arrivent pas à interpréter l'attribut target si celui-ci fait référence à des éléments frames.
    • +
  • HTML 3.2 définit seulement les attributs alt, coords, href, nohref et shape.
    • +
+ +

Compatibilité des navigateurs

+ + + +

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

diff --git a/files/fr/web/html/element/article/index.html b/files/fr/web/html/element/article/index.html new file mode 100644 index 0000000000..fde2eb92dc --- /dev/null +++ b/files/fr/web/html/element/article/index.html @@ -0,0 +1,151 @@ +--- +title: '
: l''élément de contenu d''un article' +slug: Web/HTML/Element/article +tags: + - Element + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/article +--- +
{{HTMLRef}}
+ +

L'élément HTML <article> représente du contenu autonome dans un document, une page, une application, ou un site. Ceci peut être un message sur un forum, un article de journal ou de magazine, une parution sur un blog, un commentaire d'utilisateur, un widget ou gadget interactif, ou tout autre élément de contenu indépendant. Ce contenu est prévu pour être distribué ou réutilisé indépendamment (par exemple dans un flux de syndication).

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

Un document donné peut tout à fait avoir plusieurs articles. On peut par exemple avoir un blog qui affiche le texte de chaque billet au fur et à mesure que le lecteur fait défiler le contenu. Chaque billet serait un élément <article> et les sections de ces billets des éléments {{HTMLElement("section")}}.

+ +

Attributs

+ +

Cet élément n'a pas d'autres attributs que les attributs universels, communs à tous les éléments.

+ +

Notes

+ +
    +
  • Chaque <article> autonome, qui n'est pas imbriqué dans un autre élément <article>, devrait être identifié typiquement, en incluant un élément d'en-tête <header> qui comprendrait lui-même un élément de titre <h1> à <h6>.
    • +
  • Quand un élément <article> est imbriqué dans un autre, l'élément contenu représente un article relatif à l'élément contenant. Par exemple, les commentaires d'une parution de blog peuvent être un élément <article> inclus dans l'<article> représentant la parution en elle-même.
    • +
  • Des informations à propos de l'auteur d'un élément <article> peuvent être fournies au travers de l'élément {{HTMLElement("address")}}, mais cela ne s'applique pas aux éléments <article> imbriqués.
    • +
  • La date et l'heure de publication d'un élément <article> peuvent être donnés en utilisant l'attribut {{htmlattrxref("datetime", "time")}} d'un élément {{HTMLElement("time")}}. Notez que l'attribut {{htmlattrxref("pubdate", "time")}} de {{HTMLElement("time")}} ne fait plus partie de la norme W3C HTML 5.
    • +
+ +

Exemples

+ +

HTML

+ +
<article class="film_review">
+  <header>
+    <h2>Jurassic Park</h2>
+  </header>
+  <section class="main_review">
+    <p>Les dinosaures étaient super !</p>
+  </section>
+  <section class="user_reviews">
+    <article class="user_review">
+      <p>Beaucoup trop effrayant pour moi</p>
+      <footer>
+        <p>
+          Posté le
+          <time datetime="2015-05-16 19:00">16 Mai</time>
+          par Lisa.
+        </p>
+      </footer>
+    </article>
+    <article class="user_review">
+      <p>Je suis d'accord, les dinosaures sont mes préférés</p>
+      <footer>
+        <p>
+          Posté le
+          <time datetime="2015-05-17 19:00">17 Mai</time>
+          par Tom.
+        </p>
+      </footer>
+    </article>
+  </section>
+  <footer>
+    <p>
+      Posté le
+      <time datetime="2015-05-15 19:00">15 Mai</time>
+      par Staff.
+    </p>
+  </footer>
+</article>
+ +

Résultat

+ +

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

+ +

Résumé technique

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Catégories de contenuContenu de flux, contenu de section, contenu tangible.
Contenu autoriséContenu de flux.
Omission de balises{{no_tag_omission}}
Parents autorisésTout élément acceptant du contenu de flux. Un élément <article> ne doit pas être un descendant d'un élément {{HTMLElement("address")}}.
Rôles ARIA autorisés{{ARIARole("application")}}, {{ARIARole("document")}}, {{ARIARole("feed")}}, {{ARIARole("main")}}, {{ARIARole("presentation")}}, {{ARIARole("region")}}.
Interface DOM{{domxref("HTMLElement")}}.
+ +

Spécifications

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

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ +
    +
  • Les autres éléments liés aux sections d'un document : {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}}
    • +
  • Sections et structure d'un document HTML5.
    • +
diff --git a/files/fr/web/html/element/aside/index.html b/files/fr/web/html/element/aside/index.html new file mode 100644 index 0000000000..a68dc9f35a --- /dev/null +++ b/files/fr/web/html/element/aside/index.html @@ -0,0 +1,122 @@ +--- +title: '