From ce50213a12356a3c91fb932dd9994b1f754fc351 Mon Sep 17 00:00:00 2001 From: Will Bamberg Date: Mon, 27 Sep 2021 14:26:54 -0700 Subject: [PATCH 1/7] Rename HTML files to MD --- files/en-us/web/html/applying_color/{index.html => index.md} | 0 files/en-us/web/html/attributes/accept/{index.html => index.md} | 0 .../web/html/attributes/autocomplete/{index.html => index.md} | 0 files/en-us/web/html/attributes/capture/{index.html => index.md} | 0 .../web/html/attributes/crossorigin/{index.html => index.md} | 0 files/en-us/web/html/attributes/disabled/{index.html => index.md} | 0 .../web/html/attributes/elementtiming/{index.html => index.md} | 0 files/en-us/web/html/attributes/for/{index.html => index.md} | 0 files/en-us/web/html/attributes/{index.html => index.md} | 0 files/en-us/web/html/attributes/max/{index.html => index.md} | 0 .../en-us/web/html/attributes/maxlength/{index.html => index.md} | 0 files/en-us/web/html/attributes/min/{index.html => index.md} | 0 .../en-us/web/html/attributes/minlength/{index.html => index.md} | 0 files/en-us/web/html/attributes/multiple/{index.html => index.md} | 0 files/en-us/web/html/attributes/pattern/{index.html => index.md} | 0 files/en-us/web/html/attributes/readonly/{index.html => index.md} | 0 files/en-us/web/html/attributes/rel/{index.html => index.md} | 0 files/en-us/web/html/attributes/required/{index.html => index.md} | 0 files/en-us/web/html/attributes/size/{index.html => index.md} | 0 files/en-us/web/html/attributes/step/{index.html => index.md} | 0 .../en-us/web/html/block-level_elements/{index.html => index.md} | 0 files/en-us/web/html/cors_enabled_image/{index.html => index.md} | 0 .../en-us/web/html/date_and_time_formats/{index.html => index.md} | 0 files/en-us/web/html/element/a/{index.html => index.md} | 0 files/en-us/web/html/element/abbr/{index.html => index.md} | 0 files/en-us/web/html/element/acronym/{index.html => index.md} | 0 files/en-us/web/html/element/address/{index.html => index.md} | 0 files/en-us/web/html/element/applet/{index.html => index.md} | 0 files/en-us/web/html/element/area/{index.html => index.md} | 0 files/en-us/web/html/element/article/{index.html => index.md} | 0 files/en-us/web/html/element/aside/{index.html => index.md} | 0 files/en-us/web/html/element/audio/{index.html => index.md} | 0 files/en-us/web/html/element/b/{index.html => index.md} | 0 files/en-us/web/html/element/base/{index.html => index.md} | 0 files/en-us/web/html/element/basefont/{index.html => index.md} | 0 files/en-us/web/html/element/bdi/{index.html => index.md} | 0 files/en-us/web/html/element/bdo/{index.html => index.md} | 0 files/en-us/web/html/element/bgsound/{index.html => index.md} | 0 files/en-us/web/html/element/big/{index.html => index.md} | 0 files/en-us/web/html/element/blink/{index.html => index.md} | 0 files/en-us/web/html/element/blockquote/{index.html => index.md} | 0 files/en-us/web/html/element/body/{index.html => index.md} | 0 files/en-us/web/html/element/br/{index.html => index.md} | 0 files/en-us/web/html/element/button/{index.html => index.md} | 0 files/en-us/web/html/element/canvas/{index.html => index.md} | 0 files/en-us/web/html/element/caption/{index.html => index.md} | 0 files/en-us/web/html/element/center/{index.html => index.md} | 0 files/en-us/web/html/element/cite/{index.html => index.md} | 0 files/en-us/web/html/element/code/{index.html => index.md} | 0 files/en-us/web/html/element/col/{index.html => index.md} | 0 files/en-us/web/html/element/colgroup/{index.html => index.md} | 0 files/en-us/web/html/element/content/{index.html => index.md} | 0 files/en-us/web/html/element/data/{index.html => index.md} | 0 files/en-us/web/html/element/datalist/{index.html => index.md} | 0 files/en-us/web/html/element/dd/{index.html => index.md} | 0 files/en-us/web/html/element/del/{index.html => index.md} | 0 files/en-us/web/html/element/details/{index.html => index.md} | 0 files/en-us/web/html/element/dfn/{index.html => index.md} | 0 files/en-us/web/html/element/dialog/{index.html => index.md} | 0 files/en-us/web/html/element/dir/{index.html => index.md} | 0 files/en-us/web/html/element/div/{index.html => index.md} | 0 files/en-us/web/html/element/dl/{index.html => index.md} | 0 files/en-us/web/html/element/dt/{index.html => index.md} | 0 files/en-us/web/html/element/em/{index.html => index.md} | 0 files/en-us/web/html/element/embed/{index.html => index.md} | 0 files/en-us/web/html/element/fieldset/{index.html => index.md} | 0 files/en-us/web/html/element/figcaption/{index.html => index.md} | 0 files/en-us/web/html/element/figure/{index.html => index.md} | 0 files/en-us/web/html/element/font/{index.html => index.md} | 0 files/en-us/web/html/element/footer/{index.html => index.md} | 0 files/en-us/web/html/element/form/{index.html => index.md} | 0 files/en-us/web/html/element/frame/{index.html => index.md} | 0 files/en-us/web/html/element/frameset/{index.html => index.md} | 0 files/en-us/web/html/element/head/{index.html => index.md} | 0 files/en-us/web/html/element/header/{index.html => index.md} | 0 .../web/html/element/heading_elements/{index.html => index.md} | 0 files/en-us/web/html/element/hgroup/{index.html => index.md} | 0 files/en-us/web/html/element/hr/{index.html => index.md} | 0 files/en-us/web/html/element/html/{index.html => index.md} | 0 .../en-us/web/html/element/html/manifest/{index.html => index.md} | 0 files/en-us/web/html/element/i/{index.html => index.md} | 0 files/en-us/web/html/element/iframe/{index.html => index.md} | 0 files/en-us/web/html/element/image/{index.html => index.md} | 0 files/en-us/web/html/element/img/{index.html => index.md} | 0 files/en-us/web/html/element/{index.html => index.md} | 0 .../en-us/web/html/element/input/button/{index.html => index.md} | 0 .../web/html/element/input/checkbox/{index.html => index.md} | 0 files/en-us/web/html/element/input/color/{index.html => index.md} | 0 files/en-us/web/html/element/input/date/{index.html => index.md} | 0 .../html/element/input/datetime-local/{index.html => index.md} | 0 .../web/html/element/input/datetime/{index.html => index.md} | 0 files/en-us/web/html/element/input/email/{index.html => index.md} | 0 files/en-us/web/html/element/input/file/{index.html => index.md} | 0 .../en-us/web/html/element/input/hidden/{index.html => index.md} | 0 files/en-us/web/html/element/input/image/{index.html => index.md} | 0 files/en-us/web/html/element/input/{index.html => index.md} | 0 files/en-us/web/html/element/input/month/{index.html => index.md} | 0 .../en-us/web/html/element/input/number/{index.html => index.md} | 0 .../web/html/element/input/password/{index.html => index.md} | 0 files/en-us/web/html/element/input/radio/{index.html => index.md} | 0 files/en-us/web/html/element/input/range/{index.html => index.md} | 0 files/en-us/web/html/element/input/reset/{index.html => index.md} | 0 .../en-us/web/html/element/input/search/{index.html => index.md} | 0 .../en-us/web/html/element/input/submit/{index.html => index.md} | 0 files/en-us/web/html/element/input/tel/{index.html => index.md} | 0 files/en-us/web/html/element/input/text/{index.html => index.md} | 0 files/en-us/web/html/element/input/time/{index.html => index.md} | 0 files/en-us/web/html/element/input/url/{index.html => index.md} | 0 files/en-us/web/html/element/input/week/{index.html => index.md} | 0 files/en-us/web/html/element/ins/{index.html => index.md} | 0 files/en-us/web/html/element/kbd/{index.html => index.md} | 0 files/en-us/web/html/element/keygen/{index.html => index.md} | 0 files/en-us/web/html/element/label/{index.html => index.md} | 0 files/en-us/web/html/element/legend/{index.html => index.md} | 0 files/en-us/web/html/element/li/{index.html => index.md} | 0 files/en-us/web/html/element/link/{index.html => index.md} | 0 files/en-us/web/html/element/main/{index.html => index.md} | 0 files/en-us/web/html/element/map/{index.html => index.md} | 0 files/en-us/web/html/element/mark/{index.html => index.md} | 0 files/en-us/web/html/element/marquee/{index.html => index.md} | 0 files/en-us/web/html/element/menu/{index.html => index.md} | 0 files/en-us/web/html/element/menuitem/{index.html => index.md} | 0 files/en-us/web/html/element/meta/{index.html => index.md} | 0 files/en-us/web/html/element/meta/name/{index.html => index.md} | 0 .../html/element/meta/name/theme-color/{index.html => index.md} | 0 files/en-us/web/html/element/meter/{index.html => index.md} | 0 files/en-us/web/html/element/nav/{index.html => index.md} | 0 files/en-us/web/html/element/nobr/{index.html => index.md} | 0 files/en-us/web/html/element/noembed/{index.html => index.md} | 0 files/en-us/web/html/element/noframes/{index.html => index.md} | 0 files/en-us/web/html/element/noscript/{index.html => index.md} | 0 files/en-us/web/html/element/object/{index.html => index.md} | 0 files/en-us/web/html/element/ol/{index.html => index.md} | 0 files/en-us/web/html/element/optgroup/{index.html => index.md} | 0 files/en-us/web/html/element/option/{index.html => index.md} | 0 files/en-us/web/html/element/output/{index.html => index.md} | 0 files/en-us/web/html/element/p/{index.html => index.md} | 0 files/en-us/web/html/element/param/{index.html => index.md} | 0 files/en-us/web/html/element/picture/{index.html => index.md} | 0 files/en-us/web/html/element/plaintext/{index.html => index.md} | 0 files/en-us/web/html/element/portal/{index.html => index.md} | 0 files/en-us/web/html/element/pre/{index.html => index.md} | 0 files/en-us/web/html/element/progress/{index.html => index.md} | 0 files/en-us/web/html/element/q/{index.html => index.md} | 0 files/en-us/web/html/element/rb/{index.html => index.md} | 0 files/en-us/web/html/element/rp/{index.html => index.md} | 0 files/en-us/web/html/element/rt/{index.html => index.md} | 0 files/en-us/web/html/element/rtc/{index.html => index.md} | 0 files/en-us/web/html/element/ruby/{index.html => index.md} | 0 files/en-us/web/html/element/s/{index.html => index.md} | 0 files/en-us/web/html/element/samp/{index.html => index.md} | 0 files/en-us/web/html/element/script/{index.html => index.md} | 0 files/en-us/web/html/element/section/{index.html => index.md} | 0 files/en-us/web/html/element/select/{index.html => index.md} | 0 files/en-us/web/html/element/shadow/{index.html => index.md} | 0 files/en-us/web/html/element/slot/{index.html => index.md} | 0 files/en-us/web/html/element/small/{index.html => index.md} | 0 files/en-us/web/html/element/source/{index.html => index.md} | 0 files/en-us/web/html/element/spacer/{index.html => index.md} | 0 files/en-us/web/html/element/span/{index.html => index.md} | 0 files/en-us/web/html/element/strike/{index.html => index.md} | 0 files/en-us/web/html/element/strong/{index.html => index.md} | 0 files/en-us/web/html/element/style/{index.html => index.md} | 0 files/en-us/web/html/element/sub/{index.html => index.md} | 0 files/en-us/web/html/element/summary/{index.html => index.md} | 0 files/en-us/web/html/element/sup/{index.html => index.md} | 0 files/en-us/web/html/element/table/{index.html => index.md} | 0 files/en-us/web/html/element/tbody/{index.html => index.md} | 0 files/en-us/web/html/element/td/{index.html => index.md} | 0 files/en-us/web/html/element/template/{index.html => index.md} | 0 files/en-us/web/html/element/textarea/{index.html => index.md} | 0 files/en-us/web/html/element/tfoot/{index.html => index.md} | 0 files/en-us/web/html/element/th/{index.html => index.md} | 0 files/en-us/web/html/element/thead/{index.html => index.md} | 0 files/en-us/web/html/element/time/{index.html => index.md} | 0 files/en-us/web/html/element/title/{index.html => index.md} | 0 files/en-us/web/html/element/tr/{index.html => index.md} | 0 files/en-us/web/html/element/track/{index.html => index.md} | 0 files/en-us/web/html/element/tt/{index.html => index.md} | 0 files/en-us/web/html/element/u/{index.html => index.md} | 0 files/en-us/web/html/element/ul/{index.html => index.md} | 0 files/en-us/web/html/element/var/{index.html => index.md} | 0 files/en-us/web/html/element/video/{index.html => index.md} | 0 files/en-us/web/html/element/wbr/{index.html => index.md} | 0 files/en-us/web/html/element/xmp/{index.html => index.md} | 0 .../web/html/global_attributes/accesskey/{index.html => index.md} | 0 .../global_attributes/autocapitalize/{index.html => index.md} | 0 .../web/html/global_attributes/autofocus/{index.html => index.md} | 0 .../web/html/global_attributes/class/{index.html => index.md} | 0 .../global_attributes/contenteditable/{index.html => index.md} | 0 .../html/global_attributes/contextmenu/{index.html => index.md} | 0 .../html/global_attributes/data-_star_/{index.html => index.md} | 0 .../en-us/web/html/global_attributes/dir/{index.html => index.md} | 0 .../web/html/global_attributes/draggable/{index.html => index.md} | 0 .../html/global_attributes/enterkeyhint/{index.html => index.md} | 0 .../web/html/global_attributes/hidden/{index.html => index.md} | 0 .../en-us/web/html/global_attributes/id/{index.html => index.md} | 0 files/en-us/web/html/global_attributes/{index.html => index.md} | 0 .../web/html/global_attributes/inputmode/{index.html => index.md} | 0 .../en-us/web/html/global_attributes/is/{index.html => index.md} | 0 .../web/html/global_attributes/itemid/{index.html => index.md} | 0 .../web/html/global_attributes/itemprop/{index.html => index.md} | 0 .../web/html/global_attributes/itemref/{index.html => index.md} | 0 .../web/html/global_attributes/itemscope/{index.html => index.md} | 0 .../web/html/global_attributes/itemtype/{index.html => index.md} | 0 .../web/html/global_attributes/lang/{index.html => index.md} | 0 .../web/html/global_attributes/nonce/{index.html => index.md} | 0 .../web/html/global_attributes/part/{index.html => index.md} | 0 .../web/html/global_attributes/slot/{index.html => index.md} | 0 .../html/global_attributes/spellcheck/{index.html => index.md} | 0 .../web/html/global_attributes/style/{index.html => index.md} | 0 .../web/html/global_attributes/tabindex/{index.html => index.md} | 0 .../web/html/global_attributes/title/{index.html => index.md} | 0 .../web/html/global_attributes/translate/{index.html => index.md} | 0 .../x-ms-acceleratorkey/{index.html => index.md} | 0 .../x-ms-format-detection/{index.html => index.md} | 0 files/en-us/web/html/{index.html => index.md} | 0 files/en-us/web/html/index/{index.html => index.md} | 0 files/en-us/web/html/inline_elements/{index.html => index.md} | 0 .../web/html/link_types/dns-prefetch/{index.html => index.md} | 0 files/en-us/web/html/link_types/{index.html => index.md} | 0 files/en-us/web/html/link_types/manifest/{index.html => index.md} | 0 .../web/html/link_types/modulepreload/{index.html => index.md} | 0 files/en-us/web/html/link_types/noopener/{index.html => index.md} | 0 .../en-us/web/html/link_types/noreferrer/{index.html => index.md} | 0 .../en-us/web/html/link_types/preconnect/{index.html => index.md} | 0 files/en-us/web/html/link_types/prefetch/{index.html => index.md} | 0 files/en-us/web/html/link_types/preload/{index.html => index.md} | 0 .../en-us/web/html/link_types/prerender/{index.html => index.md} | 0 files/en-us/web/html/microdata/{index.html => index.md} | 0 files/en-us/web/html/microformats/{index.html => index.md} | 0 .../html/quirks_mode_and_standards_mode/{index.html => index.md} | 0 files/en-us/web/html/reference/{index.html => index.md} | 0 files/en-us/web/html/viewport_meta_tag/{index.html => index.md} | 0 234 files changed, 0 insertions(+), 0 deletions(-) rename files/en-us/web/html/applying_color/{index.html => index.md} (100%) rename files/en-us/web/html/attributes/accept/{index.html => index.md} (100%) rename files/en-us/web/html/attributes/autocomplete/{index.html => index.md} (100%) rename files/en-us/web/html/attributes/capture/{index.html => index.md} (100%) rename files/en-us/web/html/attributes/crossorigin/{index.html => index.md} (100%) rename files/en-us/web/html/attributes/disabled/{index.html => index.md} (100%) rename files/en-us/web/html/attributes/elementtiming/{index.html => index.md} (100%) rename files/en-us/web/html/attributes/for/{index.html => index.md} (100%) rename files/en-us/web/html/attributes/{index.html => index.md} (100%) rename files/en-us/web/html/attributes/max/{index.html => index.md} (100%) rename files/en-us/web/html/attributes/maxlength/{index.html => index.md} (100%) rename files/en-us/web/html/attributes/min/{index.html => index.md} (100%) rename files/en-us/web/html/attributes/minlength/{index.html => index.md} (100%) rename files/en-us/web/html/attributes/multiple/{index.html => index.md} (100%) rename files/en-us/web/html/attributes/pattern/{index.html => index.md} (100%) rename files/en-us/web/html/attributes/readonly/{index.html => index.md} (100%) rename files/en-us/web/html/attributes/rel/{index.html => index.md} (100%) rename files/en-us/web/html/attributes/required/{index.html => index.md} (100%) rename files/en-us/web/html/attributes/size/{index.html => index.md} (100%) rename files/en-us/web/html/attributes/step/{index.html => index.md} (100%) rename files/en-us/web/html/block-level_elements/{index.html => index.md} (100%) rename files/en-us/web/html/cors_enabled_image/{index.html => index.md} (100%) rename files/en-us/web/html/date_and_time_formats/{index.html => index.md} (100%) rename files/en-us/web/html/element/a/{index.html => index.md} (100%) rename files/en-us/web/html/element/abbr/{index.html => index.md} (100%) rename files/en-us/web/html/element/acronym/{index.html => index.md} (100%) rename files/en-us/web/html/element/address/{index.html => index.md} (100%) rename files/en-us/web/html/element/applet/{index.html => index.md} (100%) rename files/en-us/web/html/element/area/{index.html => index.md} (100%) rename files/en-us/web/html/element/article/{index.html => index.md} (100%) rename files/en-us/web/html/element/aside/{index.html => index.md} (100%) rename files/en-us/web/html/element/audio/{index.html => index.md} (100%) rename files/en-us/web/html/element/b/{index.html => index.md} (100%) rename files/en-us/web/html/element/base/{index.html => index.md} (100%) rename files/en-us/web/html/element/basefont/{index.html => index.md} (100%) rename files/en-us/web/html/element/bdi/{index.html => index.md} (100%) rename files/en-us/web/html/element/bdo/{index.html => index.md} (100%) rename files/en-us/web/html/element/bgsound/{index.html => index.md} (100%) rename files/en-us/web/html/element/big/{index.html => index.md} (100%) rename files/en-us/web/html/element/blink/{index.html => index.md} (100%) rename files/en-us/web/html/element/blockquote/{index.html => index.md} (100%) rename files/en-us/web/html/element/body/{index.html => index.md} (100%) rename files/en-us/web/html/element/br/{index.html => index.md} (100%) rename files/en-us/web/html/element/button/{index.html => index.md} (100%) rename files/en-us/web/html/element/canvas/{index.html => index.md} (100%) rename files/en-us/web/html/element/caption/{index.html => index.md} (100%) rename files/en-us/web/html/element/center/{index.html => index.md} (100%) rename files/en-us/web/html/element/cite/{index.html => index.md} (100%) rename files/en-us/web/html/element/code/{index.html => index.md} (100%) rename files/en-us/web/html/element/col/{index.html => index.md} (100%) rename files/en-us/web/html/element/colgroup/{index.html => index.md} (100%) rename files/en-us/web/html/element/content/{index.html => index.md} (100%) rename files/en-us/web/html/element/data/{index.html => index.md} (100%) rename files/en-us/web/html/element/datalist/{index.html => index.md} (100%) rename files/en-us/web/html/element/dd/{index.html => index.md} (100%) rename files/en-us/web/html/element/del/{index.html => index.md} (100%) rename files/en-us/web/html/element/details/{index.html => index.md} (100%) rename files/en-us/web/html/element/dfn/{index.html => index.md} (100%) rename files/en-us/web/html/element/dialog/{index.html => index.md} (100%) rename files/en-us/web/html/element/dir/{index.html => index.md} (100%) rename files/en-us/web/html/element/div/{index.html => index.md} (100%) rename files/en-us/web/html/element/dl/{index.html => index.md} (100%) rename files/en-us/web/html/element/dt/{index.html => index.md} (100%) rename files/en-us/web/html/element/em/{index.html => index.md} (100%) rename files/en-us/web/html/element/embed/{index.html => index.md} (100%) rename files/en-us/web/html/element/fieldset/{index.html => index.md} (100%) rename files/en-us/web/html/element/figcaption/{index.html => index.md} (100%) rename files/en-us/web/html/element/figure/{index.html => index.md} (100%) rename files/en-us/web/html/element/font/{index.html => index.md} (100%) rename files/en-us/web/html/element/footer/{index.html => index.md} (100%) rename files/en-us/web/html/element/form/{index.html => index.md} (100%) rename files/en-us/web/html/element/frame/{index.html => index.md} (100%) rename files/en-us/web/html/element/frameset/{index.html => index.md} (100%) rename files/en-us/web/html/element/head/{index.html => index.md} (100%) rename files/en-us/web/html/element/header/{index.html => index.md} (100%) rename files/en-us/web/html/element/heading_elements/{index.html => index.md} (100%) rename files/en-us/web/html/element/hgroup/{index.html => index.md} (100%) rename files/en-us/web/html/element/hr/{index.html => index.md} (100%) rename files/en-us/web/html/element/html/{index.html => index.md} (100%) rename files/en-us/web/html/element/html/manifest/{index.html => index.md} (100%) rename files/en-us/web/html/element/i/{index.html => index.md} (100%) rename files/en-us/web/html/element/iframe/{index.html => index.md} (100%) rename files/en-us/web/html/element/image/{index.html => index.md} (100%) rename files/en-us/web/html/element/img/{index.html => index.md} (100%) rename files/en-us/web/html/element/{index.html => index.md} (100%) rename files/en-us/web/html/element/input/button/{index.html => index.md} (100%) rename files/en-us/web/html/element/input/checkbox/{index.html => index.md} (100%) rename files/en-us/web/html/element/input/color/{index.html => index.md} (100%) rename files/en-us/web/html/element/input/date/{index.html => index.md} (100%) rename files/en-us/web/html/element/input/datetime-local/{index.html => index.md} (100%) rename files/en-us/web/html/element/input/datetime/{index.html => index.md} (100%) rename files/en-us/web/html/element/input/email/{index.html => index.md} (100%) rename files/en-us/web/html/element/input/file/{index.html => index.md} (100%) rename files/en-us/web/html/element/input/hidden/{index.html => index.md} (100%) rename files/en-us/web/html/element/input/image/{index.html => index.md} (100%) rename files/en-us/web/html/element/input/{index.html => index.md} (100%) rename files/en-us/web/html/element/input/month/{index.html => index.md} (100%) rename files/en-us/web/html/element/input/number/{index.html => index.md} (100%) rename files/en-us/web/html/element/input/password/{index.html => index.md} (100%) rename files/en-us/web/html/element/input/radio/{index.html => index.md} (100%) rename files/en-us/web/html/element/input/range/{index.html => index.md} (100%) rename files/en-us/web/html/element/input/reset/{index.html => index.md} (100%) rename files/en-us/web/html/element/input/search/{index.html => index.md} (100%) rename files/en-us/web/html/element/input/submit/{index.html => index.md} (100%) rename files/en-us/web/html/element/input/tel/{index.html => index.md} (100%) rename files/en-us/web/html/element/input/text/{index.html => index.md} (100%) rename files/en-us/web/html/element/input/time/{index.html => index.md} (100%) rename files/en-us/web/html/element/input/url/{index.html => index.md} (100%) rename files/en-us/web/html/element/input/week/{index.html => index.md} (100%) rename files/en-us/web/html/element/ins/{index.html => index.md} (100%) rename files/en-us/web/html/element/kbd/{index.html => index.md} (100%) rename files/en-us/web/html/element/keygen/{index.html => index.md} (100%) rename files/en-us/web/html/element/label/{index.html => index.md} (100%) rename files/en-us/web/html/element/legend/{index.html => index.md} (100%) rename files/en-us/web/html/element/li/{index.html => index.md} (100%) rename files/en-us/web/html/element/link/{index.html => index.md} (100%) rename files/en-us/web/html/element/main/{index.html => index.md} (100%) rename files/en-us/web/html/element/map/{index.html => index.md} (100%) rename files/en-us/web/html/element/mark/{index.html => index.md} (100%) rename files/en-us/web/html/element/marquee/{index.html => index.md} (100%) rename files/en-us/web/html/element/menu/{index.html => index.md} (100%) rename files/en-us/web/html/element/menuitem/{index.html => index.md} (100%) rename files/en-us/web/html/element/meta/{index.html => index.md} (100%) rename files/en-us/web/html/element/meta/name/{index.html => index.md} (100%) rename files/en-us/web/html/element/meta/name/theme-color/{index.html => index.md} (100%) rename files/en-us/web/html/element/meter/{index.html => index.md} (100%) rename files/en-us/web/html/element/nav/{index.html => index.md} (100%) rename files/en-us/web/html/element/nobr/{index.html => index.md} (100%) rename files/en-us/web/html/element/noembed/{index.html => index.md} (100%) rename files/en-us/web/html/element/noframes/{index.html => index.md} (100%) rename files/en-us/web/html/element/noscript/{index.html => index.md} (100%) rename files/en-us/web/html/element/object/{index.html => index.md} (100%) rename files/en-us/web/html/element/ol/{index.html => index.md} (100%) rename files/en-us/web/html/element/optgroup/{index.html => index.md} (100%) rename files/en-us/web/html/element/option/{index.html => index.md} (100%) rename files/en-us/web/html/element/output/{index.html => index.md} (100%) rename files/en-us/web/html/element/p/{index.html => index.md} (100%) rename files/en-us/web/html/element/param/{index.html => index.md} (100%) rename files/en-us/web/html/element/picture/{index.html => index.md} (100%) rename files/en-us/web/html/element/plaintext/{index.html => index.md} (100%) rename files/en-us/web/html/element/portal/{index.html => index.md} (100%) rename files/en-us/web/html/element/pre/{index.html => index.md} (100%) rename files/en-us/web/html/element/progress/{index.html => index.md} (100%) rename files/en-us/web/html/element/q/{index.html => index.md} (100%) rename files/en-us/web/html/element/rb/{index.html => index.md} (100%) rename files/en-us/web/html/element/rp/{index.html => index.md} (100%) rename files/en-us/web/html/element/rt/{index.html => index.md} (100%) rename files/en-us/web/html/element/rtc/{index.html => index.md} (100%) rename files/en-us/web/html/element/ruby/{index.html => index.md} (100%) rename files/en-us/web/html/element/s/{index.html => index.md} (100%) rename files/en-us/web/html/element/samp/{index.html => index.md} (100%) rename files/en-us/web/html/element/script/{index.html => index.md} (100%) rename files/en-us/web/html/element/section/{index.html => index.md} (100%) rename files/en-us/web/html/element/select/{index.html => index.md} (100%) rename files/en-us/web/html/element/shadow/{index.html => index.md} (100%) rename files/en-us/web/html/element/slot/{index.html => index.md} (100%) rename files/en-us/web/html/element/small/{index.html => index.md} (100%) rename files/en-us/web/html/element/source/{index.html => index.md} (100%) rename files/en-us/web/html/element/spacer/{index.html => index.md} (100%) rename files/en-us/web/html/element/span/{index.html => index.md} (100%) rename files/en-us/web/html/element/strike/{index.html => index.md} (100%) rename files/en-us/web/html/element/strong/{index.html => index.md} (100%) rename files/en-us/web/html/element/style/{index.html => index.md} (100%) rename files/en-us/web/html/element/sub/{index.html => index.md} (100%) rename files/en-us/web/html/element/summary/{index.html => index.md} (100%) rename files/en-us/web/html/element/sup/{index.html => index.md} (100%) rename files/en-us/web/html/element/table/{index.html => index.md} (100%) rename files/en-us/web/html/element/tbody/{index.html => index.md} (100%) rename files/en-us/web/html/element/td/{index.html => index.md} (100%) rename files/en-us/web/html/element/template/{index.html => index.md} (100%) rename files/en-us/web/html/element/textarea/{index.html => index.md} (100%) rename files/en-us/web/html/element/tfoot/{index.html => index.md} (100%) rename files/en-us/web/html/element/th/{index.html => index.md} (100%) rename files/en-us/web/html/element/thead/{index.html => index.md} (100%) rename files/en-us/web/html/element/time/{index.html => index.md} (100%) rename files/en-us/web/html/element/title/{index.html => index.md} (100%) rename files/en-us/web/html/element/tr/{index.html => index.md} (100%) rename files/en-us/web/html/element/track/{index.html => index.md} (100%) rename files/en-us/web/html/element/tt/{index.html => index.md} (100%) rename files/en-us/web/html/element/u/{index.html => index.md} (100%) rename files/en-us/web/html/element/ul/{index.html => index.md} (100%) rename files/en-us/web/html/element/var/{index.html => index.md} (100%) rename files/en-us/web/html/element/video/{index.html => index.md} (100%) rename files/en-us/web/html/element/wbr/{index.html => index.md} (100%) rename files/en-us/web/html/element/xmp/{index.html => index.md} (100%) rename files/en-us/web/html/global_attributes/accesskey/{index.html => index.md} (100%) rename files/en-us/web/html/global_attributes/autocapitalize/{index.html => index.md} (100%) rename files/en-us/web/html/global_attributes/autofocus/{index.html => index.md} (100%) rename files/en-us/web/html/global_attributes/class/{index.html => index.md} (100%) rename files/en-us/web/html/global_attributes/contenteditable/{index.html => index.md} (100%) rename files/en-us/web/html/global_attributes/contextmenu/{index.html => index.md} (100%) rename files/en-us/web/html/global_attributes/data-_star_/{index.html => index.md} (100%) rename files/en-us/web/html/global_attributes/dir/{index.html => index.md} (100%) rename files/en-us/web/html/global_attributes/draggable/{index.html => index.md} (100%) rename files/en-us/web/html/global_attributes/enterkeyhint/{index.html => index.md} (100%) rename files/en-us/web/html/global_attributes/hidden/{index.html => index.md} (100%) rename files/en-us/web/html/global_attributes/id/{index.html => index.md} (100%) rename files/en-us/web/html/global_attributes/{index.html => index.md} (100%) rename files/en-us/web/html/global_attributes/inputmode/{index.html => index.md} (100%) rename files/en-us/web/html/global_attributes/is/{index.html => index.md} (100%) rename files/en-us/web/html/global_attributes/itemid/{index.html => index.md} (100%) rename files/en-us/web/html/global_attributes/itemprop/{index.html => index.md} (100%) rename files/en-us/web/html/global_attributes/itemref/{index.html => index.md} (100%) rename files/en-us/web/html/global_attributes/itemscope/{index.html => index.md} (100%) rename files/en-us/web/html/global_attributes/itemtype/{index.html => index.md} (100%) rename files/en-us/web/html/global_attributes/lang/{index.html => index.md} (100%) rename files/en-us/web/html/global_attributes/nonce/{index.html => index.md} (100%) rename files/en-us/web/html/global_attributes/part/{index.html => index.md} (100%) rename files/en-us/web/html/global_attributes/slot/{index.html => index.md} (100%) rename files/en-us/web/html/global_attributes/spellcheck/{index.html => index.md} (100%) rename files/en-us/web/html/global_attributes/style/{index.html => index.md} (100%) rename files/en-us/web/html/global_attributes/tabindex/{index.html => index.md} (100%) rename files/en-us/web/html/global_attributes/title/{index.html => index.md} (100%) rename files/en-us/web/html/global_attributes/translate/{index.html => index.md} (100%) rename files/en-us/web/html/global_attributes/x-ms-acceleratorkey/{index.html => index.md} (100%) rename files/en-us/web/html/global_attributes/x-ms-format-detection/{index.html => index.md} (100%) rename files/en-us/web/html/{index.html => index.md} (100%) rename files/en-us/web/html/index/{index.html => index.md} (100%) rename files/en-us/web/html/inline_elements/{index.html => index.md} (100%) rename files/en-us/web/html/link_types/dns-prefetch/{index.html => index.md} (100%) rename files/en-us/web/html/link_types/{index.html => index.md} (100%) rename files/en-us/web/html/link_types/manifest/{index.html => index.md} (100%) rename files/en-us/web/html/link_types/modulepreload/{index.html => index.md} (100%) rename files/en-us/web/html/link_types/noopener/{index.html => index.md} (100%) rename files/en-us/web/html/link_types/noreferrer/{index.html => index.md} (100%) rename files/en-us/web/html/link_types/preconnect/{index.html => index.md} (100%) rename files/en-us/web/html/link_types/prefetch/{index.html => index.md} (100%) rename files/en-us/web/html/link_types/preload/{index.html => index.md} (100%) rename files/en-us/web/html/link_types/prerender/{index.html => index.md} (100%) rename files/en-us/web/html/microdata/{index.html => index.md} (100%) rename files/en-us/web/html/microformats/{index.html => index.md} (100%) rename files/en-us/web/html/quirks_mode_and_standards_mode/{index.html => index.md} (100%) rename files/en-us/web/html/reference/{index.html => index.md} (100%) rename files/en-us/web/html/viewport_meta_tag/{index.html => index.md} (100%) diff --git a/files/en-us/web/html/applying_color/index.html b/files/en-us/web/html/applying_color/index.md similarity index 100% rename from files/en-us/web/html/applying_color/index.html rename to files/en-us/web/html/applying_color/index.md diff --git a/files/en-us/web/html/attributes/accept/index.html b/files/en-us/web/html/attributes/accept/index.md similarity index 100% rename from files/en-us/web/html/attributes/accept/index.html rename to files/en-us/web/html/attributes/accept/index.md diff --git a/files/en-us/web/html/attributes/autocomplete/index.html b/files/en-us/web/html/attributes/autocomplete/index.md similarity index 100% rename from files/en-us/web/html/attributes/autocomplete/index.html rename to files/en-us/web/html/attributes/autocomplete/index.md diff --git a/files/en-us/web/html/attributes/capture/index.html b/files/en-us/web/html/attributes/capture/index.md similarity index 100% rename from files/en-us/web/html/attributes/capture/index.html rename to files/en-us/web/html/attributes/capture/index.md diff --git a/files/en-us/web/html/attributes/crossorigin/index.html b/files/en-us/web/html/attributes/crossorigin/index.md similarity index 100% rename from files/en-us/web/html/attributes/crossorigin/index.html rename to files/en-us/web/html/attributes/crossorigin/index.md diff --git a/files/en-us/web/html/attributes/disabled/index.html b/files/en-us/web/html/attributes/disabled/index.md similarity index 100% rename from files/en-us/web/html/attributes/disabled/index.html rename to files/en-us/web/html/attributes/disabled/index.md diff --git a/files/en-us/web/html/attributes/elementtiming/index.html b/files/en-us/web/html/attributes/elementtiming/index.md similarity index 100% rename from files/en-us/web/html/attributes/elementtiming/index.html rename to files/en-us/web/html/attributes/elementtiming/index.md diff --git a/files/en-us/web/html/attributes/for/index.html b/files/en-us/web/html/attributes/for/index.md similarity index 100% rename from files/en-us/web/html/attributes/for/index.html rename to files/en-us/web/html/attributes/for/index.md diff --git a/files/en-us/web/html/attributes/index.html b/files/en-us/web/html/attributes/index.md similarity index 100% rename from files/en-us/web/html/attributes/index.html rename to files/en-us/web/html/attributes/index.md diff --git a/files/en-us/web/html/attributes/max/index.html b/files/en-us/web/html/attributes/max/index.md similarity index 100% rename from files/en-us/web/html/attributes/max/index.html rename to files/en-us/web/html/attributes/max/index.md diff --git a/files/en-us/web/html/attributes/maxlength/index.html b/files/en-us/web/html/attributes/maxlength/index.md similarity index 100% rename from files/en-us/web/html/attributes/maxlength/index.html rename to files/en-us/web/html/attributes/maxlength/index.md diff --git a/files/en-us/web/html/attributes/min/index.html b/files/en-us/web/html/attributes/min/index.md similarity index 100% rename from files/en-us/web/html/attributes/min/index.html rename to files/en-us/web/html/attributes/min/index.md diff --git a/files/en-us/web/html/attributes/minlength/index.html b/files/en-us/web/html/attributes/minlength/index.md similarity index 100% rename from files/en-us/web/html/attributes/minlength/index.html rename to files/en-us/web/html/attributes/minlength/index.md diff --git a/files/en-us/web/html/attributes/multiple/index.html b/files/en-us/web/html/attributes/multiple/index.md similarity index 100% rename from files/en-us/web/html/attributes/multiple/index.html rename to files/en-us/web/html/attributes/multiple/index.md diff --git a/files/en-us/web/html/attributes/pattern/index.html b/files/en-us/web/html/attributes/pattern/index.md similarity index 100% rename from files/en-us/web/html/attributes/pattern/index.html rename to files/en-us/web/html/attributes/pattern/index.md diff --git a/files/en-us/web/html/attributes/readonly/index.html b/files/en-us/web/html/attributes/readonly/index.md similarity index 100% rename from files/en-us/web/html/attributes/readonly/index.html rename to files/en-us/web/html/attributes/readonly/index.md diff --git a/files/en-us/web/html/attributes/rel/index.html b/files/en-us/web/html/attributes/rel/index.md similarity index 100% rename from files/en-us/web/html/attributes/rel/index.html rename to files/en-us/web/html/attributes/rel/index.md diff --git a/files/en-us/web/html/attributes/required/index.html b/files/en-us/web/html/attributes/required/index.md similarity index 100% rename from files/en-us/web/html/attributes/required/index.html rename to files/en-us/web/html/attributes/required/index.md diff --git a/files/en-us/web/html/attributes/size/index.html b/files/en-us/web/html/attributes/size/index.md similarity index 100% rename from files/en-us/web/html/attributes/size/index.html rename to files/en-us/web/html/attributes/size/index.md diff --git a/files/en-us/web/html/attributes/step/index.html b/files/en-us/web/html/attributes/step/index.md similarity index 100% rename from files/en-us/web/html/attributes/step/index.html rename to files/en-us/web/html/attributes/step/index.md diff --git a/files/en-us/web/html/block-level_elements/index.html b/files/en-us/web/html/block-level_elements/index.md similarity index 100% rename from files/en-us/web/html/block-level_elements/index.html rename to files/en-us/web/html/block-level_elements/index.md diff --git a/files/en-us/web/html/cors_enabled_image/index.html b/files/en-us/web/html/cors_enabled_image/index.md similarity index 100% rename from files/en-us/web/html/cors_enabled_image/index.html rename to files/en-us/web/html/cors_enabled_image/index.md diff --git a/files/en-us/web/html/date_and_time_formats/index.html b/files/en-us/web/html/date_and_time_formats/index.md similarity index 100% rename from files/en-us/web/html/date_and_time_formats/index.html rename to files/en-us/web/html/date_and_time_formats/index.md diff --git a/files/en-us/web/html/element/a/index.html b/files/en-us/web/html/element/a/index.md similarity index 100% rename from files/en-us/web/html/element/a/index.html rename to files/en-us/web/html/element/a/index.md diff --git a/files/en-us/web/html/element/abbr/index.html b/files/en-us/web/html/element/abbr/index.md similarity index 100% rename from files/en-us/web/html/element/abbr/index.html rename to files/en-us/web/html/element/abbr/index.md diff --git a/files/en-us/web/html/element/acronym/index.html b/files/en-us/web/html/element/acronym/index.md similarity index 100% rename from files/en-us/web/html/element/acronym/index.html rename to files/en-us/web/html/element/acronym/index.md diff --git a/files/en-us/web/html/element/address/index.html b/files/en-us/web/html/element/address/index.md similarity index 100% rename from files/en-us/web/html/element/address/index.html rename to files/en-us/web/html/element/address/index.md diff --git a/files/en-us/web/html/element/applet/index.html b/files/en-us/web/html/element/applet/index.md similarity index 100% rename from files/en-us/web/html/element/applet/index.html rename to files/en-us/web/html/element/applet/index.md diff --git a/files/en-us/web/html/element/area/index.html b/files/en-us/web/html/element/area/index.md similarity index 100% rename from files/en-us/web/html/element/area/index.html rename to files/en-us/web/html/element/area/index.md diff --git a/files/en-us/web/html/element/article/index.html b/files/en-us/web/html/element/article/index.md similarity index 100% rename from files/en-us/web/html/element/article/index.html rename to files/en-us/web/html/element/article/index.md diff --git a/files/en-us/web/html/element/aside/index.html b/files/en-us/web/html/element/aside/index.md similarity index 100% rename from files/en-us/web/html/element/aside/index.html rename to files/en-us/web/html/element/aside/index.md diff --git a/files/en-us/web/html/element/audio/index.html b/files/en-us/web/html/element/audio/index.md similarity index 100% rename from files/en-us/web/html/element/audio/index.html rename to files/en-us/web/html/element/audio/index.md diff --git a/files/en-us/web/html/element/b/index.html b/files/en-us/web/html/element/b/index.md similarity index 100% rename from files/en-us/web/html/element/b/index.html rename to files/en-us/web/html/element/b/index.md diff --git a/files/en-us/web/html/element/base/index.html b/files/en-us/web/html/element/base/index.md similarity index 100% rename from files/en-us/web/html/element/base/index.html rename to files/en-us/web/html/element/base/index.md diff --git a/files/en-us/web/html/element/basefont/index.html b/files/en-us/web/html/element/basefont/index.md similarity index 100% rename from files/en-us/web/html/element/basefont/index.html rename to files/en-us/web/html/element/basefont/index.md diff --git a/files/en-us/web/html/element/bdi/index.html b/files/en-us/web/html/element/bdi/index.md similarity index 100% rename from files/en-us/web/html/element/bdi/index.html rename to files/en-us/web/html/element/bdi/index.md diff --git a/files/en-us/web/html/element/bdo/index.html b/files/en-us/web/html/element/bdo/index.md similarity index 100% rename from files/en-us/web/html/element/bdo/index.html rename to files/en-us/web/html/element/bdo/index.md diff --git a/files/en-us/web/html/element/bgsound/index.html b/files/en-us/web/html/element/bgsound/index.md similarity index 100% rename from files/en-us/web/html/element/bgsound/index.html rename to files/en-us/web/html/element/bgsound/index.md diff --git a/files/en-us/web/html/element/big/index.html b/files/en-us/web/html/element/big/index.md similarity index 100% rename from files/en-us/web/html/element/big/index.html rename to files/en-us/web/html/element/big/index.md diff --git a/files/en-us/web/html/element/blink/index.html b/files/en-us/web/html/element/blink/index.md similarity index 100% rename from files/en-us/web/html/element/blink/index.html rename to files/en-us/web/html/element/blink/index.md diff --git a/files/en-us/web/html/element/blockquote/index.html b/files/en-us/web/html/element/blockquote/index.md similarity index 100% rename from files/en-us/web/html/element/blockquote/index.html rename to files/en-us/web/html/element/blockquote/index.md diff --git a/files/en-us/web/html/element/body/index.html b/files/en-us/web/html/element/body/index.md similarity index 100% rename from files/en-us/web/html/element/body/index.html rename to files/en-us/web/html/element/body/index.md diff --git a/files/en-us/web/html/element/br/index.html b/files/en-us/web/html/element/br/index.md similarity index 100% rename from files/en-us/web/html/element/br/index.html rename to files/en-us/web/html/element/br/index.md diff --git a/files/en-us/web/html/element/button/index.html b/files/en-us/web/html/element/button/index.md similarity index 100% rename from files/en-us/web/html/element/button/index.html rename to files/en-us/web/html/element/button/index.md diff --git a/files/en-us/web/html/element/canvas/index.html b/files/en-us/web/html/element/canvas/index.md similarity index 100% rename from files/en-us/web/html/element/canvas/index.html rename to files/en-us/web/html/element/canvas/index.md diff --git a/files/en-us/web/html/element/caption/index.html b/files/en-us/web/html/element/caption/index.md similarity index 100% rename from files/en-us/web/html/element/caption/index.html rename to files/en-us/web/html/element/caption/index.md diff --git a/files/en-us/web/html/element/center/index.html b/files/en-us/web/html/element/center/index.md similarity index 100% rename from files/en-us/web/html/element/center/index.html rename to files/en-us/web/html/element/center/index.md diff --git a/files/en-us/web/html/element/cite/index.html b/files/en-us/web/html/element/cite/index.md similarity index 100% rename from files/en-us/web/html/element/cite/index.html rename to files/en-us/web/html/element/cite/index.md diff --git a/files/en-us/web/html/element/code/index.html b/files/en-us/web/html/element/code/index.md similarity index 100% rename from files/en-us/web/html/element/code/index.html rename to files/en-us/web/html/element/code/index.md diff --git a/files/en-us/web/html/element/col/index.html b/files/en-us/web/html/element/col/index.md similarity index 100% rename from files/en-us/web/html/element/col/index.html rename to files/en-us/web/html/element/col/index.md diff --git a/files/en-us/web/html/element/colgroup/index.html b/files/en-us/web/html/element/colgroup/index.md similarity index 100% rename from files/en-us/web/html/element/colgroup/index.html rename to files/en-us/web/html/element/colgroup/index.md diff --git a/files/en-us/web/html/element/content/index.html b/files/en-us/web/html/element/content/index.md similarity index 100% rename from files/en-us/web/html/element/content/index.html rename to files/en-us/web/html/element/content/index.md diff --git a/files/en-us/web/html/element/data/index.html b/files/en-us/web/html/element/data/index.md similarity index 100% rename from files/en-us/web/html/element/data/index.html rename to files/en-us/web/html/element/data/index.md diff --git a/files/en-us/web/html/element/datalist/index.html b/files/en-us/web/html/element/datalist/index.md similarity index 100% rename from files/en-us/web/html/element/datalist/index.html rename to files/en-us/web/html/element/datalist/index.md diff --git a/files/en-us/web/html/element/dd/index.html b/files/en-us/web/html/element/dd/index.md similarity index 100% rename from files/en-us/web/html/element/dd/index.html rename to files/en-us/web/html/element/dd/index.md diff --git a/files/en-us/web/html/element/del/index.html b/files/en-us/web/html/element/del/index.md similarity index 100% rename from files/en-us/web/html/element/del/index.html rename to files/en-us/web/html/element/del/index.md diff --git a/files/en-us/web/html/element/details/index.html b/files/en-us/web/html/element/details/index.md similarity index 100% rename from files/en-us/web/html/element/details/index.html rename to files/en-us/web/html/element/details/index.md diff --git a/files/en-us/web/html/element/dfn/index.html b/files/en-us/web/html/element/dfn/index.md similarity index 100% rename from files/en-us/web/html/element/dfn/index.html rename to files/en-us/web/html/element/dfn/index.md diff --git a/files/en-us/web/html/element/dialog/index.html b/files/en-us/web/html/element/dialog/index.md similarity index 100% rename from files/en-us/web/html/element/dialog/index.html rename to files/en-us/web/html/element/dialog/index.md diff --git a/files/en-us/web/html/element/dir/index.html b/files/en-us/web/html/element/dir/index.md similarity index 100% rename from files/en-us/web/html/element/dir/index.html rename to files/en-us/web/html/element/dir/index.md diff --git a/files/en-us/web/html/element/div/index.html b/files/en-us/web/html/element/div/index.md similarity index 100% rename from files/en-us/web/html/element/div/index.html rename to files/en-us/web/html/element/div/index.md diff --git a/files/en-us/web/html/element/dl/index.html b/files/en-us/web/html/element/dl/index.md similarity index 100% rename from files/en-us/web/html/element/dl/index.html rename to files/en-us/web/html/element/dl/index.md diff --git a/files/en-us/web/html/element/dt/index.html b/files/en-us/web/html/element/dt/index.md similarity index 100% rename from files/en-us/web/html/element/dt/index.html rename to files/en-us/web/html/element/dt/index.md diff --git a/files/en-us/web/html/element/em/index.html b/files/en-us/web/html/element/em/index.md similarity index 100% rename from files/en-us/web/html/element/em/index.html rename to files/en-us/web/html/element/em/index.md diff --git a/files/en-us/web/html/element/embed/index.html b/files/en-us/web/html/element/embed/index.md similarity index 100% rename from files/en-us/web/html/element/embed/index.html rename to files/en-us/web/html/element/embed/index.md diff --git a/files/en-us/web/html/element/fieldset/index.html b/files/en-us/web/html/element/fieldset/index.md similarity index 100% rename from files/en-us/web/html/element/fieldset/index.html rename to files/en-us/web/html/element/fieldset/index.md diff --git a/files/en-us/web/html/element/figcaption/index.html b/files/en-us/web/html/element/figcaption/index.md similarity index 100% rename from files/en-us/web/html/element/figcaption/index.html rename to files/en-us/web/html/element/figcaption/index.md diff --git a/files/en-us/web/html/element/figure/index.html b/files/en-us/web/html/element/figure/index.md similarity index 100% rename from files/en-us/web/html/element/figure/index.html rename to files/en-us/web/html/element/figure/index.md diff --git a/files/en-us/web/html/element/font/index.html b/files/en-us/web/html/element/font/index.md similarity index 100% rename from files/en-us/web/html/element/font/index.html rename to files/en-us/web/html/element/font/index.md diff --git a/files/en-us/web/html/element/footer/index.html b/files/en-us/web/html/element/footer/index.md similarity index 100% rename from files/en-us/web/html/element/footer/index.html rename to files/en-us/web/html/element/footer/index.md diff --git a/files/en-us/web/html/element/form/index.html b/files/en-us/web/html/element/form/index.md similarity index 100% rename from files/en-us/web/html/element/form/index.html rename to files/en-us/web/html/element/form/index.md diff --git a/files/en-us/web/html/element/frame/index.html b/files/en-us/web/html/element/frame/index.md similarity index 100% rename from files/en-us/web/html/element/frame/index.html rename to files/en-us/web/html/element/frame/index.md diff --git a/files/en-us/web/html/element/frameset/index.html b/files/en-us/web/html/element/frameset/index.md similarity index 100% rename from files/en-us/web/html/element/frameset/index.html rename to files/en-us/web/html/element/frameset/index.md diff --git a/files/en-us/web/html/element/head/index.html b/files/en-us/web/html/element/head/index.md similarity index 100% rename from files/en-us/web/html/element/head/index.html rename to files/en-us/web/html/element/head/index.md diff --git a/files/en-us/web/html/element/header/index.html b/files/en-us/web/html/element/header/index.md similarity index 100% rename from files/en-us/web/html/element/header/index.html rename to files/en-us/web/html/element/header/index.md diff --git a/files/en-us/web/html/element/heading_elements/index.html b/files/en-us/web/html/element/heading_elements/index.md similarity index 100% rename from files/en-us/web/html/element/heading_elements/index.html rename to files/en-us/web/html/element/heading_elements/index.md diff --git a/files/en-us/web/html/element/hgroup/index.html b/files/en-us/web/html/element/hgroup/index.md similarity index 100% rename from files/en-us/web/html/element/hgroup/index.html rename to files/en-us/web/html/element/hgroup/index.md diff --git a/files/en-us/web/html/element/hr/index.html b/files/en-us/web/html/element/hr/index.md similarity index 100% rename from files/en-us/web/html/element/hr/index.html rename to files/en-us/web/html/element/hr/index.md diff --git a/files/en-us/web/html/element/html/index.html b/files/en-us/web/html/element/html/index.md similarity index 100% rename from files/en-us/web/html/element/html/index.html rename to files/en-us/web/html/element/html/index.md diff --git a/files/en-us/web/html/element/html/manifest/index.html b/files/en-us/web/html/element/html/manifest/index.md similarity index 100% rename from files/en-us/web/html/element/html/manifest/index.html rename to files/en-us/web/html/element/html/manifest/index.md diff --git a/files/en-us/web/html/element/i/index.html b/files/en-us/web/html/element/i/index.md similarity index 100% rename from files/en-us/web/html/element/i/index.html rename to files/en-us/web/html/element/i/index.md diff --git a/files/en-us/web/html/element/iframe/index.html b/files/en-us/web/html/element/iframe/index.md similarity index 100% rename from files/en-us/web/html/element/iframe/index.html rename to files/en-us/web/html/element/iframe/index.md diff --git a/files/en-us/web/html/element/image/index.html b/files/en-us/web/html/element/image/index.md similarity index 100% rename from files/en-us/web/html/element/image/index.html rename to files/en-us/web/html/element/image/index.md diff --git a/files/en-us/web/html/element/img/index.html b/files/en-us/web/html/element/img/index.md similarity index 100% rename from files/en-us/web/html/element/img/index.html rename to files/en-us/web/html/element/img/index.md diff --git a/files/en-us/web/html/element/index.html b/files/en-us/web/html/element/index.md similarity index 100% rename from files/en-us/web/html/element/index.html rename to files/en-us/web/html/element/index.md diff --git a/files/en-us/web/html/element/input/button/index.html b/files/en-us/web/html/element/input/button/index.md similarity index 100% rename from files/en-us/web/html/element/input/button/index.html rename to files/en-us/web/html/element/input/button/index.md diff --git a/files/en-us/web/html/element/input/checkbox/index.html b/files/en-us/web/html/element/input/checkbox/index.md similarity index 100% rename from files/en-us/web/html/element/input/checkbox/index.html rename to files/en-us/web/html/element/input/checkbox/index.md diff --git a/files/en-us/web/html/element/input/color/index.html b/files/en-us/web/html/element/input/color/index.md similarity index 100% rename from files/en-us/web/html/element/input/color/index.html rename to files/en-us/web/html/element/input/color/index.md diff --git a/files/en-us/web/html/element/input/date/index.html b/files/en-us/web/html/element/input/date/index.md similarity index 100% rename from files/en-us/web/html/element/input/date/index.html rename to files/en-us/web/html/element/input/date/index.md diff --git a/files/en-us/web/html/element/input/datetime-local/index.html b/files/en-us/web/html/element/input/datetime-local/index.md similarity index 100% rename from files/en-us/web/html/element/input/datetime-local/index.html rename to files/en-us/web/html/element/input/datetime-local/index.md diff --git a/files/en-us/web/html/element/input/datetime/index.html b/files/en-us/web/html/element/input/datetime/index.md similarity index 100% rename from files/en-us/web/html/element/input/datetime/index.html rename to files/en-us/web/html/element/input/datetime/index.md diff --git a/files/en-us/web/html/element/input/email/index.html b/files/en-us/web/html/element/input/email/index.md similarity index 100% rename from files/en-us/web/html/element/input/email/index.html rename to files/en-us/web/html/element/input/email/index.md diff --git a/files/en-us/web/html/element/input/file/index.html b/files/en-us/web/html/element/input/file/index.md similarity index 100% rename from files/en-us/web/html/element/input/file/index.html rename to files/en-us/web/html/element/input/file/index.md diff --git a/files/en-us/web/html/element/input/hidden/index.html b/files/en-us/web/html/element/input/hidden/index.md similarity index 100% rename from files/en-us/web/html/element/input/hidden/index.html rename to files/en-us/web/html/element/input/hidden/index.md diff --git a/files/en-us/web/html/element/input/image/index.html b/files/en-us/web/html/element/input/image/index.md similarity index 100% rename from files/en-us/web/html/element/input/image/index.html rename to files/en-us/web/html/element/input/image/index.md diff --git a/files/en-us/web/html/element/input/index.html b/files/en-us/web/html/element/input/index.md similarity index 100% rename from files/en-us/web/html/element/input/index.html rename to files/en-us/web/html/element/input/index.md diff --git a/files/en-us/web/html/element/input/month/index.html b/files/en-us/web/html/element/input/month/index.md similarity index 100% rename from files/en-us/web/html/element/input/month/index.html rename to files/en-us/web/html/element/input/month/index.md diff --git a/files/en-us/web/html/element/input/number/index.html b/files/en-us/web/html/element/input/number/index.md similarity index 100% rename from files/en-us/web/html/element/input/number/index.html rename to files/en-us/web/html/element/input/number/index.md diff --git a/files/en-us/web/html/element/input/password/index.html b/files/en-us/web/html/element/input/password/index.md similarity index 100% rename from files/en-us/web/html/element/input/password/index.html rename to files/en-us/web/html/element/input/password/index.md diff --git a/files/en-us/web/html/element/input/radio/index.html b/files/en-us/web/html/element/input/radio/index.md similarity index 100% rename from files/en-us/web/html/element/input/radio/index.html rename to files/en-us/web/html/element/input/radio/index.md diff --git a/files/en-us/web/html/element/input/range/index.html b/files/en-us/web/html/element/input/range/index.md similarity index 100% rename from files/en-us/web/html/element/input/range/index.html rename to files/en-us/web/html/element/input/range/index.md diff --git a/files/en-us/web/html/element/input/reset/index.html b/files/en-us/web/html/element/input/reset/index.md similarity index 100% rename from files/en-us/web/html/element/input/reset/index.html rename to files/en-us/web/html/element/input/reset/index.md diff --git a/files/en-us/web/html/element/input/search/index.html b/files/en-us/web/html/element/input/search/index.md similarity index 100% rename from files/en-us/web/html/element/input/search/index.html rename to files/en-us/web/html/element/input/search/index.md diff --git a/files/en-us/web/html/element/input/submit/index.html b/files/en-us/web/html/element/input/submit/index.md similarity index 100% rename from files/en-us/web/html/element/input/submit/index.html rename to files/en-us/web/html/element/input/submit/index.md diff --git a/files/en-us/web/html/element/input/tel/index.html b/files/en-us/web/html/element/input/tel/index.md similarity index 100% rename from files/en-us/web/html/element/input/tel/index.html rename to files/en-us/web/html/element/input/tel/index.md diff --git a/files/en-us/web/html/element/input/text/index.html b/files/en-us/web/html/element/input/text/index.md similarity index 100% rename from files/en-us/web/html/element/input/text/index.html rename to files/en-us/web/html/element/input/text/index.md diff --git a/files/en-us/web/html/element/input/time/index.html b/files/en-us/web/html/element/input/time/index.md similarity index 100% rename from files/en-us/web/html/element/input/time/index.html rename to files/en-us/web/html/element/input/time/index.md diff --git a/files/en-us/web/html/element/input/url/index.html b/files/en-us/web/html/element/input/url/index.md similarity index 100% rename from files/en-us/web/html/element/input/url/index.html rename to files/en-us/web/html/element/input/url/index.md diff --git a/files/en-us/web/html/element/input/week/index.html b/files/en-us/web/html/element/input/week/index.md similarity index 100% rename from files/en-us/web/html/element/input/week/index.html rename to files/en-us/web/html/element/input/week/index.md diff --git a/files/en-us/web/html/element/ins/index.html b/files/en-us/web/html/element/ins/index.md similarity index 100% rename from files/en-us/web/html/element/ins/index.html rename to files/en-us/web/html/element/ins/index.md diff --git a/files/en-us/web/html/element/kbd/index.html b/files/en-us/web/html/element/kbd/index.md similarity index 100% rename from files/en-us/web/html/element/kbd/index.html rename to files/en-us/web/html/element/kbd/index.md diff --git a/files/en-us/web/html/element/keygen/index.html b/files/en-us/web/html/element/keygen/index.md similarity index 100% rename from files/en-us/web/html/element/keygen/index.html rename to files/en-us/web/html/element/keygen/index.md diff --git a/files/en-us/web/html/element/label/index.html b/files/en-us/web/html/element/label/index.md similarity index 100% rename from files/en-us/web/html/element/label/index.html rename to files/en-us/web/html/element/label/index.md diff --git a/files/en-us/web/html/element/legend/index.html b/files/en-us/web/html/element/legend/index.md similarity index 100% rename from files/en-us/web/html/element/legend/index.html rename to files/en-us/web/html/element/legend/index.md diff --git a/files/en-us/web/html/element/li/index.html b/files/en-us/web/html/element/li/index.md similarity index 100% rename from files/en-us/web/html/element/li/index.html rename to files/en-us/web/html/element/li/index.md diff --git a/files/en-us/web/html/element/link/index.html b/files/en-us/web/html/element/link/index.md similarity index 100% rename from files/en-us/web/html/element/link/index.html rename to files/en-us/web/html/element/link/index.md diff --git a/files/en-us/web/html/element/main/index.html b/files/en-us/web/html/element/main/index.md similarity index 100% rename from files/en-us/web/html/element/main/index.html rename to files/en-us/web/html/element/main/index.md diff --git a/files/en-us/web/html/element/map/index.html b/files/en-us/web/html/element/map/index.md similarity index 100% rename from files/en-us/web/html/element/map/index.html rename to files/en-us/web/html/element/map/index.md diff --git a/files/en-us/web/html/element/mark/index.html b/files/en-us/web/html/element/mark/index.md similarity index 100% rename from files/en-us/web/html/element/mark/index.html rename to files/en-us/web/html/element/mark/index.md diff --git a/files/en-us/web/html/element/marquee/index.html b/files/en-us/web/html/element/marquee/index.md similarity index 100% rename from files/en-us/web/html/element/marquee/index.html rename to files/en-us/web/html/element/marquee/index.md diff --git a/files/en-us/web/html/element/menu/index.html b/files/en-us/web/html/element/menu/index.md similarity index 100% rename from files/en-us/web/html/element/menu/index.html rename to files/en-us/web/html/element/menu/index.md diff --git a/files/en-us/web/html/element/menuitem/index.html b/files/en-us/web/html/element/menuitem/index.md similarity index 100% rename from files/en-us/web/html/element/menuitem/index.html rename to files/en-us/web/html/element/menuitem/index.md diff --git a/files/en-us/web/html/element/meta/index.html b/files/en-us/web/html/element/meta/index.md similarity index 100% rename from files/en-us/web/html/element/meta/index.html rename to files/en-us/web/html/element/meta/index.md diff --git a/files/en-us/web/html/element/meta/name/index.html b/files/en-us/web/html/element/meta/name/index.md similarity index 100% rename from files/en-us/web/html/element/meta/name/index.html rename to files/en-us/web/html/element/meta/name/index.md diff --git a/files/en-us/web/html/element/meta/name/theme-color/index.html b/files/en-us/web/html/element/meta/name/theme-color/index.md similarity index 100% rename from files/en-us/web/html/element/meta/name/theme-color/index.html rename to files/en-us/web/html/element/meta/name/theme-color/index.md diff --git a/files/en-us/web/html/element/meter/index.html b/files/en-us/web/html/element/meter/index.md similarity index 100% rename from files/en-us/web/html/element/meter/index.html rename to files/en-us/web/html/element/meter/index.md diff --git a/files/en-us/web/html/element/nav/index.html b/files/en-us/web/html/element/nav/index.md similarity index 100% rename from files/en-us/web/html/element/nav/index.html rename to files/en-us/web/html/element/nav/index.md diff --git a/files/en-us/web/html/element/nobr/index.html b/files/en-us/web/html/element/nobr/index.md similarity index 100% rename from files/en-us/web/html/element/nobr/index.html rename to files/en-us/web/html/element/nobr/index.md diff --git a/files/en-us/web/html/element/noembed/index.html b/files/en-us/web/html/element/noembed/index.md similarity index 100% rename from files/en-us/web/html/element/noembed/index.html rename to files/en-us/web/html/element/noembed/index.md diff --git a/files/en-us/web/html/element/noframes/index.html b/files/en-us/web/html/element/noframes/index.md similarity index 100% rename from files/en-us/web/html/element/noframes/index.html rename to files/en-us/web/html/element/noframes/index.md diff --git a/files/en-us/web/html/element/noscript/index.html b/files/en-us/web/html/element/noscript/index.md similarity index 100% rename from files/en-us/web/html/element/noscript/index.html rename to files/en-us/web/html/element/noscript/index.md diff --git a/files/en-us/web/html/element/object/index.html b/files/en-us/web/html/element/object/index.md similarity index 100% rename from files/en-us/web/html/element/object/index.html rename to files/en-us/web/html/element/object/index.md diff --git a/files/en-us/web/html/element/ol/index.html b/files/en-us/web/html/element/ol/index.md similarity index 100% rename from files/en-us/web/html/element/ol/index.html rename to files/en-us/web/html/element/ol/index.md diff --git a/files/en-us/web/html/element/optgroup/index.html b/files/en-us/web/html/element/optgroup/index.md similarity index 100% rename from files/en-us/web/html/element/optgroup/index.html rename to files/en-us/web/html/element/optgroup/index.md diff --git a/files/en-us/web/html/element/option/index.html b/files/en-us/web/html/element/option/index.md similarity index 100% rename from files/en-us/web/html/element/option/index.html rename to files/en-us/web/html/element/option/index.md diff --git a/files/en-us/web/html/element/output/index.html b/files/en-us/web/html/element/output/index.md similarity index 100% rename from files/en-us/web/html/element/output/index.html rename to files/en-us/web/html/element/output/index.md diff --git a/files/en-us/web/html/element/p/index.html b/files/en-us/web/html/element/p/index.md similarity index 100% rename from files/en-us/web/html/element/p/index.html rename to files/en-us/web/html/element/p/index.md diff --git a/files/en-us/web/html/element/param/index.html b/files/en-us/web/html/element/param/index.md similarity index 100% rename from files/en-us/web/html/element/param/index.html rename to files/en-us/web/html/element/param/index.md diff --git a/files/en-us/web/html/element/picture/index.html b/files/en-us/web/html/element/picture/index.md similarity index 100% rename from files/en-us/web/html/element/picture/index.html rename to files/en-us/web/html/element/picture/index.md diff --git a/files/en-us/web/html/element/plaintext/index.html b/files/en-us/web/html/element/plaintext/index.md similarity index 100% rename from files/en-us/web/html/element/plaintext/index.html rename to files/en-us/web/html/element/plaintext/index.md diff --git a/files/en-us/web/html/element/portal/index.html b/files/en-us/web/html/element/portal/index.md similarity index 100% rename from files/en-us/web/html/element/portal/index.html rename to files/en-us/web/html/element/portal/index.md diff --git a/files/en-us/web/html/element/pre/index.html b/files/en-us/web/html/element/pre/index.md similarity index 100% rename from files/en-us/web/html/element/pre/index.html rename to files/en-us/web/html/element/pre/index.md diff --git a/files/en-us/web/html/element/progress/index.html b/files/en-us/web/html/element/progress/index.md similarity index 100% rename from files/en-us/web/html/element/progress/index.html rename to files/en-us/web/html/element/progress/index.md diff --git a/files/en-us/web/html/element/q/index.html b/files/en-us/web/html/element/q/index.md similarity index 100% rename from files/en-us/web/html/element/q/index.html rename to files/en-us/web/html/element/q/index.md diff --git a/files/en-us/web/html/element/rb/index.html b/files/en-us/web/html/element/rb/index.md similarity index 100% rename from files/en-us/web/html/element/rb/index.html rename to files/en-us/web/html/element/rb/index.md diff --git a/files/en-us/web/html/element/rp/index.html b/files/en-us/web/html/element/rp/index.md similarity index 100% rename from files/en-us/web/html/element/rp/index.html rename to files/en-us/web/html/element/rp/index.md diff --git a/files/en-us/web/html/element/rt/index.html b/files/en-us/web/html/element/rt/index.md similarity index 100% rename from files/en-us/web/html/element/rt/index.html rename to files/en-us/web/html/element/rt/index.md diff --git a/files/en-us/web/html/element/rtc/index.html b/files/en-us/web/html/element/rtc/index.md similarity index 100% rename from files/en-us/web/html/element/rtc/index.html rename to files/en-us/web/html/element/rtc/index.md diff --git a/files/en-us/web/html/element/ruby/index.html b/files/en-us/web/html/element/ruby/index.md similarity index 100% rename from files/en-us/web/html/element/ruby/index.html rename to files/en-us/web/html/element/ruby/index.md diff --git a/files/en-us/web/html/element/s/index.html b/files/en-us/web/html/element/s/index.md similarity index 100% rename from files/en-us/web/html/element/s/index.html rename to files/en-us/web/html/element/s/index.md diff --git a/files/en-us/web/html/element/samp/index.html b/files/en-us/web/html/element/samp/index.md similarity index 100% rename from files/en-us/web/html/element/samp/index.html rename to files/en-us/web/html/element/samp/index.md diff --git a/files/en-us/web/html/element/script/index.html b/files/en-us/web/html/element/script/index.md similarity index 100% rename from files/en-us/web/html/element/script/index.html rename to files/en-us/web/html/element/script/index.md diff --git a/files/en-us/web/html/element/section/index.html b/files/en-us/web/html/element/section/index.md similarity index 100% rename from files/en-us/web/html/element/section/index.html rename to files/en-us/web/html/element/section/index.md diff --git a/files/en-us/web/html/element/select/index.html b/files/en-us/web/html/element/select/index.md similarity index 100% rename from files/en-us/web/html/element/select/index.html rename to files/en-us/web/html/element/select/index.md diff --git a/files/en-us/web/html/element/shadow/index.html b/files/en-us/web/html/element/shadow/index.md similarity index 100% rename from files/en-us/web/html/element/shadow/index.html rename to files/en-us/web/html/element/shadow/index.md diff --git a/files/en-us/web/html/element/slot/index.html b/files/en-us/web/html/element/slot/index.md similarity index 100% rename from files/en-us/web/html/element/slot/index.html rename to files/en-us/web/html/element/slot/index.md diff --git a/files/en-us/web/html/element/small/index.html b/files/en-us/web/html/element/small/index.md similarity index 100% rename from files/en-us/web/html/element/small/index.html rename to files/en-us/web/html/element/small/index.md diff --git a/files/en-us/web/html/element/source/index.html b/files/en-us/web/html/element/source/index.md similarity index 100% rename from files/en-us/web/html/element/source/index.html rename to files/en-us/web/html/element/source/index.md diff --git a/files/en-us/web/html/element/spacer/index.html b/files/en-us/web/html/element/spacer/index.md similarity index 100% rename from files/en-us/web/html/element/spacer/index.html rename to files/en-us/web/html/element/spacer/index.md diff --git a/files/en-us/web/html/element/span/index.html b/files/en-us/web/html/element/span/index.md similarity index 100% rename from files/en-us/web/html/element/span/index.html rename to files/en-us/web/html/element/span/index.md diff --git a/files/en-us/web/html/element/strike/index.html b/files/en-us/web/html/element/strike/index.md similarity index 100% rename from files/en-us/web/html/element/strike/index.html rename to files/en-us/web/html/element/strike/index.md diff --git a/files/en-us/web/html/element/strong/index.html b/files/en-us/web/html/element/strong/index.md similarity index 100% rename from files/en-us/web/html/element/strong/index.html rename to files/en-us/web/html/element/strong/index.md diff --git a/files/en-us/web/html/element/style/index.html b/files/en-us/web/html/element/style/index.md similarity index 100% rename from files/en-us/web/html/element/style/index.html rename to files/en-us/web/html/element/style/index.md diff --git a/files/en-us/web/html/element/sub/index.html b/files/en-us/web/html/element/sub/index.md similarity index 100% rename from files/en-us/web/html/element/sub/index.html rename to files/en-us/web/html/element/sub/index.md diff --git a/files/en-us/web/html/element/summary/index.html b/files/en-us/web/html/element/summary/index.md similarity index 100% rename from files/en-us/web/html/element/summary/index.html rename to files/en-us/web/html/element/summary/index.md diff --git a/files/en-us/web/html/element/sup/index.html b/files/en-us/web/html/element/sup/index.md similarity index 100% rename from files/en-us/web/html/element/sup/index.html rename to files/en-us/web/html/element/sup/index.md diff --git a/files/en-us/web/html/element/table/index.html b/files/en-us/web/html/element/table/index.md similarity index 100% rename from files/en-us/web/html/element/table/index.html rename to files/en-us/web/html/element/table/index.md diff --git a/files/en-us/web/html/element/tbody/index.html b/files/en-us/web/html/element/tbody/index.md similarity index 100% rename from files/en-us/web/html/element/tbody/index.html rename to files/en-us/web/html/element/tbody/index.md diff --git a/files/en-us/web/html/element/td/index.html b/files/en-us/web/html/element/td/index.md similarity index 100% rename from files/en-us/web/html/element/td/index.html rename to files/en-us/web/html/element/td/index.md diff --git a/files/en-us/web/html/element/template/index.html b/files/en-us/web/html/element/template/index.md similarity index 100% rename from files/en-us/web/html/element/template/index.html rename to files/en-us/web/html/element/template/index.md diff --git a/files/en-us/web/html/element/textarea/index.html b/files/en-us/web/html/element/textarea/index.md similarity index 100% rename from files/en-us/web/html/element/textarea/index.html rename to files/en-us/web/html/element/textarea/index.md diff --git a/files/en-us/web/html/element/tfoot/index.html b/files/en-us/web/html/element/tfoot/index.md similarity index 100% rename from files/en-us/web/html/element/tfoot/index.html rename to files/en-us/web/html/element/tfoot/index.md diff --git a/files/en-us/web/html/element/th/index.html b/files/en-us/web/html/element/th/index.md similarity index 100% rename from files/en-us/web/html/element/th/index.html rename to files/en-us/web/html/element/th/index.md diff --git a/files/en-us/web/html/element/thead/index.html b/files/en-us/web/html/element/thead/index.md similarity index 100% rename from files/en-us/web/html/element/thead/index.html rename to files/en-us/web/html/element/thead/index.md diff --git a/files/en-us/web/html/element/time/index.html b/files/en-us/web/html/element/time/index.md similarity index 100% rename from files/en-us/web/html/element/time/index.html rename to files/en-us/web/html/element/time/index.md diff --git a/files/en-us/web/html/element/title/index.html b/files/en-us/web/html/element/title/index.md similarity index 100% rename from files/en-us/web/html/element/title/index.html rename to files/en-us/web/html/element/title/index.md diff --git a/files/en-us/web/html/element/tr/index.html b/files/en-us/web/html/element/tr/index.md similarity index 100% rename from files/en-us/web/html/element/tr/index.html rename to files/en-us/web/html/element/tr/index.md diff --git a/files/en-us/web/html/element/track/index.html b/files/en-us/web/html/element/track/index.md similarity index 100% rename from files/en-us/web/html/element/track/index.html rename to files/en-us/web/html/element/track/index.md diff --git a/files/en-us/web/html/element/tt/index.html b/files/en-us/web/html/element/tt/index.md similarity index 100% rename from files/en-us/web/html/element/tt/index.html rename to files/en-us/web/html/element/tt/index.md diff --git a/files/en-us/web/html/element/u/index.html b/files/en-us/web/html/element/u/index.md similarity index 100% rename from files/en-us/web/html/element/u/index.html rename to files/en-us/web/html/element/u/index.md diff --git a/files/en-us/web/html/element/ul/index.html b/files/en-us/web/html/element/ul/index.md similarity index 100% rename from files/en-us/web/html/element/ul/index.html rename to files/en-us/web/html/element/ul/index.md diff --git a/files/en-us/web/html/element/var/index.html b/files/en-us/web/html/element/var/index.md similarity index 100% rename from files/en-us/web/html/element/var/index.html rename to files/en-us/web/html/element/var/index.md diff --git a/files/en-us/web/html/element/video/index.html b/files/en-us/web/html/element/video/index.md similarity index 100% rename from files/en-us/web/html/element/video/index.html rename to files/en-us/web/html/element/video/index.md diff --git a/files/en-us/web/html/element/wbr/index.html b/files/en-us/web/html/element/wbr/index.md similarity index 100% rename from files/en-us/web/html/element/wbr/index.html rename to files/en-us/web/html/element/wbr/index.md diff --git a/files/en-us/web/html/element/xmp/index.html b/files/en-us/web/html/element/xmp/index.md similarity index 100% rename from files/en-us/web/html/element/xmp/index.html rename to files/en-us/web/html/element/xmp/index.md diff --git a/files/en-us/web/html/global_attributes/accesskey/index.html b/files/en-us/web/html/global_attributes/accesskey/index.md similarity index 100% rename from files/en-us/web/html/global_attributes/accesskey/index.html rename to files/en-us/web/html/global_attributes/accesskey/index.md diff --git a/files/en-us/web/html/global_attributes/autocapitalize/index.html b/files/en-us/web/html/global_attributes/autocapitalize/index.md similarity index 100% rename from files/en-us/web/html/global_attributes/autocapitalize/index.html rename to files/en-us/web/html/global_attributes/autocapitalize/index.md diff --git a/files/en-us/web/html/global_attributes/autofocus/index.html b/files/en-us/web/html/global_attributes/autofocus/index.md similarity index 100% rename from files/en-us/web/html/global_attributes/autofocus/index.html rename to files/en-us/web/html/global_attributes/autofocus/index.md diff --git a/files/en-us/web/html/global_attributes/class/index.html b/files/en-us/web/html/global_attributes/class/index.md similarity index 100% rename from files/en-us/web/html/global_attributes/class/index.html rename to files/en-us/web/html/global_attributes/class/index.md diff --git a/files/en-us/web/html/global_attributes/contenteditable/index.html b/files/en-us/web/html/global_attributes/contenteditable/index.md similarity index 100% rename from files/en-us/web/html/global_attributes/contenteditable/index.html rename to files/en-us/web/html/global_attributes/contenteditable/index.md diff --git a/files/en-us/web/html/global_attributes/contextmenu/index.html b/files/en-us/web/html/global_attributes/contextmenu/index.md similarity index 100% rename from files/en-us/web/html/global_attributes/contextmenu/index.html rename to files/en-us/web/html/global_attributes/contextmenu/index.md diff --git a/files/en-us/web/html/global_attributes/data-_star_/index.html b/files/en-us/web/html/global_attributes/data-_star_/index.md similarity index 100% rename from files/en-us/web/html/global_attributes/data-_star_/index.html rename to files/en-us/web/html/global_attributes/data-_star_/index.md diff --git a/files/en-us/web/html/global_attributes/dir/index.html b/files/en-us/web/html/global_attributes/dir/index.md similarity index 100% rename from files/en-us/web/html/global_attributes/dir/index.html rename to files/en-us/web/html/global_attributes/dir/index.md diff --git a/files/en-us/web/html/global_attributes/draggable/index.html b/files/en-us/web/html/global_attributes/draggable/index.md similarity index 100% rename from files/en-us/web/html/global_attributes/draggable/index.html rename to files/en-us/web/html/global_attributes/draggable/index.md diff --git a/files/en-us/web/html/global_attributes/enterkeyhint/index.html b/files/en-us/web/html/global_attributes/enterkeyhint/index.md similarity index 100% rename from files/en-us/web/html/global_attributes/enterkeyhint/index.html rename to files/en-us/web/html/global_attributes/enterkeyhint/index.md diff --git a/files/en-us/web/html/global_attributes/hidden/index.html b/files/en-us/web/html/global_attributes/hidden/index.md similarity index 100% rename from files/en-us/web/html/global_attributes/hidden/index.html rename to files/en-us/web/html/global_attributes/hidden/index.md diff --git a/files/en-us/web/html/global_attributes/id/index.html b/files/en-us/web/html/global_attributes/id/index.md similarity index 100% rename from files/en-us/web/html/global_attributes/id/index.html rename to files/en-us/web/html/global_attributes/id/index.md diff --git a/files/en-us/web/html/global_attributes/index.html b/files/en-us/web/html/global_attributes/index.md similarity index 100% rename from files/en-us/web/html/global_attributes/index.html rename to files/en-us/web/html/global_attributes/index.md diff --git a/files/en-us/web/html/global_attributes/inputmode/index.html b/files/en-us/web/html/global_attributes/inputmode/index.md similarity index 100% rename from files/en-us/web/html/global_attributes/inputmode/index.html rename to files/en-us/web/html/global_attributes/inputmode/index.md diff --git a/files/en-us/web/html/global_attributes/is/index.html b/files/en-us/web/html/global_attributes/is/index.md similarity index 100% rename from files/en-us/web/html/global_attributes/is/index.html rename to files/en-us/web/html/global_attributes/is/index.md diff --git a/files/en-us/web/html/global_attributes/itemid/index.html b/files/en-us/web/html/global_attributes/itemid/index.md similarity index 100% rename from files/en-us/web/html/global_attributes/itemid/index.html rename to files/en-us/web/html/global_attributes/itemid/index.md diff --git a/files/en-us/web/html/global_attributes/itemprop/index.html b/files/en-us/web/html/global_attributes/itemprop/index.md similarity index 100% rename from files/en-us/web/html/global_attributes/itemprop/index.html rename to files/en-us/web/html/global_attributes/itemprop/index.md diff --git a/files/en-us/web/html/global_attributes/itemref/index.html b/files/en-us/web/html/global_attributes/itemref/index.md similarity index 100% rename from files/en-us/web/html/global_attributes/itemref/index.html rename to files/en-us/web/html/global_attributes/itemref/index.md diff --git a/files/en-us/web/html/global_attributes/itemscope/index.html b/files/en-us/web/html/global_attributes/itemscope/index.md similarity index 100% rename from files/en-us/web/html/global_attributes/itemscope/index.html rename to files/en-us/web/html/global_attributes/itemscope/index.md diff --git a/files/en-us/web/html/global_attributes/itemtype/index.html b/files/en-us/web/html/global_attributes/itemtype/index.md similarity index 100% rename from files/en-us/web/html/global_attributes/itemtype/index.html rename to files/en-us/web/html/global_attributes/itemtype/index.md diff --git a/files/en-us/web/html/global_attributes/lang/index.html b/files/en-us/web/html/global_attributes/lang/index.md similarity index 100% rename from files/en-us/web/html/global_attributes/lang/index.html rename to files/en-us/web/html/global_attributes/lang/index.md diff --git a/files/en-us/web/html/global_attributes/nonce/index.html b/files/en-us/web/html/global_attributes/nonce/index.md similarity index 100% rename from files/en-us/web/html/global_attributes/nonce/index.html rename to files/en-us/web/html/global_attributes/nonce/index.md diff --git a/files/en-us/web/html/global_attributes/part/index.html b/files/en-us/web/html/global_attributes/part/index.md similarity index 100% rename from files/en-us/web/html/global_attributes/part/index.html rename to files/en-us/web/html/global_attributes/part/index.md diff --git a/files/en-us/web/html/global_attributes/slot/index.html b/files/en-us/web/html/global_attributes/slot/index.md similarity index 100% rename from files/en-us/web/html/global_attributes/slot/index.html rename to files/en-us/web/html/global_attributes/slot/index.md diff --git a/files/en-us/web/html/global_attributes/spellcheck/index.html b/files/en-us/web/html/global_attributes/spellcheck/index.md similarity index 100% rename from files/en-us/web/html/global_attributes/spellcheck/index.html rename to files/en-us/web/html/global_attributes/spellcheck/index.md diff --git a/files/en-us/web/html/global_attributes/style/index.html b/files/en-us/web/html/global_attributes/style/index.md similarity index 100% rename from files/en-us/web/html/global_attributes/style/index.html rename to files/en-us/web/html/global_attributes/style/index.md diff --git a/files/en-us/web/html/global_attributes/tabindex/index.html b/files/en-us/web/html/global_attributes/tabindex/index.md similarity index 100% rename from files/en-us/web/html/global_attributes/tabindex/index.html rename to files/en-us/web/html/global_attributes/tabindex/index.md diff --git a/files/en-us/web/html/global_attributes/title/index.html b/files/en-us/web/html/global_attributes/title/index.md similarity index 100% rename from files/en-us/web/html/global_attributes/title/index.html rename to files/en-us/web/html/global_attributes/title/index.md diff --git a/files/en-us/web/html/global_attributes/translate/index.html b/files/en-us/web/html/global_attributes/translate/index.md similarity index 100% rename from files/en-us/web/html/global_attributes/translate/index.html rename to files/en-us/web/html/global_attributes/translate/index.md diff --git a/files/en-us/web/html/global_attributes/x-ms-acceleratorkey/index.html b/files/en-us/web/html/global_attributes/x-ms-acceleratorkey/index.md similarity index 100% rename from files/en-us/web/html/global_attributes/x-ms-acceleratorkey/index.html rename to files/en-us/web/html/global_attributes/x-ms-acceleratorkey/index.md diff --git a/files/en-us/web/html/global_attributes/x-ms-format-detection/index.html b/files/en-us/web/html/global_attributes/x-ms-format-detection/index.md similarity index 100% rename from files/en-us/web/html/global_attributes/x-ms-format-detection/index.html rename to files/en-us/web/html/global_attributes/x-ms-format-detection/index.md diff --git a/files/en-us/web/html/index.html b/files/en-us/web/html/index.md similarity index 100% rename from files/en-us/web/html/index.html rename to files/en-us/web/html/index.md diff --git a/files/en-us/web/html/index/index.html b/files/en-us/web/html/index/index.md similarity index 100% rename from files/en-us/web/html/index/index.html rename to files/en-us/web/html/index/index.md diff --git a/files/en-us/web/html/inline_elements/index.html b/files/en-us/web/html/inline_elements/index.md similarity index 100% rename from files/en-us/web/html/inline_elements/index.html rename to files/en-us/web/html/inline_elements/index.md diff --git a/files/en-us/web/html/link_types/dns-prefetch/index.html b/files/en-us/web/html/link_types/dns-prefetch/index.md similarity index 100% rename from files/en-us/web/html/link_types/dns-prefetch/index.html rename to files/en-us/web/html/link_types/dns-prefetch/index.md diff --git a/files/en-us/web/html/link_types/index.html b/files/en-us/web/html/link_types/index.md similarity index 100% rename from files/en-us/web/html/link_types/index.html rename to files/en-us/web/html/link_types/index.md diff --git a/files/en-us/web/html/link_types/manifest/index.html b/files/en-us/web/html/link_types/manifest/index.md similarity index 100% rename from files/en-us/web/html/link_types/manifest/index.html rename to files/en-us/web/html/link_types/manifest/index.md diff --git a/files/en-us/web/html/link_types/modulepreload/index.html b/files/en-us/web/html/link_types/modulepreload/index.md similarity index 100% rename from files/en-us/web/html/link_types/modulepreload/index.html rename to files/en-us/web/html/link_types/modulepreload/index.md diff --git a/files/en-us/web/html/link_types/noopener/index.html b/files/en-us/web/html/link_types/noopener/index.md similarity index 100% rename from files/en-us/web/html/link_types/noopener/index.html rename to files/en-us/web/html/link_types/noopener/index.md diff --git a/files/en-us/web/html/link_types/noreferrer/index.html b/files/en-us/web/html/link_types/noreferrer/index.md similarity index 100% rename from files/en-us/web/html/link_types/noreferrer/index.html rename to files/en-us/web/html/link_types/noreferrer/index.md diff --git a/files/en-us/web/html/link_types/preconnect/index.html b/files/en-us/web/html/link_types/preconnect/index.md similarity index 100% rename from files/en-us/web/html/link_types/preconnect/index.html rename to files/en-us/web/html/link_types/preconnect/index.md diff --git a/files/en-us/web/html/link_types/prefetch/index.html b/files/en-us/web/html/link_types/prefetch/index.md similarity index 100% rename from files/en-us/web/html/link_types/prefetch/index.html rename to files/en-us/web/html/link_types/prefetch/index.md diff --git a/files/en-us/web/html/link_types/preload/index.html b/files/en-us/web/html/link_types/preload/index.md similarity index 100% rename from files/en-us/web/html/link_types/preload/index.html rename to files/en-us/web/html/link_types/preload/index.md diff --git a/files/en-us/web/html/link_types/prerender/index.html b/files/en-us/web/html/link_types/prerender/index.md similarity index 100% rename from files/en-us/web/html/link_types/prerender/index.html rename to files/en-us/web/html/link_types/prerender/index.md diff --git a/files/en-us/web/html/microdata/index.html b/files/en-us/web/html/microdata/index.md similarity index 100% rename from files/en-us/web/html/microdata/index.html rename to files/en-us/web/html/microdata/index.md diff --git a/files/en-us/web/html/microformats/index.html b/files/en-us/web/html/microformats/index.md similarity index 100% rename from files/en-us/web/html/microformats/index.html rename to files/en-us/web/html/microformats/index.md diff --git a/files/en-us/web/html/quirks_mode_and_standards_mode/index.html b/files/en-us/web/html/quirks_mode_and_standards_mode/index.md similarity index 100% rename from files/en-us/web/html/quirks_mode_and_standards_mode/index.html rename to files/en-us/web/html/quirks_mode_and_standards_mode/index.md diff --git a/files/en-us/web/html/reference/index.html b/files/en-us/web/html/reference/index.md similarity index 100% rename from files/en-us/web/html/reference/index.html rename to files/en-us/web/html/reference/index.md diff --git a/files/en-us/web/html/viewport_meta_tag/index.html b/files/en-us/web/html/viewport_meta_tag/index.md similarity index 100% rename from files/en-us/web/html/viewport_meta_tag/index.html rename to files/en-us/web/html/viewport_meta_tag/index.md From fe833f4b94ea9c46666ff2729cab49e016300113 Mon Sep 17 00:00:00 2001 From: Will Bamberg Date: Mon, 27 Sep 2021 14:27:14 -0700 Subject: [PATCH 2/7] Convert file contents to Markdown --- files/en-us/web/html/applying_color/index.md | 598 ++-- .../en-us/web/html/attributes/accept/index.md | 226 +- .../web/html/attributes/autocomplete/index.md | 401 ++- .../web/html/attributes/capture/index.md | 116 +- .../web/html/attributes/crossorigin/index.md | 146 +- .../web/html/attributes/disabled/index.md | 209 +- .../html/attributes/elementtiming/index.md | 76 +- files/en-us/web/html/attributes/for/index.md | 106 +- files/en-us/web/html/attributes/index.md | 2528 +++++++++++----- files/en-us/web/html/attributes/max/index.md | 297 +- .../web/html/attributes/maxlength/index.md | 79 +- files/en-us/web/html/attributes/min/index.md | 256 +- .../web/html/attributes/minlength/index.md | 82 +- .../web/html/attributes/multiple/index.md | 278 +- .../web/html/attributes/pattern/index.md | 179 +- .../web/html/attributes/readonly/index.md | 235 +- files/en-us/web/html/attributes/rel/index.md | 633 ++-- .../web/html/attributes/required/index.md | 139 +- files/en-us/web/html/attributes/size/index.md | 84 +- files/en-us/web/html/attributes/step/index.md | 211 +- .../web/html/block-level_elements/index.md | 227 +- .../web/html/cors_enabled_image/index.md | 102 +- .../web/html/date_and_time_formats/index.md | 700 +++-- files/en-us/web/html/element/a/index.md | 663 ++--- files/en-us/web/html/element/abbr/index.md | 233 +- files/en-us/web/html/element/acronym/index.md | 57 +- files/en-us/web/html/element/address/index.md | 171 +- files/en-us/web/html/element/applet/index.md | 164 +- files/en-us/web/html/element/area/index.md | 268 +- files/en-us/web/html/element/article/index.md | 217 +- files/en-us/web/html/element/aside/index.md | 161 +- files/en-us/web/html/element/audio/index.md | 674 +++-- files/en-us/web/html/element/b/index.md | 145 +- files/en-us/web/html/element/base/index.md | 154 +- .../en-us/web/html/element/basefont/index.md | 65 +- files/en-us/web/html/element/bdi/index.md | 210 +- files/en-us/web/html/element/bdo/index.md | 154 +- files/en-us/web/html/element/bgsound/index.md | 59 +- files/en-us/web/html/element/big/index.md | 88 +- files/en-us/web/html/element/blink/index.md | 51 +- .../web/html/element/blockquote/index.md | 138 +- files/en-us/web/html/element/body/index.md | 261 +- files/en-us/web/html/element/br/index.md | 164 +- files/en-us/web/html/element/button/index.md | 491 ++-- files/en-us/web/html/element/canvas/index.md | 273 +- files/en-us/web/html/element/caption/index.md | 190 +- files/en-us/web/html/element/center/index.md | 59 +- files/en-us/web/html/element/cite/index.md | 190 +- files/en-us/web/html/element/code/index.md | 141 +- files/en-us/web/html/element/col/index.md | 232 +- .../en-us/web/html/element/colgroup/index.md | 249 +- files/en-us/web/html/element/content/index.md | 140 +- files/en-us/web/html/element/data/index.md | 133 +- .../en-us/web/html/element/datalist/index.md | 143 +- files/en-us/web/html/element/dd/index.md | 117 +- files/en-us/web/html/element/del/index.md | 184 +- files/en-us/web/html/element/details/index.md | 253 +- files/en-us/web/html/element/dfn/index.md | 224 +- files/en-us/web/html/element/dialog/index.md | 216 +- files/en-us/web/html/element/dir/index.md | 49 +- files/en-us/web/html/element/div/index.md | 177 +- files/en-us/web/html/element/dl/index.md | 291 +- files/en-us/web/html/element/dt/index.md | 125 +- files/en-us/web/html/element/em/index.md | 148 +- files/en-us/web/html/element/embed/index.md | 147 +- .../en-us/web/html/element/fieldset/index.md | 212 +- .../web/html/element/figcaption/index.md | 106 +- files/en-us/web/html/element/figure/index.md | 208 +- files/en-us/web/html/element/font/index.md | 42 +- files/en-us/web/html/element/footer/index.md | 169 +- files/en-us/web/html/element/form/index.md | 345 +-- files/en-us/web/html/element/frame/index.md | 69 +- .../en-us/web/html/element/frameset/index.md | 48 +- files/en-us/web/html/element/head/index.md | 164 +- files/en-us/web/html/element/header/index.md | 201 +- .../html/element/heading_elements/index.md | 371 +-- files/en-us/web/html/element/hgroup/index.md | 197 +- files/en-us/web/html/element/hr/index.md | 143 +- files/en-us/web/html/element/html/index.md | 142 +- .../web/html/element/html/manifest/index.md | 24 +- files/en-us/web/html/element/i/index.md | 166 +- files/en-us/web/html/element/iframe/index.md | 371 +-- files/en-us/web/html/element/image/index.md | 34 +- files/en-us/web/html/element/img/index.md | 741 ++--- files/en-us/web/html/element/index.md | 146 +- .../web/html/element/input/button/index.md | 251 +- .../web/html/element/input/checkbox/index.md | 378 +-- .../web/html/element/input/color/index.md | 201 +- .../web/html/element/input/date/index.md | 454 +-- .../element/input/datetime-local/index.md | 557 ++-- .../web/html/element/input/datetime/index.md | 22 +- .../web/html/element/input/email/index.md | 456 +-- .../web/html/element/input/file/index.md | 473 +-- .../web/html/element/input/hidden/index.md | 187 +- .../web/html/element/input/image/index.md | 393 ++- files/en-us/web/html/element/input/index.md | 2588 +++++++++-------- .../web/html/element/input/month/index.md | 473 +-- .../web/html/element/input/number/index.md | 434 +-- .../web/html/element/input/password/index.md | 328 ++- .../web/html/element/input/radio/index.md | 350 +-- .../web/html/element/input/range/index.md | 603 ++-- .../web/html/element/input/reset/index.md | 192 +- .../web/html/element/input/search/index.md | 488 ++-- .../web/html/element/input/submit/index.md | 278 +- .../en-us/web/html/element/input/tel/index.md | 513 ++-- .../web/html/element/input/text/index.md | 449 +-- .../web/html/element/input/time/index.md | 530 ++-- .../en-us/web/html/element/input/url/index.md | 459 +-- .../web/html/element/input/week/index.md | 374 +-- files/en-us/web/html/element/ins/index.md | 146 +- files/en-us/web/html/element/kbd/index.md | 241 +- files/en-us/web/html/element/keygen/index.md | 174 +- files/en-us/web/html/element/label/index.md | 256 +- files/en-us/web/html/element/legend/index.md | 106 +- files/en-us/web/html/element/li/index.md | 213 +- files/en-us/web/html/element/link/index.md | 638 ++-- files/en-us/web/html/element/main/index.md | 211 +- files/en-us/web/html/element/map/index.md | 150 +- files/en-us/web/html/element/mark/index.md | 177 +- files/en-us/web/html/element/marquee/index.md | 142 +- files/en-us/web/html/element/menu/index.md | 167 +- .../en-us/web/html/element/menuitem/index.md | 187 +- files/en-us/web/html/element/meta/index.md | 273 +- .../en-us/web/html/element/meta/name/index.md | 529 ++-- .../element/meta/name/theme-color/index.md | 33 +- files/en-us/web/html/element/meter/index.md | 185 +- files/en-us/web/html/element/nav/index.md | 181 +- files/en-us/web/html/element/nobr/index.md | 28 +- files/en-us/web/html/element/noembed/index.md | 34 +- .../en-us/web/html/element/noframes/index.md | 52 +- .../en-us/web/html/element/noscript/index.md | 142 +- files/en-us/web/html/element/object/index.md | 239 +- files/en-us/web/html/element/ol/index.md | 308 +- .../en-us/web/html/element/optgroup/index.md | 143 +- files/en-us/web/html/element/option/index.md | 122 +- files/en-us/web/html/element/output/index.md | 152 +- files/en-us/web/html/element/p/index.md | 212 +- files/en-us/web/html/element/param/index.md | 134 +- files/en-us/web/html/element/picture/index.md | 206 +- .../en-us/web/html/element/plaintext/index.md | 47 +- files/en-us/web/html/element/portal/index.md | 57 +- files/en-us/web/html/element/pre/index.md | 183 +- .../en-us/web/html/element/progress/index.md | 152 +- files/en-us/web/html/element/q/index.md | 135 +- files/en-us/web/html/element/rb/index.md | 138 +- files/en-us/web/html/element/rp/index.md | 142 +- files/en-us/web/html/element/rt/index.md | 137 +- files/en-us/web/html/element/rtc/index.md | 130 +- files/en-us/web/html/element/ruby/index.md | 144 +- files/en-us/web/html/element/s/index.md | 141 +- files/en-us/web/html/element/samp/index.md | 180 +- files/en-us/web/html/element/script/index.md | 286 +- files/en-us/web/html/element/section/index.md | 246 +- files/en-us/web/html/element/select/index.md | 449 +-- files/en-us/web/html/element/shadow/index.md | 144 +- files/en-us/web/html/element/slot/index.md | 156 +- files/en-us/web/html/element/small/index.md | 149 +- files/en-us/web/html/element/source/index.md | 209 +- files/en-us/web/html/element/spacer/index.md | 55 +- files/en-us/web/html/element/span/index.md | 153 +- files/en-us/web/html/element/strike/index.md | 55 +- files/en-us/web/html/element/strong/index.md | 162 +- files/en-us/web/html/element/style/index.md | 243 +- files/en-us/web/html/element/sub/index.md | 193 +- files/en-us/web/html/element/summary/index.md | 190 +- files/en-us/web/html/element/sup/index.md | 190 +- files/en-us/web/html/element/table/index.md | 1073 ++++--- files/en-us/web/html/element/tbody/index.md | 501 ++-- files/en-us/web/html/element/td/index.md | 240 +- .../en-us/web/html/element/template/index.md | 216 +- .../en-us/web/html/element/textarea/index.md | 430 +-- files/en-us/web/html/element/tfoot/index.md | 226 +- files/en-us/web/html/element/th/index.md | 309 +- files/en-us/web/html/element/thead/index.md | 262 +- files/en-us/web/html/element/time/index.md | 226 +- files/en-us/web/html/element/title/index.md | 154 +- files/en-us/web/html/element/tr/index.md | 940 +++--- files/en-us/web/html/element/track/index.md | 253 +- files/en-us/web/html/element/tt/index.md | 153 +- files/en-us/web/html/element/u/index.md | 242 +- files/en-us/web/html/element/ul/index.md | 278 +- files/en-us/web/html/element/var/index.md | 179 +- files/en-us/web/html/element/video/index.md | 751 ++--- files/en-us/web/html/element/wbr/index.md | 132 +- files/en-us/web/html/element/xmp/index.md | 45 +- .../html/global_attributes/accesskey/index.md | 167 +- .../global_attributes/autocapitalize/index.md | 28 +- .../html/global_attributes/autofocus/index.md | 28 +- .../web/html/global_attributes/class/index.md | 28 +- .../contenteditable/index.md | 44 +- .../global_attributes/contextmenu/index.md | 101 +- .../global_attributes/data-_star_/index.md | 51 +- .../web/html/global_attributes/dir/index.md | 60 +- .../html/global_attributes/draggable/index.md | 32 +- .../global_attributes/enterkeyhint/index.md | 153 +- .../html/global_attributes/hidden/index.md | 38 +- .../web/html/global_attributes/id/index.md | 32 +- .../en-us/web/html/global_attributes/index.md | 261 +- .../html/global_attributes/inputmode/index.md | 84 +- .../web/html/global_attributes/is/index.md | 34 +- .../html/global_attributes/itemid/index.md | 112 +- .../html/global_attributes/itemprop/index.md | 735 +++-- .../html/global_attributes/itemref/index.md | 74 +- .../html/global_attributes/itemscope/index.md | 445 +-- .../html/global_attributes/itemtype/index.md | 379 ++- .../web/html/global_attributes/lang/index.md | 237 +- .../web/html/global_attributes/nonce/index.md | 99 +- .../web/html/global_attributes/part/index.md | 20 +- .../web/html/global_attributes/slot/index.md | 20 +- .../global_attributes/spellcheck/index.md | 36 +- .../web/html/global_attributes/style/index.md | 22 +- .../html/global_attributes/tabindex/index.md | 57 +- .../web/html/global_attributes/title/index.md | 102 +- .../html/global_attributes/translate/index.md | 44 +- .../x-ms-acceleratorkey/index.md | 52 +- .../x-ms-format-detection/index.md | 45 +- files/en-us/web/html/index.md | 170 +- files/en-us/web/html/index/index.md | 2 +- files/en-us/web/html/inline_elements/index.md | 242 +- .../web/html/link_types/dns-prefetch/index.md | 12 +- files/en-us/web/html/link_types/index.md | 959 ++++-- .../web/html/link_types/manifest/index.md | 10 +- .../html/link_types/modulepreload/index.md | 10 +- .../web/html/link_types/noopener/index.md | 18 +- .../web/html/link_types/noreferrer/index.md | 10 +- .../web/html/link_types/preconnect/index.md | 15 +- .../web/html/link_types/prefetch/index.md | 10 +- .../web/html/link_types/preload/index.md | 277 +- .../web/html/link_types/prerender/index.md | 10 +- files/en-us/web/html/microdata/index.md | 228 +- files/en-us/web/html/microformats/index.md | 520 ++-- .../quirks_mode_and_standards_mode/index.md | 50 +- files/en-us/web/html/reference/index.md | 30 +- .../en-us/web/html/viewport_meta_tag/index.md | 104 +- 234 files changed, 29548 insertions(+), 25113 deletions(-) diff --git a/files/en-us/web/html/applying_color/index.md b/files/en-us/web/html/applying_color/index.md index b346ef19113be1f..f3286f48f3f3a47 100644 --- a/files/en-us/web/html/applying_color/index.md +++ b/files/en-us/web/html/applying_color/index.md @@ -12,161 +12,148 @@ tags: - Styling HTML - color --- -
{{HTMLRef}}
+{{HTMLRef}} -

This article is a primer introducing each of the ways CSS color can be used in HTML.

+This article is a primer introducing each of the ways CSS color can be used in HTML. -

The use of color is a fundamental form of human expression. Children experiment with color before they even have the manual dexterity to draw. Maybe that's why color is one of the first things people often want to experiment with when learning to develop websites. With CSS, there are lots of ways to add color to your HTML elements to create just the look you want.

+The use of color is a fundamental form of human expression. Children experiment with color before they even have the manual dexterity to draw. Maybe that's why color is one of the first things people often want to experiment with when learning to develop websites. With [CSS](/en-US/docs/Web/CSS), there are lots of ways to add color to your [HTML](/en-US/docs/Web/HTML) [elements](/en-US/docs/Web/HTML/Element) to create just the look you want. -

We're going to touch on most of what you'll need to know when using color, including a {{anch("Things that can have color", "list of what you can color and what CSS properties are involved")}}, {{anch("How to describe a color", "how you describe colors")}}, and how to actually {{anch("Using color", "use colors both in stylesheets and in scripts")}}. We'll also take a look at how to {{anch("Letting the user picka color", "let the user pick a color")}}.

+We're going to touch on most of what you'll need to know when using color, including a {{anch("Things that can have color", "list of what you can color and what CSS properties are involved")}}, {{anch("How to describe a color", "how you describe colors")}}, and how to actually {{anch("Using color", "use colors both in stylesheets and in scripts")}}. We'll also take a look at how to {{anch("Letting the user picka color", "let the user pick a color")}}. -

Then we'll wrap things up with a brief discussion of how to {{anch("Using color wisely", "use color wisely")}}: how to select appropriate colors, keeping in mind the needs of people with differing visual capabilities.

+Then we'll wrap things up with a brief discussion of how to {{anch("Using color wisely", "use color wisely")}}: how to select appropriate colors, keeping in mind the needs of people with differing visual capabilities. -

Things that can have color

+## Things that can have color -

At the element level, everything in HTML can have color applied to it. Instead, let's look at things in terms of the kinds of things that are drawn in the elements, such as text and borders and so forth. For each, we'll see a list of the CSS properties that apply color to them.

+At the element level, everything in HTML can have color applied to it. Instead, let's look at things in terms of the kinds of things that are drawn in the elements, such as text and borders and so forth. For each, we'll see a list of the CSS properties that apply color to them. -

At a fundamental level, the {{cssxref("color")}} property defines the foreground color of an HTML element's content and the {{cssxref("background-color")}} property defines the element's background color. These can be used on just about any element.

+At a fundamental level, the {{cssxref("color")}} property defines the foreground color of an HTML element's content and the {{cssxref("background-color")}} property defines the element's background color. These can be used on just about any element. -

Text

+### Text -

Whenever an element is rendered, these properties are used to determine the color of the text, its background, and any decorations on the text.

+Whenever an element is rendered, these properties are used to determine the color of the text, its background, and any decorations on the text. -
-
{{cssxref("color")}}
-
The color to use when drawing the text and any text decorations (such as the addition of under- or overlines, strike-through lines, and so forth.
-
{{cssxref("background-color")}}
-
The text's background color.
-
{{cssxref("text-shadow")}}
-
Configures a shadow effect to apply to text. Among the options for the shadow is the shadow's base color (which is then blurred and blended with the background based on the other parameters). See {{SectionOnPage("/en-US/docs/Learn/CSS/Styling_text/Fundamentals", "Text drop shadows")}} to learn more.
-
{{cssxref("text-decoration-color")}}
-
By default, text decorations (such as underlines, strikethroughs, etc) use the color property as their colors. However, you can override that behavior and use a different color for them with the text-decoration-color property.
-
{{cssxref("text-emphasis-color")}}
-
The color to use when drawing emphasis symbols adjacent to each character in the text. This is used primarily when drawing text for East Asian languages.
-
{{cssxref("caret-color")}}
-
The color to use when drawing the {{Glossary("caret")}} (sometimes referred to as the text input cursor) within the element. This is only useful in elements that are editable, such as {{HTMLElement("input")}} and {{HTMLElement("textarea")}} or elements whose HTML {{htmlattrxref("contenteditable")}} attribute is set.
-
+* {{cssxref("color")}} + * : The color to use when drawing the text and any [text decorations](/en-US/docs/Learn/CSS/Styling_text/Fundamentals#font_style_font_weight_text_transform_and_text_decoration) (such as the addition of under- or overlines, strike-through lines, and so forth. +* {{cssxref("background-color")}} + * : The text's background color. +* {{cssxref("text-shadow")}} + * : Configures a shadow effect to apply to text. Among the options for the shadow is the shadow's base color (which is then blurred and blended with the background based on the other parameters). See {{SectionOnPage("/en-US/docs/Learn/CSS/Styling_text/Fundamentals", "Text drop shadows")}} to learn more. +* {{cssxref("text-decoration-color")}} + * : By default, text decorations (such as underlines, strikethroughs, etc) use the `color` property as their colors. However, you can override that behavior and use a different color for them with the `text-decoration-color` property. +* {{cssxref("text-emphasis-color")}} + * : The color to use when drawing emphasis symbols adjacent to each character in the text. This is used primarily when drawing text for East Asian languages. +* {{cssxref("caret-color")}} + * : The color to use when drawing the {{Glossary("caret")}} (sometimes referred to as the text input cursor) within the element. This is only useful in elements that are editable, such as {{HTMLElement("input")}} and {{HTMLElement("textarea")}} or elements whose HTML {{htmlattrxref("contenteditable")}} attribute is set. -

Boxes

+### Boxes -

Every element is a box with some sort of content, and has a background and a border in addition to whatever contents the box may have.

+Every element is a box with some sort of content, and has a background and a border in addition to whatever contents the box may have. -
-
{{anch("Borders")}}
-
See the section {{anch("Borders")}} for a list of the CSS properties you can use to set the colors of a box's borders.
-
{{cssxref("background-color")}}
-
The background color to use in areas of the element that have no foreground content.
-
{{cssxref("column-rule-color")}}
-
The color to use when drawing the line separating columns of text.
-
{{cssxref("outline-color")}}
-
The color to use when drawing an outline around the outside of the element. This outline is different from the border in that it doesn't get space set aside for it in the document (so it may overlap other content). It's generally used as a focus indicator, to show which element will receive input events.
-
+* {{anch("Borders")}} + * : See the section {{anch("Borders")}} for a list of the CSS properties you can use to set the colors of a box's borders. +* {{cssxref("background-color")}} + * : The background color to use in areas of the element that have no foreground content. +* {{cssxref("column-rule-color")}} + * : The color to use when drawing the line separating columns of text. +* {{cssxref("outline-color")}} + * : The color to use when drawing an outline around the outside of the element. This outline is different from the border in that it doesn't get space set aside for it in the document (so it may overlap other content). It's generally used as a focus indicator, to show which element will receive input events. -

Borders

+### Borders -

Any element can have a border drawn around it. A basic element border is a line drawn around the edges of the element's content. See {{SectionOnPage("/en-US/docs/Learn/CSS/Introduction_to_CSS/Box_model", "Box properties")}} to learn about the relationship between elements and their borders, and the article Styling borders using CSS to learn more about applying styles to borders.

+Any element can have a [border](/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders) drawn around it. A basic element border is a line drawn around the edges of the element's content. See {{SectionOnPage("/en-US/docs/Learn/CSS/Introduction_to_CSS/Box_model", "Box properties")}} to learn about the relationship between elements and their borders, and the article [Styling borders using CSS](/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders) to learn more about applying styles to borders. -

You can use the {{cssxref("border")}} shorthand property, which lets you configure everything about the border in one shot (including non-color features of borders, such as its width, style (solid, dashed, etc.), and so forth.

+You can use the {{cssxref("border")}} shorthand property, which lets you configure everything about the border in one shot (including non-color features of borders, such as its [width](/en-US/docs/Web/CSS/border-width), [style](/en-US/docs/Web/CSS/border-style) (solid, dashed, etc.), and so forth. -
-
{{cssxref("border-color")}}
-
Specifies a single color to use for every side of the element's border.
-
{{cssxref("border-left-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-top-color")}}, and {{cssxref("border-bottom-color")}}
-
Lets you set the color of the corresponding side of the element's border.
-
{{cssxref("border-block-start-color")}} and {{cssxref("border-block-end-color")}}
-
With these, you can set the color used to draw the borders which are closest to the start and end of the block the border surrounds. In a left-to-right writing mode (such as the way English is written), the block start border is the top edge and the block end is the bottom. This differs from the inline start and end, which are the left and right edges (corresponding to where each line of text in the box begins and ends).
-
{{cssxref("border-inline-start-color")}} and {{cssxref("border-inline-end-color")}}
-
These let you color the edges of the border closest to the beginning and the end of the start of lines of text within the box. Which side this is will vary depending on the {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}} properties, which are typically (but not always) used to adjust text directionality based on the language being displayed. For example, if the box's text is being rendered right-to-left, then the border-inline-start-color is applied to the right side of the border.
-
+* {{cssxref("border-color")}} + * : Specifies a single color to use for every side of the element's border. +* {{cssxref("border-left-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-top-color")}}, and {{cssxref("border-bottom-color")}} + * : Lets you set the color of the corresponding side of the element's border. +* {{cssxref("border-block-start-color")}} and {{cssxref("border-block-end-color")}} + * : With these, you can set the color used to draw the borders which are closest to the start and end of the block the border surrounds. In a left-to-right writing mode (such as the way English is written), the block start border is the top edge and the block end is the bottom. This differs from the inline start and end, which are the left and right edges (corresponding to where each line of text in the box begins and ends). +* {{cssxref("border-inline-start-color")}} and {{cssxref("border-inline-end-color")}} + * : These let you color the edges of the border closest to the beginning and the end of the start of lines of text within the box. Which side this is will vary depending on the {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}} properties, which are typically (but not always) used to adjust text directionality based on the language being displayed. For example, if the box's text is being rendered right-to-left, then the `border-inline-start-color` is applied to the right side of the border. -

Other ways to use color

+### Other ways to use color -

CSS isn't the only web technology that supports color. There are graphics technologies that are available on the web which also support color.

+CSS isn't the only web technology that supports color. There are graphics technologies that are available on the web which also support color. -
-
The HTML Canvas API
-
Lets you draw 2D bitmapped graphics in a {{HTMLElement("canvas")}} element. See our Canvas tutorial to learn more.
-
SVG (Scalable Vector Graphics)
-
Lets you draw images using commands that draw specific shapes, patterns, and lines to produce an image. SVG commands are formatted as XML, and can be embedded directly into a web page or can be placed in the page using the {{HTMLElement("img")}} element, just like any other type of image.
-
WebGL
-
The Web Graphics Library is an OpenGL ES-based API for drawing high-performance 2D and 3D graphics on the Web. See our WebGL tutorial to find out more.
-
+* The HTML [Canvas API](/en-US/docs/Web/API/Canvas_API) + * : Lets you draw 2D bitmapped graphics in a {{HTMLElement("canvas")}} element. See our [Canvas tutorial](/en-US/docs/Web/API/Canvas_API/Tutorial) to learn more. +* [SVG](/en-US/docs/Web/SVG) (Scalable Vector Graphics) + * : Lets you draw images using commands that draw specific shapes, patterns, and lines to produce an image. SVG commands are formatted as XML, and can be embedded directly into a web page or can be placed in the page using the {{HTMLElement("img")}} element, just like any other type of image. +* [WebGL](/en-US/docs/Web/API/WebGL_API) + * : The Web Graphics Library is an OpenGL ES-based API for drawing high-performance 2D and 3D graphics on the Web. See our [WebGL tutorial](/en-US/docs/Web/API/WebGL_API/Tutorial) to find out more. -

How to describe a color

+## How to describe a color -

In order to represent a color in CSS, you have to find a way to translate the analog concept of "color" into a digital form that a computer can use. This is typically done by breaking down the color into components, such as how much of each of a set of primary colors to mix together, or how bright to make the color. As such, there are several ways you can describe color in CSS.

+In order to represent a color in CSS, you have to find a way to translate the analog concept of "color" into a digital form that a computer can use. This is typically done by breaking down the color into components, such as how much of each of a set of primary colors to mix together, or how bright to make the color. As such, there are several ways you can describe color in CSS. -

For more detailed discussion of each of the color value types, see the reference for the CSS {{cssxref("<color>")}} unit.

+For more detailed discussion of each of the color value types, see the reference for the CSS {{cssxref("<color>")}} unit. -

Keywords

+### Keywords -

A set of standard color names have been defined, letting you use these keywords instead of numeric representations of colors if you choose to do so and there's a keyword representing the exact color you want to use. Color keywords include the standard primary and secondary colors (such as red, blue, or orange), shades of gray (from black to white, including colors like darkgray and lightgrey), and a variety of other blended colors including lightseagreen, cornflowerblue, and rebeccapurple.

+A set of standard color names have been defined, letting you use these keywords instead of numeric representations of colors if you choose to do so and there's a keyword representing the exact color you want to use. Color keywords include the standard primary and secondary colors (such as `red`, `blue`, or `orange`), shades of gray (from `black` to `white`, including colors like `darkgray` and `lightgrey`), and a variety of other blended colors including `lightseagreen`, `cornflowerblue`, and `rebeccapurple`. -

See {{SectionOnPage("/en-US/docs/Web/CSS/color_value", "Color keywords", "code")}} for a list of all available color keywords.

+See {{SectionOnPage("/en-US/docs/Web/CSS/color_value", "Color keywords", "code")}} for a list of all available color keywords. -

RGB values

+### RGB values -

There are three ways to represent an RGB color in CSS.

+There are three ways to represent an RGB color in CSS. -

Hexadecimal string notation

+#### Hexadecimal string notation -

Hexadecimal string notation represents a color using hexadecimal digits to represent each of the color components (red, green, and blue). It may also include a fourth component: the alpha channel (or opacity). Each color component can be represented as a number between 0 and 255 (0x00 and 0xFF) or, optionally, as a number between 0 and 15 (0x0 and 0xF). All components must be specified using the same number of digits. If you use the single-digit notation, the final color is computed by using each component's digit twice; that is, "#D" becomes "#DD" when drawing.

+Hexadecimal string notation represents a color using hexadecimal digits to represent each of the color components (red, green, and blue). It may also include a fourth component: the alpha channel (or opacity). Each color component can be represented as a number between 0 and 255 (0x00 and 0xFF) or, optionally, as a number between 0 and 15 (0x0 and 0xF). All components *must* be specified using the same number of digits. If you use the single-digit notation, the final color is computed by using each component's digit twice; that is, `"#D"` becomes `"#DD"` when drawing. -

A color in hexadecimal string notation always begins with the character "#". After that come the hexadecimal digits of the color code. The string is case-insensitive.

+A color in hexadecimal string notation always begins with the character `"#"`. After that come the hexadecimal digits of the color code. The string is case-insensitive. -
-
"#rrggbb"
-
Specifies a fully-opaque color whose red component is the hexadecimal number 0xrr, green component is 0xgg, and blue component is 0xbb.
-
"#rrggbbaa"
-
Specifies a color whose red component is the hexadecimal number 0xrr, green component is 0xgg, and blue component is 0xbb. The alpha channel is specified by 0xaa; the lower this value is, the more translucent the color becomes.
-
"#rgb"
-
Specifies a color whose red component is the hexadecimal number 0xrr, green component is 0xgg, and blue component is 0xbb.
-
"#rgba"
-
Specifies a color whose red component is the hexadecimal number 0xrr, green component is 0xgg, and blue component is 0xbb. The alpha channel is specified by 0xaa; the lower this value is, the more translucent the color becomes.
-
+* `"#rrggbb"` + * : Specifies a fully-opaque color whose red component is the hexadecimal number `0xrr`, green component is `0xgg`, and blue component is `0xbb`. +* `"#rrggbbaa"` + * : Specifies a color whose red component is the hexadecimal number `0xrr`, green component is `0xgg`, and blue component is `0xbb`. The alpha channel is specified by `0xaa`; the lower this value is, the more translucent the color becomes. +* `"#rgb"` + * : Specifies a color whose red component is the hexadecimal number `0xrr`, green component is `0xgg`, and blue component is `0xbb`. +* `"#rgba"` + * : Specifies a color whose red component is the hexadecimal number `0xrr`, green component is `0xgg`, and blue component is `0xbb`. The alpha channel is specified by `0xaa`; the lower this value is, the more translucent the color becomes. -

As an example, you can represent the opaque color bright blue as "#0000ff" or "#00f". To make it 25% opaque, you can use "#0000ff44" or "#00f4".

+As an example, you can represent the opaque color bright blue as `"#0000ff"` or `"#00f"`. To make it 25% opaque, you can use `"#0000ff44"` or `"#00f4"`. -

RGB functional notation

+#### RGB functional notation -

RGB (Red/Green/Blue) functional notation, like hexadecimal string notation, represents colors using their red, green, and blue components (as well as, optionally, an alpha channel component for opacity). However, instead of using a string, the color is defined using the CSS function {{cssxref("color_value", "rgb()", "#rgb()")}}. This function accepts as its input parameters the values of the red, green, and blue components and an optional fourth parameter, the value for the alpha channel.

+RGB (Red/Green/Blue) functional notation, like hexadecimal string notation, represents colors using their red, green, and blue components (as well as, optionally, an alpha channel component for opacity). However, instead of using a string, the color is defined using the CSS function {{cssxref("color_value", "rgb()", "#rgb()")}}. This function accepts as its input parameters the values of the red, green, and blue components and an optional fourth parameter, the value for the alpha channel. -

Legal values for each of these parameters are:

+Legal values for each of these parameters are: -
-
red, green, and blue
-
Each must be an {{cssxref("<integer>")}} value between 0 and 255 (inclusive), or a {{cssxref("<percentage>")}} from 0% to 100%.
-
alpha
-
The alpha channel is a number between 0.0 (fully transparent) and 1.0 (fully opaque). You can also specify a percentage where 0% is the same as 0.0 and 100% is the same as 1.0.
-
+* `red`, `green`, and `blue` + * : Each must be an {{cssxref("<integer>")}} value between 0 and 255 (inclusive), or a {{cssxref("<percentage>")}} from 0% to 100%. +* `alpha` + * : The alpha channel is a number between 0.0 (fully transparent) and 1.0 (fully opaque). You can also specify a percentage where 0% is the same as 0.0 and 100% is the same as 1.0. -

For example, a bright red that's 50% opaque can be represented as rgb(255, 0, 0, 0.5) or rgb(100%, 0, 0, 50%).

+For example, a bright red that's 50% opaque can be represented as `rgb(255, 0, 0, 0.5)` or `rgb(100%, 0, 0, 50%)`. -

HSL functional notation

+### HSL functional notation -

Designers and artists often prefer to work using the {{interwiki("wikipedia", "HSL and HSV", "HSL")}} (Hue/Saturation/Luminosity) color method. On the web, HSL colors are represented using HSL functional notation. The hsl() CSS function is very similar to the rgb() function in usage otherwise.

+Designers and artists often prefer to work using the {{interwiki("wikipedia", "HSL and HSV", "HSL")}} (Hue/Saturation/Luminosity) color method. On the web, HSL colors are represented using HSL functional notation. The `hsl()` CSS function is very similar to the `rgb()` function in usage otherwise. -

The diagram below shows an HSL color cylinder. Hue defines the actual color based on the position along a circular color wheel representing the colors of the visible spectrum. Saturation is a percentage of how much of the way between being a shade of gray and having the maximum possible amount of the given hue. As the value of luminance (or lightness) increases, the color transitions from the darkest possible to the brightest possible (from black to white). Image courtesy of user SharkD on Wikipedia, distributed under the CC BY-SA 3.0 license.

+The diagram below shows an HSL color cylinder. Hue defines the actual color based on the position along a circular color wheel representing the colors of the visible spectrum. Saturation is a percentage of how much of the way between being a shade of gray and having the maximum possible amount of the given hue. As the value of luminance (or lightness) increases, the color transitions from the darkest possible to the brightest possible (from black to white). Image courtesy of user [SharkD](https://commons.wikimedia.org/wiki/User:SharkD) on [Wikipedia](https://www.wikipedia.org/), distributed under the [CC BY-SA 3.0](http://creativecommons.org/licenses/by-sa/3.0) license. -HSL color cylinder +![HSL color cylinder](640px-hsl_color_solid_cylinder.png) -

The value of the hue (H) component of an HSL color is an angle from red around through yellow, green, cyan, blue, and magenta (ending up back at red again at 360°) that identifies what the base color is. The value can be specified in any {{cssxref("<angle>")}} unit supported by CSS, including degrees (deg), radians (rad), gradians (grad), or turns (turn). But this doesn't control how vivid or dull, or how bright or dark the color is.

+The value of the hue (H) component of an HSL color is an angle from red around through yellow, green, cyan, blue, and magenta (ending up back at red again at 360°) that identifies what the base color is. The value can be specified in any {{cssxref("<angle>")}} unit supported by CSS, including degrees (`deg`), radians (`rad`), gradians (`grad`), or turns (`turn`). But this doesn't control how vivid or dull, or how bright or dark the color is. -

The saturation (S) component of the color specifies what percentage of the final color is comprised of the specified hue. The rest is defined by the grey level provided by the luminance (L) component.

+The saturation (S) component of the color specifies what percentage of the final color is comprised of the specified hue. The rest is defined by the grey level provided by the luminance (L) component. -

Think of it like creating the perfect paint color:

+Think of it like creating the perfect paint color: -
    -
  1. You start with base paint that's the maximum intensity possible for a given color, such as the most intense blue that can be represented by the user's screen. This is the hue (H) component: a value representing the angle around the color wheel for the vivid hue we want to use as our base.
    2. -
  2. Then select a greyscale paint that corresponds how bright you want the color to be; this is the luminance. Do you want it to be very bright and nearly white, or very dark and closer to black, or somewhere in between? This is specified using a percentage, where 0% is perfectly black and 100% is perfectly white. (regardless of the saturation or hue). In between values are a literal grey area.
    3. -
  3. Now that you have a grey paint and a perfectly vivid color, you need to mix them together. The saturation (S) component of the color indicates what percentage of the final color should be comprised of that perfectly vivid color. The rest of the final color is made up of the grey paint that represents the saturation.
    4. -
+1. You start with base paint that's the maximum intensity possible for a given color, such as the most intense blue that can be represented by the user's screen. This is the **hue** (H) component: a value representing the angle around the color wheel for the vivid hue we want to use as our base. +2. Then select a greyscale paint that corresponds how bright you want the color to be; this is the luminance. Do you want it to be very bright and nearly white, or very dark and closer to black, or somewhere in between? This is specified using a percentage, where 0% is perfectly black and 100% is perfectly white. (regardless of the saturation or hue). In between values are a literal grey area. +3. Now that you have a grey paint and a perfectly vivid color, you need to mix them together. The saturation (S) component of the color indicates what percentage of the final color should be comprised of that perfectly vivid color. The rest of the final color is made up of the grey paint that represents the saturation. -

You can also optionally include an alpha channel, to make the color less than 100% opaque.

+You can also optionally include an alpha channel, to make the color less than 100% opaque. -

Here are some sample colors in HSL notation:

+Here are some sample colors in HSL notation: - - -
<table>
- <thead>
-  <tr>
-   <th scope="col">Color in HSL notation</th>
-   <th scope="col">Example</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>hsl(90deg, 100%, 50%)</code></td>
-   <td style="background-color: hsl(90deg, 100%, 50%);">&nbsp;</td>
-  </tr>
-  <tr>
-   <td><code>hsl(90, 100%, 50%)</code></td>
-   <td style="background-color: hsl(90, 100%, 50%);">&nbsp;</td>
-  </tr>
-  <tr>
-   <td><code>hsl(0.15turn, 50%, 75%)</code></td>
-   <td style="background-color: hsl(0.15turn, 50%, 75%);">&nbsp;</td>
-  </tr>
-  <tr>
-   <td><code>hsl(0.15turn, 90%, 75%)</code></td>
-   <td style="background-color: hsl(0.15turn, 90%, 75%);">&nbsp;</td>
-  </tr>
-  <tr>
-   <td><code>hsl(0.15turn, 90%, 50%)</code></td>
-   <td style="background-color: hsl(0.15turn, 90%, 50%);">&nbsp;</td>
-  </tr>
-  <tr>
-   <td><code>hsl(270deg, 90%, 50%)</code></td>
-   <td style="background-color: hsl(270deg, 90%, 50%);">&nbsp;</td>
-  </tr>
- </tbody>
-</table>
- -

{{EmbedLiveSample("HSL_functional_notation", 300, 260)}}

- -
-

Note: When you omit the hue's unit, it's assumed to be in degrees (deg).

-
- -

Using color

- -

Now that you know what CSS properties exist that let you apply color to elements and the formats you can use to describe colors, you can put this together to begin to make use of color. As you may have seen from the list under {{anch("Things that can have color")}}, there are plenty of things you can color with CSS. Let's look at this from two sides: using color within a {{Glossary("stylesheet")}}, and adding and changing color using {{Glossary("JavaScript")}} code to alter the styles of elements.

- -

Specifying colors in stylesheets

- -

The easiest way to apply color to elements—and the way you'll usually do it—is to specify colors in the CSS that's used when rendering elements. While we won't use every single property mentioned previously, we'll look at a couple of examples. The concept is the same anywhere you use color.

- -

Let's take a look at an example, starting by looking at the results we're trying to achieve:

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

HTML

- -

The HTML responsible for creating the above example is shown here:

- -
<div class="wrapper">
-  <div class="box boxLeft">
-    <p>
+}
+```
+
+```html
+
+ 
+  
+   
+   
+  
+ 
+ 
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+ 
+
Color in HSL notationExample
hsl(90deg, 100%, 50%) 
hsl(90, 100%, 50%) 
hsl(0.15turn, 50%, 75%) 
hsl(0.15turn, 90%, 75%) 
hsl(0.15turn, 90%, 50%) 
hsl(270deg, 90%, 50%) 

+```
+
+{{EmbedLiveSample("HSL_functional_notation", 300, 260)}}
+
+> **Note:** When you omit the hue's unit, it's assumed to be in degrees (`deg`).
+
+## Using color
+
+Now that you know what CSS properties exist that let you apply color to elements and the formats you can use to describe colors, you can put this together to begin to make use of color. As you may have seen from the list under {{anch("Things that can have color")}}, there are plenty of things you can color with CSS. Let's look at this from two sides: using color within a {{Glossary("stylesheet")}}, and adding and changing color using {{Glossary("JavaScript")}} code to alter the styles of elements.
+
+### Specifying colors in stylesheets
+
+The easiest way to apply color to elements—and the way you'll usually do it—is to specify colors in the CSS that's used when rendering elements. While we won't use every single property mentioned previously, we'll look at a couple of examples. The concept is the same anywhere you use color.
+
+Let's take a look at an example, starting by looking at the results we're trying to achieve:
+
+{{EmbedLiveSample("Specifying_colors_in_stylesheets", 650, 150)}}
+
+#### HTML
+
+The HTML responsible for creating the above example is shown here:
+
+```html
+

+  

+    

       This is the first box.
-    </p>
-  </div>
-  <div class="box boxRight">
-    <p>
+    

+  

+  

+    

       This is the second box.
-    </p>
-  </div>
-</div>
+

+ + +``` -

This is pretty simple, using a {{HTMLElement("div")}} as a wrapper around the contents, which consists of two more <div>s, each styled differently with a single paragraph ({{HTMLElement("p")}}) in each box.

+This is pretty simple, using a {{HTMLElement("div")}} as a wrapper around the contents, which consists of two more `
`s, each styled differently with a single paragraph ({{HTMLElement("p")}}) in each box. -

The magic happens, as usual, in the CSS, where we'll apply colors define the layout for the HTML above.

+The magic happens, as usual, in the CSS, where we'll apply colors define the layout for the HTML above. -

CSS

+#### CSS -

We'll look at the CSS to create the above results a piece at a time, so we can review the interesting parts one by one.

+We'll look at the CSS to create the above results a piece at a time, so we can review the interesting parts one by one. -
.wrapper {
+```css
+.wrapper {
   width: 620px;
   height: 110px;
   margin: 0;
   padding: 10px;
   border: 6px solid mediumturquoise;
-}
+} +``` -

The .wrapper class is used to assign styles to the {{HTMLElement("div")}} that encloses all of our other content. This establishes the size of the container using {{cssxref("width")}} and {{cssxref("height")}} as well as its {{cssxref("margin")}} and {{cssxref("padding")}}.

+The `.wrapper` class is used to assign styles to the {{HTMLElement("div")}} that encloses all of our other content. This establishes the size of the container using {{cssxref("width")}} and {{cssxref("height")}} as well as its {{cssxref("margin")}} and {{cssxref("padding")}}. -

Of more interest to our discussion here is the use of the {{cssxref("border")}} property to establish a border around the outside edge of the element. This border is a solid line, 6 pixels wide, in the color mediumturquoise.

+Of more interest to our discussion here is the use of the {{cssxref("border")}} property to establish a border around the outside edge of the element. This border is a solid line, 6 pixels wide, in the color `mediumturquoise`. -

Our two colored boxes share a number of properties in common, so next we establish a class, .box, that defines those shared properties:

+Our two colored boxes share a number of properties in common, so next we establish a class, `.box`, that defines those shared properties: -
.box {
+```css
+.box {
   width: 290px;
   height: 100px;
   margin: 0;
@@ -284,90 +277,92 @@ th {
   display: flex;
   justify-content: center;
   align-items: center;
-}
+} +``` -

In brief, .box establishes the size of each box, as well as the configuration of the font used within. We also take advantage of CSS Flexbox to easily center the contents of each box. We enable flex mode using {{cssxref("display", "display: flex")}}, and set both {{cssxref("justify-content")}} and {{cssxref("align-items")}} to center. Then we can create a class for each of the two boxes that defines the properties that differ between the two.

+In brief, `.box` establishes the size of each box, as well as the configuration of the font used within. We also take advantage of [CSS Flexbox](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout) to easily center the contents of each box. We enable `flex` mode using {{cssxref("display", "display: flex")}}, and set both {{cssxref("justify-content")}} and {{cssxref("align-items")}} to `center`. Then we can create a class for each of the two boxes that defines the properties that differ between the two. -
.boxLeft {
+```css
+.boxLeft {
   float: left;
   background-color: rgb(245, 130, 130);
   outline: 2px solid darkred;
-}
+} +``` -

The .boxLeft class—which, cleverly, is used to style the box on the left—floats the box to the left, then sets up the colors:

+The `.boxLeft` class—which, cleverly, is used to style the box on the left—floats the box to the left, then sets up the colors: -
    -
  • The box's background color is set by changing the value of the CSS {{cssxref("background-color")}} property to rgb(245, 130, 130).
    • -
  • An outline is defined for the box. Unlike the more commonly used border, {{cssxref("outline")}} doesn't affect layout at all; it draws over the top of whatever may happen to be outside the element's box instead of making room as border does. This outline is a solid, dark red line that's two pixels thick. Note the use of the darkred keyword when specifying the color.
    • -
  • Notice that we're not explicitly setting the text color. That means the value of {{cssxref("color")}} will be inherited from the nearest containing element that defines it. By default, that's black.
    • -
+* The box's background color is set by changing the value of the CSS {{cssxref("background-color")}} property to `rgb(245, 130, 130)`. +* An outline is defined for the box. Unlike the more commonly used `border`, {{cssxref("outline")}} doesn't affect layout at all; it draws over the top of whatever may happen to be outside the element's box instead of making room as `border` does. This outline is a solid, dark red line that's two pixels thick. Note the use of the `darkred` keyword when specifying the color. +* Notice that we're not explicitly setting the text color. That means the value of {{cssxref("color")}} will be inherited from the nearest containing element that defines it. By default, that's black. -
.boxRight {
+```css
+.boxRight {
   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;
-}
+} +``` -
-

Note: When you try to show it in Safari, it will not show properly. Because Safari doesn't support text-decoration: underline wavy #88ff88.

-
+> **Note:** When you try to show it in Safari, it will not show properly. Because Safari doesn't support `text-decoration: underline wavy #88ff88`. -

Finally, the .boxRight class describes the unique properties of the box that's drawn on the right. It's configured to float the box to the right so that it appears next to the previous box. Then the following colors are established:

+Finally, the `.boxRight` class describes the unique properties of the box that's drawn on the right. It's configured to float the box to the right so that it appears next to the previous box. Then the following colors are established: -
    -
  • The background-color is set using the HSL value specified using hsl(270deg, 50%, 75%). This is a medium purple color.
    • -
  • The box's outline is used to specify that the box should be enclosed in a four pixel thick dashed line whose color is a somewhat deeper purple (rgb(110, 20, 120)).
    • -
  • The foreground (text) color is specified by setting the {{cssxref("color")}} property to hsl(0deg, 100%, 100%). This is one of many ways to specify the color white.
    • -
  • We add a green wavy line under the text with {{cssxref("text-decoration")}}.
    • -
  • Finally, a bit of a shadow is added to the text using {{cssxref("text-shadow")}}. Its color parameter is set to black.
    • -
+* The `background-color` is set using the HSL value specified using `hsl(270deg, 50%, 75%)`. This is a medium purple color. +* The box's `outline` is used to specify that the box should be enclosed in a four pixel thick dashed line whose color is a somewhat deeper purple (`rgb(110, 20, 120)`). +* The foreground (text) color is specified by setting the {{cssxref("color")}} property to `hsl(0deg, 100%, 100%)`. This is one of many ways to specify the color white. +* We add a green wavy line under the text with {{cssxref("text-decoration")}}. +* Finally, a bit of a shadow is added to the text using {{cssxref("text-shadow")}}. Its `color` parameter is set to `black`. -

Letting the user pick a color

+## Letting the user pick a color -

There are many situations in which your website may need to let the user select a color. Perhaps you have a customizable user interface, or you're implementing a drawing app. Maybe you have editable text and need to let the user choose the text color. Or perhaps your app lets the user assign colors to folders or items. Although historically it's been necessary to implement your own {{interwiki("wikipedia", "color picker")}}, HTML now provides support for browsers to provide one for your use through the {{HTMLElement("input")}} element, by using "color" as the value of its {{htmlattrxref("type", "input")}} attribute.

+There are many situations in which your website may need to let the user select a color. Perhaps you have a customizable user interface, or you're implementing a drawing app. Maybe you have editable text and need to let the user choose the text color. Or perhaps your app lets the user assign colors to folders or items. Although historically it's been necessary to implement your own {{interwiki("wikipedia", "color picker")}}, HTML now provides support for browsers to provide one for your use through the {{HTMLElement("input")}} element, by using `"color"` as the value of its {{htmlattrxref("type", "input")}} attribute. -

The <input> element represents a color only in the {{anch("Hexadecimal string notation", "hexadecimal string notation")}} covered above.

+The `` element represents a color only in the {{anch("Hexadecimal string notation", "hexadecimal string notation")}} covered above. -

Example: Picking a color

+### Example: Picking a color -

Let's look at a simple example, in which the user can choose a color. As the user adjusts the color, the border around the example changes to reflect the new color. After finishing up and picking the final color, the color picker's value is displayed.

+Let's look at a simple example, in which the user can choose a color. As the user adjusts the color, the border around the example changes to reflect the new color. After finishing up and picking the final color, the color picker's value is displayed. -

{{EmbedLiveSample("Example_Picking_a_color", 525, 275)}}

+{{EmbedLiveSample("Example_Picking_a_color", 525, 275)}} -
-

Note: On macOS, you indicate that you've finalized selection of the color by closing the color picker window.

-
+> **Note:** On macOS, you indicate that you've finalized selection of the color by closing the color picker window. -

HTML

+#### HTML -

The HTML here creates a box that contains a color picker control (with a label created using the {{HTMLElement("label")}} element) and an empty paragraph element ({{HTMLElement("p")}}) into which we'll output some text from our JavaScript code.

+The HTML here creates a box that contains a color picker control (with a label created using the {{HTMLElement("label")}} element) and an empty paragraph element ({{HTMLElement("p")}}) into which we'll output some text from our JavaScript code. -
<div id="box">
-  <label for="colorPicker">Border color:</label>
-  <input type="color" value="#8888ff" id="colorPicker">
-  <p id="output"></p>
-</div>
+```html +
+ + +

+
+``` -

CSS

+#### CSS -

The CSS establishes a size for the box and some basic styling for appearances. The border is also established with a 2-pixel width and a border color that won't last, courtesy of the JavaScript below...

+The CSS establishes a size for the box and some basic styling for appearances. The border is also established with a 2-pixel width and a border color that won't last, courtesy of the JavaScript below\... -
#box {
+```css
+#box {
   width: 500px;
   height: 200px;
   border: 2px solid rgb(245, 220, 225);
   padding: 4px 6px;
   font: 16px "Lucida Grande", "Helvetica", "Arial", "sans-serif"
-}
+} +``` -

JavaScript

+#### JavaScript -

The script here handles the task of updating the starting color of the border to match the color picker's value. Then two event handlers are added to deal with input from the <input type="color"> element.

+The script here handles the task of updating the starting color of the border to match the color picker's value. Then two event handlers are added to deal with input from the [``](/en-US/docs/Web/HTML/Element/input/color) element. -
let colorPicker = document.getElementById("colorPicker");
+```js
+let colorPicker = document.getElementById("colorPicker");
 let box = document.getElementById("box");
 let output = document.getElementById("output");
 
@@ -379,131 +374,114 @@ colorPicker.addEventListener("input", function(event) {
 
 colorPicker.addEventListener("change", function(event) {
   output.innerText = "Color set to " + colorPicker.value + ".";
-}, false);
+}, false); +``` -

The {{event("input")}} event is sent every time the value of the element changes; that is, every time the user adjusts the color in the color picker. Each time this event arrives, we set the box's border color to match the color picker's current value.

+The {{event("input")}} event is sent every time the value of the element changes; that is, every time the user adjusts the color in the color picker. Each time this event arrives, we set the box's border color to match the color picker's current value. -

The {{event("change")}} event is received when the color picker's value is finalized. We respond by setting the contents of the <p> element with the ID "output" to a string describing the finally selected color.

+The {{event("change")}} event is received when the color picker's value is finalized. We respond by setting the contents of the `

` element with the ID `"output"` to a string describing the finally selected color. -

Using color wisely

+## Using color wisely -

Making the right choices when selecting colors when designing a website can be a tricky process, especially if you aren't well-grounded in art, design, or at least basic color theory. The wrong color choice can render your site unattractive, or even worse, leave the content unreadable due to problems with contrast or conflicting colors. Worse still, if using the wrong colors can result in your content being outright unusable by people with certain vision problems, particularly color blindness.

+Making the right choices when selecting colors when designing a website can be a tricky process, especially if you aren't well-grounded in art, design, or at least basic color theory. The wrong color choice can render your site unattractive, or even worse, leave the content unreadable due to problems with contrast or conflicting colors. Worse still, if using the wrong colors can result in your content being outright unusable by people with certain vision problems, particularly color blindness. -

Finding the right colors

+### Finding the right colors -

Coming up with just the right colors can be tricky, especially without training in art or design. Fortunately, there are tools available that can help you. While they can't replace having a good designer helping you make these decisions, they can definitely get you started.

+Coming up with just the right colors can be tricky, especially without training in art or design. Fortunately, there are tools available that can help you. While they can't replace having a good designer helping you make these decisions, they can definitely get you started. -

Base color

+#### Base color -

The first step is to choose your base color. This is the color that in some way defines your website or the subject matter of the site. Just as we associate green with the beverage {{interwiki("wikipedia", "Mountain Dew")}} and one might think of the color blue in relationship with the sky or the ocean, choosing an appropriate base color to represent your site is a good place to start. There are plenty of ways to select a base color; a few ideas include:

+The first step is to choose your **base color**. This is the color that in some way defines your website or the subject matter of the site. Just as we associate green with the beverage {{interwiki("wikipedia", "Mountain Dew")}} and one might think of the color blue in relationship with the sky or the ocean, choosing an appropriate base color to represent your site is a good place to start. There are plenty of ways to select a base color; a few ideas include: -
    -
  • A color that is naturally associated with the topic of your content, such as the existing color identified with a product or idea or a color representative of the emotion you wish to convey.
    • -
  • A color that comes from imagery associated with what your content is about. If you're creating a website about a given item or product, choose a color that's physically present on that item.
    • -
  • Browse websites that let you look at lots of existing color palettes and images to find inspiration.
    • -
+* A color that is naturally associated with the topic of your content, such as the existing color identified with a product or idea or a color representative of the emotion you wish to convey. +* A color that comes from imagery associated with what your content is about. If you're creating a website about a given item or product, choose a color that's physically present on that item. +* Browse websites that let you look at lots of existing color palettes and images to find inspiration. -

When trying to decide upon a base color, you may find that browser extensions that let you select colors from web content can be particularly handy. Some of these are even specifically designed to help with this sort of work. For example, the website ColorZilla offers an extension (Chrome / Firefox) that offers an eyedropper tool for picking colors from the web. It can also take averages of the colors of pixels in various sized areas or even a selected area of the page.

+When trying to decide upon a base color, you may find that browser extensions that let you select colors from web content can be particularly handy. Some of these are even specifically designed to help with this sort of work. For example, the website [ColorZilla](http://www.colorzilla.com/) offers an extension ([Chrome](http://www.colorzilla.com/chrome) / [Firefox](http://www.colorzilla.com/firefox)) that offers an eyedropper tool for picking colors from the web. It can also take averages of the colors of pixels in various sized areas or even a selected area of the page. -
-

Note: The advantage to averaging colors can be that often what looks like a solid color is actually a surprisingly varied number of related colors all used in concert, blending to create a desired effect. Picking just one of these pixels can result in getting a color that on its own looks very out of place.

-
+> **Note:** The advantage to averaging colors can be that often what looks like a solid color is actually a surprisingly varied number of related colors all used in concert, blending to create a desired effect. Picking just one of these pixels can result in getting a color that on its own looks very out of place. -

Fleshing out the palette

+#### Fleshing out the palette -

Once you have decided on your base color, there are plenty of online tools that can help you build out a palette of appropriate colors to use along with your base color by applying color theory to your base color to determine appropriate added colors. Many of these tools also support viewing the colors filtered so you can see what they would look like to people with various forms of color blindness. See {{anch("Color and accessibility")}} for a brief explanation of why this matters.

+Once you have decided on your base color, there are plenty of online tools that can help you build out a palette of appropriate colors to use along with your base color by applying color theory to your base color to determine appropriate added colors. Many of these tools also support viewing the colors filtered so you can see what they would look like to people with various forms of color blindness. See {{anch("Color and accessibility")}} for a brief explanation of why this matters. -

A few examples (all free to use as of the time this list was last revised):

+A few examples (all free to use as of the time this list was last revised): - +* [MDN's color picker tool](/en-US/docs/Web/CSS/CSS_Colors/Color_picker_tool) +* [Paletton](http://paletton.com) +* [Adobe Color CC online color wheel](https://color.adobe.com/create/color-wheel) -

When designing your palette, be sure to keep in mind that in addition to the colors these tools typically generate, you'll probably also need to add some core neutral colors such as white (or nearly white), black (or nearly black), and some number of shades of gray.

+When designing your palette, be sure to keep in mind that in addition to the colors these tools typically generate, you'll probably also need to add some core neutral colors such as white (or nearly white), black (or nearly black), and some number of shades of gray. -
-

Note: Usually, you are far better off using the smallest number of colors possible. By using color to accentuate rather than adding color to everything on the page, you keep your content easy to read and the colors you do use have far more impact.

-
+> **Note:** Usually, you are far better off using the smallest number of colors possible. By using color to accentuate rather than adding color to everything on the page, you keep your content easy to read and the colors you do use have far more impact. -

Color theory resources

+### Color theory resources -

A full review of color theory is beyond the scope of this article, but there are plenty of articles about color theory available, as well as courses you can find at nearby schools and universities. A couple of useful resources about color theory:

+A full review of color theory is beyond the scope of this article, but there are plenty of articles about color theory available, as well as courses you can find at nearby schools and universities. A couple of useful resources about color theory: -
-
Color Science (Khan Academy in association with Pixar)
-
An online course which introduces concepts such as what color is, how it's perceived, and how to use colors to express ideas. Presented by Pixar artists and designers.
-
{{interwiki("wikipedia", "Color theory")}} on Wikipedia
-
Wikipedia's entry on color theory, which has a lot of great information from a technical perspective. It's not really a resource for helping you with the color selection process, but is still full of useful information.
-
+* [Color Science](https://www.khanacademy.org/partner-content/pixar/color) ([Khan Academy](https://www.khanacademy.org/) in association with [Pixar](https://www.pixar.com/)) + * : An online course which introduces concepts such as what color is, how it's perceived, and how to use colors to express ideas. Presented by Pixar artists and designers. +* {{interwiki("wikipedia", "Color theory")}} on Wikipedia + * : Wikipedia's entry on color theory, which has a lot of great information from a technical perspective. It's not really a resource for helping you with the color selection process, but is still full of useful information. -

Color and accessibility

+### Color and accessibility -

There are several ways color can be an {{Glossary("accessibility")}} problem. Improper or careless use of color can result in a website or app that a percentage of your target audience may not be able to use adequately, resulting in lost traffic, lost business, and possibly even a public relations problem. So it's important to consider your use of color carefully.

+There are several ways color can be an {{Glossary("accessibility")}} problem. Improper or careless use of color can result in a website or app that a percentage of your target audience may not be able to use adequately, resulting in lost traffic, lost business, and possibly even a public relations problem. So it's important to consider your use of color carefully. -

You should do at least basic research into {{interwiki("wikipedia", "color blindness")}}. There are several kinds; the most common is red-green color blindness, which causes people to be unable to differentiate between the colors red and green. There are others, too, ranging from inabilities to tell the difference between certain colors to total inability to see color at all.

+You should do at least basic research into {{interwiki("wikipedia", "color blindness")}}. There are several kinds; the most common is red-green color blindness, which causes people to be unable to differentiate between the colors red and green. There are others, too, ranging from inabilities to tell the difference between certain colors to total inability to see color at all. -
-

Note: The most important rule: never use color as the only way to know something. If, for example, you indicate success or failure of an operation by changing the color of a shape from white to green for success and red for failure, users with red-green color-blindness won't be able to use your site properly. Instead, perhaps use both text and color together, so that everyone can understand what's happening.

-
+> **Note:** The most important rule: never use color as the only way to know something. If, for example, you indicate success or failure of an operation by changing the color of a shape from white to green for success and red for failure, users with red-green color-blindness won't be able to use your site properly. Instead, perhaps use both text and color together, so that everyone can understand what's happening. -

For more information about color blindness, see the following articles:

+For more information about color blindness, see the following articles: - +* [Medline Plus: Color Blindness](https://medlineplus.gov/colorblindness.html) (United States National Institute of Health) +* [American Academy of Ophthalmology: What Is Color Blindness?](https://www.aao.org/eye-health/diseases/what-is-color-blindness) +* [Color Blindness & Web Design](https://www.usability.gov/get-involved/blog/2010/02/color-blindness.html) (Usability.gov: United States Department of Health and Human Services) -

Palette design example

+### Palette design example -

Let's consider a quick example of selecting an appropriate color palette for a site. Imagine that you're building a website for a new game that takes place on the planet Mars. So let's do a Google search for photos of Mars. Lots of good examples of Martian coloration there. We carefully avoid the mockups and the photos from movies. And we decide to use a photo taken by one of the Mars landers humanity has parked on the surface over the last few decades, since the game takes place on the planet's surface. We use a color picker tool to select a sample of the color we choose.

+Let's consider a quick example of selecting an appropriate color palette for a site. Imagine that you're building a website for a new game that takes place on the planet Mars. So let's do a [Google search for photos of Mars](https://www.google.com/search?q=Mars\&tbm=isch). Lots of good examples of Martian coloration there. We carefully avoid the mockups and the photos from movies. And we decide to use a photo taken by one of the Mars landers humanity has parked on the surface over the last few decades, since the game takes place on the planet's surface. We use a color picker tool to select a sample of the color we choose. -

Using an eyedropper tool, we identify a color we like and determine that the color in question is #D79C7A, which is an appropriate rusty orange-red color that's so stereotypical of the Martian surface.

+Using an eyedropper tool, we identify a color we like and determine that the color in question is `#D79C7A`, which is an appropriate rusty orange-red color that's so stereotypical of the Martian surface. -

Having selected our base color, we need to build out our palette. We decide to use Paletton to come up with the other colors we need. Upon opening Paletton, we see:

+Having selected our base color, we need to build out our palette. We decide to use [Paletton](http://www.paletton.com/) to come up with the other colors we need. Upon opening Paletton, we see: -

Right after loading Paletton.

+![Right after loading Paletton.](paletton1.png) -

Next, we enter our color's hex code (D79C7A) into the "Base RGB" box at the bottom-left corner of the tool:

+Next, we enter our color's hex code (`D79C7A`) into the "Base RGB" box at the bottom-left corner of the tool: -

After entering base color

+![After entering base color](paletton2.png) -

We now see a monochromatic palette based on the color we picked from the Mars photo. If you need a lot of related colors for some reason, those are likely to be good ones. But what we really want is an accent color. Something that will pop along side the base color. To find that, we click the "add complementary" toggle underneath the menu that lets you select the palette type (currently "Monochromatic"). Paletton computes an appropriate accent color; clicking on the accent color down in the bottom-right corner tells us that this color is #508D7C.

+We now see a monochromatic palette based on the color we picked from the Mars photo. If you need a lot of related colors for some reason, those are likely to be good ones. But what we really want is an accent color. Something that will pop along side the base color. To find that, we click the "add complementary" toggle underneath the menu that lets you select the palette type (currently "Monochromatic"). Paletton computes an appropriate accent color; clicking on the accent color down in the bottom-right corner tells us that this color is `#508D7C`. -

Now with complementary colors included.

+![Now with complementary colors included.](paletton3.png) -

If you're unhappy with the color that's proposed to you, you can change the color scheme, to see if you find something you like better. For example, if we don't like the proposed greenish-blue color, we can click the Triad color scheme icon, which presents us with the following:

+If you're unhappy with the color that's proposed to you, you can change the color scheme, to see if you find something you like better. For example, if we don't like the proposed greenish-blue color, we can click the Triad color scheme icon, which presents us with the following: -

Triad color scheme selected

+![Triad color scheme selected](paletton4.png) -

That greyish blue in the top-right looks pretty good. Clicking on it, we find that it's #556E8D. That would be used as the accent color, to be used sparingly to make things stand out, such as in headlines or in the highlighting of tabs or other indicators on the site:

+That greyish blue in the top-right looks pretty good. Clicking on it, we find that it's `#556E8D`. That would be used as the accent color, to be used sparingly to make things stand out, such as in headlines or in the highlighting of tabs or other indicators on the site: -

Triad color scheme selected

+![Triad color scheme selected](paletton-color-detail.png) -

Now we have our base color and our accent. On top of that, we have a few complementary shades of each, just in case we need them for gradients and the like. The colors can then be exported in a number of formats so you can make use of them.

+Now we have our base color and our accent. On top of that, we have a few complementary shades of each, just in case we need them for gradients and the like. The colors can then be exported in a number of formats so you can make use of them. -

Once you have these colors, you will probably still need to select appropriate neutral colors. Common design practice is to try to find the sweet spot where there's just enough contrast that the text is crisp and readable but not enough contrast to become harsh for the eyes. It's easy to go too far in one way or another so be sure to get feedback on your colors once you've selected them and have examples of them in use available. If the contrast is too low, your text will tend to be washed out by the background, leaving it unreadable, but if your contrast is too high, the user may find your site garish and unpleasant to look at.

+Once you have these colors, you will probably still need to select appropriate neutral colors. Common design practice is to try to find the sweet spot where there's just enough contrast that the text is crisp and readable but not enough contrast to become harsh for the eyes. It's easy to go too far in one way or another so be sure to get feedback on your colors once you've selected them and have examples of them in use available. If the contrast is too low, your text will tend to be washed out by the background, leaving it unreadable, but if your contrast is too high, the user may find your site garish and unpleasant to look at. -

Color, backgrounds, contrast, and printing

+### Color, backgrounds, contrast, and printing -

What looks good on screen may look very different on paper. In addition, ink can be expensive, and if a user is printing your page, they don't necessarily need all the backgrounds and such using up their precious ink when all that matters is the text itself. Most browsers, by default, remove background images when printing documents.

+What looks good on screen may look very different on paper. In addition, ink can be expensive, and if a user is printing your page, they don't necessarily need all the backgrounds and such using up their precious ink when all that matters is the text itself. Most browsers, by default, remove background images when printing documents. -

If your background colors and images have been selected carefully and/or are crucial to the usefulness of the content, you can use the CSS {{cssxref("color-adjust")}} property to tell the browser that it should not make adjustments to the appearance of content.

+If your background colors and images have been selected carefully and/or are crucial to the usefulness of the content, you can use the CSS {{cssxref("color-adjust")}} property to tell the browser that it should not make adjustments to the appearance of content. -

The default value of color-adjust, economy, indicates that the browser is allowed to make appearance changes as it deems necessary in order to try to optimize the legibility and/or print economy of the content, given the type of output device the document is being drawn onto.

+The default value of `color-adjust`, `economy`, indicates that the browser is allowed to make appearance changes as it deems necessary in order to try to optimize the legibility and/or print economy of the content, given the type of output device the document is being drawn onto. -

You can set color-adjust to exact to tell the browser that the element or elements on which you use it have been designed specifically to best work with the colors and images left as they are. With this set, the browser won't tamper with the appearance of the element, and will draw it as indicated by your CSS.

+You can set `color-adjust` to `exact` to tell the browser that the element or elements on which you use it have been designed specifically to best work with the colors and images left as they are. With this set, the browser won't tamper with the appearance of the element, and will draw it as indicated by your CSS. -
-

Note: There is no guarantee, though, that color-adjust: exact will result in your CSS being used exactly as given. If the browser provides user preferences to change the output (such as a "don't print backgrounds" checkbox in a print dialog box), that overrides the value of color-adjust.

-
+> **Note:** There is no guarantee, though, that `color-adjust: exact` will result in your CSS being used exactly as given. If the browser provides user preferences to change the output (such as a "don't print backgrounds" checkbox in a print dialog box), that overrides the value of `color-adjust`. -

See also

+## See also - +* [Drawing graphics](/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics) +* [Graphics on the web](/en-US/docs/Web/Guide/Graphics) +* [MDN's color picker tool](/en-US/docs/Web/CSS/CSS_Colors/Color_picker_tool) diff --git a/files/en-us/web/html/attributes/accept/index.md b/files/en-us/web/html/attributes/accept/index.md index 82c51a319fd4b9c..451eb55e5fe6559 100644 --- a/files/en-us/web/html/attributes/accept/index.md +++ b/files/en-us/web/html/attributes/accept/index.md @@ -9,156 +9,150 @@ tags: - Input - Reference --- -

{{HTMLSidebar}}

+{{HTMLSidebar}} -

The accept attribute takes as its value a comma-separated list of one or more file types, or {{anch("Unique file type specifiers", "unique file type specifiers")}}, describing which file types to allow.

+The **`accept`** attribute takes as its value a comma-separated list of one or more file types, or {{anch("Unique file type specifiers", "unique file type specifiers")}}, describing which file types to allow. -

The accept property is an attribute of the {{HTMLElement("input/file", "file")}} {{htmlelement("input")}} type. It was supported on the {{htmlelement("form")}} element, but was removed in favor of {{HTMLElement("input/file", "file")}} in HTML5.

+The accept property is an attribute of the {{HTMLElement("input/file", "file")}} {{htmlelement("input")}} type. It was supported on the {{htmlelement("form")}} element, but was removed in favor of {{HTMLElement("input/file", "file")}} in HTML5. -

Because a given file type may be identified in more than one manner, it's useful to provide a thorough set of type specifiers when you need files of specific type, or use the wild card to denote a type of any format is acceptable.

+Because a given file type may be identified in more than one manner, it's useful to provide a thorough set of type specifiers when you need files of specific type, or use the wild card to denote a type of any format is acceptable. -

For instance, there are a number of ways Microsoft Word files can be identified, so a site that accepts Word files might use an <input> like this:

+For instance, there are a number of ways Microsoft Word files can be identified, so a site that accepts Word files might use an `` like this: -
<input type="file" id="docpicker"
-  accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document">
+```html + +``` -

Whereas if you're accepting a media file, you may want to be include any format of that media type:

+Whereas if you're accepting a media file, you may want to be include any format of that media type: -
<input type="file" id="soundFile" accept="audio/*">
-<input type="file" id="videoFile" accept="video/*">
-<input type="file" id="imageFile" accept="image/*">
+```html + + + +``` -

The accept attribute doesn't validate the types of the selected files; it provides hints for browsers to guide users towards selecting the correct file types. It is still possible (in most cases) for users to toggle an option in the file chooser that makes it possible to override this and select any file they wish, and then choose incorrect file types.

+The `accept` attribute doesn't validate the types of the selected files; it provides hints for browsers to guide users towards selecting the correct file types. It is still possible (in most cases) for users to toggle an option in the file chooser that makes it possible to override this and select any file they wish, and then choose incorrect file types. -

Because of this, you should make sure that expected requirement is validated server-side.

+Because of this, you should make sure that expected requirement is validated server-side. -

Examples

+## Examples -

When set on a file input type, the native file picker that opens up should only enable selecting files of the correct file type. Most operating systems lighten the files that don't match the criteria and aren't selectable.

+When set on a file input type, the native file picker that opens up should only enable selecting files of the correct file type. Most operating systems lighten the files that don't match the criteria and aren't selectable. -
<p>
-  <label for="soundFile">Select an audio file:</label>
-  <input type="file" id="soundFile" accept="audio/*">
-</p>
-<p>
-  <label for="videoFile">Select a video file:</label>
-  <input type="file" id="videoFile" accept="video/*">
-</p>
-<p>
-  <label for="imageFile">Select some images:</label>
-  <input type="file" id="imageFile" accept="image/*" multiple>
-</p>
+```html +

+ + +

+

+ + +

+

+ + +

+``` -

{{EmbedLiveSample('Examples', '100%', 200)}}

+{{EmbedLiveSample('Examples', '100%', 200)}} -

Note the last example allows you to select multiple images. See the multiple attribute for more information.

+Note the last example allows you to select multiple images. See the [`multiple`](multiple) attribute for more information. -

Unique file type specifiers

+## Unique file type specifiers -

A unique file type specifier is a string that describes a type of file that may be selected by the user in an {{HTMLElement("input")}} element of type file. Each unique file type specifier may take one of the following forms:

+A **unique file type specifier** is a string that describes a type of file that may be selected by the user in an {{HTMLElement("input")}} element of type `file`. Each unique file type specifier may take one of the following forms: -
    -
  • A valid case-insensitive filename extension, starting with a period (".") character. For example: .jpg, .pdf, or .doc.
    • -
  • A valid MIME type string, with no extensions.
    • -
  • The string audio/* meaning "any audio file".
    • -
  • The string video/* meaning "any video file".
    • -
  • The string image/* meaning "any image file".
    • -
+* A valid case-insensitive filename extension, starting with a period (".") character. For example: `.jpg`, `.pdf`, or `.doc`. +* A valid MIME type string, with no extensions. +* The string `audio/*` meaning "any audio file". +* The string `video/*` meaning "any video file". +* The string `image/*` meaning "any image file". -

The accept attribute takes as its value a string containing one or more of these unique file type specifiers, separated by commas. For example, a file picker that needs content that can be presented as an image, including both standard image formats and PDF files, might look like this:

+The `accept` attribute takes as its value a string containing one or more of these unique file type specifiers, separated by commas. For example, a file picker that needs content that can be presented as an image, including both standard image formats and PDF files, might look like this: -
<input type="file" accept="image/*,.pdf">
+```html + +``` -

Using file inputs

+## Using file inputs -

A basic example

+### A basic example -
<form method="post" enctype="multipart/form-data">
- <div>
-   <label for="file">Choose file to upload</label>
-   <input type="file" id="file" name="file" multiple>
- </div>
- <div>
-   <button>Submit</button>
- </div>
-</form>
+```html +
+
+ + +
+
+ +
+
+``` - +} +``` -

This produces the following output:

+This produces the following output: -

{{EmbedLiveSample('A_basic_example', 650, 60)}}

+{{EmbedLiveSample('A_basic_example', 650, 60)}} -
-

Note: You can find this example on GitHub too — see the source code, and also see it running live.

-
+> **Note:** You can find this example on GitHub too — see the [source code](https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/simple-file.html), and also [see it running live](https://mdn.github.io/learning-area/html/forms/file-examples/simple-file.html). -

Regardless of the user's device or operating system, the file input provides a button that opens up a file picker dialog that allows the user to choose a file.

+Regardless of the user's device or operating system, the file input provides a button that opens up a file picker dialog that allows the user to choose a file. -

Including the multiple attribute, as shown above, specifies that multiple files can be chosen at once. The user can choose multiple files from the file picker in any way that their chosen platform allows (e.g. by holding down Shift or Control, and then clicking). If you only want the user to choose a single file per <input>, omit the multiple attribute.

+Including the [`multiple`](multiple) attribute, as shown above, specifies that multiple files can be chosen at once. The user can choose multiple files from the file picker in any way that their chosen platform allows (e.g. by holding down Shift or Control, and then clicking). If you only want the user to choose a single file per ``, omit the `multiple` attribute. -

Limiting accepted file types

+### Limiting accepted file types -

Often you won't want the user to be able to pick any arbitrary type of file; instead, you often want them to select files of a specific type or types. For example, if your file input lets users upload a profile picture, you probably want them to select web-compatible image formats, such as {{Glossary("JPEG")}} or {{Glossary("PNG")}}.

+Often you won't want the user to be able to pick any arbitrary type of file; instead, you often want them to select files of a specific type or types. For example, if your file input lets users upload a profile picture, you probably want them to select web-compatible image formats, such as {{Glossary("JPEG")}} or {{Glossary("PNG")}}. -

Acceptable file types can be specified with the {{htmlattrxref("accept","input/file")}} attribute, which takes a comma-separated list of allowed file extensions or MIME types. Some examples:

+Acceptable file types can be specified with the {{htmlattrxref("accept","input/file")}} attribute, which takes a comma-separated list of allowed file extensions or MIME types. Some examples: -
    -
  • accept="image/png" or accept=".png" — Accepts PNG files.
    • -
  • accept="image/png, image/jpeg" or accept=".png, .jpg, .jpeg" — Accept PNG or JPEG files.
    • -
  • accept="image/*" — Accept any file with an image/* MIME type. (Many mobile devices also let the user take a picture with the camera when this is used.)
    • -
  • accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" — accept anything that smells like an MS Word document.
    • -
+* `accept="image/png"` or `accept=".png"` — Accepts PNG files. +* `accept="image/png, image/jpeg"` or `accept=".png, .jpg, .jpeg"` — Accept PNG or JPEG files. +* `accept="image/*"` — Accept any file with an `image/*` MIME type. (Many mobile devices also let the user take a picture with the camera when this is used.) +* `accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"` — accept anything that smells like an MS Word document. -

Let's look at a more complete example:

+Let's look at a more complete example: -
<form method="post" enctype="multipart/form-data">
-  <div>
-    <label for="profile_pic">Choose file to upload</label>
-    <input type="file" id="profile_pic" name="profile_pic"
-          accept=".jpg, .jpeg, .png">
-  </div>
-  <div>
-    <button>Submit</button>
-  </div>
-</form>
+```html +
+
+ + +
+
+ +
+
+``` - - -

{{EmbedLiveSample('Limiting_accepted_file_types', 650, 60)}}

- -

Specifications

- - - - - - - - - - - - - - - - - - -
SpecificationStatus
{{SpecName('HTML WHATWG', 'input.html#attr-input-accept', 'accept attribute')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5.1', 'sec-forms.html#attr-input-accept', 'accept attribute')}}{{Spec2('HTML5.1')}}
- -

Browser compatibility

- -

{{Compat("html.elements.attribute.accept")}}

- -

See also

- - +} +``` + +{{EmbedLiveSample('Limiting_accepted_file_types', 650, 60)}} + +## Specifications + +| Specification | Status | +| -------------------------------------------------------------------------------------------------------- | -------------------------------- | +| {{SpecName('HTML WHATWG', 'input.html#attr-input-accept', 'accept attribute')}} | {{Spec2('HTML WHATWG')}} | +| {{SpecName('HTML5.1', 'sec-forms.html#attr-input-accept', 'accept attribute')}} | {{Spec2('HTML5.1')}} | + +## Browser compatibility + +{{Compat("html.elements.attribute.accept")}} + +## See also + +* [Using files from web applications](/en-US/docs/Web/API/File/Using_files_from_web_applications) +* [File API](/en-US/docs/Web/API/File) diff --git a/files/en-us/web/html/attributes/autocomplete/index.md b/files/en-us/web/html/attributes/autocomplete/index.md index da6edabce7a13fd..fff352b502338d9 100644 --- a/files/en-us/web/html/attributes/autocomplete/index.md +++ b/files/en-us/web/html/attributes/autocomplete/index.md @@ -18,250 +18,227 @@ tags: - passwords - textarea --- -
{{HTMLSidebar}}
- -

The HTML autocomplete attribute lets web developers specify what if any permission the {{Glossary("user agent")}} has to provide automated assistance in filling out form field values, as well as guidance to the browser as to the type of information expected in the field.

- -

It is available on {{HTMLElement("input")}} elements that take a text or numeric value as input, {{HTMLElement("textarea")}} elements, {{HTMLElement("select")}} elements, and {{HTMLElement("form")}} elements.

- -

The source of the suggested values is generally up to the browser; typically values come from past values entered by the user, but they may also come from pre-configured values. For instance, a browser might let the user save their name, address, phone number, and email addresses for autocomplete purposes. Perhaps the browser offers the ability to save encrypted credit card information, for autocompletion following an authentication procedure.

- -

If an {{HTMLElement("input")}}, {{HTMLElement("select")}} or {{HTMLElement("textarea")}} element has no autocomplete attribute, then browsers use the autocomplete attribute of the element's form owner, which is either the {{HTMLElement("form")}} element that the element is a descendant of, or the <form> whose id is specified by the {{htmlattrxref("form", "input")}} attribute of the element.

- -

For more information, see the {{htmlattrxref("autocomplete", "form")}} attribute in {{HTMLElement("form")}}.

- -
-

Note: In order to provide autocompletion, user-agents might require <input>/<select>/<textarea> elements to:

- -
    -
  1. Have a name and/or id attribute
    2. -
  2. Be descendants of a <form> element
    3. -
  3. The form to have a {{HTMLElement("input/submit", "submit")}} button
    4. -
-
- -

Values

- -
-
"off"
-
The browser is not permitted to automatically enter or select a value for this field. It is possible that the document or application provides its own autocomplete feature, or that security concerns require that the field's value not be automatically entered. -

Note: In most modern browsers, setting autocomplete to "off" will not prevent a password manager from asking the user if they would like to save username and password information, or from automatically filling in those values in a site's login form. See the autocomplete attribute and login fields.

-
-
"on"
-
The browser is allowed to automatically complete the input. No guidance is provided as to the type of data expected in the field, so the browser may use its own judgement.
-
"name"
-
The field expects the value to be a person's full name. Using "name" rather than breaking the name down into its components is generally preferred because it avoids dealing with the wide diversity of human names and how they are structured; however, you can use the following autocomplete values if you do need to break the name down into its components: -
-
"honorific-prefix"
-
The prefix or title, such as "Mrs.", "Mr.", "Miss", "Ms.", "Dr.", or "Mlle.".
-
"given-name"
-
The given (or "first") name.
-
"additional-name"
-
The middle name.
-
"family-name"
-
The family (or "last") name.
-
"honorific-suffix"
-
The suffix, such as "Jr.", "B.Sc.", "PhD.", "MBASW", or "IV".
-
"nickname"
-
A nickname or handle.
-
-
-
"email"
-
An email address.
-
"username"
-
A username or account name.
-
"new-password"
-
A new password. When creating a new account or changing passwords, this should be used for an "Enter your new password" or "Confirm new password" field, as opposed to a general "Enter your current password" field that might be present. This may be used by the browser both to avoid accidentally filling in an existing password and to offer assistance in creating a secure password (see also Preventing autofilling with autocomplete="new-password").
-
"current-password"
-
The user's current password.
-
"one-time-code"
-
A one-time code used for verifying user identity.
-
"organization-title"
-
A job title, or the title a person has within an organization, such as "Senior Technical Writer", "President", or "Assistant Troop Leader".
-
"organization"
-
A company or organization name, such as "Acme Widget Company" or "Girl Scouts of America".
-
"street-address"
-
A street address. This can be multiple lines of text, and should fully identify the location of the address within its second administrative level (typically a city or town), but should not include the city name, ZIP or postal code, or country name.
-
"address-line1", "address-line2", "address-line3"
-
Each individual line of the street address. These should only be present if the "street-address" is not present.
-
"address-level4"
-
The finest-grained {{anch("Administrative levels in addresses", "administrative level")}}, in addresses which have four levels.
-
"address-level3"
-
The third {{anch("Administrative levels in addresses", "administrative level")}}, in addresses with at least three administrative levels.
-
"address-level2"
-
The second {{anch("Administrative levels in addresses", "administrative level")}}, in addresses with at least two of them. In countries with two administrative levels, this would typically be the city, town, village, or other locality in which the address is located.
-
"address-level1"
-
The first {{anch("Administrative levels in addresses", "administrative level")}} in the address. This is typically the province in which the address is located. In the United States, this would be the state. In Switzerland, the canton. In the United Kingdom, the post town.
-
"country"
-
A country or territory code.
-
"country-name"
-
A country or territory name.
-
"postal-code"
-
A postal code (in the United States, this is the ZIP code).
-
"cc-name"
-
The full name as printed on or associated with a payment instrument such as a credit card. Using a full name field is preferred, typically, over breaking the name into pieces.
-
"cc-given-name"
-
A given (first) name as given on a payment instrument like a credit card.
-
"cc-additional-name"
-
A middle name as given on a payment instrument or credit card.
-
"cc-family-name"
-
A family name, as given on a credit card.
-
"cc-number"
-
A credit card number or other number identifying a payment method, such as an account number.
-
"cc-exp"
-
A payment method expiration date, typically in the form "MM/YY" or "MM/YYYY".
-
"cc-exp-month"
-
The month in which the payment method expires.
-
"cc-exp-year"
-
The year in which the payment method expires.
-
"cc-csc"
-
The security code for the payment instrument; on credit cards, this is the 3-digit verification number on the back of the card.
-
"cc-type"
-
The type of payment instrument (such as "Visa" or "Master Card").
-
"transaction-currency"
-
The currency in which the transaction is to take place.
-
"transaction-amount"
-
The amount, given in the currency specified by "transaction-currency", of the transaction, for a payment form.
-
"language"
-
A preferred language, given as a valid BCP 47 language tag.
-
"bday"
-
A birth date, as a full date.
-
"bday-day"
-
The day of the month of a birth date.
-
"bday-month"
-
The month of the year of a birth date.
-
"bday-year"
-
The year of a birth date.
-
"sex"
-
A gender identity (such as "Female", "Fa'afafine", "Male"), as freeform text without newlines.
-
"tel"
-
A full telephone number, including the country code. If you need to break the phone number up into its components, you can use these values for those fields: -
-
"tel-country-code"
-
The country code, such as "1" for the United States, Canada, and other areas in North America and parts of the Caribbean.
-
"tel-national"
-
The entire phone number without the country code component, including a country-internal prefix. For the phone number "1-855-555-6502", this field's value would be "855-555-6502".
-
"tel-area-code"
-
The area code, with any country-internal prefix applied if appropriate.
-
"tel-local"
-
The phone number without the country or area code. This can be split further into two parts, for phone numbers which have an exchange number and then a number within the exchange. For the phone number "555-6502", use "tel-local-prefix" for "555" and "tel-local-suffix" for "6502".
-
-
-
"tel-extension"
-
A telephone extension code within the phone number, such as a room or suite number in a hotel or an office extension in a company.
-
"impp"
-
A URL for an instant messaging protocol endpoint, such as "xmpp:username@example.net".
-
"url"
-
A URL, such as a home page or company web site address as appropriate given the context of the other fields in the form.
-
"photo"
-
The URL of an image representing the person, company, or contact information given in the other fields in the form.
-
- -

See the WHATWG Standard for more detailed information.

- -
-

Note: The autocomplete attribute also controls whether Firefox will — unlike other browsers — persist the dynamic disabled state and (if applicable) dynamic checkedness of an <input> element, <textarea> element, or entire <form> across page loads. The persistence feature is enabled by default. Setting the value of the autocomplete attribute to off disables this feature. This works even when the autocomplete attribute would normally not apply by virtue of its type. See {{bug(654072)}}.

+{{HTMLSidebar}} + +The HTML `autocomplete` attribute lets web developers specify what if any permission the {{Glossary("user agent")}} has to provide automated assistance in filling out form field values, as well as guidance to the browser as to the type of information expected in the field. + +It is available on {{HTMLElement("input")}} elements that take a text or numeric value as input, {{HTMLElement("textarea")}} elements, {{HTMLElement("select")}} elements, and {{HTMLElement("form")}} elements. + +The source of the suggested values is generally up to the browser; typically values come from past values entered by the user, but they may also come from pre-configured values. For instance, a browser might let the user save their name, address, phone number, and email addresses for autocomplete purposes. Perhaps the browser offers the ability to save encrypted credit card information, for autocompletion following an authentication procedure. + +If an {{HTMLElement("input")}}, {{HTMLElement("select")}} or {{HTMLElement("textarea")}} element has no `autocomplete` attribute, then browsers use the `autocomplete` attribute of the element's form owner, which is either the {{HTMLElement("form")}} element that the element is a descendant of, or the `
` whose `id` is specified by the {{htmlattrxref("form", "input")}} attribute of the element. + +For more information, see the {{htmlattrxref("autocomplete", "form")}} attribute in {{HTMLElement("form")}}. + +> **Note:** In order to provide autocompletion, user-agents might require ``/` + +
+``` + +### Result + +{{EmbedLiveSample('Example')}} + +## Examples + +```html hidden +
+ Checkboxes buttons +

+

+

+
+
+ Radio buttons +

+

+

+
+``` + +{{EmbedLiveSample('Examples', 500, 200)}} + +## Specifications - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'forms.html#attr-input-readonly', 'readonly attribute')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'forms.html#attr-input-readonly', 'readonly attribute')}}{{Spec2('HTML5 W3C')}}
{{SpecName('HTML5.1', 'sec-forms.html#the-readonly-attribute', 'readonly attribute')}}{{Spec2('HTML5.1')}}
SpecificationStatusComment
+ {{SpecName('HTML WHATWG', 'forms.html#attr-input-readonly', 'readonly attribute')}} + {{Spec2('HTML WHATWG')}}
+ {{SpecName('HTML5 W3C', 'forms.html#attr-input-readonly', 'readonly attribute')}} + {{Spec2('HTML5 W3C')}}
+ {{SpecName('HTML5.1', 'sec-forms.html#the-readonly-attribute', 'readonly attribute')}} + {{Spec2('HTML5.1')}}
-

Browser compatibility

+## Browser compatibility -

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

+{{Compat("html.elements.attributes.readonly")}} -

See also

+## See also -
    -
  • {{cssxref(':read-only')}} and {{cssxref(':read-write')}}
    • -
  • {{htmlelement('input')}}
    • -
  • {{htmlelement('select')}}
    • -
+* {{cssxref(':read-only')}} and {{cssxref(':read-write')}} +* {{htmlelement('input')}} +* {{htmlelement('select')}} diff --git a/files/en-us/web/html/attributes/rel/index.md b/files/en-us/web/html/attributes/rel/index.md index 2b1febd54c30fc5..3c1b489e74c8791 100644 --- a/files/en-us/web/html/attributes/rel/index.md +++ b/files/en-us/web/html/attributes/rel/index.md @@ -9,399 +9,256 @@ tags: - form - rel --- -

{{HTMLSidebar}}

- -

The rel attribute defines the relationship between a linked resource and the current document. Valid on {{htmlelement('link')}}, {{htmlelement('a')}}, {{htmlelement('area')}}, and {{htmlelement('form')}}, the supported values depend on the element on which the attribute is found.

- -

The type of relationships is given by the value of the rel attribute, which, if present, must have a value that is an unordered set of unique space-separated keywords. Differently from a class name, which does not express semantics, the rel attribute must express tokens that are semantically valid for both machines and humans. The current registries for the possible values of the rel attribute are the IANA link relation registry, the HTML Living Standard, and the freely-editable existing-rel-values page in the microformats wiki, as suggested by the Living Standard. If a rel attribute not present in one of the three sources above is used some HTML validators (such as the W3C Markup Validation Service) will generate a warning.

- -

The following table lists some of the most important existing keywords. Every keyword within a space-separated value should be unique within that value.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Values for the rel attribute, and the elements for which each is relevant
rel valueDescription{{htmlelement('link')}}{{htmlelement('a')}} and {{htmlelement('area')}}{{htmlelement('form')}}
{{anch("attr-alternate", "alternate")}}Alternate representations of the current document.LinkLinkNot allowed
{{anch("attr-author", "author")}}Author of the current document or article.LinkLinkNot allowed
{{anch("attr-bookmark", "bookmark")}}Permalink for the nearest ancestor section.Not allowedLinkNot allowed
{{anch("attr-canonical", "canonical")}}Preferred URL for the current document.LinkNot allowedNot allowed
dns-prefetchTells the browser to preemptively perform DNS resolution for the target resource's originExternal ResourceNot allowedNot allowed
{{anch("attr-external", "external")}}The referenced document is not part of the same site as the current document.Not allowedAnnotationAnnotation
{{anch("attr-help", "help")}}Link to context-sensitive help.LinkLinkLink
{{anch("attr-icon", "icon")}}An icon representing the current document.External ResourceNot allowedNot allowed
{{anch("attr-license", "license")}}Indicates that the main content of the current document is covered by the copyright license described by the referenced document.LinkLinkLink
manifestWeb app manifestLinkNot allowedNot allowed
modulepreloadTells to browser to preemptively fetch the script and store it in the document's module map for later evaluation. Optionally, the module's dependencies can be fetched as well.External ResourceNot allowedNot allowed
{{anch("attr-next", "next")}}Indicates that the current document is a part of a series and that the next document in the series is the referenced document.LinkLinkLink
{{anch("attr-nofollow", "nofollow")}}Indicates that the current document's original author or publisher does not endorse the referenced document.Not allowedAnnotationAnnotation
noopenerCreates a top-level browsing context that is not an auxiliary browsing context if the hyperlink would create either of those, to begin with (i.e., has an appropriate target attribute value).Not allowedAnnotationAnnotation
{{anch("attr-noreferrer", "noreferrer")}}No Referer header will be included. Additionally, has the same effect as noopener.Not allowedAnnotationAnnotation
{{anch("attr-opener", "opener")}}Creates an auxiliary browsing context if the hyperlink would otherwise create a top-level browsing context that is not an auxiliary browsing context (i.e., has "_blank" as target attribute value).Not allowedAnnotationAnnotation
{{anch("attr-pingback", "pingback")}}Gives the address of the pingback server that handles pingbacks to the current document.External ResourceNot allowedNot allowed
preconnectSpecifies that the user agent should preemptively connect to the target resource's origin.External ResourceNot allowedNot allowed
prefetchSpecifies that the user agent should preemptively fetch and cache the target resource as it is likely to be required for a followup navigation.External ResourceNot allowedNot allowed
preloadSpecifies that the user agent must preemptively fetch and cache the target resource for current navigation according to the potential destination given by the as attribute (and the priority associated with the corresponding destination).External ResourceNot allowedNot allowed
prerenderSpecifies that the user agent should preemptively fetch the target resource and process it in a way that helps deliver a faster response in the future.External ResourceNot allowedNot allowed
{{anch("attr-prev", "prev")}}Indicates that the current document is a part of a series and that the previous document in the series is the referenced document.LinkLinkLink
{{anch("attr-search", "search")}}Gives a link to a resource that can be used to search through the current document and its related pages.LinkLinkLink
{{anch("attr-stylesheet", "stylesheet")}}Imports a style sheet.External ResourceNot allowedNot allowed
{{anch("attr-tag", "tag")}}Gives a tag (identified by the given address) that applies to the current document.Not allowedLinkNot allowed
- -

The rel attribute is relevant to the {{htmlelement('link')}}, {{htmlelement('a')}}, {{htmlelement('area')}}, and {{htmlelement('form')}} elements, but some values only relevant to a subset of those elements. Like all HTML keyword attribute values, these values are case-insenstive.

- -

The rel attribute has no default value. If the attribute is omitted or if none of the values in the attribute are supported, then the document has no particular relationship with the destination resource other than there being a hyperlink between the two. In this case, on {{htmlelement('link')}} and {{htmlelement('form')}}, if the rel attribute is absent, has no keywords, or if not one or more of the space-separated keywords above, then the element does not create any links. {{htmlelement('a')}} and {{htmlelement('area')}} will still created links, but without a defined relationship.

- -

Values

- -
-
{{htmlattrdef("alternate")}}
-
Indicates an alternate representation of the current document. Valid for {{htmlelement('link')}}, {{htmlelement('a')}}, and {{htmlelement('area')}}, the meaning depends on the values of the other attributes. -
    -
  • With the {{anch('stylesheet')}} keyword on a <link>, it creates an alternate stylesheet. - 
    <!-- a persistent style sheet -->
-<link rel="stylesheet" href="default.css">
-<!-- alternate style sheets -->
-<link rel="alternate stylesheet" href="highcontrast.css" title="High contrast">
    -
    • -
  • With an hreflang attribute that differs from the document language, it indicates a translation.
    • -
  • With the type attribute, it indicates that the referenced document is the same content in a different format. For example, with type="application/rss+xml" it creates a hyperlink referencing a syndication feed. - 
    <link rel="alternate" type="application/atom+xml" href="posts.xml" title="Blog">
    -
    • -
  • Both the hreflang and type attributes specify links to versions of the document in an alternative format and language, intended for other media: - 
    <link rel=alternate href="/fr/html/print" hreflang=fr type=text/html media=print title="French HTML (for printing)">
-<link rel=alternate href="/fr/pdf" hreflang=fr type=application/pdf title="French PDF">
    -
    • -
-

Note: The obsolete rev="made" is treated as rel="alternate"

-
-
{{htmlattrdef("author")}}
-
Indicates the author of the current document or article. Relevant for {{htmlelement('link')}}, {{htmlelement('a')}}, and {{htmlelement('area')}} elements, the author keyword creates a hyperlink. With {{htmlelement('a')}} and {{htmlelement('area')}}, it indicates the linked document (or mailto:) provides information about the author of the nearest {{htmlelement('article')}} ancestor if there is one, otherwise the entire document. For {{htmlelement('link')}}, it represents the author of the entire document.
-
{{htmlattrdef("bookmark")}}
-
Relevant as the rel attribute value for the {{htmlelement('a')}} and {{htmlelement('area')}} elements, the bookmark provides a permalink for ancestor section, which is the nearest ancestor {{htmlelement('article')}} or {{htmlelement('section')}}, if there is at least one, otherwise, the nearest heading sibling or ancestor descendant, to the next..
-
{{htmlattrdef("canonical")}}
-
Valid for {{htmlelement('link')}}, it defines the preferred URL for the current document, which is useful for search engines.
-
{{htmlattrdef("dns-prefetch")}}
-
Relevant for the {{htmlelement('link')}} element both in the {{htmlelement('body')}} and {{htmlelement('head')}}, it tells the browser to preemptively perform DNS resolution for the target resource's origin. Useful for resources the user will likely need, it helps reduce latency and thereby improves performance when the user does access the resources as the browser preemptively performed DNS resolution for the origin of the specified resource. See dns-prefetch described in resource hints.
-
{{htmlattrdef("external")}}
-
Relevant to {{htmlelement('form')}}, {{htmlelement('a')}}, and {{htmlelement('area')}}, it indicates the referenced document is not part of the current site. This can be used with attribute selectors to style external links in a way that indicates to the user that they will be leaving the current site.
-
{{htmlattrdef("help")}}
-
Relevant to {{htmlelement('form')}}, {{htmlelement('link')}}, {{htmlelement('a')}}, and {{htmlelement('area')}}, the help keyword indicates that the linked to content provides context-sensitive help, providing information for the parent of the element defining the hyperlink, and its children. When used within <link>, the help is for the whole document. When included with {{htmlelement('a')}} and {{htmlelement('area')}} and supported, the default {{cssxref('cursor')}} will be help instead of pointer.
-
{{htmlattrdef("icon")}}
-
-

Note: Valid with {{htmlelement('link')}}, the linked resource represents the icon, a resource for representing the page in the user interface, for the current document.

- -

The most common use for the icon value is the favicon:

- - 
<link rel="icon" href="favicon.ico">
- -

If there are multiple <link rel="icon">s, the browser uses their media attribute, type, and sizes attributes to select the most appropriate icon. If several icons are equally appropriate, the last one is used. If the most appropriate icon is later found to be inappropriate, for example because it uses an unsupported format, the browser proceeds to the next-most appropriate, and so on.

- -
-

Note: Prior to Firefox 83 the crossorigin attribute was not supported for rel="icon" there is also an open issue for Chrome.

-
- -

Note: Apple's iOS does not use this link type, nor the sizes attribute, like others mobile browsers do, to select a webpage icon for Web Clip or a start-up placeholder. Instead it uses the non-standard apple-touch-icon and apple-touch-startup-image respectively.

- -

Note: The shortcut link type is often seen before icon, but this link type is non-conforming, ignored and web authors must not use it anymore.

-
-
{{htmlattrdef("license")}}
-
-

Note: Valid on the {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}, {{HTMLElement("link")}} elements, the license value indicates that the hyperlink leads to a document describing the licensing information; that the main content of the current document is covered by the copyright license described by the referenced document. If not inside the {{HTMLElement("head")}} element, the standard doesn't distinguish between a hyperlink applying to a specific part of the document or to the document as a whole. Only the data on the page can indicate this.

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

Note: Although recognized, the synonym copyright is incorrect and must be avoided.

-
-
{{htmlattrdef("manifest")}}
-
Web app manifest. Requires the use of the CORS protocol for cross-origin fetching.
-
{{htmlattrdef("modulepreload")}}
-
Useful for improved performance, and relevant to the {{htmlelement('link')}} anywhere in the document, setting rel="modulepreload" tells the browser to preemptively fetch the script (and dependencies) and store it in the document's module map for later evaluation. modulepreload links can ensure network fetching is done with the module ready (but not evaluated) in the module map before it is necessarily needed. See also link types: modulepreload.
-
{{htmlattrdef("next")}}
-
Relevant to {{htmlelement('form')}}, {{htmlelement('link')}}, {{htmlelement('a')}}, and {{htmlelement('area')}}, the next values indicates that the current document is a part of a series, and that the next document in the series is the referenced document. When included in a <link>, browsers may assume that document will be fetched next, and treat it as a resource hint.
-
{{htmlattrdef("nofollow")}}
-
Relevant to {{htmlelement('form')}}, {{htmlelement('a')}}, and {{htmlelement('area')}}, the nofollow keyword tells search engine spiders to ignore the link relationship. The nofollow relationship may indicate the current document's owner does not endorse the referenced document. It is often included by Search Engine Optimizers pretending their link farms are not spam pages.
-
{{htmlattrdef("noopener")}}
-
Relevant to {{htmlelement('form')}}, {{htmlelement('a')}}, and {{htmlelement('area')}}, creates a top-level browsing context that is not an auxiliary browsing context if the hyperlink would create either of those to begin with (i.e., has an appropriate target attribute value). In other words, it makes the link behave as if window.opener were null and target="_parent" were set.
-
- This is the opposite of {{anch("opener")}}.
-
{{htmlattrdef("noreferrer")}}
-
Relevant to {{htmlelement('form')}}, {{htmlelement('a')}}, and {{htmlelement('area')}}, including this value makes the referrer unknown (no Referer header will be included), and creates a top-level browsing context as if noopener were also set.
-
{{htmlattrdef("opener")}}
-
Creates an auxiliary browsing context if the hyperlink would otherwise create a top-level browsing context that is not anauxiliary browsing context (i.e., has "_blank" as target attribute value). Effectively, the opposite of {{anch("noopener")}}.
-
{{htmlattrdef("pingback")}}
-
Gives the address of the pingback server that handles pingbacks to the current document.
-
{{htmlattrdef("preconnect")}}
-
Specifies that the user agent should preemptively connect to the target resource's origin.
-
{{htmlattrdef("prefetch")}}
-
Specifies that the user agent should preemptively fetch and cache the target resource as it is likely to be required for a followup navigation.
-
{{htmlattrdef("preload")}}
-
Specifies that the user agent must preemptively fetch and cache the target resource for current navigation according to the potential destination given by the as attribute (and the priority associated with the corresponding destination).
-
{{htmlattrdef("prerender")}}
-
Specifies that the user agent should preemptively fetch the target resource and process it in a way that helps deliver a faster response in the future.
-
{{htmlattrdef("prev")}}
-
-

Similar to the {{anch("next")}} keyword, relevant to {{htmlelement('form')}}, {{htmlelement('link')}}, {{htmlelement('a')}}, and {{htmlelement('area')}}, the prev values indicates that the current document is a part of a series, and that the link references a previous document in the series is the referenced document.

- -

Note: The synonym previous is incorrect and should not be used.

-
-
{{htmlattrdef("search")}}
-
-

Relevant to {{htmlelement('form')}}, {{htmlelement('link')}}, {{htmlelement('a')}}, and {{htmlelement('area')}} elements, the search keywords indicates that the hyperlink references a document whose interface is specially designed for searching in the current document, site, and related resources, providing a link to a resource that can be used to search.

- -

If the type attribute is set to application/opensearchdescription+xml the resource is an OpenSearch plugin that can be easily added to the interface of some browsers like Firefox or Internet Explorer.

-
-
{{htmlattrdef("stylesheet")}}
-
-

Valid for the {{htmlelement('link')}} element, it imports an external resource to be used as a stylesheet. The type attribute is not needed as it's a text/css stylesheet, as that is the default value. If it's not a stylesheet of type text/css it is best to declare the type.

- -

While this attribute defines the link as being a stylesheet, the interaction with other attributes and other key terms within the rel value impact whether the stylesheet is downloaded and/or used.

- -

When used with the {{anch('alternate')}} keyword, it defines an alternative style sheet. In this case, include a non-empty title.

- -

The external stylesheet will not be used or even downloaded if the media does not match the value of the media attribute.

- -

Requires the use of the CORS protocol for cross-origin fetching.

-
-
{{htmlattrdef("tag")}}
-
Valid for the {{htmlelement('a')}}, and {{htmlelement('area')}} elements, it gives a tag (identified by the given address) that applies to the current document. The tag value denotes that the link refers to a document describing a tag applying to the document on which it is located. This link type is not meant for tags within a tag cloud, as those tags apply to a group of pages, whereas the tag value of the rel attribute is for a single document.
-
- -

Non-standard values

- -
-
{{htmlattrdef("apple-touch-icon")}}
-
Specifies the icon for a web application on an iOS device.
-
- -

Browser compatibility

- -

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

- -

Specifications

+{{HTMLSidebar}} + +The **`rel`** attribute defines the relationship between a linked resource and the current document. Valid on {{htmlelement('link')}}, {{htmlelement('a')}}, {{htmlelement('area')}}, and {{htmlelement('form')}}, the supported values depend on the element on which the attribute is found. + +The type of relationships is given by the value of the `rel` attribute, which, if present, must have a value that is an unordered set of unique space-separated keywords. Differently from a `class` name, which does not express semantics, the `rel` attribute must express tokens that are semantically valid for both machines and humans. The current registries for the possible values of the `rel` attribute are the [IANA link relation registry](https://www.iana.org/assignments/link-relations/link-relations.xhtml), the [HTML Living Standard](https://html.spec.whatwg.org/multipage/links.html#linkTypes), and the freely-editable [existing-rel-values page](https://microformats.org/wiki/existing-rel-values) in the microformats wiki, [as suggested](https://html.spec.whatwg.org/multipage/links.html#other-link-types) by the Living Standard. If a `rel` attribute not present in one of the three sources above is used some HTML validators (such as the [W3C Markup Validation Service](https://validator.w3.org/)) will generate a warning. + +The following table lists some of the most important existing keywords. Every keyword within a space-separated value should be unique within that value. + +| `rel` value | Description | `{{htmlelement('link')}}` | `{{htmlelement('a')}}` and `{{htmlelement('area')}}` | `{{htmlelement('form')}}` | +| ---------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------- | --------------------------------------------------------------------- | ---------------------------------- | +| `{{anch("attr-alternate", "alternate")}}` | Alternate representations of the current document. | Link | Link | Not allowed | +| `{{anch("attr-author", "author")}}` | Author of the current document or article. | Link | Link | Not allowed | +| `{{anch("attr-bookmark", "bookmark")}}` | Permalink for the nearest ancestor section. | Not allowed | Link | Not allowed | +| `{{anch("attr-canonical", "canonical")}}` | Preferred URL for the current document. | Link | Not allowed | Not allowed | +| [`dns-prefetch`](/en-US/docs/Web/HTML/Link_types/dns-prefetch) | Tells the browser to preemptively perform DNS resolution for the target resource's origin | External Resource | Not allowed | Not allowed | +| `{{anch("attr-external", "external")}}` | The referenced document is not part of the same site as the current document. | Not allowed | Annotation | Annotation | +| `{{anch("attr-help", "help")}}` | Link to context-sensitive help. | Link | Link | Link | +| `{{anch("attr-icon", "icon")}}` | An icon representing the current document. | External Resource | Not allowed | Not allowed | +| `{{anch("attr-license", "license")}}` | Indicates that the main content of the current document is covered by the copyright license described by the referenced document. | Link | Link | Link | +| [`manifest`](/en-US/docs/Web/HTML/Link_types/manifest) | Web app manifest | Link | Not allowed | Not allowed | +| [`modulepreload`](/en-US/docs/Web/HTML/Link_types/modulepreload) | Tells to browser to preemptively fetch the script and store it in the document's module map for later evaluation. Optionally, the module's dependencies can be fetched as well. | External Resource | Not allowed | Not allowed | +| `{{anch("attr-next", "next")}}` | Indicates that the current document is a part of a series and that the next document in the series is the referenced document. | Link | Link | Link | +| `{{anch("attr-nofollow", "nofollow")}}` | Indicates that the current document's original author or publisher does not endorse the referenced document. | Not allowed | Annotation | Annotation | +| [`noopener`](/en-US/docs/Web/HTML/Link_types/noopener) | Creates a top-level browsing context that is not an auxiliary browsing context if the hyperlink would create either of those, to begin with (i.e., has an appropriate` target `attribute value). | Not allowed | Annotation | Annotation | +| `{{anch("attr-noreferrer", "noreferrer")}}` | No `Referer` header will be included. Additionally, has the same effect as `noopener`. | Not allowed | Annotation | Annotation | +| `{{anch("attr-opener", "opener")}}` | Creates an auxiliary browsing context if the hyperlink would otherwise create a top-level browsing context that is not an auxiliary browsing context (i.e., has "`_blank`" as `target` attribute value). | Not allowed | Annotation | Annotation | +| `{{anch("attr-pingback", "pingback")}}` | Gives the address of the pingback server that handles pingbacks to the current document. | External Resource | Not allowed | Not allowed | +| [`preconnect`](/en-US/docs/Web/HTML/Link_types/preconnect) | Specifies that the user agent should preemptively connect to the target resource's origin. | External Resource | Not allowed | Not allowed | +| [`prefetch`](/en-US/docs/Web/HTML/Link_types/prefetch) | Specifies that the user agent should preemptively fetch and cache the target resource as it is likely to be required for a followup navigation. | External Resource | Not allowed | Not allowed | +| [`preload`](/en-US/docs/Web/HTML/Link_types/preload) | Specifies that the user agent must preemptively fetch and cache the target resource for current navigation according to the potential destination given by the [`as`](as) attribute (and the priority associated with the corresponding destination). | External Resource | Not allowed | Not allowed | +| [`prerender`](/en-US/docs/Web/HTML/Link_types/prerender) | Specifies that the user agent should preemptively fetch the target resource and process it in a way that helps deliver a faster response in the future. | External Resource | Not allowed | Not allowed | +| `{{anch("attr-prev", "prev")}}` | Indicates that the current document is a part of a series and that the previous document in the series is the referenced document. | Link | Link | Link | +| `{{anch("attr-search", "search")}}` | Gives a link to a resource that can be used to search through the current document and its related pages. | Link | Link | Link | +| `{{anch("attr-stylesheet", "stylesheet")}}` | Imports a style sheet. | External Resource | Not allowed | Not allowed | +| `{{anch("attr-tag", "tag")}}` | Gives a tag (identified by the given address) that applies to the current document. | Not allowed | Link | Not allowed | + +The `rel` attribute is relevant to the {{htmlelement('link')}}, {{htmlelement('a')}}, {{htmlelement('area')}}, and {{htmlelement('form')}} elements, but some values only relevant to a subset of those elements. Like all HTML keyword attribute values, these values are case-insenstive. + +The `rel` attribute has no default value. If the attribute is omitted or if none of the values in the attribute are supported, then the document has no particular relationship with the destination resource other than there being a hyperlink between the two. In this case, on {{htmlelement('link')}} and {{htmlelement('form')}}, if the `rel` attribute is absent, has no keywords, or if not one or more of the space-separated keywords above, then the element does not create any links. {{htmlelement('a')}} and {{htmlelement('area')}} will still created links, but without a defined relationship. + +## Values + +* {{htmlattrdef("alternate")}} + * : Indicates an alternate representation of the current document. Valid for {{htmlelement('link')}}, {{htmlelement('a')}}, and {{htmlelement('area')}}, the meaning depends on the values of the other attributes. + + * With the `{{anch('stylesheet')}}` keyword on a ``, it creates an alternate stylesheet. + + ```html + + + + + ``` + * With an [hreflang](hreflang) attribute that differs from the document language, it indicates a translation. + * With the [type](type) attribute, it indicates that the referenced document is the same content in a different format. For example, with `type="application/rss+xml"` it creates a hyperlink referencing a syndication feed. + + ```html + + ``` + * Both the [hreflang](hreflang) and [type](type) attributes specify links to versions of the document in an alternative format and language, intended for other media: + + ```html + + + ``` + + > **Note:** The obsolete `rev="made"` is treated as `rel="alternate"` +* {{htmlattrdef("author")}} + * : Indicates the author of the current document or article. Relevant for {{htmlelement('link')}}, {{htmlelement('a')}}, and {{htmlelement('area')}} elements, the `author` keyword creates a hyperlink. With {{htmlelement('a')}} and {{htmlelement('area')}}, it indicates the linked document (or `mailto:`) provides information about the author of the nearest {{htmlelement('article')}} ancestor if there is one, otherwise the entire document. For {{htmlelement('link')}}, it represents the author of the entire document. +* {{htmlattrdef("bookmark")}} + * : Relevant as the `rel` attribute value for the {{htmlelement('a')}} and {{htmlelement('area')}} elements, the bookmark provides a permalink for ancestor section, which is the nearest ancestor {{htmlelement('article')}} or {{htmlelement('section')}}, if there is at least one, otherwise, the nearest heading sibling or ancestor descendant, to the next.. +* {{htmlattrdef("canonical")}} + * : Valid for {{htmlelement('link')}}, it defines the preferred URL for the current document, which is useful for search engines. +* {{htmlattrdef("dns-prefetch")}} + * : Relevant for the {{htmlelement('link')}} element both in the {{htmlelement('body')}} and {{htmlelement('head')}}, it tells the browser to preemptively perform DNS resolution for the target resource's origin. Useful for resources the user will likely need, it helps reduce latency and thereby improves performance when the user does access the resources as the browser preemptively performed DNS resolution for the origin of the specified resource. See [dns-prefetch](/en-US/docs/Web/Performance/dns-prefetch) described in [resource hints](). +* {{htmlattrdef("external")}} + * : Relevant to {{htmlelement('form')}}, {{htmlelement('a')}}, and {{htmlelement('area')}}, it indicates the referenced document is not part of the current site. This can be used with attribute selectors to style external links in a way that indicates to the user that they will be leaving the current site. +* {{htmlattrdef("help")}} + * : Relevant to {{htmlelement('form')}}, {{htmlelement('link')}}, {{htmlelement('a')}}, and {{htmlelement('area')}}, the `help` keyword indicates that the linked to content provides context-sensitive help, providing information for the parent of the element defining the hyperlink, and its children. When used within ``, the help is for the whole document. When included with {{htmlelement('a')}} and {{htmlelement('area')}} and supported, the default {{cssxref('cursor')}} will be `help` instead of `pointer`. +* {{htmlattrdef("icon")}} + * : **Note:** Valid with {{htmlelement('link')}}, the linked resource represents the icon, a resource for representing the page in the user interface, for the current document. + + The most common use for the `icon` value is the favicon: + + ```html + + ``` + + If there are multiple ``s, the browser uses their [`media`](media) attribute, [`type`](type), and [`sizes`](sizes) attributes to select the most appropriate icon. If several icons are equally appropriate, the last one is used. If the most appropriate icon is later found to be inappropriate, for example because it uses an unsupported format, the browser proceeds to the next-most appropriate, and so on. + + > **Note:** Prior to Firefox 83 the [crossorigin](/en-US/docs/Web/HTML/Attributes/crossorigin) attribute was not supported for `rel="icon"` there is also [an open issue for Chrome](https://bugs.chromium.org/p/chromium/issues/detail?id=1121645). + + **Note:** Apple's iOS does not use this link type, nor the [`sizes`](sizes) attribute, like others mobile browsers do, to select a webpage icon for Web Clip or a start-up placeholder. Instead it uses the non-standard [`apple-touch-icon`](https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW4) and [`apple-touch-startup-image`](https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW6) respectively. + + > **Note:** The `shortcut` link type is often seen before `icon`, but this link type is non-conforming, ignored and **web authors must not use it anymore**. +* {{htmlattrdef("license")}} + * : **Note:** Valid on the {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}, {{HTMLElement("link")}} elements, the `license` value indicates that the hyperlink leads to a document describing the licensing information; that the main content of the current document is covered by the copyright license described by the referenced document. If not inside the {{HTMLElement("head")}} element, the standard doesn't distinguish between a hyperlink applying to a specific part of the document or to the document as a whole. Only the data on the page can indicate this. + + ```html + + ``` + + **Note:** Although recognized, the synonym `copyright` is incorrect and must be avoided. +* {{htmlattrdef("manifest")}} + * : [Web app manifest](/en-US/docs/Web/Manifest). Requires the use of the CORS protocol for cross-origin fetching. +* {{htmlattrdef("modulepreload")}} + * : Useful for improved performance, and relevant to the {{htmlelement('link')}} anywhere in the document, setting `rel="modulepreload"` tells the browser to preemptively fetch the script (and dependencies) and store it in the document's module map for later evaluation. `modulepreload` links can ensure network fetching is done with the module ready (but not evaluated) in the module map before it is necessarily needed. See also [link types: `modulepreload`](/en-US/docs/Web/HTML/Link_types/modulepreload). +* {{htmlattrdef("next")}} + * : Relevant to {{htmlelement('form')}}, {{htmlelement('link')}}, {{htmlelement('a')}}, and {{htmlelement('area')}}, the `next` values indicates that the current document is a part of a series, and that the next document in the series is the referenced document. When included in a ``, browsers may assume that document will be fetched next, and treat it as a resource hint. +* {{htmlattrdef("nofollow")}} + * : Relevant to {{htmlelement('form')}}, {{htmlelement('a')}}, and {{htmlelement('area')}}, the `nofollow` keyword tells search engine spiders to ignore the link relationship. The nofollow relationship may indicate the current document's owner does not endorse the referenced document. It is often included by Search Engine Optimizers pretending their link farms are not spam pages. +* {{htmlattrdef("noopener")}} + * : Relevant to {{htmlelement('form')}}, {{htmlelement('a')}}, and {{htmlelement('area')}}, creates a top-level browsing context that is not an auxiliary browsing context if the hyperlink would create either of those to begin with (i.e., has an appropriate` target `attribute value). In other words, it makes the link behave as if [`window.opener`](/en-US/docs/Web/API/Window/opener) were null and `target="_parent"` were set. + + This is the opposite of {{anch("opener")}}. +* {{htmlattrdef("noreferrer")}} + * : Relevant to {{htmlelement('form')}}, {{htmlelement('a')}}, and {{htmlelement('area')}}, including this value makes the referrer unknown (no `Referer` header will be included), and creates a top-level browsing context as if `noopener` were also set. +* {{htmlattrdef("opener")}} + * : Creates an auxiliary browsing context if the hyperlink would otherwise create a top-level browsing context that is not anauxiliary browsing context (i.e., has "`_blank`" as `target` attribute value). Effectively, the opposite of {{anch("noopener")}}. +* {{htmlattrdef("pingback")}} + * : Gives the address of the pingback server that handles pingbacks to the current document. +* {{htmlattrdef("preconnect")}} + * : Specifies that the user agent should preemptively connect to the target resource's origin. +* {{htmlattrdef("prefetch")}} + * : Specifies that the user agent should preemptively fetch and cache the target resource as it is likely to be required for a followup navigation. +* {{htmlattrdef("preload")}} + * : Specifies that the user agent must preemptively fetch and cache the target resource for current navigation according to the potential destination given by the [`as`](as) attribute (and the priority associated with the corresponding destination). +* {{htmlattrdef("prerender")}} + * : Specifies that the user agent should preemptively fetch the target resource and process it in a way that helps deliver a faster response in the future. +* {{htmlattrdef("prev")}} + * : Similar to the {{anch("next")}} keyword, relevant to {{htmlelement('form')}}, {{htmlelement('link')}}, {{htmlelement('a')}}, and {{htmlelement('area')}}, the `prev` values indicates that the current document is a part of a series, and that the link references a previous document in the series is the referenced document. + + Note: The synonym `previous` is incorrect and should not be used. +* {{htmlattrdef("search")}} + * : Relevant to {{htmlelement('form')}}, {{htmlelement('link')}}, {{htmlelement('a')}}, and {{htmlelement('area')}} elements, the `search` keywords indicates that the hyperlink references a document whose interface is specially designed for searching in the current document, site, and related resources, providing a link to a resource that can be used to search. + + If the [`type`](type) attribute is set to `application/opensearchdescription+xml` the resource is an [OpenSearch](/en-US/docs/Web/OpenSearch) plugin that can be easily added to the interface of some browsers like Firefox or Internet Explorer. +* {{htmlattrdef("stylesheet")}} + * : Valid for the {{htmlelement('link')}} element, it imports an external resource to be used as a stylesheet. The [`type`](type) attribute is not needed as it's a `text/css` stylesheet, as that is the default value. If it's not a stylesheet of type `text/css` it is best to declare the type. + + While this attribute defines the link as being a stylesheet, the interaction with other attributes and other key terms within the rel value impact whether the stylesheet is downloaded and/or used. + + When used with the {{anch('alternate')}} keyword, it defines an alternative style sheet. In this case, include a non-empty [`title`](type). + + The external stylesheet will not be used or even downloaded if the media does not match the value of the [`media`](media) attribute. + + Requires the use of the CORS protocol for cross-origin fetching. +* {{htmlattrdef("tag")}} + * : Valid for the {{htmlelement('a')}}, and {{htmlelement('area')}} elements, it gives a tag (identified by the given address) that applies to the current document. The tag value denotes that the link refers to a document describing a tag applying to the document on which it is located. This link type is not meant for tags within a tag cloud, as those tags apply to a group of pages, whereas the `tag` value of the `rel` attribute is for a single document. + +### Non-standard values + +* {{htmlattrdef("apple-touch-icon")}} + * : Specifies the icon for a web application on an iOS device. + +## Browser compatibility + +{{Compat("html.elements.attributes.rel")}} + +## Specifications - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'links.html#linkTypes', 'rel attribute')}}{{Spec2('HTML WHATWG')}}Added opener. Made noopener default for target="_blank".
{{SpecName('HTML5 W3C', 'links.html#linkTypes', 'rel attribute')}}{{Spec2('HTML5 W3C')}}Added tag, search, prefetch, noreferrer, nofollow, icon, and author.
- Renamed copyright to license.
- Removed start, chapter, section, subsection, and appendix
{{SpecName("Preload", "#x2.link-type-preload", "preload")}}{{Spec2("Preload")}}Added preload.
{{SpecName("Resource Hints", "#dfn-preconnect", "preconnect")}}{{Spec2("Resource Hints")}}Added dns-prefetch, preconnect, and prerender values.
{{SpecName("HTML4.01", "types.html#type-links", "link types")}}{{Spec2("HTML4.01")}}Added alternate, stylesheet, start, chapter, section, subsection, appendix, and bookmark.
- Renamed previous to prev.
- Removed top, and search.
{{SpecName("HTML3.2", "#link", "<link>")}} -

{{Spec2("HTML3.2")}} (Obsolete)

- 		Added top, contents, index, glossary, copyright, next, previous, help, and search.
{{RFC(1866, "HTML 2.0")}}{{Spec2("HTML2.0")}} (Obsolete)Initial definition.
SpecificationStatusComment
+ {{SpecName('HTML WHATWG', 'links.html#linkTypes', 'rel attribute')}} + {{Spec2('HTML WHATWG')}} + Added opener. Made noopener default for + target="_blank". +
+ {{SpecName('HTML5 W3C', 'links.html#linkTypes', 'rel attribute')}} + {{Spec2('HTML5 W3C')}} + Added tag, search, prefetch, + noreferrer, nofollow, icon, and + author.
Renamed copyright to + license.
Removed start, + chapter, section, subsection, and + appendix +
+ {{SpecName("Preload", "#x2.link-type-preload", "preload")}} + {{Spec2("Preload")}}Added preload.
+ {{SpecName("Resource Hints", "#dfn-preconnect", "preconnect")}} + {{Spec2("Resource Hints")}} + Added dns-prefetch, preconnect, and + prerender values. +
+ {{SpecName("HTML4.01", "types.html#type-links", "link types")}} + {{Spec2("HTML4.01")}} + Added alternate, stylesheet, + start, chapter, section, + subsection, appendix, and + bookmark.
Renamed previous to + prev.
Removed top, and + search. +
{{SpecName("HTML3.2", "#link", "<link>")}}

{{Spec2("HTML3.2")}} (Obsolete)

 + Added top, contents, index, + glossary, copyright, next, + previous, help, and search. +
{{RFC(1866, "HTML 2.0")}}{{Spec2("HTML2.0")}} (Obsolete)Initial definition.
-

Browser compatibility

+## Browser compatibility -

{{Compat("html.elements.link.rel")}}

+{{Compat("html.elements.link.rel")}} -

Accessibility concerns

+## Accessibility concerns -

See also

+## See also -
    -
  • {{domxref("HTMLLinkElement.relList")}}
    • -
  • {{domxref("HTMLAnchorElement.relList")}}
    • -
  • {{domxref("HTMLAreaElement.relList")}}
    • -
+* {{domxref("HTMLLinkElement.relList")}} +* {{domxref("HTMLAnchorElement.relList")}} +* {{domxref("HTMLAreaElement.relList")}} diff --git a/files/en-us/web/html/attributes/required/index.md b/files/en-us/web/html/attributes/required/index.md index 8497cd8e7900f7a..d282556f35d7303 100644 --- a/files/en-us/web/html/attributes/required/index.md +++ b/files/en-us/web/html/attributes/required/index.md @@ -8,99 +8,102 @@ tags: - Forms - required --- -

{{HTMLSidebar}}

+{{HTMLSidebar}} -

The Boolean required attribute, if present, indicates that the user must specify a value for the input before the owning form can be submitted.

+The Boolean **`required`** attribute, if present, indicates that the user must specify a value for the input before the owning form can be submitted. -

The required attribute is supported by {{HTMLElement("input/text","text")}}, {{HTMLElement("input/search","search")}}, {{HTMLElement("input/url","url")}}, {{HTMLElement("input/tel","tel")}}, {{HTMLElement("input/email","email")}}, {{HTMLElement("input/password","password")}}, {{HTMLElement("input/date","date")}}, {{HTMLElement("input/month","month")}}, {{HTMLElement("input/week","week")}}, {{HTMLElement("input/time","time")}}, {{HTMLElement("input/datetime-local","datetime-local")}}, {{HTMLElement("input/number","number")}}, {{HTMLElement("input/checkbox","checkbox")}}, {{HTMLElement("input/radio","radio")}}, {{HTMLElement("input/file","file")}}, {{HTMLElement("input")}} types along with the {{HTMLElement("select")}} and {{HTMLElement("textarea")}} form control elements. If present on any of these input types and elements, the {{cssxref(':required')}} pseudo class will match. If the attribute is not included, the {{cssxref(':optional')}} pseudo class will match.

+The `required` attribute is supported by `{{HTMLElement("input/text","text")}}`, `{{HTMLElement("input/search","search")}}`, `{{HTMLElement("input/url","url")}}`, `{{HTMLElement("input/tel","tel")}}`, `{{HTMLElement("input/email","email")}}`, `{{HTMLElement("input/password","password")}}`, `{{HTMLElement("input/date","date")}}`, `{{HTMLElement("input/month","month")}}`, `{{HTMLElement("input/week","week")}}`, `{{HTMLElement("input/time","time")}}`, `{{HTMLElement("input/datetime-local","datetime-local")}}`, `{{HTMLElement("input/number","number")}}`, `{{HTMLElement("input/checkbox","checkbox")}}`, `{{HTMLElement("input/radio","radio")}}`, `{{HTMLElement("input/file","file")}}`, {{HTMLElement("input")}} types along with the {{HTMLElement("select")}} and {{HTMLElement("textarea")}} form control elements. If present on any of these input types and elements, the {{cssxref(':required')}} pseudo class will match. If the attribute is not included, the {{cssxref(':optional')}} pseudo class will match. -

The attribute is not supported or relevant to {{HTMLElement("input/range","range")}} and {{HTMLElement("input/color","color")}}, as both have default values. It is also not supported on {{HTMLElement("input/hidden","hidden")}} as it can not be expected that a user to fill out a form that is hidden. Nor is it supported on any of the button types, including image.

+The attribute is not supported or relevant to {{HTMLElement("input/range","range")}} and {{HTMLElement("input/color","color")}}, as both have default values. It is also not supported on {{HTMLElement("input/hidden","hidden")}} as it can not be expected that a user to fill out a form that is hidden. Nor is it supported on any of the button types, including `image`. -

Note color and range don't support required, but type color defaults to #000000, and range defaults to the midpoint between min and max -- with min and max defaulting to 0 and 100 respectively in most browsers if not declared -- so always has a value.

+Note `color` and `range` don't support `required`, but type `color` defaults to `#000000`, and `range` defaults to the midpoint between `min` and `max` -- with `min` and `max` defaulting to 0 and 100 respectively in most browsers if not declared -- so always has a value. -

In the case of a same named group of {{HTMLElement("input/radio","radio")}} buttons, if a single radio button in the group has the required attribute, a radio button in that group must be checked, although it doesn't have to be the one with the attribute is applied. So to improve code maintenance, it is recommended to either include the required attribute in every same-named radio button in the group, or else in none.

+In the case of a same named group of {{HTMLElement("input/radio","radio")}} buttons, if a single radio button in the group has the `required` attribute, a radio button in that group must be checked, although it doesn't have to be the one with the attribute is applied. So to improve code maintenance, it is recommended to either include the `required` attribute in every same-named radio button in the group, or else in none. -

In the case of a same named group of {{HTMLElement("input/checkbox","checkbox")}} input types, only the checkboxes with the required attribute are required.

+In the case of a same named group of {{HTMLElement("input/checkbox","checkbox")}} input types, only the checkboxes with the `required` attribute are required. -
-

Note: Setting aria-required="true" tells a screen reader that an element (any element) is required, but has no bearing on the optionality of the element.

-
+> **Note:** Setting `aria-required="true"` tells a screen reader that an element (any element) is required, but has no bearing on the optionality of the element. -

Attribute interactions

+### Attribute interactions -

Because a read-only field cannot have a value, required does not have any effect on inputs with the readonly attribute also specified.

+Because a read-only field cannot have a value, `required` does not have any effect on inputs with the [`readonly`](/en-US/docs/Web/HTML/Attributes/readonly) attribute also specified. -

Usability

+### Usability -

When including the required attribute, provide a visible indication near the control informing the user that the {{HTMLElement("input")}}, {{HTMLElement("select")}} or {{HTMLElement("textarea")}} is required. In addition, target required form controls with the {{cssxref(':required')}} pseudo-class, styling them in a way to indicate they are required. This improves usability for sighted users. Assistive technology should inform the user that the form control in mandatory based on the required attribute, but adding aria-required="true" doesn't hurt, in case the browser / screen reader combination does not support required yet.

+When including the `required` attribute, provide a visible indication near the control informing the user that the {{HTMLElement("input")}}, {{HTMLElement("select")}} or {{HTMLElement("textarea")}} is required. In addition, target required form controls with the {{cssxref(':required')}} pseudo-class, styling them in a way to indicate they are required. This improves usability for sighted users. Assistive technology should inform the user that the form control in mandatory based on the required attribute, but adding `aria-required="true"` doesn't hurt, in case the browser / screen reader combination does not support `required` yet. -

Constraint validation

+### Constraint validation -

If the element is required and the element's value is the empty string, then the element is suffering from {{domxref('ValidityState.valueMissing','valueMissing')}} and the element will match the {{cssxref(':invalid')}} pseudo class.

+If the element is required and the element's value is the empty string, then the element is suffering from {{domxref('ValidityState.valueMissing','valueMissing')}} and the element will match the {{cssxref(':invalid')}} pseudo class. -

Accessibility concerns

+## Accessibility concerns -

Provide an indication to users informing them the form control is required. Ensure the messaging is multi-faceted, such as through text, color, markings, and attribute, so that all users understand the requirements whether they have color blindness, cognitive differences, or are using a screen reader.

+Provide an indication to users informing them the form control is required. Ensure the messaging is multi-faceted, such as through text, color, markings, and attribute, so that all users understand the requirements whether they have color blindness, cognitive differences, or are using a screen reader. -

Example

+## Example -

HTML

+### HTML -
<form>
-  <div class="group">
-    <input type="text">
-    <label>Normal</label>
-  </div>
-  <div class="group">
-    <input type="text" required="required">
-    <label>Required</label>
-  </div>
-  <input type="submit">
-</form>
-
+```html + +
+ + +
+
+ + +
+ + +``` -

Result

+### Result -

{{EmbedLiveSample('Example')}}

+{{EmbedLiveSample('Example')}} -

Specifications

+## Specifications - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'forms.html#attr-input-required', 'required attribute')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'forms.html#attr-input-required', 'required attribute')}}{{Spec2('HTML5 W3C')}}
{{SpecName('HTML5.1', 'sec-forms.html#the-required-attribute', 'required attribute')}}{{Spec2('HTML5.1')}}
SpecificationStatusComment
+ {{SpecName('HTML WHATWG', 'forms.html#attr-input-required', 'required attribute')}} + {{Spec2('HTML WHATWG')}}
+ {{SpecName('HTML5 W3C', 'forms.html#attr-input-required', 'required attribute')}} + {{Spec2('HTML5 W3C')}}
+ {{SpecName('HTML5.1', 'sec-forms.html#the-required-attribute', 'required attribute')}} + {{Spec2('HTML5.1')}}
-

Browser compatibility

+## Browser compatibility -

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

+{{Compat("html.elements.attributes.required")}} -

See also

+## See also -
    -
  • {{cssxref('validityState.valueMissing')}}
    • -
  • {{cssxref(':required')}} and {{cssxref(':optional')}}
    • -
  • {{htmlelement('input')}}
    • -
  • {{htmlelement('select')}}
    • -
+* {{cssxref('validityState.valueMissing')}} +* {{cssxref(':required')}} and {{cssxref(':optional')}} +* {{htmlelement('input')}} +* {{htmlelement('select')}} diff --git a/files/en-us/web/html/attributes/size/index.md b/files/en-us/web/html/attributes/size/index.md index eeed074d6f80665..4b50708ed3dd81d 100644 --- a/files/en-us/web/html/attributes/size/index.md +++ b/files/en-us/web/html/attributes/size/index.md @@ -8,66 +8,52 @@ tags: - Reference - Select --- -

{{HTMLSidebar}}

+{{HTMLSidebar}} -

The size attribute defines the width of the {{htmlelement('input')}} and the height of the {{htmlelement('select')}} element. For the input, if the type attribute is {{HTMLElement("input/text", "text")}} or {{HTMLElement("input/password", "password")}} then it's the number of characters. This must be an integer value 0 or higher. If no size is specified, or an invalid value is specified, the input has no size declared, and the form control will be the default width based on the user agent. If CSS targets the element with properties impacting the width, CSS takes precedence.

+The **`size`** attribute defines the width of the {{htmlelement('input')}} and the height of the {{htmlelement('select')}} element. For the `input`, if the `type` attribute is {{HTMLElement("input/text", "text")}} or {{HTMLElement("input/password", "password")}} then it's the number of characters. This must be an integer value 0 or higher. If no `size` is specified, or an invalid value is specified, the input has no size declared, and the form control will be the default width based on the user agent. If CSS targets the element with properties impacting the width, CSS takes precedence. -

The size attribute has no impact on constraint validation.

+The `size` attribute has no impact on constraint validation. -

Examples

+## Examples -

By adding size on some input types, the width of the input can be controlled. Adding size on a select changes the height, definining how many options are visible in the closed state.

+By adding `size` on some input types, the width of the input can be controlled. Adding size on a select changes the height, definining how many options are visible in the closed state. -
<label for="fruit">Enter a fruit</label> <input type="text" size="15" id="fruit">
-<label for="vegetable">Enter a vegetable</label> <input type="text" id="vegetable">
+```html
+ 
+ 
 
-<select name="fruits" size="5">
-  <option>banana</option>
-  <option>cherry</option>
-  <option>strawberry</option>
-  <option>durian</option>
-  <option>blueberry</option>
-</select>
+
 
-<select name="vegetables" size="5">
-<option>carrot</option>
-<option>cucumber</option>
-<option>cauliflower</option>
-<option>celery</option>
-<option>collard greens</option>
-</select>
+ +``` -

{{EmbedLiveSample('Examples', '100%', 200)}}

+{{EmbedLiveSample('Examples', '100%', 200)}} -

Specifications

+## Specifications - - - - - - - - - - - - - - - - - -
SpecificationStatus
{{SpecName('HTML WHATWG', 'input.html#attr-input-size', 'size attribute')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5.1', 'input.html#attr-size-accept', 'size attribute')}}{{Spec2('HTML5.1')}}
+| Specification | Status | +| ---------------------------------------------------------------------------------------------------- | -------------------------------- | +| {{SpecName('HTML WHATWG', 'input.html#attr-input-size', 'size attribute')}} | {{Spec2('HTML WHATWG')}} | +| {{SpecName('HTML5.1', 'input.html#attr-size-accept', 'size attribute')}} | {{Spec2('HTML5.1')}} | -

Browser compatibility

+## Browser compatibility -

{{Compat("html.elements.attribute.size")}}

+{{Compat("html.elements.attribute.size")}} -

See also

+## See also - +* [`maxlength`](/en-US/docs/Web/HTML/Attributes/maxlength) +* [`minlength`](/en-US/docs/Web/HTML/Attributes/minlength) +* [`pattern`](/en-US/docs/Web/HTML/Attributes/pattern) diff --git a/files/en-us/web/html/attributes/step/index.md b/files/en-us/web/html/attributes/step/index.md index f91a367a05ed516..9519edad1ce67c2 100644 --- a/files/en-us/web/html/attributes/step/index.md +++ b/files/en-us/web/html/attributes/step/index.md @@ -9,127 +9,142 @@ tags: - Reference - step --- -

{{HTMLSidebar}}{{draft}}

+{{HTMLSidebar}}{{draft}} -

The step attribute is a number that specifies the granularity that the value must adhere to or the keyword any. It is valid for the numeric input types, including the {{HTMLElement("input/date", "date")}}, {{HTMLElement("input/month", "month")}}, {{HTMLElement("input/week", "week")}}, {{HTMLElement("input/time", "time")}}, {{HTMLElement("input/datetime-local", "datetime-local")}}, {{HTMLElement("input/number", "number")}} and {{HTMLElement("input/range", "range")}} types.

+The **`step`** attribute is a number that specifies the granularity that the value must adhere to or the keyword `any`. It is valid for the numeric input types, including the {{HTMLElement("input/date", "date")}}, {{HTMLElement("input/month", "month")}}, {{HTMLElement("input/week", "week")}}, {{HTMLElement("input/time", "time")}}, {{HTMLElement("input/datetime-local", "datetime-local")}}, {{HTMLElement("input/number", "number")}} and {{HTMLElement("input/range", "range")}} types. -

The step sets the stepping interval when clicking up and down spinner buttons, moving a slider left and right on a range, and validating the different date types. If not explicitly included, step defaults to 1 for number and range, and 1 unit type (minute, week, month, day) for the date/time input types. The value can must be a positive number - integer or float -- or the special value any, which means no stepping is implied, and any value is allowed (barring other constraints, such as min and max).

+The `step` sets the *stepping interval* when clicking up and down spinner buttons, moving a slider left and right on a range, and validating the different date types. If not explicitly included, `step` defaults to 1 for `number` and `range`, and 1 unit type (minute, week, month, day) for the date/time input types. The value can must be a positive number - integer or float -- or the special value `any`, which means no stepping is implied, and any value is allowed (barring other constraints, such as [`min`](/en-US/docs/Web/HTML/Attributes/min) and [`max`](/en-US/docs/Web/HTML/Attributes/max)). -

The default stepping value for number inputs is 1, allowing only integers to be entered, unless the stepping base is not an integer. The default stepping value for time is 1 second, with 900 being equal to 15 minutes.

+The default stepping value for `number` inputs is 1, allowing only integers to be entered, *unless* the stepping base is not an integer. The default stepping value for `time` is 1 second, with 900 being equal to 15 minutes. -

Syntax

+### Syntax - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Default values for step
Input typeValueExample
{{HTMLElement("input/date", "date")}}1 (day)<input type="date" min="2019-12-25" step="1">
{{HTMLElement("input/month", "month")}}1 (month)<input type="month" min="2019-12" step="12">
{{HTMLElement("input/week", "week")}}1 (week)<input type="week" min="2019-W23" step="2">
{{HTMLElement("input/time", "time")}}60 (seconds)<input type="time" min="09:00" step="900">
{{HTMLElement("input/datetime-local", "datetime-local")}}1 (day)<input type="datetime-local" min="019-12-25T19:30" step="7">
{{HTMLElement("input/number", "number")}}1<input type="number" min="0" step="0.1" max="10">
{{HTMLElement("input/range", "range")}}1<input type="range" min="0" step="2" max="10">
 + Default values for step +
Input typeValueExample
{{HTMLElement("input/date", "date")}}1 (day)<input type="date" min="2019-12-25" step="1">
{{HTMLElement("input/month", "month")}}1 (month)<input type="month" min="2019-12" step="12">
{{HTMLElement("input/week", "week")}}1 (week)<input type="week" min="2019-W23" step="2">
{{HTMLElement("input/time", "time")}}60 (seconds)<input type="time" min="09:00" step="900">
+ {{HTMLElement("input/datetime-local", "datetime-local")}} + 1 (day) + <input type="datetime-local" min="019-12-25T19:30" + step="7"> +
{{HTMLElement("input/number", "number")}}1 + <input type="number" min="0" step="0.1" max="10"> +
{{HTMLElement("input/range", "range")}}1<input type="range" min="0" step="2" max="10">
-

If any is not explicity set, valid values for the number, date/time input types, and range input types are equal to the basis for stepping - the min value and increments of the step value, up to the max value, if specified. For example, if we have <input type="number" min="10" step="2"> any even integer, 10 or great, is valid. If omitted, <input type="number">, any integer is valid, but floats, like 4.2, are not valid, as step defaults to 1. For 4.2 to be valid, step would have had to be set to any, 0.1, 0.2, or any the min value would have had to be a number ending in .2, such as <input type="number" min="-5.2">

+If `any` is not explicity set, valid values for the `number`, date/time input types, and `range` input types are equal to the basis for stepping - the [`min`](/en-US/docs/Web/HTML/Attributes/min) value and increments of the step value, up to the [`max`](/en-US/docs/Web/HTML/Attributes/max) value, if specified. For example, if we have `` any even integer, 10 or great, is valid. If omitted, ``, any integer is valid, but floats, like 4.2, are not valid, as `step` defaults to 1. For 4.2 to be valid, `step` would have had to be set to `any`, 0.1, 0.2, or any the min value would have had to be a number ending in .2, such as `` -

min impact on step

+### min impact on step -

The value of min and step define what are valid values, even if the step attribute is not included, as step defaults to 0.

+The value of `min` and `step` define what are valid values, even if the `step` attribute is not included, as `step` defaults to `0`. -

We add a big red border around invalid inputs:

+We add a big red border around invalid inputs: -
input:invalid {
+```css
+input:invalid {
   border: solid red 3px;
-}
+} +``` -

Then define an input with a minimum value of 7.2, omitting the step attribute, wherein it defaults to 1.

+Then define an input with a minimum value of 7.2, omitting the step attribute, wherein it defaults to 1. -
<input id="myNumber" name="myNumber" type="number" step="2" min="1.2">
+```html + +``` -

Valid values include 1.2, 3.2, 5.2, 7.2, 9.2, 11.2, and so on. Integers and even numbers followed by .2 are not valid. As we included an invalid value, supporting browsers will show the value as invalid. The number spinner, if present, will only show valid float values of 1.2 and greater

+Valid values include `1.2`, `3.2`, `5.2`, `7.2`, `9.2`, `11.2`, and so on. Integers and even numbers followed by .2 are not valid. As we included an invalid value, supporting browsers will show the value as invalid. The number spinner, if present, will only show valid float values of `1.2` and greater -

{{EmbedLiveSample("min_impact_on_step",200,55)}}

+{{EmbedLiveSample("min_impact_on_step",200,55)}} -
-

Note: When the data entered by the user doesn't adhere to the stepping configuration, the value is considered invalid in constraint validation and will match the {{cssxref(":invalid")}} and {{cssxref(":out-of-range")}} pseudoclasses

-
+> **Note:** When the data entered by the user doesn't adhere to the stepping configuration, the value is considered invalid in constraint validation and will match the {{cssxref(":invalid")}} and {{cssxref(":out-of-range")}} pseudoclasses -

See Client-side validation and {{domxref("ValidityState.stepMismatch", "stepMismatch")}} for more information.

+See [Client-side validation](/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation) and {{domxref("ValidityState.stepMismatch", "stepMismatch")}} for more information. -

Accessibility concerns

+## Accessibility concerns -

Provide instructions to help users understand how to complete the form and use individual form controls. Indicate any required and optional input, data formats, and other relevant information. When using the min attribute, ensure this minimum requirement is understood by the user. Providing instructions within the {{htmlelement('label')}} may be sufficient. If providing instructions outside of labels, which allows more flexible positioning and design, consider using aria-labelledby or aria-describedby.

+Provide instructions to help users understand how to complete the form and use individual form controls. Indicate any required and optional input, data formats, and other relevant information. When using the `min` attribute, ensure this minimum requirement is understood by the user. Providing instructions within the {{htmlelement('label')}} may be sufficient. If providing instructions outside of labels, which allows more flexible positioning and design, consider using [`aria-labelledby`](/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute) or [`aria-describedby`](/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute). -

Specifications

+## Specifications - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'input.html#the-step-attribute', 'step attribute')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'input.html#the-step-attribute', 'step attribute')}}{{Spec2('HTML5 W3C')}}
SpecificationStatusComment
+ {{SpecName('HTML WHATWG', 'input.html#the-step-attribute', 'step attribute')}} + {{Spec2('HTML WHATWG')}}
+ {{SpecName('HTML5 W3C', 'input.html#the-step-attribute', 'step attribute')}} + {{Spec2('HTML5 W3C')}}
-

See also

- -
    -
  • max
    • -
  • min
    • -
  • Constraint validation
    • -
  • Constraint validation API
    • -
  • {{domxref('validityState.stepMismatch')}}
    • -
  • {{cssxref(':out-of-range')}}
    • -
  • {{htmlelement('input')}}
    • -
  • {{HTMLElement("input/date", "date")}}, {{HTMLElement("input/month", "month")}}, {{HTMLElement("input/week", "week")}}, {{HTMLElement("input/time", "time")}}, {{HTMLElement("input/datetime-local", "datetime-local")}}, {{HTMLElement("input/number", "number")}} and {{HTMLElement("input/range", "range")}} types, and the {{htmlelement('meter')}}
    • -
+## See also + +* [`max`](/en-US/docs/Web/HTML/Attributes/max) +* [`min`](/en-US/docs/Web/HTML/Attributes/min) +* [Constraint validation](/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation) +* [Constraint validation API](/en-US/docs/Web/API/Constraint_validation) +* {{domxref('validityState.stepMismatch')}} +* {{cssxref(':out-of-range')}} +* {{htmlelement('input')}} +* {{HTMLElement("input/date", "date")}}, {{HTMLElement("input/month", "month")}}, {{HTMLElement("input/week", "week")}}, {{HTMLElement("input/time", "time")}}, {{HTMLElement("input/datetime-local", "datetime-local")}}, {{HTMLElement("input/number", "number")}} and {{HTMLElement("input/range", "range")}} types, and the {{htmlelement('meter')}} diff --git a/files/en-us/web/html/block-level_elements/index.md b/files/en-us/web/html/block-level_elements/index.md index a4e45426fc03c78..94fba01813fd2ae 100644 --- a/files/en-us/web/html/block-level_elements/index.md +++ b/files/en-us/web/html/block-level_elements/index.md @@ -9,121 +9,112 @@ tags: - HTML5 - Web --- -

In this article, we'll examine HTML block-level elements and how they differ from inline-level elements.

- -

HTML (Hypertext Markup Language) elements historically were categorized as either "block-level" elements or "inline-level" elements. Since this is a presentational characteristic it is nowadays specified by CSS in the Flow Layout. A Block-level element occupies the entire horizontal space of its parent element (container), and vertical space equal to the height of its contents, thereby creating a "block".

- -

Browsers typically display the block-level element with a newline both before and after the element. You can visualize them as a stack of boxes.

- -
-

Note: A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).

-
- -

The following example demonstrates the block-level element's influence:

- -

Block-level elements

- -

HTML

- -
<p>This paragraph is a block-level element; its background has been colored to display the paragraph's parent element.</p>
- -

CSS

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

{{ EmbedLiveSample('Block-level_elements') }}

- -

Usage

- -
    -
  • Block-level elements may appear only within a {{ HTMLElement("body") }} element.
    • -
- -

Block-level vs. inline

- -

There are a couple of key differences between block-level elements and inline elements:

- -
-
Content model
-
Generally, block-level elements may contain inline elements and (sometimes) other block-level elements. Inherent in this structural distinction is the idea that block elements create "larger" structures than inline elements.
-
Default formatting
-
By default, block-level elements begin on new lines, but inline elements can start anywhere in a line.
-
- -

The distinction of block-level vs. inline elements was used in HTML specifications up to 4.01. In HTML5, this binary distinction is replaced with a more complex set of content categories. While the "inline" category roughly corresponds to the category of phrasing content, the "block-level" category doesn't directly correspond to any HTML5 content category, but "block-level" and "inline" elements combined together correspond to the flow content in HTML5. There are also additional categories, e.g. interactive content.

- -

Elements

- -

The following is a complete list of all HTML "block-level" elements (although "block-level" is not technically defined for elements that are new in HTML5).

- -
-
-
{{ HTMLElement("address") }}
-
Contact information.
-
{{ HTMLElement("article") }}
-
Article content.
-
{{ HTMLElement("aside") }}
-
Aside content.
-
{{ HTMLElement("blockquote") }}
-
Long ("block") quotation.
-
{{ HTMLElement("details") }}
-
Disclosure widget.
-
{{ HTMLElement("dialog") }}
-
Dialog box.
-
{{ HTMLElement("dd") }}
-
Describes a term in a description list.
-
{{ HTMLElement("div") }}
-
Document division.
-
{{ HTMLElement("dl") }}
-
Description list.
-
{{ HTMLElement("dt") }}
-
Description list term.
-
{{ HTMLElement("fieldset") }}
-
Field set label.
-
{{ HTMLElement("figcaption") }}
-
Figure caption.
-
{{ HTMLElement("figure") }}
-
Groups media content with a caption (see {{ HTMLElement("figcaption") }}).
-
{{ HTMLElement("footer") }}
-
Section or page footer.
-
{{ HTMLElement("form") }}
-
Input form.
-
{{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, {{ HTMLElement("h3") }}, {{ HTMLElement("h4") }}, {{ HTMLElement("h5") }}, {{ HTMLElement("h6") }}
-
Heading levels 1-6.
-
{{ HTMLElement("header") }}
-
Section or page header.
-
{{ HTMLElement("hgroup") }}
-
Groups header information.
-
{{ HTMLElement("hr") }}
-
Horizontal rule (dividing line).
-
{{ HTMLElement("li") }}
-
List item.
-
{{ HTMLElement("main") }}
-
Contains the central content unique to this document.
-
{{ HTMLElement("nav") }}
-
Contains navigation links.
-
{{ HTMLElement("ol") }}
-
Ordered list.
-
{{ HTMLElement("p") }}
-
Paragraph.
-
{{ HTMLElement("pre") }}
-
Preformatted text.
-
{{ HTMLElement("section") }}
-
Section of a web page.
-
{{ HTMLElement("table") }}
-
Table.
-
{{ HTMLElement("ul") }}
-
Unordered list.
-
-
- -

See also

- - - -
{{QuickLinksWithSubpages("/en-US/docs/Web/HTML/")}}
+In this article, we'll examine HTML block-level elements and how they differ from [inline-level elements](/en-US/docs/Web/HTML/Inline_elements). + +HTML (**Hypertext Markup Language**) elements historically were categorized as either "block-level" elements or "inline-level" elements. Since this is a presentational characteristic it is nowadays specified by CSS in the [Flow Layout](/en-US/docs/Web/CSS/CSS_Flow_Layout). A Block-level element occupies the entire horizontal space of its parent element (container), and vertical space equal to the height of its contents, thereby creating a "block". + +Browsers typically display the block-level element with a newline both before and after the element. You can visualize them as a stack of boxes. + +> **Note:** A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can). + +The following example demonstrates the block-level element's influence: + +## Block-level elements + +### HTML + +```html +

This paragraph is a block-level element; its background has been colored to display the paragraph's parent element.

+``` + +### CSS + +```css +p { background-color: #8ABB55; } +``` + +{{ EmbedLiveSample('Block-level_elements') }} + +## Usage + +* Block-level elements may appear only within a {{ HTMLElement("body") }} element. + +## Block-level vs. inline + +There are a couple of key differences between block-level elements and inline elements: + +* Content model + * : Generally, block-level elements may contain inline elements and (sometimes) other block-level elements. Inherent in this structural distinction is the idea that block elements create "larger" structures than inline elements. +* Default formatting + * : By default, block-level elements begin on new lines, but inline elements can start anywhere in a line. + +The distinction of block-level vs. inline elements was used in HTML specifications up to 4.01. In HTML5, this binary distinction is replaced with a more complex set of [content categories](/en-US/docs/Web/Guide/HTML/Content_categories). While the "inline" category roughly corresponds to the category of [phrasing content](/en-US/docs/Web/Guide/HTML/Content_categories#phrasing_content), the "block-level" category doesn't directly correspond to any HTML5 content category, but *"block-level" and "inline" elements combined together* correspond to the [flow content](/en-US/docs/Web/Guide/HTML/Content_categories#flow_content) in HTML5. There are also additional categories, e.g. [interactive content](/en-US/docs/Web/Guide/HTML/Content_categories#interactive_content). + +## Elements + +The following is a complete list of all HTML "block-level" elements (although "block-level" is not technically defined for elements that are new in HTML5). + +* {{ HTMLElement("address") }} + * : Contact information. +* {{ HTMLElement("article") }} + * : Article content. +* {{ HTMLElement("aside") }} + * : Aside content. +* {{ HTMLElement("blockquote") }} + * : Long ("block") quotation. +* {{ HTMLElement("details") }} + * : Disclosure widget. +* {{ HTMLElement("dialog") }} + * : Dialog box. +* {{ HTMLElement("dd") }} + * : Describes a term in a description list. +* {{ HTMLElement("div") }} + * : Document division. +* {{ HTMLElement("dl") }} + * : Description list. +* {{ HTMLElement("dt") }} + * : Description list term. +* {{ HTMLElement("fieldset") }} + * : Field set label. +* {{ HTMLElement("figcaption") }} + * : Figure caption. +* {{ HTMLElement("figure") }} + * : Groups media content with a caption (see {{ HTMLElement("figcaption") }}). +* {{ HTMLElement("footer") }} + * : Section or page footer. +* {{ HTMLElement("form") }} + * : Input form. +* {{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, {{ HTMLElement("h3") }}, {{ HTMLElement("h4") }}, {{ HTMLElement("h5") }}, {{ HTMLElement("h6") }} + * : Heading levels 1-6. +* {{ HTMLElement("header") }} + * : Section or page header. +* {{ HTMLElement("hgroup") }} + * : Groups header information. +* {{ HTMLElement("hr") }} + * : Horizontal rule (dividing line). +* {{ HTMLElement("li") }} + * : List item. +* {{ HTMLElement("main") }} + * : Contains the central content unique to this document. +* {{ HTMLElement("nav") }} + * : Contains navigation links. +* {{ HTMLElement("ol") }} + * : Ordered list. +* {{ HTMLElement("p") }} + * : Paragraph. +* {{ HTMLElement("pre") }} + * : Preformatted text. +* {{ HTMLElement("section") }} + * : Section of a web page. +* {{ HTMLElement("table") }} + * : Table. +* {{ HTMLElement("ul") }} + * : Unordered list. + +## See also + +* [Inline elements](/en-US/docs/Web/HTML/Inline_elements) +* {{cssxref("display")}} +* [Block and Inline Layout in Normal Flow](/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow) + +{{QuickLinksWithSubpages("/en-US/docs/Web/HTML/")}} diff --git a/files/en-us/web/html/cors_enabled_image/index.md b/files/en-us/web/html/cors_enabled_image/index.md index 30c027e9765cdaf..01695019695e1e3 100644 --- a/files/en-us/web/html/cors_enabled_image/index.md +++ b/files/en-us/web/html/cors_enabled_image/index.md @@ -12,79 +12,82 @@ tags: - Storage - data --- -

HTML provides a {{ htmlattrxref("crossorigin", "img") }} attribute for images that, in combination with an appropriate {{Glossary("CORS")}} header, allows images defined by the {{ HTMLElement("img") }} element that are loaded from foreign origins to be used in a {{HTMLElement("canvas")}} as if they had been loaded from the current origin.

+HTML provides a {{ htmlattrxref("crossorigin", "img") }} attribute for images that, in combination with an appropriate {{Glossary("CORS")}} header, allows images defined by the {{ HTMLElement("img") }} element that are loaded from foreign origins to be used in a {{HTMLElement("canvas")}} as if they had been loaded from the current origin. -

See CORS settings attributes for details on how the crossorigin attribute is used.

+See [CORS settings attributes](/en-US/docs/Web/HTML/Attributes/crossorigin) for details on how the `crossorigin` attribute is used. -

Security and tainted canvases

+## Security and tainted canvases -

Because the pixels in a canvas's bitmap can come from a variety of sources, including images or videos retrieved from other hosts, it's inevitable that security problems may arise.

+Because the pixels in a canvas's bitmap can come from a variety of sources, including images or videos retrieved from other hosts, it's inevitable that security problems may arise. -

As soon as you draw into a canvas any data that was loaded from another origin without CORS approval, the canvas becomes tainted. A tainted canvas is one which is no longer considered secure, and any attempts to retrieve image data back from the canvas will cause an exception to be thrown.

+As soon as you draw into a canvas any data that was loaded from another origin without CORS approval, the canvas becomes **tainted**. A tainted canvas is one which is no longer considered secure, and any attempts to retrieve image data back from the canvas will cause an exception to be thrown. -

If the source of the foreign content is an HTML {{HTMLElement("img")}} or SVG {{SVGElement("svg")}} element, attempting to retrieve the contents of the canvas isn't allowed.

+If the source of the foreign content is an HTML {{HTMLElement("img")}} or SVG {{SVGElement("svg")}} element, attempting to retrieve the contents of the canvas isn't allowed. -

If the foreign content comes from an image obtained from either as {{domxref("HTMLCanvasElement")}} or {{domxref("ImageBitMap")}}, and the image source doesn't meet the same origin rules, attempts to read the canvas's contents are blocked.

+If the foreign content comes from an image obtained from either as {{domxref("HTMLCanvasElement")}} or {{domxref("ImageBitMap")}}, and the image source doesn't meet the same origin rules, attempts to read the canvas's contents are blocked. -

Calling any of the following on a tainted canvas will result in an error:

+Calling any of the following on a tainted canvas will result in an error: -
    -
  • Calling {{domxref("CanvasRenderingContext2D.getImageData", "getImageData()")}} on the canvas's context
    • -
  • Calling {{domxref("HTMLCanvasElement.toBlob", "toBlob()")}} on the {{HTMLElement("canvas")}} element itself
    • -
  • Calling {{domxref("HTMLCanvasElement.toDataURL", "toDataURL()")}} on the canvas
    • -
+* Calling {{domxref("CanvasRenderingContext2D.getImageData", "getImageData()")}} on the canvas's context +* Calling {{domxref("HTMLCanvasElement.toBlob", "toBlob()")}} on the {{HTMLElement("canvas")}} element itself +* Calling {{domxref("HTMLCanvasElement.toDataURL", "toDataURL()")}} on the canvas -

Attempting any of these when the canvas is tainted will cause a SecurityError to be thrown. This protects users from having private data exposed by using images to pull information from remote web sites without permission.

+Attempting any of these when the canvas is tainted will cause a `SecurityError` to be thrown. This protects users from having private data exposed by using images to pull information from remote web sites without permission. -

Storing an image from a foreign origin

+## Storing an image from a foreign origin -

In this example, we wish to permit images from a foreign origin to be retrieved and saved to local storage. Implementing this requires configuring the server as well as writing code for the web site itself.

+In this example, we wish to permit images from a foreign origin to be retrieved and saved to local storage. Implementing this requires configuring the server as well as writing code for the web site itself. -

Web server configuration

+### Web server configuration -

The first thing we need is a server that's configured to host images with the {{HTTPHeader("Access-Control-Allow-Origin")}} header configured to permit cross-origin access to image files.

+The first thing we need is a server that's configured to host images with the {{HTTPHeader("Access-Control-Allow-Origin")}} header configured to permit cross-origin access to image files. -

Let's assume we're serving our site using Apache. Consider the HTML5 Boilerplate Apache server configuration file for CORS images, shown below:

+Let's assume we're serving our site using [Apache](https://httpd.apache.org/). Consider the HTML5 Boilerplate [Apache server configuration file for CORS images](https://github.com/h5bp/server-configs-apache/blob/master/h5bp/cross-origin/images.conf), shown below: -
<IfModule mod_setenvif.c>
-  <IfModule mod_headers.c>
-    <FilesMatch "\.(avifs?|bmp|cur|gif|ico|jpe?g|jxl|a?png|svgz?|webp)$">
+```xml
+
+  
+    
       SetEnvIf Origin ":" IS_CORS
       Header set Access-Control-Allow-Origin "*" env=IS_CORS
-    </FilesMatch>
-  </IfModule>
-</IfModule>
+ + + +``` -

In short, this configures the server to allow graphic files (those with the extensions ".bmp", ".cur", ".gif", ".ico", ".jpg", ".jpeg", ".png", ".svg", ".svgz", and ".webp") to be accessed cross-origin from anywhere on the internet.

+In short, this configures the server to allow graphic files (those with the extensions ".bmp", ".cur", ".gif", ".ico", ".jpg", ".jpeg", ".png", ".svg", ".svgz", and ".webp") to be accessed cross-origin from anywhere on the internet. -

Implementing the save feature

+### Implementing the save feature -

Now that the server has been configured to allow retrieval of the images cross-origin, we can write the code that allows the user to save them to local storage, just as if they were being served from the same domain the code is running on.

+Now that the server has been configured to allow retrieval of the images cross-origin, we can write the code that allows the user to save them to [local storage](/en-US/docs/Web/API/Web_Storage_API), just as if they were being served from the same domain the code is running on. -

The key is to use the {{htmlattrxref("crossorigin")}} attribute by setting {{domxref("HTMLImageElement.crossOrigin", "crossOrigin")}} on the {{domxref("HTMLImageElement")}} into which the image will be loaded. This tells the browser to request cross-origin access when trying to download the image data.

+The key is to use the {{htmlattrxref("crossorigin")}} attribute by setting {{domxref("HTMLImageElement.crossOrigin", "crossOrigin")}} on the {{domxref("HTMLImageElement")}} into which the image will be loaded. This tells the browser to request cross-origin access when trying to download the image data. -

Starting the download

+#### Starting the download -

The code that starts the download (say, when the user clicks a "Download" button), looks like this:

+The code that starts the download (say, when the user clicks a "Download" button), looks like this: -
function startDownload() {
+```js
+function startDownload() {
   let imageURL = "https://cdn.glitch.com/4c9ebeb9-8b9a-4adc-ad0a-238d9ae00bb5%2Fmdn_logo-only_color.svg?1535749917189";
 
   downloadedImg = new Image;
   downloadedImg.crossOrigin = "Anonymous";
   downloadedImg.addEventListener("load", imageReceived, false);
   downloadedImg.src = imageURL;
-}
+} +``` -

We're using a hard-coded URL here (imageURL), but that could easily come from anywhere. To begin downloading the image, we create a new {{domxref("HTMLImageElement")}} object by using the {{domxref("HTMLImageElement.Image", "Image()")}} constructor. The image is then configured to allow cross-origin downloading by setting its crossOrigin attribute to "Anonymous" (that is, allow non-authenticated downloading of the image cross-origin). An event listener is added for the {{event("load")}} event being fired on the image element, which means the image data has been received.

+We're using a hard-coded URL here (`imageURL`), but that could easily come from anywhere. To begin downloading the image, we create a new {{domxref("HTMLImageElement")}} object by using the {{domxref("HTMLImageElement.Image", "Image()")}} constructor. The image is then configured to allow cross-origin downloading by setting its `crossOrigin` attribute to `"Anonymous"` (that is, allow non-authenticated downloading of the image cross-origin). An event listener is added for the {{event("load")}} event being fired on the image element, which means the image data has been received. -

Finally, the image's {{domxref("HTMLImageElement.src", "src")}} attribute is set to the URL of the image to download; this triggers the download to begin.

+Finally, the image's {{domxref("HTMLImageElement.src", "src")}} attribute is set to the URL of the image to download; this triggers the download to begin. -

Receiving and saving the image

+#### Receiving and saving the image -

The code that handles the newly-downloaded image is found in the imageReceived() method:

+The code that handles the newly-downloaded image is found in the `imageReceived()` method: -
function imageReceived() {
+```js
+function imageReceived() {
   let canvas = document.createElement("canvas");
   let context = canvas.getContext("2d");
 
@@ -100,22 +103,21 @@ tags:
   catch(err) {
     console.log("Error: " + err);
   }
-}
+} +``` -

imageReceived() is called to handle the "load" event on the HTMLImageElement that receives the downloaded image. This event is triggered once the downloaded data is all available. It begins by creating a new {{HTMLElement("canvas")}} element that we'll use to convert the image into a data URL, and by getting access to the canvas's 2D drawing context ({{domxref("CanvasRenderingContext2D")}}) in the variable context.

+`imageReceived()` is called to handle the `"load"` event on the `HTMLImageElement` that receives the downloaded image. This event is triggered once the downloaded data is all available. It begins by creating a new {{HTMLElement("canvas")}} element that we'll use to convert the image into a data URL, and by getting access to the canvas's 2D drawing context ({{domxref("CanvasRenderingContext2D")}}) in the variable `context`. -

The canvas's size is adjusted to match the received image, then the image is drawn into the canvas using {{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}}. The canvas is then inserted into the document so the image is visible.

+The canvas's size is adjusted to match the received image, then the image is drawn into the canvas using {{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}}. The canvas is then inserted into the document so the image is visible. -

Now it's time to actually save the image locally. To do this, we use the Web Storage API's local storage mechanism, which is accessed through the {{domxref("Window.localStorage", "localStorage")}} global. The canvas method {{domxref("HTMLCanvasElement.toDataURL", "toDataURL()")}} is used to convert the image into a data:// URL representing a PNG image, which is then saved into local storage using {{domxref("Storage.setItem", "setItem()")}}.

+Now it's time to actually save the image locally. To do this, we use the Web Storage API's local storage mechanism, which is accessed through the {{domxref("Window.localStorage", "localStorage")}} global. The canvas method {{domxref("HTMLCanvasElement.toDataURL", "toDataURL()")}} is used to convert the image into a data:// URL representing a PNG image, which is then saved into local storage using {{domxref("Storage.setItem", "setItem()")}}. -

You can try out or remix this example on Glitch.

+You can [try out](https://cors-image-example.glitch.me/) or [remix](https://glitch.com/edit/#!/remix/cors-image-example) this example on Glitch. -

See also

+## See also - +* [Using Cross-domain images in WebGL and Chrome 13](http://blog.chromium.org/2011/07/using-cross-domain-images-in-webgl-and.html) +* [HTML Specification - the `crossorigin` attribute](https://www.whatwg.org/html#attr-img-crossorigin) +* [Web Storage API](/en-US/docs/Web/API/Web_Storage_API) -
{{QuickLinksWithSubpages("/en-US/docs/Web/HTML/")}}
+{{QuickLinksWithSubpages("/en-US/docs/Web/HTML/")}} diff --git a/files/en-us/web/html/date_and_time_formats/index.md b/files/en-us/web/html/date_and_time_formats/index.md index 35162f5d4dbd4b7..e383cc7b89985b8 100644 --- a/files/en-us/web/html/date_and_time_formats/index.md +++ b/files/en-us/web/html/date_and_time_formats/index.md @@ -20,443 +20,401 @@ tags: - month-year - week-year --- -
{{HTMLRef}}
+{{HTMLRef}} -

Certain HTML elements use date and/or time values. The formats of the strings that specify these values are described in this article.

+Certain HTML elements use date and/or time values. The formats of the strings that specify these values are described in this article. -

Elements that use such formats include certain forms of the {{HTMLElement("input")}} element that let the user choose or specify a date, time, or both, as well as the {{HTMLElement("ins")}} and {{HTMLElement("del")}} elements, whose {{htmlattrxref("datetime", "ins")}} attribute specifies the date or date and time at which the insertion or deletion of content occurred.

+Elements that use such formats include certain forms of the {{HTMLElement("input")}} element that let the user choose or specify a date, time, or both, as well as the {{HTMLElement("ins")}} and {{HTMLElement("del")}} elements, whose {{htmlattrxref("datetime", "ins")}} attribute specifies the date or date and time at which the insertion or deletion of content occurred. -

For <input>, the values of {{htmlattrxref("type", "input")}} that return a {{htmlattrxref("value")}} which contains a string representing a date and/or time are:

+For ``, the values of {{htmlattrxref("type", "input")}} that return a {{htmlattrxref("value")}} which contains a string representing a date and/or time are: - +* [`date`](/en-US/docs/Web/HTML/Element/input/date) +* [`datetime`](/en-US/docs/Web/HTML/Element/input/datetime) {{deprecated_inline}} +* [`datetime-local`](/en-US/docs/Web/HTML/Element/input/datetime-local) +* [`month`](/en-US/docs/Web/HTML/Element/input/month) +* [`time`](/en-US/docs/Web/HTML/Element/input/time) +* [`week`](/en-US/docs/Web/HTML/Element/input/week) -

Examples

+## Examples -

Before getting into the intricacies of how date and time strings are written and parsed in HTML, here are some examples that should give you a good idea what the more commonly-used date and time string formats look like.

+Before getting into the intricacies of how date and time strings are written and parsed in HTML, here are some examples that should give you a good idea what the more commonly-used date and time string formats look like. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Example HTML date and time strings
StringDate and/or time
2005-06-07June 7, 2005[details]
08:458:45 AM[details]
08:45:258:45 AM and 25 seconds[details]
0033-08-04T03:403:40 AM on August 4, 33[details]
1977-04-01T14:00:3030 seconds after 2:00 PM on April 1, 1977[details]
1901-01-01T00:00ZMidnight UTC on January 1, 1901[details]
1901-01-01T00:00:01-04:001 second past midnight Eastern Standard Time (EST) on January 1, 1901[details]
 + Example HTML date and time strings +
StringDate and/or time
2005-06-07June 7, 2005 + [details] +
08:458:45 AM + [details] +
08:45:258:45 AM and 25 seconds + [details] +
0033-08-04T03:403:40 AM on August 4, 33 + [details] +
1977-04-01T14:00:3030 seconds after 2:00 PM on April 1, 1977 + [details] +
1901-01-01T00:00ZMidnight UTC on January 1, 1901 + [details] +
1901-01-01T00:00:01-04:00 + 1 second past midnight Eastern Standard Time (EST) on January 1, 1901 + + [details] +
-

Basics

+## Basics -

Before looking at the various formats of date and time related strings used by HTML elements, it is helpful to understand a few fundamental facts about the way they're defined. HTML uses a variation of the {{interwiki("wikipedia", "ISO 8601")}} standard for its date and time strings. It's worth reviewing the descriptions of the formats you're using in order to ensure that your strings are in fact compatible with HTML, as the HTML specification includes algorithms for parsing these strings that is actually more precise than ISO 8601, so there can be subtle differences in how date and time strings are expected to look.

+Before looking at the various formats of date and time related strings used by HTML elements, it is helpful to understand a few fundamental facts about the way they're defined. HTML uses a variation of the {{interwiki("wikipedia", "ISO 8601")}} standard for its date and time strings. It's worth reviewing the descriptions of the formats you're using in order to ensure that your strings are in fact compatible with HTML, as the HTML specification includes algorithms for parsing these strings that is actually more precise than ISO 8601, so there can be subtle differences in how date and time strings are expected to look. -

Character set

+### Character set -

Dates and times in HTML are always strings which use the {{interwiki("wikipedia", "ASCII")}} character set.

+Dates and times in HTML are always strings which use the {{interwiki("wikipedia", "ASCII")}} character set. -

Year numbers

+### Year numbers -

In order to simplify the basic format used for date strings in HTML, the specification requires that all years be given using the modern (or proleptic) {{interwiki("wikipedia", "Gregorian calendar")}}. While user interfaces may allow entry of dates using other calendars, the underlying value always uses the Gregorian calendar.

+In order to simplify the basic format used for date strings in HTML, the specification requires that all years be given using the modern (or **proleptic**) {{interwiki("wikipedia", "Gregorian calendar")}}. While user interfaces may allow entry of dates using other calendars, the underlying value always uses the Gregorian calendar. -

While the Gregorian calendar wasn't created until the year 1582 (replacing the similar Julian calendar), for HTML's purposes, the Gregorian calendar is extended back to the year 1 C.E. Make sure any older dates account for this.

+While the Gregorian calendar wasn't created until the year 1582 (replacing the similar Julian calendar), for HTML's purposes, the Gregorian calendar is extended back to the year 1 C.E. Make sure any older dates account for this. -

For the purposes of HTML dates, years are always at least four digits long; years prior to the year 1000 are padded with leading zeroes ("0"), so the year 72 is written as 0072. Years prior to the year 1 C.E. are not supported, so HTML doesn't support years 1 B.C.E. (1 B.C.) or earlier.

+For the purposes of HTML dates, years are always at least four digits long; years prior to the year 1000 are padded with leading zeroes ("`0`"), so the year 72 is written as `0072`. Years prior to the year 1 C.E. are not supported, so HTML doesn't support years 1 B.C.E. (1 B.C.) or earlier. -

A year is normally 365 days long, except during {{anch("Leap years", "leap years")}}.

+A year is normally 365 days long, except during **{{anch("Leap years", "leap years")}}**. -

Leap years

+#### Leap years -

A leap year is any year which is divisible by 400 or the year is divisible by 4 but not by 100. Although the calendar year is normally 365 days long, it actually takes the planet Earth approximately 365.2422 days to complete a single orbit around the sun. Leap years help to adjust the calendar to keep it synchronized with the actual position of the planet in its orbit. Adding a day to the year every four years essentially makes the average year 365.25 days long, which is close to correct.

+A **leap year** is any year which is divisible by 400 *or* the year is divisible by 4 but not by 100. Although the calendar year is normally 365 days long, it actually takes the planet Earth approximately 365.2422 days to complete a single orbit around the sun. Leap years help to adjust the calendar to keep it synchronized with the actual position of the planet in its orbit. Adding a day to the year every four years essentially makes the average year 365.25 days long, which is close to correct. -

The adjustments to the algorithm (taking a leap year when the year can be divided by 400, and skipping leap years when the year is divisible by 100) help to bring the average even closer to the correct number of days (365.2425 days). Scientists occasionally add leap seconds to the calendar (seriously) to handle the remaining three ten-thousandths of a day and to compensate for the gradual, naturally occurring slowing of Earth's rotation.

+The adjustments to the algorithm (taking a leap year when the year can be divided by 400, and skipping leap years when the year is divisible by 100) help to bring the average even closer to the correct number of days (365.2425 days). Scientists occasionally add leap seconds to the calendar (seriously) to handle the remaining three ten-thousandths of a day and to compensate for the gradual, naturally occurring slowing of Earth's rotation. -

While month 02, February, normally has 28 days, it has 29 days in leap years.

+While month `02`, February, normally has 28 days, it has 29 days in leap years. -

Months of the year

+### Months of the year -

There are 12 months in the year, numbered 1 through 12. They are always represented by a two-digit ASCII string whose value ranges from 01 through 12. See the table in the section {{anch("Days of the month")}} for the month numbers and their corresponding names (and lengths in days).

+There are 12 months in the year, numbered 1 through 12. They are always represented by a two-digit ASCII string whose value ranges from `01` through `12`. See the table in the section {{anch("Days of the month")}} for the month numbers and their corresponding names (and lengths in days). -

Days of the month

+### Days of the month -

Month numbers 1, 3, 5, 7, 8, 10, and 12 are 31 days long. Months 4, 6, 9, and 11 are 30 days long. Month 2, February, is 28 days long most years, but is 29 days long in leap years. This is detailed in the following table.

+Month numbers 1, 3, 5, 7, 8, 10, and 12 are 31 days long. Months 4, 6, 9, and 11 are 30 days long. Month 2, February, is 28 days long most years, but is 29 days long in leap years. This is detailed in the following table. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
The months of the year and their lengths in days
Month numberName (English)Length in days
01January31
02February28 (29 in leap years)
03March31
04April30
05May31
06June30
07July31
08August31
09September30
10October31
11November30
12December31
 + The months of the year and their lengths in days +
Month numberName (English)Length in days
01January31
02February28 (29 in leap years)
03March31
04April30
05May31
06June30
07July31
08August31
09September30
10October31
11November30
12December31
-

Week strings

+## Week strings -

A week string specifies a week within a particular year. A valid week string consists of a valid {{anch("Year numbers", "year number")}}, followed by a hyphen character ("-", or U+002D), then the capital letter "W" (U+0057), followed by a two-digit week of the year value.

+A week string specifies a week within a particular year. A **valid week string** consists of a valid {{anch("Year numbers", "year number")}}, followed by a hyphen character ("`-`", or U+002D), then the capital letter "`W`" (U+0057), followed by a two-digit week of the year value. -

The week of the year is a two-digit string between 01 and 53. Each week begins on Monday and ends on Sunday. That means it's possible for the first few days of January to be considered part of the previous week-year, and for the last few days of December to be considered part of the following week-year. The first week of the year is the week that contains the first Thursday of the year. For example, the first Thursday of 1953 was on January 1, so that week—beginning on Monday, December 29—is considered the first week of the year. Therefore, December 30, 1952 occurs during the week 1953-W01.

+The week of the year is a two-digit string between `01` and `53`. Each week begins on Monday and ends on Sunday. That means it's possible for the first few days of January to be considered part of the previous week-year, and for the last few days of December to be considered part of the following week-year. The first week of the year is the week that contains the *first Thursday of the year*. For example, the first Thursday of 1953 was on January 1, so that week—beginning on Monday, December 29—is considered the first week of the year. Therefore, December 30, 1952 occurs during the week `1953-W01`. -

A year has 53 weeks if:

+A year has 53 weeks if: -
    -
  • The first day of the calendar year (January 1) is a Thursday or
    • -
  • The first day of the year (January 1) is a Wednesday and the year is a {{anch("Leap years", "leap year")}}
    • -
+* The first day of the calendar year (January 1) is a Thursday **or** +* The first day of the year (January 1) is a Wednesday and the year is a {{anch("Leap years", "leap year")}} -

All other years have 52 weeks.

+All other years have 52 weeks. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Examples of valid week strings
Week stringWeek and year (Date range)
2001-W37Week 37, 2001 (September 10-16, 2001)
1953-W01Week 1, 1953 (December 29, 1952-January 4, 1953)
1948-W53Week 53, 1948 (December 27, 1948-January 2, 1949)
1949-W01Week 1, 1949 (January 3-9, 1949)
0531-W16Week 16, 531 (April 13-19, 531)
0042-W04Week 4, 42 (January 21-27, 42)
+| Week string | Week and year (Date range) | +| ----------- | ------------------------------------------------- | +| `2001-W37` | Week 37, 2001 (September 10-16, 2001) | +| `1953-W01` | Week 1, 1953 (December 29, 1952-January 4, 1953) | +| `1948-W53` | Week 53, 1948 (December 27, 1948-January 2, 1949) | +| `1949-W01` | Week 1, 1949 (January 3-9, 1949) | +| `0531-W16` | Week 16, 531 (April 13-19, 531) | +| `0042-W04` | Week 4, 42 (January 21-27, 42) | -

Note that both the year and week numbers are padded with leading zeroes, with the year padded to four digits and the week to two.

+Note that both the year and week numbers are padded with leading zeroes, with the year padded to four digits and the week to two. -

Month strings

+## Month strings -

A month string represents a specific month in time, rather than a generic month of the year. That is, rather than representing "January," an HTML month string represents a month and year paired, like "January 1972."

+A month string represents a specific month in time, rather than a generic month of the year. That is, rather than representing "January," an HTML month string represents a month and year paired, like "January 1972." -

A valid month string consists of a valid {{anch("Year numbers", "year number")}} (a string of at least four digits), followed by a hyphen character ("-", or U+002D), followed by a two-digit numeric {{anch("Months of the year", "month number")}}, where 01 represents January and 12 represents December.

+A **valid month string** consists of a valid {{anch("Year numbers", "year number")}} (a string of at least four digits), followed by a hyphen character ("`-`", or U+002D), followed by a two-digit numeric {{anch("Months of the year", "month number")}}, where `01` represents January and `12` represents December. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Examples of valid month strings
Month stringMonth and year
17310-09September, 17310
2019-01January, 2019
1993-11November, 1993
0571-04April, 571
0001-07July, 1 C.E.
+| Month string | Month and year | +| ------------ | ---------------- | +| `17310-09` | September, 17310 | +| `2019-01` | January, 2019 | +| `1993-11` | November, 1993 | +| `0571-04` | April, 571 | +| `0001-07` | July, 1 C.E. | -

Notice that all years are at least four characters long; years that are fewer than four digits long are padded with leading zeroes.

+Notice that all years are at least four characters long; years that are fewer than four digits long are padded with leading zeroes. -

Date strings

+## Date strings -

A valid date string consists of a {{anch("Month strings", "month string")}}, followed by a hyphen character ("-", or U+002D), followed by a two-digit {{anch("Days of the month", "day of the month")}}.

+A valid date string consists of a {{anch("Month strings", "month string")}}, followed by a hyphen character ("`-`", or U+002D), followed by a two-digit {{anch("Days of the month", "day of the month")}}. - - - - - - - - - - - - - - - - - - - - - - - - - - -
Examples of valid date strings
Date stringFull date
1993-11-01November 1, 1993
1066-10-14October 14, 1066
0571-04-22April 22, 571
0062-02-05February 5, 62
+| Date string | Full date | +| ------------ | ---------------- | +| `1993-11-01` | November 1, 1993 | +| `1066-10-14` | October 14, 1066 | +| `0571-04-22` | April 22, 571 | +| `0062-02-05` | February 5, 62 | -

Time strings

+## Time strings -

A time string can specify a time with precision to the minute, second, or to the millisecond. Specifying only the hour or minute isn't permitted. A valid time string minimally consists of a two-digit hour followed by a colon (":", U+003A), then a two-digit minute. The minute may optionally be followed by another colon and a two-digit number of seconds. Milliseconds may be specified, optionally, by adding a decimal point character (".", U+002E) followed by one, two, or three digits.

+A time string can specify a time with precision to the minute, second, or to the millisecond. Specifying only the hour or minute isn't permitted. A **valid time string** minimally consists of a two-digit hour followed by a colon ("`:`", U+003A), then a two-digit minute. The minute may optionally be followed by another colon and a two-digit number of seconds. Milliseconds may be specified, optionally, by adding a decimal point character ("`.`", U+002E) followed by one, two, or three digits. -

There are some additional basic rules:

+There are some additional basic rules: -
    -
  • The hour is always specified using the 24-hour clock, with 00 being midnight and 11 PM being 23. No values outside the range 00–23 are permitted.
    • -
  • The minute must be a two-digit number between 00 and 59. No values outside that range are allowed.
    • -
  • If the number of seconds is omitted (to specify a time accurate only to the minute), no colon should follow the number of minutes.
    • -
  • If specified, the integer portion of the number of seconds must be between 00 and 59. You cannot specify leap seconds by using values like 60 or 61.
    • -
  • If the number of seconds is specified and is an integer, it must not be followed by a decimal point.
    • -
  • If a fraction of a second is included, it may be from one to three digits long, indicating the number of milliseconds. It follows the decimal point placed after the seconds component of the time string.
    • -
+* The hour is always specified using the 24-hour clock, with `00` being midnight and 11 PM being `23`. No values outside the range `00`–`23` are permitted. +* The minute must be a two-digit number between `00` and `59`. No values outside that range are allowed. +* If the number of seconds is omitted (to specify a time accurate only to the minute), no colon should follow the number of minutes. +* If specified, the integer portion of the number of seconds must be between `00` and `59`. You *cannot* specify leap seconds by using values like `60` or `61`. +* If the number of seconds is specified and is an integer, it must not be followed by a decimal point. +* If a fraction of a second is included, it may be from one to three digits long, indicating the number of milliseconds. It follows the decimal point placed after the seconds component of the time string. - - - - - - - - - - - - - - - - - - - - - - -
Examples of valid time strings
Time stringTime
00:00:30.7512:00:30.75 AM (30.75 seconds after midnight)
12:1512:15 PM
13:44:251:44:25 PM (25 seconds after 1:44 PM)
+| Time string | Time | +| ------------- | --------------------------------------------- | +| `00:00:30.75` | 12:00:30.75 AM (30.75 seconds after midnight) | +| `12:15` | 12:15 PM | +| `13:44:25` | 1:44:25 PM (25 seconds after 1:44 PM) | -

Local date and time strings

+## Local date and time strings -

A valid datetime-local string consists of a date string and a time string concatenated together with either the letter "T" or a space character separating them. No information about the time zone is included in the string; the date and time is presumed to be in the user's local time zone.

+A valid [`datetime-local`](/en-US/docs/Web/HTML/Element/input/datetime-local) string consists of a `date` string and a `time` string concatenated together with either the letter "`T`" or a space character separating them. No information about the time zone is included in the string; the date and time is presumed to be in the user's local time zone. -

When you set the {{htmlattrxref("value", "input")}} of a datetime-local input, the string is normalized into a standard form. Normalized datetime strings always use the letter "T" to separate the date and the time, and the time portion of the string is as short as possible. This is done by leaving out the seconds component if its value is :00.

+When you set the {{htmlattrxref("value", "input")}} of a `datetime-local` input, the string is **normalized** into a standard form. Normalized `datetime` strings always use the letter "`T`" to separate the date and the time, and the time portion of the string is as short as possible. This is done by leaving out the seconds component if its value is `:00`. - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + +
Examples of valid datetime-local strings
Date/time stringNormalized date/time stringActual date and time
1986-01-28T11:38:00.011986-01-28T11:38:00.01January 28, 1986 at 11:38:00.01 AM
1986-01-28 11:38:00.010 -

1986-01-28T11:38:00.01

-

Note that after normalization, this is the same string as the previous datetime-local string. The space has been replaced with the "T" character and the trailing zero in the fraction of a second has been removed to make the string as short as possible.

- 		January 28, 1986 at 11:38:00.01 AM
0170-07-31T22:00:00

0170-07-31T22:00

-

Note that the normalized form of this date drops the ":00" indicating the number of seconds to be zero, because the seconds are optional when zero, and the normalized string minimizes the length of the string.

- 		July 31, 170 at 10:00 PM
 + Examples of valid + datetime-local + strings +
Date/time stringNormalized date/time stringActual date and time
1986-01-28T11:38:00.011986-01-28T11:38:00.01January 28, 1986 at 11:38:00.01 AM
1986-01-28 11:38:00.010 +

1986-01-28T11:38:00.01

+

+ Note that after normalization, this is the same string as the previous + datetime-local string. The space has been replaced with + the "T" character and the trailing zero in the fraction + of a second has been removed to make the string as short as possible. +

+ 		January 28, 1986 at 11:38:00.01 AM
0170-07-31T22:00:00 +

0170-07-31T22:00

+

+ Note that the normalized form of this date drops the + ":00" indicating the number of seconds to be zero, + because the seconds are optional when zero, and the normalized string + minimizes the length of the string. +

+ 		July 31, 170 at 10:00 PM
-

Global date and time strings

+## Global date and time strings -

A global date and time string specifies a date and time as well as the time zone in which it occurs. A valid global date and time string is the same format as a {{anch("Local date and time strings", "local date and time string")}}, except it has a time zone string appended to the end, following the time.

+A global date and time string specifies a date and time as well as the time zone in which it occurs. A **valid global date and time string** is the same format as a {{anch("Local date and time strings", "local date and time string")}}, except it has a time zone string appended to the end, following the time. -

Time zone offset string

+### Time zone offset string -

A time zone offset string specifies the offset in either a positive or a negative number of hours and minutes from the standard time base. There are two standard time bases, which are very close to the same, but not exactly the same:

+A time zone offset string specifies the offset in either a positive or a negative number of hours and minutes from the standard time base. There are two standard time bases, which are very close to the same, but not exactly the same: -
    -
  • For dates after the establishment of {{interwiki("wikipedia", "Coordinated Universal Time")}} (UTC) in the early 1960s, the time base is Z and the offset indicates a particular time zone's offset from the time at the prime meridian at 0º longitude (which passes through the Royal Observatory at Greenwich, England).
    • -
  • For dates prior to UTC, the time base is instead expressed in terms of {{interwiki("wikipedia", "UT1")}}, which is the contemporary Earth solar time at the prime meridian.
    • -
+* For dates after the establishment of {{interwiki("wikipedia", "Coordinated Universal Time")}} (UTC) in the early 1960s, the time base is `Z` and the offset indicates a particular time zone's offset from the time at the prime meridian at 0º longitude (which passes through the Royal Observatory at Greenwich, England). +* For dates prior to UTC, the time base is instead expressed in terms of {{interwiki("wikipedia", "UT1")}}, which is the contemporary Earth solar time at the prime meridian. -

The time zone string is appended immediately following the time in the date and time string. You can specify "Z" as the time zone offset string to indicate that the time is specified in UTC. Otherwise, the time zone string is constructed as follows:

+The time zone string is appended immediately following the time in the date and time string. You can specify "`Z`" as the time zone offset string to indicate that the time is specified in UTC. Otherwise, the time zone string is constructed as follows: -
    -
  1. A character indicating the sign of the offset: the plus character ("+", or U+002B) for time zones to the east of the prime meridian or the minus character ("-", or U+002D) for time zones to the west of the prime meridian.
    2. -
  2. A two-digit number of hours that the time zone is offset from the prime meridian. This value must be between 00 and 23.
    3. -
  3. An optional colon (":") character.
    4. -
  4. A two-digit number of minutes past the hour; this value must be between 00 and 59.
    5. -
+1. A character indicating the sign of the offset: the plus character ("`+`", or U+002B) for time zones to the east of the prime meridian or the minus character ("`-`", or U+002D) for time zones to the west of the prime meridian. +2. A two-digit number of hours that the time zone is offset from the prime meridian. This value must be between `00` and `23`. +3. An optional colon ("`:`") character. +4. A two-digit number of minutes past the hour; this value must be between `00` and `59`. -

While this format allows for time zones between -23:59 and +23:59, the current range of time zone offsets is -12:00 to +14:00, and no time zones are currently offset from the hour by anything other than 00, 30, or 45 minutes. This may change at more or less anytime, since countries are free to tamper with their time zones at any time and in any way they wish to do so.

+While this format allows for time zones between -23:59 and +23:59, the current range of time zone offsets is -12:00 to +14:00, and no time zones are currently offset from the hour by anything other than `00`, `30`, or `45` minutes. This may change at more or less anytime, since countries are free to tamper with their time zones at any time and in any way they wish to do so. - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + +
Examples of valid global date and time strings
Global date and time stringActual global date and timeDate and time at prime meridian
2005-06-07T00:00ZJune 7, 2005 at midnight UTCJune 7, 2005 at midnight
1789-08-22T12:30:00.1-04:00August 22, 1789 at a tenth of a second past 12:30 PM Eastern Daylight Time (EDT)August 22, 1789 at a tenth of a second past 4:30 PM
3755-01-01 00:00+10:00January 1, 3755 at midnight Australian Eastern Standard Time (AEST)December 31, 3754 at 2:00 PM
 + Examples of valid global date and time strings +
Global date and time stringActual global date and timeDate and time at prime meridian
2005-06-07T00:00ZJune 7, 2005 at midnight UTCJune 7, 2005 at midnight
1789-08-22T12:30:00.1-04:00 + August 22, 1789 at a tenth of a second past 12:30 PM Eastern Daylight + Time (EDT) + August 22, 1789 at a tenth of a second past 4:30 PM
3755-01-01 00:00+10:00 + January 1, 3755 at midnight Australian Eastern Standard Time (AEST) + December 31, 3754 at 2:00 PM
-

See also

+## See also -
    -
  • {{HTMLElement("input")}}
    • -
  • {{HTMLElement("ins")}} and {{HTMLElement("del")}}: see the datetime attribute, which specifies either a date or a local date and time at which the content was inserted or deleted
    • -
  • The ISO 8601 specification
    • -
  • Numbers and Dates in the JavaScript Guide
    • -
  • The JavaScript {{jsxref("Date")}} object
    • -
  • The Intl.DateTimeFormat object for formatting dates and times for a given locale
    • -
+* {{HTMLElement("input")}} +* {{HTMLElement("ins")}} and {{HTMLElement("del")}}: see the `datetime` attribute, which specifies either a date or a local date and time at which the content was inserted or deleted +* [The ISO 8601 specification](https://www.iso.org/iso-8601-date-and-time-format.html) +* [Numbers and Dates](/en-US/docs/Web/JavaScript/Guide/Numbers_and_dates) in the [JavaScript Guide](/en-US/docs/Web/JavaScript/Guide) +* The JavaScript {{jsxref("Date")}} object +* The [`Intl.DateTimeFormat`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat) object for formatting dates and times for a given locale diff --git a/files/en-us/web/html/element/a/index.md b/files/en-us/web/html/element/a/index.md index 682fed2f37d5d62..7a319b2c7da4f17 100644 --- a/files/en-us/web/html/element/a/index.md +++ b/files/en-us/web/html/element/a/index.md @@ -15,268 +15,283 @@ tags: - Web browser-compat: html.elements.a --- -
{{HTMLRef}}
- -

The <a> HTML element (or anchor element), with its href attribute, creates a hyperlink to web pages, files, email addresses, locations in the same page, or anything else a URL can address.

- -

Content within each <a> should indicate the link's destination. If the href attribute is present, pressing the enter key while focused on the <a> element will activate it.

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

Attributes

- -

This element's attributes include the global attributes.

- -
-
{{HTMLAttrDef("download")}}
-

Prompts the user to save the linked URL instead of navigating to it. Can be used with or without a value:

-
    -
  • Without a value, the browser will suggest a filename/extension, generated from various sources: -
      -
    • The {{HTTPHeader("Content-Disposition")}} HTTP header
      • -
    • The final segment in the URL path
      • -
    • The {{Glossary("MIME_type", "media type")}} (from the {{HTTPHeader("Content-Type")}} header, the start of a data: URL, or {{domxref("Blob.type")}} for a blob: URL)
      • -
    -
    • -
  • Defining a value suggests it as the filename. / and \ characters are converted to underscores (_). Filesystems may forbid other characters in filenames, so browsers will adjust the suggested name if necessary.
    • -
- -
-

Note:

-
    -
  • download only works for same-origin URLs, or the blob: and data: schemes.
    • -
  • -

    If the Content-Disposition header has different information from the download attribute, resulting behavior may differ:

    - -
      -
    • -

      If the header specifies a filename, it takes priority over a filename specified in the download attribute.

      -
      • -
    • -

      If the header specifies a disposition of inline, Chrome, and Firefox 82 and later, prioritize the attribute and treat it as a download. Firefox versions before 82 prioritize the header and will display the content inline.

      -
      • -
    -
    • -
-
-
-
{{HTMLAttrDef("href")}}
-
-

The URL that the hyperlink points to. Links are not restricted to HTTP-based URLs — they can use any URL scheme supported by browsers:

- -
    -
  • Sections of a page with fragment URLs
    • -
  • Pieces of media files with media fragments
    • -
  • Telephone numbers with tel: URLs
    • -
  • Email addresses with mailto: URLs
    • -
  • While web browsers may not support other URL schemes, web sites can with registerProtocolHandler()
    • -
-
-
{{HTMLAttrDef("hreflang")}}
-
Hints at the human language of the linked URL. No built-in functionality. Allowed values are the same as the global lang attribute.
-
{{HTMLAttrDef("ping")}}
-
A space-separated list of URLs. When the link is followed, the browser will send {{HTTPMethod("POST")}} requests with the body PING to the URLs. Typically for tracking.
-
{{HTMLAttrDef("referrerpolicy")}}
-
How much of the referrer to send when following the link. - -
    -
  • no-referrer: The {{HTTPHeader("Referer")}} header will not be sent.
    • -
  • no-referrer-when-downgrade: The {{HTTPHeader("Referer")}} header will not be sent to {{Glossary("origin")}}s without {{Glossary("TLS")}} ({{Glossary("HTTPS")}}).
    • -
  • origin: The sent referrer will be limited to the origin of the referring page: its scheme, {{Glossary("host")}}, and {{Glossary("port")}}.
    • -
  • origin-when-cross-origin: The referrer sent to other origins will be limited to the scheme, the host, and the port. Navigations on the same origin will still include the path.
    • -
  • same-origin: A referrer will be sent for {{Glossary("Same-origin policy", "same origin")}}, but cross-origin requests will contain no referrer information.
    • -
  • strict-origin: Only send the origin of the document as the referrer when the protocol security level stays the same (HTTPS→HTTPS), but don't send it to a less secure destination (HTTPS→HTTP).
    • -
  • strict-origin-when-cross-origin (default): Send a full URL when performing a same-origin request, only send the origin when the protocol security level stays the same (HTTPS→HTTPS), and send no header to a less secure destination (HTTPS→HTTP).
    • -
  • unsafe-url: The referrer will include the origin and the path (but not the fragment, password, or username). This value is unsafe, because it leaks origins and paths from TLS-protected resources to insecure origins.
    • -
-
{{HTMLAttrDef("rel")}}
-
The relationship of the linked URL as space-separated link types.
-
{{HTMLAttrDef("target")}}
-
Where to display the linked URL, as the name for a browsing context (a tab, window, or {{HTMLElement("iframe")}}). The following keywords have special meanings for where to load the URL: -
    -
  • _self: the current browsing context. (Default)
    • -
  • _blank: usually a new tab, but users can configure browsers to open a new window instead.
    • -
  • _parent: the parent browsing context of the current one. If no parent, behaves as _self.
    • -
  • _top: the topmost browsing context (the "highest" context that’s an ancestor of the current one). If no ancestors, behaves as _self.
    • -
- -
-

Note: Setting target="_blank" on <a> elements implicitly provides the same rel behavior as setting rel="noopener" which does not set window.opener. See browser compatibility for support status.

-
-
-
{{HTMLAttrDef("type")}}
-
Hints at the linked URL’s format with a {{Glossary("MIME type")}}. No built-in functionality.
-
- -

Deprecated attributes

- -
-
{{HTMLAttrDef("charset")}}{{Deprecated_Inline}}
-
Hinted at the {{Glossary("character encoding")}} of the linked URL. -
-

Note: This attribute is deprecated and should not be used by authors. Use the HTTP {{HTTPHeader("Content-Type")}} header on the linked URL.

-
-
-
{{HTMLAttrDef("coords")}}{{Deprecated_Inline}}
-
Used with the shape attribute. A comma-separated list of coordinates.
-
{{HTMLAttrDef("name")}}{{Deprecated_Inline}}
-
Was required to define a possible target location in a page. In HTML 4.01, id and name could both be used on <a>, as long as they had identical values. -
-

Note: Use the global attribute {{HTMLAttrxRef("id")}} instead.

-
-
-
{{HTMLAttrDef("rev")}}{{Deprecated_Inline}}
-
Specified a reverse link; the opposite of the rel attribute. Deprecated for being very confusing.
-
{{HTMLAttrDef("shape")}}{{Deprecated_Inline}}
-
The shape of the hyperlink’s region in an image map. -
-

Note: Use the {{HTMLElement("area")}} element for image maps instead.

-
-
-
- -

Properties

+{{HTMLRef}} + +The **``** [HTML](/en-US/docs/Web/HTML) element (or *anchor* element), with [its `href` attribute](#href), creates a hyperlink to web pages, files, email addresses, locations in the same page, or anything else a URL can address. + +Content within each `` **should** indicate the link's destination. If the `href` attribute is present, pressing the enter key while focused on the `` element will activate it. + +{{EmbedInteractiveExample("pages/tabbed/a.html")}} + +## Attributes + +This element's attributes include the [global attributes](/en-US/docs/Web/HTML/Global_attributes). + +* {{HTMLAttrDef("download")}} + * : Prompts the user to save the linked URL instead of navigating to it. Can be used with or without a value: + + * Without a value, the browser will suggest a filename/extension, generated from various sources: + + * The {{HTTPHeader("Content-Disposition")}} HTTP header + * The final segment in the URL [path](/en-US/docs/Web/API/URL/pathname) + * The {{Glossary("MIME_type", "media type")}} (from the {{HTTPHeader("Content-Type")}} header, the start of a [`data:` URL](/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs), or {{domxref("Blob.type")}} for a [`blob:` URL](/en-US/docs/Web/API/URL/createObjectURL)) + * Defining a value suggests it as the filename. `/` and `\` characters are converted to underscores (`_`). Filesystems may forbid other characters in filenames, so browsers will adjust the suggested name if necessary. + + > **Note:** + > + > * `download` only works for [same-origin URLs](/en-US/docs/Web/Security/Same-origin_policy), or the `blob:` and `data:` schemes. + > * If the `Content-Disposition` header has different information from the `download` attribute, resulting behavior may differ: + > + > * If the header specifies a `filename`, it takes priority over a filename specified in the `download` attribute. + > * If the header specifies a disposition of `inline`, Chrome, and Firefox 82 and later, prioritize the attribute and treat it as a download. Firefox versions before 82 prioritize the header and will display the content inline. +* {{HTMLAttrDef("href")}} + * : The URL that the hyperlink points to. Links are not restricted to HTTP-based URLs — they can use any URL scheme supported by browsers: + + * Sections of a page with fragment URLs + * Pieces of media files with media fragments + * Telephone numbers with `tel:` URLs + * Email addresses with `mailto:` URLs + * While web browsers may not support other URL schemes, web sites can with [`registerProtocolHandler()`](/en-US/docs/Web/API/Navigator/registerProtocolHandler) +* {{HTMLAttrDef("hreflang")}} + * : Hints at the human language of the linked URL. No built-in functionality. Allowed values are the same as [the global `lang` attribute](/en-US/docs/Web/HTML/Global_attributes/lang). +* {{HTMLAttrDef("ping")}} + * : A space-separated list of URLs. When the link is followed, the browser will send {{HTTPMethod("POST")}} requests with the body `PING` to the URLs. Typically for tracking. +* {{HTMLAttrDef("referrerpolicy")}} + * : How much of the [referrer](/en-US/docs/Web/HTTP/Headers/Referer) to send when following the link. + + * `no-referrer`: The {{HTTPHeader("Referer")}} header will not be sent. + * `no-referrer-when-downgrade`: The {{HTTPHeader("Referer")}} header will not be sent to {{Glossary("origin")}}s without {{Glossary("TLS")}} ({{Glossary("HTTPS")}}). + * `origin`: The sent referrer will be limited to the origin of the referring page: its [scheme](/en-US/docs/Learn/Common_questions/What_is_a_URL), {{Glossary("host")}}, and {{Glossary("port")}}. + * `origin-when-cross-origin`: The referrer sent to other origins will be limited to the scheme, the host, and the port. Navigations on the same origin will still include the path. + * `same-origin`: A referrer will be sent for {{Glossary("Same-origin policy", "same origin")}}, but cross-origin requests will contain no referrer information. + * `strict-origin`: Only send the origin of the document as the referrer when the protocol security level stays the same (HTTPS→HTTPS), but don't send it to a less secure destination (HTTPS→HTTP). + * `strict-origin-when-cross-origin` (default): Send a full URL when performing a same-origin request, only send the origin when the protocol security level stays the same (HTTPS→HTTPS), and send no header to a less secure destination (HTTPS→HTTP). + * `unsafe-url`: The referrer will include the origin *and* the path (but not the [fragment](/en-US/docs/Web/API/HTMLAnchorElement/hash), [password](/en-US/docs/Web/API/HTMLAnchorElement/password), or [username](/en-US/docs/Web/API/HTMLAnchorElement/username)). **This value is unsafe**, because it leaks origins and paths from TLS-protected resources to insecure origins. +* {{HTMLAttrDef("rel")}} + * : The relationship of the linked URL as space-separated [link types](/en-US/docs/Web/HTML/Link_types). +* {{HTMLAttrDef("target")}} + * : Where to display the linked URL, as the name for a *browsing context* (a tab, window, or {{HTMLElement("iframe")}}). The following keywords have special meanings for where to load the URL: + + * `_self`: the current browsing context. (Default) + * `_blank`: usually a new tab, but users can configure browsers to open a new window instead. + * `_parent`: the parent browsing context of the current one. If no parent, behaves as `_self`. + * `_top`: the topmost browsing context (the "highest" context that’s an ancestor of the current one). If no ancestors, behaves as `_self`. + + > **Note:** Setting `target="_blank"` on `` elements implicitly provides the same `rel` behavior as setting [`rel="noopener"`](/en-US/docs/Web/HTML/Link_types/noopener) which does not set `window.opener`. See [browser compatibility](#browser_compatibility) for support status. +* {{HTMLAttrDef("type")}} + * : Hints at the linked URL’s format with a {{Glossary("MIME type")}}. No built-in functionality. + +### Deprecated attributes + +* {{HTMLAttrDef("charset")}}{{Deprecated_Inline}} + * : Hinted at the {{Glossary("character encoding")}} of the linked URL. + + > **Note:** This attribute is deprecated and **should not be used by authors**. Use the HTTP {{HTTPHeader("Content-Type")}} header on the linked URL. +* {{HTMLAttrDef("coords")}}{{Deprecated_Inline}} + * : Used with [the `shape` attribute](#shape). A comma-separated list of coordinates. +* {{HTMLAttrDef("name")}}{{Deprecated_Inline}} + * : Was required to define a possible target location in a page. In HTML 4.01, `id` and `name` could both be used on ``, as long as they had identical values. + + > **Note:** Use the global attribute {{HTMLAttrxRef("id")}} instead. +* {{HTMLAttrDef("rev")}}{{Deprecated_Inline}} + * : Specified a reverse link; the opposite of [the `rel` attribute](#rel). Deprecated for being very confusing. +* {{HTMLAttrDef("shape")}}{{Deprecated_Inline}} + * : The shape of the hyperlink’s region in an image map. + + > **Note:** Use the {{HTMLElement("area")}} element for image maps instead. + +## Properties - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Content categoriesFlow content, phrasing content, interactive content, palpable content.
Permitted contentTransparent, containing either flow content (excluding interactive content) or phrasing content.
Tag omission{{no_tag_omission}}
Permitted parentsAny element that accepts phrasing content, or any element that accepts flow content, but not other <a> elements.
Implicit ARIA role{{ARIARole("link")}} when href attribute is present, otherwise no corresponding role
Permitted ARIA roles -

When href attribute is present:

- -
    -
  • {{ARIARole("button")}}
    • -
  • {{ARIARole("checkbox")}}
    • -
  • {{ARIARole("menuitem")}}
    • -
  • {{ARIARole("menuitemcheckbox")}}
    • -
  • {{ARIARole("menuitemradio")}}
    • -
  • {{ARIARole("option")}}
    • -
  • {{ARIARole("radio")}}
    • -
  • {{ARIARole("switch")}}
    • -
  • {{ARIARole("tab")}}
    • -
  • {{ARIARole("treeitem")}}
    • -
- -

When href attribute is not present:

- -
    -
  • any
    • -
-
DOM interface{{DOMxRef("HTMLAnchorElement")}}
+ Content categories + + Flow content, + phrasing content, + interactive content, palpable content. +
Permitted content + Transparent, containing either + flow content + (excluding + interactive content) or + phrasing content. +
Tag omission{{no_tag_omission}}
Permitted parents + Any element that accepts + phrasing content, or any element that accepts + flow content, but not other <a> elements. +
Implicit ARIA role + {{ARIARole("link")}} when href attribute is + present, otherwise + no corresponding role +
Permitted ARIA roles +

When href attribute is present:

+
    +
  • {{ARIARole("button")}}
    • +
  • {{ARIARole("checkbox")}}
    • +
  • {{ARIARole("menuitem")}}
    • +
  • {{ARIARole("menuitemcheckbox")}}
    • +
  • {{ARIARole("menuitemradio")}}
    • +
  • {{ARIARole("option")}}
    • +
  • {{ARIARole("radio")}}
    • +
  • {{ARIARole("switch")}}
    • +
  • {{ARIARole("tab")}}
    • +
  • {{ARIARole("treeitem")}}
    • +
+

When href attribute is not present:

+
    +
  • any
    • +
+
DOM interface{{DOMxRef("HTMLAnchorElement")}}
-

Examples

+## Examples -

Linking to an absolute URL

+### Linking to an absolute URL -

HTML

+#### HTML -
<a href="https://www.mozilla.com">
+```html
+
   Mozilla
-</a>
+ +``` -

Result

+#### Result -

{{EmbedLiveSample('Linking_to_an_absolute_URL')}}

+{{EmbedLiveSample('Linking_to_an_absolute_URL')}} -

Linking to relative URLs

+### Linking to relative URLs -

HTML

+#### HTML -
<a href="//example.com">Scheme-relative URL</a>
-<a href="/en-US/docs/Web/HTML">Origin-relative URL</a>
-<a href="./p">Directory-relative URL</a>
-
+```html +Scheme-relative URL +Origin-relative URL +Directory-relative URL +``` - +```css hidden +a { display: block; margin-bottom: 0.5em } +``` -

Result

+#### Result -

{{EmbedLiveSample('Linking_to_relative_URLs')}}

+{{EmbedLiveSample('Linking_to_relative_URLs')}} -

Linking to an element on the same page

+### Linking to an element on the same page -
<!-- <a> element links to the section below -->
-<p><a href="#Section_further_down">
+```html
+
+

   Jump to the heading below
-</a></p>
+

 
-<!-- Heading to link to -->
-<h2 id="Section_further_down">Section further down</h2>
-
+ +

Section further down

+``` -
-

Note: You can use href="#top" or the empty fragment (href="#") to link to the top of the current page, as defined in the HTML specification.

-
+> **Note:** You can use `href="#top"` or the empty fragment (`href="#"`) to link to the top of the current page, [as defined in the HTML specification](https://html.spec.whatwg.org/multipage/browsing-the-web.html#scroll-to-the-fragment-identifier). -

Linking to an email address

+### Linking to an email address -

To create links that open in the user's email program to let them send a new message, use the mailto: scheme:

+To create links that open in the user's email program to let them send a new message, use the `mailto:` scheme: -
<a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>
+```html +Send email to nowhere +``` -

For details about mailto: URLs, such as including a subject or body, see Email links or {{RFC(6068)}}.

+For details about `mailto:` URLs, such as including a subject or body, see [Email links](/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#e-mail_links) or {{RFC(6068)}}. -

Linking to telephone numbers

+### Linking to telephone numbers -
<a href="tel:+49.157.0156">+49 157 0156</a>
-<a href="tel:+1(555)5309">(555) 5309</a>
+```html ++49 157 0156 +(555) 5309 +``` -

tel: link behavior varies with device capabilities:

+`tel:` link behavior varies with device capabilities: -
    -
  • Cellular devices autodial the number.
    • -
  • Most operating systems have programs that can make calls, like Skype or FaceTime.
    • -
  • Websites can make phone calls with {{domxref("Navigator/registerProtocolHandler", "registerProtocolHandler")}}, such as web.skype.com.
    • -
  • Other behaviors include saving the number to contacts, or sending the number to another device.
    • -
+* Cellular devices autodial the number. +* Most operating systems have programs that can make calls, like Skype or FaceTime. +* Websites can make phone calls with {{domxref("Navigator/registerProtocolHandler", "registerProtocolHandler")}}, such as `web.skype.com`. +* Other behaviors include saving the number to contacts, or sending the number to another device. -

See {{RFC(3966)}} for syntax, additional features, and other details about the tel: URL scheme.

+See {{RFC(3966)}} for syntax, additional features, and other details about the `tel:` URL scheme. -

Using the download attribute to save a <canvas> as a PNG

+### Using the download attribute to save a \ as a PNG -

To save a {{HTMLElement("canvas")}} element’s contents as an image, you can create a link with a download attribute and the canvas data as a data: URL:

+To save a {{HTMLElement("canvas")}} element’s contents as an image, you can create a link with a `download` attribute and the canvas data as a `data:` URL: - +#### Example painting app with save link -
HTML
+##### HTML -
<p>Paint by holding down the mouse button and moving it.
-  <a href="" download="my_painting.png">Download my painting</a>
-</p>
+```html
+
Paint by holding down the mouse button and moving it.
+  Download my painting
+

 
-<canvas width="300" height="300"></canvas>
-
+ +``` -
CSS
+##### CSS -
html {
+```css
+html {
   font-family: sans-serif;
 }
 canvas {
@@ -288,11 +303,13 @@ a {
   background: #69c;
   color: #fff;
   padding: 5px 10px;
-}
+} +``` -
JavaScript
+##### JavaScript -
var canvas = document.querySelector('canvas'),
+```js
+var canvas = document.querySelector('canvas'),
     c = canvas.getContext('2d');
 c.fillStyle = 'hotpink';
 
@@ -305,170 +322,168 @@ function draw(x, y) {
   }
 }
 
-canvas.addEventListener('mousemove', event =>
+canvas.addEventListener('mousemove', event =>
   draw(event.offsetX, event.offsetY)
 );
-canvas.addEventListener('mousedown', () => isDrawing = true);
-canvas.addEventListener('mouseup', () => isDrawing = false);
+canvas.addEventListener('mousedown', () => isDrawing = true);
+canvas.addEventListener('mouseup', () => isDrawing = false);
 
-document.querySelector('a').addEventListener('click', event =>
+document.querySelector('a').addEventListener('click', event =>
   event.target.href = canvas.toDataURL()
 );
-
+``` -
Result
+##### Result -

{{EmbedLiveSample('Example_painting_app_with_save_link', '100%', '400')}}

+{{EmbedLiveSample('Example_painting_app_with_save_link', '100%', '400')}} -

Security and privacy

+## Security and privacy -

<a> elements can have consequences for users’ security and privacy. See Referer header: privacy and security concerns for information.

+`` elements can have consequences for users’ security and privacy. See [`Referer` header: privacy and security concerns](/en-US/docs/Web/Security/Referer_header:\_privacy_and_security_concerns) for information. -

Using target="_blank" without rel="noreferrer" and rel="noopener" makes the website vulnerable to {{domxref("window.opener")}} API exploitation attacks (vulnerability description), although note that, in newer browser versions setting target="_blank" implicitly provides the same protection as setting rel="noopener". See browser compatibility for details.

+Using `target="_blank"` without [`rel="noreferrer"`](/en-US/docs/Web/HTML/Link_types/noreferrer) and [`rel="noopener"`](/en-US/docs/Web/HTML/Link_types/noopener) makes the website vulnerable to {{domxref("window.opener")}} API exploitation attacks ([vulnerability description](https://www.jitbit.com/alexblog/256-targetblank---the-most-underestimated-vulnerability-ever/)), although note that, in newer browser versions setting `target="_blank"` implicitly provides the same protection as setting `rel="noopener"`. See [browser compatibility](#browser_compatibility) for details. -

Accessibility

+## Accessibility -

Strong link text

+### Strong link text -

The content inside a link should indicate where the link goes, even out of context.

+**The content inside a link should indicate where the link goes**, even out of context. -

Inaccessible, weak link text

+#### Inaccessible, weak link text -

A sadly common mistake is to only link the words “click here” or “here”:

+A sadly common mistake is to only link the words “click here” or “here”: -
<p>
-  Learn more about our products <a href="/products">here</a>.
-</p>
-
+```html example-bad +

+ Learn more about our products here. +

+``` -

Strong link text

+#### Strong link text -

Luckily, this is an easy fix, and it’s actually shorter than the inaccessible version!

+Luckily, this is an easy fix, and it’s actually shorter than the inaccessible version! -
<p>
-  Learn more <a href="/products">about our products</a>.
-</p>
+```html example-good +

+ Learn more about our products. +

+``` -

Assistive software has shortcuts to list all links on a page. However, strong link text benefits all users — the “list all links” shortcut emulates how sighted users quickly scan pages.

+Assistive software has shortcuts to list all links on a page. However, strong link text benefits all users — the “list all links” shortcut emulates how sighted users quickly scan pages. -

onclick events

+### onclick events -

Anchor elements are often abused as fake buttons by setting their href to # or javascript:void(0) to prevent the page from refreshing, then listening for their click events .

+Anchor elements are often abused as fake buttons by setting their `href` to `#` or `javascript:void(0)` to prevent the page from refreshing, then listening for their `click` events . -

These bogus href values cause unexpected behavior when copying/dragging links, opening links in a new tab/window, bookmarking, or when JavaScript is loading, errors, or is disabled. They also convey incorrect semantics to assistive technologies, like screen readers.

+These bogus `href` values cause unexpected behavior when copying/dragging links, opening links in a new tab/window, bookmarking, or when JavaScript is loading, errors, or is disabled. They also convey incorrect semantics to assistive technologies, like screen readers. -

Use a {{HTMLElement("button")}} instead. In general, you should only use a hyperlink for navigation to a real URL.

+Use a {{HTMLElement("button")}} instead. In general, **you should only use a hyperlink for navigation to a real URL**. - +### External links and linking to non-HTML resources -

Links that open in a new tab/window via target="_blank", or links that point to a download file should indicate what will happen when the link is followed.

+Links that open in a new tab/window via `target="_blank"`, or links that point to a download file should indicate what will happen when the link is followed. -

People experiencing low vision conditions, navigating with the aid of screen reading technology, or with cognitive concerns may be confused when a new tab, window, or application opens unexpectedly. Older screen-reading software may not even announce the behavior.

+People experiencing low vision conditions, navigating with the aid of screen reading technology, or with cognitive concerns may be confused when a new tab, window, or application opens unexpectedly. Older screen-reading software may not even announce the behavior. - +#### Link that opens a new tab/window -
<a target="_blank" href="https://www.wikipedia.org">
+```html
+
   Wikipedia (opens in new tab)
-</a>
-
+ +``` - +#### Link to a non-HTML resource -
<a href="2017-annual-report.ppt">
+```html
+
   2017 Annual Report (PowerPoint)
-</a>
-
+ +``` -

If an icon is used to signify link behavior, make sure it has {{HTMLAttrxRef("alt", "img", "alt text", "true")}}:

+If an icon is used to signify link behavior, make sure it has {{HTMLAttrxRef("alt", "img", "alt text", "true")}}: -
<a  target="_blank" href="https://www.wikipedia.org">
+```html
+
   Wikipedia
-  <img alt="(opens in new tab)" src="newtab.svg">
-</a>
+  (opens in new tab)
+
 
-<a href="2017-annual-report.ppt">
+
   2017 Annual Report
-  <img alt="(PowerPoint file)" src="ppt-icon.svg">
-</a>
+ (PowerPoint file) + +``` - +* [WebAIM: Links and Hypertext - Hypertext Links](https://webaim.org/techniques/hypertext/hypertext_links) +* [MDN / Understanding WCAG, Guideline 3.2](/en-US/docs/Web/Accessibility/Understanding_WCAG/Understandable#guideline\_3.2\_—\_predictable_make_web_pages_appear_and_operate_in_predictable_ways) +* [G200: Opening new windows and tabs from a link only when necessary](https://www.w3.org/TR/WCAG20-TECHS/G200.html) +* [G201: Giving users advanced warning when opening a new window](https://www.w3.org/TR/WCAG20-TECHS/G201.html) - +### Skip links -

A skip link is a link placed as early as possible in {{HTMLElement("body")}} content that points to the beginning of the page's main content. Usually, CSS hides a skip link offscreen until focused.

+A **skip link** is a link placed as early as possible in {{HTMLElement("body")}} content that points to the beginning of the page's main content. Usually, CSS hides a skip link offscreen until focused. -
<body>
-  <a href="#content" class="skip-link">Skip to main content</a>
+    
+      
 
-  <header>
-    …
-  </header>
+      

+        …
+      

 
-  <main id="content"> </main> <!-- The skip link jumps to here -->
+      
 
 
 
-</body>
-
+ -
.skip-link {
+```css
+.skip-link {
   position: absolute;
   top: -3em;
   background: #fff;
 }
 .skip-link:focus {
   top: 0;
-}
+} +``` -

Skip links let keyboard users bypass content repeated throughout multiple pages, such as header navigation.

+Skip links let keyboard users bypass content repeated throughout multiple pages, such as header navigation. -

Skip links are especially useful for people who navigate with the aid of assistive technology such as switch control, voice command, or mouth sticks/head wands, where the act of moving through repetitive links can be laborious.

+Skip links are especially useful for people who navigate with the aid of assistive technology such as switch control, voice command, or mouth sticks/head wands, where the act of moving through repetitive links can be laborious. - +* [WebAIM: "Skip Navigation" Links](https://webaim.org/techniques/skipnav/) +* [How-to: Use Skip Navigation links](https://a11yproject.com/posts/2013-05-11-skip-nav-links/) +* [MDN / Understanding WCAG, Guideline 2.4 explanations](/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#guideline\_2.4\_%e2%80%94\_navigable_provide_ways_to_help_users_navigate_find_content_and_determine_where_they_are) +* [Understanding Success Criterion 2.4.1](https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-skip.html) -

Size and proximity

+### Size and proximity -

Size

+#### Size -

Interactive elements, like links, should provide an area large enough that it is easy to activate them. This helps a variety of people, including those with motor control issues and those using imprecise inputs such as a touchscreen. A minimum size of 44×44 CSS pixels is recommended.

+Interactive elements, like links, should provide an area large enough that it is easy to activate them. This helps a variety of people, including those with motor control issues and those using imprecise inputs such as a touchscreen. A minimum size of 44×44 [CSS pixels](https://www.w3.org/TR/WCAG21/#dfn-css-pixels) is recommended. -

Text-only links in prose content are exempt from this requirement, but it’s still a good idea to make sure enough text is hyperlinked to be easily activated.

+Text-only links in prose content are exempt from this requirement, but it’s still a good idea to make sure enough text is hyperlinked to be easily activated. - +* [Understanding Success Criterion 2.5.5: Target Size](https://www.w3.org/WAI/WCAG21/Understanding/target-size.html) +* [Target Size and 2.5.5](https://adrianroselli.com/2019/06/target-size-and-2-5-5.html) +* [Quick test: Large touch targets](https://www.a11yproject.com/posts/2018-11-21-large-touch-targets/) -

Proximity

+#### Proximity -

Interactive elements, like links, placed in close visual proximity should have space separating them. Spacing helps people with motor control issues, who may otherwise accidentally activate the wrong interactive content.

+Interactive elements, like links, placed in close visual proximity should have space separating them. Spacing helps people with motor control issues, who may otherwise accidentally activate the wrong interactive content. -

Spacing may be created using CSS properties like {{CSSxRef("margin")}}.

+Spacing may be created using CSS properties like {{CSSxRef("margin")}}. - +* [Hand tremors and the giant-button-problem](https://axesslab.com/hand-tremors/) -

Specifications

+## Specifications -

{{Specifications}}

+{{Specifications}} -

Browser compatibility

+## Browser compatibility -

{{Compat}}

+{{Compat}} -

See also

+## See also -
    -
  • {{HTMLElement("link")}} is similar to <a>, but for metadata hyperlinks that are invisible to users.
    • -
  • {{CSSxRef(":link")}} is a CSS pseudo-class that will match <a> elements with valid href attributes.
    • -
+* {{HTMLElement("link")}} is similar to ``, but for metadata hyperlinks that are invisible to users. +* {{CSSxRef(":link")}} is a CSS pseudo-class that will match `` elements with valid `href` attributes. diff --git a/files/en-us/web/html/element/abbr/index.md b/files/en-us/web/html/element/abbr/index.md index 70dd862e0926a99..8d6011db19978be 100644 --- a/files/en-us/web/html/element/abbr/index.md +++ b/files/en-us/web/html/element/abbr/index.md @@ -17,163 +17,192 @@ tags: - semantics browser-compat: html.elements.abbr --- -
{{HTMLRef}}
+{{HTMLRef}} -

The <abbr> HTML element represents an abbreviation or acronym; the optional {{htmlattrxref("title")}} attribute can provide an expansion or description for the abbreviation. If present, title must contain this full description and nothing else.

+The **``** [HTML](/en-US/docs/Web/HTML) element represents an abbreviation or acronym; the optional {{htmlattrxref("title")}} attribute can provide an expansion or description for the abbreviation. If present, `title` must contain this full description and nothing else. -
{{EmbedInteractiveExample("pages/tabbed/abbr.html", "tabbed-shorter")}}
+{{EmbedInteractiveExample("pages/tabbed/abbr.html", "tabbed-shorter")}} - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Content categoriesFlow content, phrasing content, palpable content
Permitted contentPhrasing content
Tag omission{{no_tag_omission}}
Permitted parentsAny element that accepts phrasing content
Implicit ARIA roleNo corresponding role
Permitted ARIA rolesAny
DOM Interface{{domxref("HTMLElement")}}
+ Content categories + + Flow content, + phrasing content, palpable content +
Permitted content + Phrasing content +
Tag omission{{no_tag_omission}}
Permitted parents + Any element that accepts + phrasing content +
Implicit ARIA role + No corresponding role +
Permitted ARIA rolesAny
DOM Interface{{domxref("HTMLElement")}}
-

Attributes

+## Attributes -

This element only supports the global attributes. The {{htmlattrxref("title")}} attribute has a specific semantic meaning when used with the <abbr> element; it must contain a full human-readable description or expansion of the abbreviation. This text is often presented by browsers as a tooltip when the mouse cursor is hovered over the element.

+This element only supports the [global attributes](/en-US/docs/Web/HTML/Global_attributes). The {{htmlattrxref("title")}} attribute has a specific semantic meaning when used with the `` element; it *must* contain a full human-readable description or expansion of the abbreviation. This text is often presented by browsers as a tooltip when the mouse cursor is hovered over the element. -

Each <abbr> element you use is independent from all others; providing a title for one does not automatically attach the same expansion text to others with the same content text.

+Each `` element you use is independent from all others; providing a `title` for one does not automatically attach the same expansion text to others with the same content text. -

Usage notes

+## Usage notes -

Typical use cases

+### Typical use cases -

It's certainly not required that all abbreviations be marked up using <abbr>. There are, though, a few cases where it's helpful to do so:

+It's certainly not required that all abbreviations be marked up using ``. There are, though, a few cases where it's helpful to do so: -
    -
  • When an abbreviation is used and you want to provide an expansion or definition outside the flow of the document's content, use <abbr> with an appropriate {{htmlattrxref("title")}}.
    • -
  • To define an abbreviation which may be unfamiliar to the reader, present the term using <abbr> and either a title attribute or inline text providing the definition.
    • -
  • When an abbreviation's presence in the text needs to be semantically noted, the <abbr> element is useful. This can be used, in turn, for styling or scripting purposes.
    • -
  • You can use <abbr> in concert with {{HTMLElement("dfn")}} to establish definitions for terms which are abbreviations or acronyms. See the example {{anch("Defining an abbreviation")}} below.
    • -
+* When an abbreviation is used and you want to provide an expansion or definition outside the flow of the document's content, use `` with an appropriate {{htmlattrxref("title")}}. +* To define an abbreviation which may be unfamiliar to the reader, present the term using `` and either a `title` attribute or inline text providing the definition. +* When an abbreviation's presence in the text needs to be semantically noted, the `` element is useful. This can be used, in turn, for styling or scripting purposes. +* You can use `` in concert with {{HTMLElement("dfn")}} to establish definitions for terms which are abbreviations or acronyms. See the example {{anch("Defining an abbreviation")}} below. -

Grammar considerations

+### Grammar considerations -

In languages with {{interwiki("wikipedia", "grammatical number")}} (that is, languages where the number of items affects the grammar of a sentence), use the same grammatical number in your title attribute as inside your <abbr> element. This is especially important in languages with more than two numbers, such as Arabic, but is also relevant in English.

+In languages with {{interwiki("wikipedia", "grammatical number")}} (that is, languages where the number of items affects the grammar of a sentence), use the same grammatical number in your `title` attribute as inside your `` element. This is especially important in languages with more than two numbers, such as Arabic, but is also relevant in English. -

Default styling

+## Default styling -

The purpose of this element is purely for the convenience of the author and all browsers display it inline ({{cssxref('display')}}: inline) by default, though its default styling varies from one browser to another:

+The purpose of this element is purely for the convenience of the author and all browsers display it inline ({{cssxref('display')}}`: inline`) by default, though its default styling varies from one browser to another: -
    -
  • Some browsers, like Internet Explorer, do not style it differently than a {{HTMLElement("span")}} element.
    • -
  • Opera, Firefox, and some others add a dotted underline to the content of the element.
    • -
  • A few browsers not only add a dotted underline, but also put it in small caps; to avoid this styling, adding something like {{cssxref('font-variant')}}: none in the CSS takes care of this case.
    • -
+* Some browsers, like Internet Explorer, do not style it differently than a {{HTMLElement("span")}} element. +* Opera, Firefox, and some others add a dotted underline to the content of the element. +* A few browsers not only add a dotted underline, but also put it in small caps; to avoid this styling, adding something like {{cssxref('font-variant')}}`: none` in the CSS takes care of this case. -

Examples

+## Examples -

Marking up an abbreviation semantically

+### Marking up an abbreviation semantically -

To mark up an abbreviation without providing an expansion or description, use <abbr> without any attributes, as seen in this example.

+To mark up an abbreviation without providing an expansion or description, use `` without any attributes, as seen in this example. -

HTML

+#### HTML -
<p>Using <abbr>HTML</abbr> is fun and easy!</p>
+```html +

Using HTML is fun and easy!

+``` -

Result

+#### Result -

{{EmbedLiveSample("Marking_up_an_abbreviation_semantically")}}

+{{EmbedLiveSample("Marking_up_an_abbreviation_semantically")}} -

Styling abbreviations

+### Styling abbreviations -

You can use CSS to set a custom style to be used for abbreviations, as seen in this simple example.

+You can use CSS to set a custom style to be used for abbreviations, as seen in this simple example. -

HTML

+#### HTML -
<p>Using <abbr>CSS</abbr>, you can style your abbreviations!</p>
+```html +

Using CSS, you can style your abbreviations!

+``` -

CSS

+#### CSS -
abbr {
+```css
+abbr {
   font-variant: all-small-caps;
-}
+} +``` -

Result

+#### Result -

{{EmbedLiveSample("Styling_abbreviations")}}

+{{EmbedLiveSample("Styling_abbreviations")}} -

Providing an expansion

+### Providing an expansion -

Adding a {{htmlattrxref("title")}} attribute lets you provide an expansion or definition for the abbreviation or acronym.

+Adding a {{htmlattrxref("title")}} attribute lets you provide an expansion or definition for the abbreviation or acronym. -

HTML

+#### HTML -
<p>Ashok's joke made me <abbr title="Laugh Out Loud">LOL</abbr> big
-time.</p>
+```html +

Ashok's joke made me LOL big +time.

+``` -

Result

+#### Result -

{{EmbedLiveSample("Providing_an_expansion")}}

+{{EmbedLiveSample("Providing_an_expansion")}} -

Defining an abbreviation

+### Defining an abbreviation -

You can use <abbr> in tandem with {{HTMLElement("dfn")}} to more formally define an abbreviation, as shown here.

+You can use `` in tandem with {{HTMLElement("dfn")}} to more formally define an abbreviation, as shown here. -

HTML

+#### HTML -
<p><dfn id="html"><abbr title="HyperText Markup Language">HTML</abbr>
-</dfn> is a markup language used to create the semantics and structure
-of a web page.</p>
+```html
+
HTML
+ is a markup language used to create the semantics and structure
+of a web page.

 
-<p>A <dfn id="spec">Specification</dfn>
-(<abbr title="Specification">spec</abbr>) is a document that outlines
+
A Specification
+(spec) is a document that outlines
 in detail how a technology or API is intended to function and how it is
-accessed.</p>
+accessed.

+``` -

Result

+#### Result -

{{EmbedLiveSample("Defining_an_abbreviation", 600, 120)}}

+{{EmbedLiveSample("Defining_an_abbreviation", 600, 120)}} -

Accessibility concerns

+## Accessibility concerns -

Spelling out the acronym or abbreviation in full the first time it is used on a page is beneficial for helping people understand it, especially if the content is technical or industry jargon.

+Spelling out the acronym or abbreviation in full the first time it is used on a page is beneficial for helping people understand it, especially if the content is technical or industry jargon. -

Example

+#### Example -
<p>JavaScript Object Notation (<abbr>JSON</abbr>) is a lightweight data-interchange format.</p>
-
+```html +

JavaScript Object Notation (JSON) is a lightweight data-interchange format.

+``` -

This is especially helpful for people who are unfamiliar with the terminology or concepts discussed in the content, people who are new to the language, and people with cognitive concerns.

+This is especially helpful for people who are unfamiliar with the terminology or concepts discussed in the content, people who are new to the language, and people with cognitive concerns. -

Specifications

+## Specifications -

{{Specifications}}

+{{Specifications}} -

Browser compatibility

+## Browser compatibility -

{{Compat}}

+{{Compat}} -

See also

+## See also - +* [Using the `` element](/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#abbreviations) diff --git a/files/en-us/web/html/element/acronym/index.md b/files/en-us/web/html/element/acronym/index.md index b9347651c7b65dc..8992a09650e2992 100644 --- a/files/en-us/web/html/element/acronym/index.md +++ b/files/en-us/web/html/element/acronym/index.md @@ -4,59 +4,54 @@ slug: Web/HTML/Element/acronym tags: - Element - HTML - - 'HTML:Flow content' + - HTML:Flow content - Deprecated - Reference - Web browser-compat: html.elements.acronym --- -
{{deprecated_header}}
+{{deprecated_header}} -

Summary

+## Summary -

The <acronym> HTML element allows authors to clearly indicate a sequence of characters that compose an acronym or abbreviation for a word.

+The **``** [HTML](/en-US/docs/Web/HTML) element allows authors to clearly indicate a sequence of characters that compose an acronym or abbreviation for a word. -
-

Warning: Don't use this element. Use the {{HTMLElement("abbr")}} element instead.

-
+> **Warning:** Don't use this element. Use the {{HTMLElement("abbr")}} element instead. -

Attributes

+## Attributes -

This element only has global attributes, which are common to all elements.

+This element only has [global attributes](/en-US/docs/Web/HTML/Global_attributes "HTML/global attributes"), which are common to all elements. -

DOM Interface

+## DOM Interface -

This element implements the {{domxref('HTMLElement')}} interface.

+This element implements the {{domxref('HTMLElement')}} interface. -

Example

+## Example -
<p>The <acronym title="World Wide Web">WWW</acronym> is only a component of the Internet.</p>
-
+```html +

The WWW is only a component of the Internet.

+``` -

Default styling

+## Default styling -

Though the purpose of this tag is purely for the convenience of the author, its default styling varies from one browser to another:

+Though the purpose of this tag is purely for the convenience of the author, its default styling varies from one browser to another: -
    -
  • Some browsers, like Internet Explorer, do not style it differently than a {{HTMLElement("span")}} element.
    • -
  • Opera, Firefox, Chrome, and some others add a dotted underline to the content of the element.
    • -
  • A few browsers not only add a dotted underline, but also put it in small caps; to avoid this styling, adding something like {{cssxref('font-variant')}}: none in the CSS takes care of this case.
    • -
+* Some browsers, like Internet Explorer, do not style it differently than a {{HTMLElement("span")}} element. +* Opera, Firefox, Chrome, and some others add a dotted underline to the content of the element. +* A few browsers not only add a dotted underline, but also put it in small caps; to avoid this styling, adding something like {{cssxref('font-variant')}}`: none` in the CSS takes care of this case. -

It is therefore recommended that web authors either explicitly style this element, or accept some cross-browser variation.

+It is therefore recommended that web authors either explicitly style this element, or accept some cross-browser variation. -

Specifications

+## Specifications -

{{Specifications}}

+{{Specifications}} -

Browser compatibility

+## Browser compatibility -

{{Compat}}

+{{Compat}} -

See also

+## See also -
    -
  • The {{HTMLElement("abbr")}} HTML element
    • -
+* The {{HTMLElement("abbr")}} HTML element -
{{HTMLRef}}
+{{HTMLRef}} diff --git a/files/en-us/web/html/element/address/index.md b/files/en-us/web/html/element/address/index.md index 006c899a9b48c87..c214db0cb3a1d27 100644 --- a/files/en-us/web/html/element/address/index.md +++ b/files/en-us/web/html/element/address/index.md @@ -17,95 +17,130 @@ tags: - Web browser-compat: html.elements.address --- -
{{HTMLRef}}
+{{HTMLRef}} -

The <address> HTML element indicates that the enclosed HTML provides contact information for a person or people, or for an organization.

+The **`
`** [HTML](/en-US/docs/Web/HTML) element indicates that the enclosed HTML provides contact information for a person or people, or for an organization. -
{{EmbedInteractiveExample("pages/tabbed/address.html", "tabbed-standard")}}
+{{EmbedInteractiveExample("pages/tabbed/address.html", "tabbed-standard")}} -

The contact information provided by an <address> element's contents can take whatever form is appropriate for the context, and may include any type of contact information that is needed, such as a physical address, URL, email address, phone number, social media handle, geographic coordinates, and so forth. The <address> element should include the name of the person, people, or organization to which the contact information refers.

+The contact information provided by an `
` element's contents can take whatever form is appropriate for the context, and may include any type of contact information that is needed, such as a physical address, URL, email address, phone number, social media handle, geographic coordinates, and so forth. The `
` element should include the name of the person, people, or organization to which the contact information refers. -

<address> can be used in a variety of contexts, such as providing a business's contact information in the page header, or indicating the author of an article by including an <address> element within the {{HTMLElement("article")}}.

+`
` can be used in a variety of contexts, such as providing a business's contact information in the page header, or indicating the author of an article by including an `
` element within the {{HTMLElement("article")}}. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Content categoriesFlow content, palpable content.
Permitted contentFlow content, but with no nested <address> element, no heading content ({{HTMLElement("hgroup")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}), no sectioning content ({{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}}), and no {{HTMLElement("header")}} or {{HTMLElement("footer")}} element.
Tag omission{{no_tag_omission}}
Permitted parentsAny element that accepts flow content, but always excluding <address> elements (according to the logical principle of symmetry, if <address> tag, as a parent, can not have nested <address> element, then the same <address> content can not have <address> tag as its parent).
Implicit ARIA roleNo corresponding role
Permitted ARIA rolesAny
DOM interface{{domxref("HTMLElement")}} Prior to Gecko 2.0 (Firefox 4), Gecko implemented this element using the {{domxref("HTMLSpanElement")}} interface
+ Content categories + + Flow content, palpable content. +
Permitted content + Flow content, but with no nested <address> element, no heading + content ({{HTMLElement("hgroup")}}, {{HTMLElement("h1")}}, + {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, + {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, + {{HTMLElement("h6")}}), no sectioning content + ({{HTMLElement("article")}}, {{HTMLElement("aside")}}, + {{HTMLElement("section")}}, {{HTMLElement("nav")}}), and + no {{HTMLElement("header")}} or {{HTMLElement("footer")}} + element. +
Tag omission{{no_tag_omission}}
Permitted parents + Any element that accepts + flow content, but always excluding <address> elements (according + to the logical principle of symmetry, if + <address> tag, as a parent, can not have nested + <address> element, then the same + <address> content can not have + <address> tag as its parent). +
Implicit ARIA role + No corresponding role +
Permitted ARIA rolesAny
DOM interface + {{domxref("HTMLElement")}} Prior to Gecko 2.0 (Firefox 4), + Gecko implemented this element using the + {{domxref("HTMLSpanElement")}} interface +
-

Attributes

+## Attributes -

This element only includes the global attributes.

+This element only includes the [global attributes](/en-US/docs/Web/HTML/Global_attributes "HTML/Global attributes"). -

Usage notes

+## Usage notes -
    -
  • The <address> element can only be used to represent the contact information for its nearest {{HTMLElement("article")}} or {{HTMLElement("body")}} element ancestor.
    • -
  • This element should not contain more information than the contact information, like a publication date (which belongs in a {{HTMLElement("time")}} element).
    • -
  • Typically an <address> element can be placed inside the {{HTMLElement("footer")}} element of the current section, if any.
    • -
+* The `
` element can only be used to represent the contact information for its nearest {{HTMLElement("article")}} or {{HTMLElement("body")}} element ancestor. +* This element should not contain more information than the contact information, like a publication date (which belongs in a {{HTMLElement("time")}} element). +* Typically an `
` element can be placed inside the {{HTMLElement("footer")}} element of the current section, if any. -

Examples

+## Examples -

This example demonstrates the use of <address> to demarcate the contact information for an article's author.

+This example demonstrates the use of `
` to demarcate the contact information for an article's author. -
  <address>
-    You can contact author at <a href="http://www.somedomain.com/contact">
-    www.somedomain.com</a>.<br>
-    If you see any bugs, please <a href="mailto:webmaster@somedomain.com">
-    contact webmaster</a>.<br>
-    You may also want to visit us:<br>
-    Mozilla Foundation<br>
-    331 E Evelyn Ave<br>
-    Mountain View, CA 94041<br>
+```html
+  

+    You can contact author at 
+    www.somedomain.com.

+    If you see any bugs, please 
+    contact webmaster.

+    You may also want to visit us:

+    Mozilla Foundation

+    331 E Evelyn Ave

+    Mountain View, CA 94041

     USA
-  </address>
-
+
+``` -

Result

+### Result -

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

+{{EmbedLiveSample("Examples", "300", "200")}} -

Although it renders text with the same default styling as the {{HTMLElement("i")}} or {{HTMLElement("em")}} elements, it is more appropriate to use <address> when dealing with contact information, as it conveys additional semantic information.

+Although it renders text with the same default styling as the {{HTMLElement("i")}} or {{HTMLElement("em")}} elements, it is more appropriate to use `
` when dealing with contact information, as it conveys additional semantic information. -

Specifications

+## Specifications -

{{Specifications}}

+{{Specifications}} -

Browser compatibility

+## Browser compatibility -

{{Compat}}

+{{Compat}} -

See also

+## See also -
    -
  • Others section-related elements: {{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 and outlines of an HTML5 document.
    • -
+* Others section-related elements: {{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 and outlines of an HTML5 document](/en-US/docs/Web/HTML/Element/Heading_Elements). diff --git a/files/en-us/web/html/element/applet/index.md b/files/en-us/web/html/element/applet/index.md index 2aed003e5fe7285..4121b48381cf5eb 100644 --- a/files/en-us/web/html/element/applet/index.md +++ b/files/en-us/web/html/element/applet/index.md @@ -11,88 +11,112 @@ tags: - applet browser-compat: html.elements.applet --- -

{{HTMLRef}}{{deprecated_header}}

+{{HTMLRef}}{{deprecated_header}} -

The obsolete HTML Applet Element (<applet>) embeds a Java applet into the document; this element has been deprecated in favor of {{HTMLElement("object")}}.

+The obsolete **HTML Applet Element** (**``**) embeds a Java applet into the document; this element has been deprecated in favor of {{HTMLElement("object")}}. -

Use of Java applets on the Web is deprecated; most browsers no longer support use of plug-ins, including the Java plug-in.

+Use of Java applets on the Web is deprecated; most browsers no longer support use of plug-ins, including the Java plug-in. - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + +
Content categoriesFlow content, phrasing content, embedded content, interactive content, palpable content.
Permitted contentZero or more {{HTMLElement("param")}} elements, then transparent.
Tag omissionNone, both the starting and ending tag are mandatory.
Permitted parentsAny element that accepts embedded content.
DOM interface{{DOMxRef("HTMLAppletElement")}}
+ Content categories + + Flow content, + phrasing content, + embedded content, interactive content, palpable content. +
Permitted content + Zero or more {{HTMLElement("param")}} elements, then + transparent. +
Tag omissionNone, both the starting and ending tag are mandatory.
Permitted parents + Any element that accepts + embedded content. +
DOM interface{{DOMxRef("HTMLAppletElement")}}
-

Attributes

+## Attributes -
-
{{HTMLAttrDef("align")}}
-
This attribute is used to position the applet on the page relative to content that might flow around it. The HTML 4.01 specification defines values of bottom, left, middle, right, and top, whereas Microsoft and Netscape also might support absbottom, absmiddle, baseline, center, and texttop.
-
{{HTMLAttrDef("alt")}}
-
This attribute causes a descriptive text alternate to be displayed on browsers that do not support Java. Page designers should also remember that content enclosed within the <applet> element may also be rendered as alternative text.
-
{{HTMLAttrDef("archive")}}
-
This attribute refers to an archived or compressed version of the applet and its associated class files, which might help reduce download time.
-
{{HTMLAttrDef("code")}}
-
This attribute specifies the URL of the applet's class file to be loaded and executed. Applet filenames are identified by a .class filename extension. The URL specified by code might be relative to the codebase attribute.
-
{{HTMLAttrDef("codebase")}}
-
This attribute gives the absolute or relative URL of the directory where applets' .class files referenced by the code attribute are stored.
-
{{HTMLAttrDef("datafld")}}
-
This attribute, supported by Internet Explorer 4 and higher, specifies the column name from the data source object that supplies the bound data. This attribute might be used to specify the various {{HTMLElement("param")}} elements passed to the Java applet.
-
{{HTMLAttrDef("datasrc")}}
-
Like datafld, this attribute is used for data binding under Internet Explorer 4. It indicates the id of the data source object that supplies the data that is bound to the {{HTMLElement("param")}} elements associated with the applet.
-
{{HTMLAttrDef("height")}}
-
This attribute specifies the height, in pixels, that the applet needs.
-
{{HTMLAttrDef("hspace")}}
-
This attribute specifies additional horizontal space, in pixels, to be reserved on either side of the applet.
-
{{HTMLAttrDef("mayscript")}}
-
In the Netscape implementation, this attribute allows access to an applet by programs in a scripting language embedded in the document.
-
{{HTMLAttrDef("name")}}
-
This attribute assigns a name to the applet so that it can be identified by other resources; particularly scripts.
-
{{HTMLAttrDef("object")}}
-
This attribute specifies the URL of a serialized representation of an applet.
-
{{HTMLAttrDef("src")}}
-
As defined for Internet Explorer 4 and higher, this attribute specifies a URL for an associated file for the applet. The meaning and use is unclear and not part of the HTML standard.
-
{{HTMLAttrDef("vspace")}}
-
This attribute specifies additional vertical space, in pixels, to be reserved above and below the applet.
-
{{HTMLAttrDef("width")}}
-
This attribute specifies in pixels the width that the applet needs.
-
+* {{HTMLAttrDef("align")}} + * : This attribute is used to position the applet on the page relative to content that might flow around it. The HTML 4.01 specification defines values of `bottom`, `left`, `middle`, `right`, and `top`, whereas Microsoft and Netscape also might support `absbottom`, `absmiddle`, `baseline`, `center`, and `texttop`. +* {{HTMLAttrDef("alt")}} + * : This attribute causes a descriptive text alternate to be displayed on browsers that do not support Java. Page designers should also remember that content enclosed within the `` element may also be rendered as alternative text. +* {{HTMLAttrDef("archive")}} + * : This attribute refers to an archived or compressed version of the applet and its associated class files, which might help reduce download time. +* {{HTMLAttrDef("code")}} + * : This attribute specifies the URL of the applet's class file to be loaded and executed. Applet filenames are identified by a .class filename extension. The URL specified by code might be relative to the `codebase` attribute. +* {{HTMLAttrDef("codebase")}} + * : This attribute gives the absolute or relative URL of the directory where applets' .class files referenced by the code attribute are stored. +* {{HTMLAttrDef("datafld")}} + * : This attribute, supported by Internet Explorer 4 and higher, specifies the column name from the data source object that supplies the bound data. This attribute might be used to specify the various {{HTMLElement("param")}} elements passed to the Java applet. +* {{HTMLAttrDef("datasrc")}} + * : Like `datafld`, this attribute is used for data binding under Internet Explorer 4. It indicates the id of the data source object that supplies the data that is bound to the {{HTMLElement("param")}} elements associated with the applet. +* {{HTMLAttrDef("height")}} + * : This attribute specifies the height, in pixels, that the applet needs. +* {{HTMLAttrDef("hspace")}} + * : This attribute specifies additional horizontal space, in pixels, to be reserved on either side of the applet. +* {{HTMLAttrDef("mayscript")}} + * : In the Netscape implementation, this attribute allows access to an applet by programs in a scripting language embedded in the document. +* {{HTMLAttrDef("name")}} + * : This attribute assigns a name to the applet so that it can be identified by other resources; particularly scripts. +* {{HTMLAttrDef("object")}} + * : This attribute specifies the URL of a serialized representation of an applet. +* {{HTMLAttrDef("src")}} + * : As defined for Internet Explorer 4 and higher, this attribute specifies a URL for an associated file for the applet. The meaning and use is unclear and not part of the HTML standard. +* {{HTMLAttrDef("vspace")}} + * : This attribute specifies additional vertical space, in pixels, to be reserved above and below the applet. +* {{HTMLAttrDef("width")}} + * : This attribute specifies in pixels the width that the applet needs. -

Example

+## Example -

HTML

+### HTML -
<applet code="game.class" align="left" archive="game.zip" height="250" width="350">
-  <param name="difficulty" value="easy">
-  <b>Sorry, you need Java to play this game.</b>
-</applet>
-
+```html + +  +  Sorry, you need Java to play this game. + +``` -

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

+{{EmbedLiveSample("Example", "100%", 300)}} -

Specifications

+## Specifications -

{{Specifications}}

+{{Specifications}} -

Browser compatibility

+## Browser compatibility -

{{Compat}}

+{{Compat}} diff --git a/files/en-us/web/html/element/area/index.md b/files/en-us/web/html/element/area/index.md index 676ba22adc33086..3f705597116385d 100644 --- a/files/en-us/web/html/element/area/index.md +++ b/files/en-us/web/html/element/area/index.md @@ -12,136 +12,152 @@ tags: - Web browser-compat: html.elements.area --- -
{{HTMLRef}}
+{{HTMLRef}} -

The <area> HTML element defines an area inside an image map that has predefined clickable areas. An image map allows geometric areas on an image to be associated with {{Glossary("Hyperlink", "hypertext link")}}.

+The **``** [HTML](/en-US/docs/Web/HTML) element defines an area inside an image map that has predefined clickable areas. An *image map* allows geometric areas on an image to be associated with {{Glossary("Hyperlink", "hypertext link")}}. -

This element is used only within a {{HTMLElement("map")}} element.

+This element is used only within a {{HTMLElement("map")}} element. -
{{EmbedInteractiveExample("pages/tabbed/area.html", "tabbed-taller")}}
+{{EmbedInteractiveExample("pages/tabbed/area.html", "tabbed-taller")}} - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Content categoriesFlow content, phrasing content.
Permitted contentNone, it is an {{Glossary("empty element")}}.
Tag omissionMust have a start tag and must not have an end tag.
Permitted parentsAny element that accepts phrasing content. The <area> element must have an ancestor {{HTMLElement("map")}}, but it need not be a direct parent.
Implicit ARIA role{{ARIARole("link")}} when {{htmlattrxref("href", "area")}} attribute is present, otherwise no corresponding role
Permitted ARIA rolesNo role permitted
DOM interface{{domxref("HTMLAreaElement")}}
+ Content categories + + Flow content, + phrasing content. +
Permitted contentNone, it is an {{Glossary("empty element")}}.
Tag omissionMust have a start tag and must not have an end tag.
Permitted parents + Any element that accepts + phrasing content. The <area> element must have an ancestor + {{HTMLElement("map")}}, but it need not be a direct parent. +
Implicit ARIA role + {{ARIARole("link")}} when + {{htmlattrxref("href", "area")}} attribute is present, + otherwise + no corresponding role +
Permitted ARIA rolesNo role permitted
DOM interface{{domxref("HTMLAreaElement")}}
-

Attributes

- -

This element's attributes include the global attributes.

- -
-
{{htmlattrdef("alt")}}
-
A text string alternative to display on browsers that do not display images. The text should be phrased so that it presents the user with the same kind of choice as the image would offer when displayed without the alternative text. This attribute is required only if the {{htmlattrxref("href", "area")}} attribute is used.
-
{{htmlattrdef("coords")}}
-

The coords attribute details the coordinates of the shape attribute in size, shape, and placement of an <area>.

-
    -
  • rect: the value is x1,y1,x2,y2. Value specifies the coordinates of the top-left and bottom-right corner of the rectangle.
    - For example: <area shape="rect" coords="0,0,253,27" href="#" target="_blank" alt="Mozilla"> The coords in the above example specify: 0,0 as the top-left corner and 253,27 as the bottom-right corner of the rectangle.
    • -
  • circle: the value is x,y,radius. Value specifies the coordinates of the circle center and the radius.
    - For example: <area shape="circle" coords="130,136,60" href="#" target="_blank" alt="MDN">
    • -
  • poly: the value is x1,y1,x2,y2,..,xn,yn. Value specifies the coordinates of the edges of the polygon. If the first and last coordinate pairs are not the same, the browser will add the last coordinate pair to close the polygon
    • -
  • default: defines the entire region
    • -
- The values are numbers of CSS pixels.
-
{{htmlattrdef("download")}}
-
This attribute, if present, indicates that the author intends the hyperlink to be used for downloading a resource. See {{HTMLElement("a")}} for a full description of the {{htmlattrxref("download", "a")}} attribute.
-
{{htmlattrdef("href")}}
-
The hyperlink target for the area. Its value is a valid URL. This attribute may be omitted; if so, the <area> element does not represent a hyperlink.
-
{{htmlattrdef("hreflang")}}
-
Indicates the language of the linked resource. Allowed values are determined by BCP47. Use this attribute only if the {{htmlattrxref("href", "area")}} attribute is present.
-
{{htmlattrdef("ping")}}
-
Contains a space-separated list of URLs to which, when the hyperlink is followed, {{HTTPMethod("POST")}} requests with the body PING will be sent by the browser (in the background). Typically used for tracking.
-
{{htmlattrdef("referrerpolicy")}}
-
A string indicating which referrer to use when fetching the resource: -
    -
  • no-referrer: The {{HTTPHeader("Referer")}} header will not be sent.
    • -
  • no-referrer-when-downgrade: The {{HTTPHeader("Referer")}} header will not be sent to {{Glossary("origin")}}s without {{Glossary("TLS")}} ({{Glossary("HTTPS")}}).
    • -
  • origin: The sent referrer will be limited to the origin of the referring page: its scheme, {{Glossary("host")}}, and {{Glossary("port")}}.
    • -
  • origin-when-cross-origin: The referrer sent to other origins will be limited to the scheme, the host, and the port. Navigations on the same origin will still include the path.
    • -
  • same-origin: A referrer will be sent for {{Glossary("Same-origin policy", "same origin")}}, but cross-origin requests will contain no referrer information.
    • -
  • strict-origin: Only send the origin of the document as the referrer when the protocol security level stays the same (HTTPS→HTTPS), but don't send it to a less secure destination (HTTPS→HTTP).
    • -
  • strict-origin-when-cross-origin (default): Send a full URL when performing a same-origin request, only send the origin when the protocol security level stays the same (HTTPS→HTTPS), and send no header to a less secure destination (HTTPS→HTTP).
    • -
  • unsafe-url: The referrer will include the origin and the path (but not the fragment, password, or username). This value is unsafe, because it leaks origins and paths from TLS-protected resources to insecure origins.
    • -
-
-
{{htmlattrdef("rel")}}
-
For anchors containing the {{htmlattrxref("href", "area")}} attribute, this attribute specifies the relationship of the target object to the link object. The value is a space-separated list of link types values. The values and their semantics will be registered by some authority that might have meaning to the document author. The default relationship, if no other is given, is void. Use this attribute only if the {{htmlattrxref("href", "area")}} attribute is present.
-
{{htmlattrdef("shape")}}
-
The shape of the associated hot spot. The specifications for HTML defines the values rect, which defines a rectangular region; circle, which defines a circular region; poly, which defines a polygon; and default, which indicates the entire region beyond any defined shapes.
-
{{htmlattrdef("target")}}
-
A keyword or author-defined name of the {{Glossary("browsing context")}} to display the linked resource. The following keywords have special meanings: -
    -
  • _self (default): Show the resource in the current browsing context.
    • -
  • _blank: Show the resource in a new, unnamed browsing context.
    • -
  • _parent: Show the resource in the parent browsing context of the current one, if the current page is inside a frame. If there is no parent, acts the same as _self.
    • -
  • _top: Show the resource in the topmost browsing context (the browsing context that is an ancestor of the current one and has no parent). If there is no parent, acts the same as _self.
    • -
-

Use this attribute only if the {{htmlattrxref("href", "area")}} attribute is present.

-
-

Note: Setting target="_blank" on <area> elements implicitly provides the same rel behavior as setting rel="noopener" which does not set window.opener. See browser compatibility for support status.

-
-
-
- -

Deprecated attributes

- -
-
{{htmlattrdef("name")}} {{deprecated_inline}}
-
Define a names for the clickable area so that it can be scripted by older browsers.
-
{{htmlattrdef("nohref")}} {{deprecated_inline}}
-
Indicates that no hyperlink exists for the associated area. -
-

Note: Since HTML5, omitting the href attribute is sufficient.

-
-
-
{{htmlattrdef("type")}} {{deprecated_inline}}
-
Hint for the type of the referenced resource. Ignored by browsers.
-
- -

Examples

- -
<map name="primary">
-  <area shape="circle" coords="75,75,75" href="left.html" alt="Click to go Left">
-  <area shape="circle" coords="275,75,75" href="right.html" alt="Click to go Right">
-</map>
-<img usemap="#primary" src="https://via.placeholder.com/350x150" alt="350 x 150 pic">
- -

Result

- -

{{ EmbedLiveSample('Examples', 360, 160) }}

- -

Specifications

- -

{{Specifications}}

- -

Browser compatibility

- -

{{Compat}}

+## Attributes + +This element's attributes include the [global attributes](/en-US/docs/Web/HTML/Global_attributes). + +* {{htmlattrdef("alt")}} + * : A text string alternative to display on browsers that do not display images. The text should be phrased so that it presents the user with the same kind of choice as the image would offer when displayed without the alternative text. This attribute is required only if the {{htmlattrxref("href", "area")}} attribute is used. +* {{htmlattrdef("coords")}} + * : The `coords` attribute details the coordinates of the [`shape`](#attr-shape) attribute in size, shape, and placement of an ``. + + * `rect`: the value is `x1,y1,x2,y2`. Value specifies the coordinates of the top-left and bottom-right corner of the rectangle. + For example: `Mozilla` The coords in the above example specify: 0,0 as the top-left corner and 253,27 as the bottom-right corner of the rectangle. + * `circle`: the value is `x,y,radius`. Value specifies the coordinates of the circle center and the radius. + For example: `MDN` + * `poly`: the value is `x1,y1,x2,y2,..,xn,yn`. Value specifies the coordinates of the edges of the polygon. If the first and last coordinate pairs are not the same, the browser will add the last coordinate pair to close the polygon + * `default`: defines the entire region + + The values are numbers of CSS pixels. +* {{htmlattrdef("download")}} + * : This attribute, if present, indicates that the author intends the hyperlink to be used for downloading a resource. See {{HTMLElement("a")}} for a full description of the {{htmlattrxref("download", "a")}} attribute. +* {{htmlattrdef("href")}} + * : The hyperlink target for the area. Its value is a valid URL. This attribute may be omitted; if so, the `` element does not represent a hyperlink. +* {{htmlattrdef("hreflang")}} + * : Indicates the language of the linked resource. Allowed values are determined by [BCP47](https://www.ietf.org/rfc/bcp/bcp47.txt "Tags for Identifying Languages"). Use this attribute only if the {{htmlattrxref("href", "area")}} attribute is present. +* {{htmlattrdef("ping")}} + * : Contains a space-separated list of URLs to which, when the hyperlink is followed, {{HTTPMethod("POST")}} requests with the body `PING` will be sent by the browser (in the background). Typically used for tracking. +* {{htmlattrdef("referrerpolicy")}} + * : A string indicating which referrer to use when fetching the resource: + + * `no-referrer`: The {{HTTPHeader("Referer")}} header will not be sent. + * `no-referrer-when-downgrade`: The {{HTTPHeader("Referer")}} header will not be sent to {{Glossary("origin")}}s without {{Glossary("TLS")}} ({{Glossary("HTTPS")}}). + * `origin`: The sent referrer will be limited to the origin of the referring page: its [scheme](/en-US/docs/Learn/Common_questions/What_is_a_URL), {{Glossary("host")}}, and {{Glossary("port")}}. + * `origin-when-cross-origin`: The referrer sent to other origins will be limited to the scheme, the host, and the port. Navigations on the same origin will still include the path. + * `same-origin`: A referrer will be sent for {{Glossary("Same-origin policy", "same origin")}}, but cross-origin requests will contain no referrer information. + * `strict-origin`: Only send the origin of the document as the referrer when the protocol security level stays the same (HTTPS→HTTPS), but don't send it to a less secure destination (HTTPS→HTTP). + * `strict-origin-when-cross-origin` (default): Send a full URL when performing a same-origin request, only send the origin when the protocol security level stays the same (HTTPS→HTTPS), and send no header to a less secure destination (HTTPS→HTTP). + * `unsafe-url`: The referrer will include the origin *and* the path (but not the [fragment](/en-US/docs/Web/API/HTMLAnchorElement/hash), [password](/en-US/docs/Web/API/HTMLAnchorElement/password), or [username](/en-US/docs/Web/API/HTMLAnchorElement/username)). **This value is unsafe**, because it leaks origins and paths from TLS-protected resources to insecure origins. +* {{htmlattrdef("rel")}} + * : For anchors containing the {{htmlattrxref("href", "area")}} attribute, this attribute specifies the relationship of the target object to the link object. The value is a space-separated list of [link types values](/en-US/docs/Web/HTML/Link_types). The values and their semantics will be registered by some authority that might have meaning to the document author. The default relationship, if no other is given, is void. Use this attribute only if the {{htmlattrxref("href", "area")}} attribute is present. +* {{htmlattrdef("shape")}} + * : The shape of the associated hot spot. The specifications for HTML defines the values `rect`, which defines a rectangular region; `circle`, which defines a circular region; `poly`, which defines a polygon; and `default`, which indicates the entire region beyond any defined shapes. +* {{htmlattrdef("target")}} + * : A keyword or author-defined name of the {{Glossary("browsing context")}} to display the linked resource. The following keywords have special meanings: + + * `_self` (default): Show the resource in the current browsing context. + * `_blank`: Show the resource in a new, unnamed browsing context. + * `_parent`: Show the resource in the parent browsing context of the current one, if the current page is inside a frame. If there is no parent, acts the same as `_self`. + * `_top`: Show the resource in the topmost browsing context (the browsing context that is an ancestor of the current one and has no parent). If there is no parent, acts the same as `_self`. + + Use this attribute only if the {{htmlattrxref("href", "area")}} attribute is present. + + > **Note:** Setting `target="_blank"` on `` elements implicitly provides the same `rel` behavior as setting [`rel="noopener"`](/en-US/docs/Web/HTML/Link_types/noopener) which does not set `window.opener`. See [browser compatibility](#browser_compatibility) for support status. + +### Deprecated attributes + +* {{htmlattrdef("name")}} {{deprecated_inline}} + * : Define a names for the clickable area so that it can be scripted by older browsers. +* {{htmlattrdef("nohref")}} {{deprecated_inline}} + * : Indicates that no hyperlink exists for the associated area. + + > **Note:** Since HTML5, omitting the `href` attribute is sufficient. +* {{htmlattrdef("type")}} {{deprecated_inline}} + * : Hint for the type of the referenced resource. Ignored by browsers. + +## Examples + +```html + + Click to go Left + Click to go Right + +350 x 150 pic +``` + +### Result + +{{ EmbedLiveSample('Examples', 360, 160) }} + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} diff --git a/files/en-us/web/html/element/article/index.md b/files/en-us/web/html/element/article/index.md index 153853eb693b2bd..5cc91d40f7cf642 100644 --- a/files/en-us/web/html/element/article/index.md +++ b/files/en-us/web/html/element/article/index.md @@ -9,114 +9,147 @@ tags: - Web browser-compat: html.elements.article --- -
{{HTMLRef}}
+{{HTMLRef}} -

The <article> HTML element represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable (e.g., in syndication). Examples include: a forum post, a magazine or newspaper article, or a blog entry, a product card, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.

+The **`
`** [HTML](/en-US/docs/Web/HTML) element represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable (e.g., in syndication). Examples include: a forum post, a magazine or newspaper article, or a blog entry, a product card, a user-submitted comment, an interactive widget or gadget, or any other independent item of content. -
{{EmbedInteractiveExample("pages/tabbed/article.html", "tabbed-standard")}}
+{{EmbedInteractiveExample("pages/tabbed/article.html", "tabbed-standard")}} -

A given document can have multiple articles in it; for example, on a blog that shows the text of each article one after another as the reader scrolls, each post would be contained in an <article> element, possibly with one or more <section>s within.

+A given document can have multiple articles in it; for example, on a blog that shows the text of each article one after another as the reader scrolls, each post would be contained in an `
` element, possibly with one or more `
`s within. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Content categoriesFlow content, sectioning content, palpable content
Permitted contentFlow content.
Tag omission{{no_tag_omission}}
Permitted parentsAny element that accepts flow content. Note that an <article> element must not be a descendant of an {{HTMLElement("address")}} element.
Implicit ARIA rolearticle
Permitted ARIA roles{{ARIARole("application")}}, {{ARIARole("document")}}, {{ARIARole("feed")}}, {{ARIARole("main")}}, {{ARIARole("none")}}, {{ARIARole("presentation")}}, {{ARIARole("region")}}
DOM interface{{domxref("HTMLElement")}}
+ Content categories + + Flow content, + sectioning content, + palpable content +
Permitted content + Flow content. +
Tag omission{{no_tag_omission}}
Permitted parents + Any element that accepts + flow content. Note that an <article> element must not be a + descendant of an {{HTMLElement("address")}} element. +
Implicit ARIA role + article +
Permitted ARIA roles + {{ARIARole("application")}}, {{ARIARole("document")}}, + {{ARIARole("feed")}}, {{ARIARole("main")}}, + {{ARIARole("none")}}, {{ARIARole("presentation")}}, + {{ARIARole("region")}} +
DOM interface{{domxref("HTMLElement")}}
-

Attributes

- -

This element only includes the global attributes.

- -

Usage notes

- -
    -
  • Each <article> should be identified, typically by including a heading (<h1>-<h6> element) as a child of the <article> element.
    • -
  • When an <article> element is nested, the inner element represents an article related to the outer element. For example, the comments of a blog post can be <article> elements nested in the <article> representing the blog post.
    • -
  • Author information of an <article> element can be provided through the {{HTMLElement("address")}} element, but it doesn't apply to nested <article> elements.
    • -
  • The publication date and time of an <article> element can be described using the {{htmlattrxref("datetime", "time")}} attribute of a {{HTMLElement("time")}} element. Note that the {{htmlattrxref("pubdate", "time")}} attribute of {{HTMLElement("time")}} is no longer a part of the {{glossary("W3C")}} {{glossary("HTML5")}} standard.
    • -
- -

Examples

- -
<article class="film_review">
-  <h2>Jurassic Park</h2>
-  <section class="main_review">
-    <h3>Review</h3>
-    <p>Dinos were great!</p>
-  </section>
-  <section class="user_reviews">
-    <h3>User reviews</h3>
-    <article class="user_review">
-      <h4>Too scary!</h4>
-      <p>Way too scary for me.</p>
-      <footer>
-        <p>
+## Attributes
+
+This element only includes the [global attributes](/en-US/docs/Web/HTML/Global_attributes "HTML/Global attributes").
+
+## Usage notes
+
+*   Each `
` should be identified, typically by including a heading ([`
`-`
`](/en-US/docs/Web/HTML/Element/Heading_Elements) element) as a child of the `
` element.
+*   When an `
` element is nested, the inner element represents an article related to the outer element. For example, the comments of a blog post can be `
` elements nested in the `
` representing the blog post.
+*   Author information of an `
` element can be provided through the {{HTMLElement("address")}} element, but it doesn't apply to nested `
` elements.
+*   The publication date and time of an `
` element can be described using the {{htmlattrxref("datetime", "time")}} attribute of a {{HTMLElement("time")}} element. *Note that the {{htmlattrxref("pubdate", "time")}} attribute of {{HTMLElement("time")}} is no longer a part of the {{glossary("W3C")}} {{glossary("HTML5")}} standard.*
+
+## Examples
+
+```html
+

+  
Jurassic Park

+  

+    
Review

+    
Dinos were great!

+  

+  

+    
User reviews

+    

+      
Too scary!

+      
Way too scary for me.

+      

+        

           Posted on
-          <time datetime="2015-05-16 19:00">May 16</time>
+          
           by Lisa.
-        </p>
-      </footer>
-    </article>
-    <article class="user_review">
-      <h4>Love the dinos!</h4>
-      <p>I agree, dinos are my favorite.</p>
-      <footer>
-        <p>
+        

+      

+    

+    

+      
Love the dinos!

+      
I agree, dinos are my favorite.

+      

+        

           Posted on
-          <time datetime="2015-05-17 19:00">May 17</time>
+          
           by Tom.
-        </p>
-      </footer>
-    </article>
-  </section>
-  <footer>
-    <p>
+        

+      

+    

+  

+  

+    

       Posted on
-      <time datetime="2015-05-15 19:00">May 15</time>
+      
       by Staff.
-    </p>
-  </footer>
-</article>
-
+

+ +
+``` -

Specifications

+## Specifications -

{{Specifications}}

+{{Specifications}} -

Browser compatibility

+## Browser compatibility -

{{Compat}}

+{{Compat}} -

See also

+## See also -
    -
  • Other section-related elements: {{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")}}
    • -
  • Using HTML sections and outlines
    • -
+* Other section-related elements: {{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")}} +* [Using HTML sections and outlines](/en-US/docs/Web/HTML/Element/Heading_Elements) diff --git a/files/en-us/web/html/element/aside/index.md b/files/en-us/web/html/element/aside/index.md index 2a0619b4294645e..d7eda8cba2f9916 100644 --- a/files/en-us/web/html/element/aside/index.md +++ b/files/en-us/web/html/element/aside/index.md @@ -13,90 +13,123 @@ tags: - Web browser-compat: html.elements.aside --- -
{{HTMLRef}}
+{{HTMLRef}} -

The <aside> HTML element represents a portion of a document whose content is only indirectly related to the document's main content. Asides are frequently presented as sidebars or call-out boxes.

+The **`
+``` -

{{EmbedLiveSample("Using_aside")}}

+{{EmbedLiveSample("Using_aside")}} -

Specifications

+## Specifications -

{{Specifications}}

+{{Specifications}} -

Browser compatibility

+## Browser compatibility -

{{Compat}}

+{{Compat}} -

See also

+## See also -
    -
  • Other section-related elements: {{HTMLElement("body")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}};
    • -
  • Using HTML sections and outlines
    • -
  • ARIA: Complementary role
    • -
+* Other section-related elements: {{HTMLElement("body")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}}; +* [Using HTML sections and outlines](/en-US/docs/Web/HTML/Element/Heading_Elements) +* [ARIA: Complementary role](/en-US/docs/Web/Accessibility/ARIA/Roles/Complementary_role) diff --git a/files/en-us/web/html/element/audio/index.md b/files/en-us/web/html/element/audio/index.md index 36462cd5e83aba5..b5c5f598aba976c 100644 --- a/files/en-us/web/html/element/audio/index.md +++ b/files/en-us/web/html/element/audio/index.md @@ -17,220 +17,269 @@ tags: - sound browser-compat: html.elements.audio --- -
{{HTMLRef}}
- -

The <audio> HTML element is used to embed sound content in documents. It may contain one or more audio sources, represented using the src attribute or the {{HTMLElement("source")}} element: the browser will choose the most suitable one. It can also be the destination for streamed media, using a {{domxref("MediaStream")}}.

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

The above example shows simple usage of the <audio> element. In a similar manner to the {{htmlelement("img")}} element, we include a path to the media we want to embed inside the src attribute; we can include other attributes to specify information such as whether we want it to autoplay and loop, whether we want to show the browser's default audio controls, etc.

- -

The content inside the opening and closing <audio></audio> tags is shown as a fallback in browsers that don't support the element.

- -

Attributes

- -

This element's attributes include the global attributes.

- -
-
{{htmlattrdef("autoplay")}}
-
A Boolean attribute: if specified, the audio will automatically begin playback as soon as it can do so, without waiting for the entire audio file to finish downloading. -
-

Note: Sites that automatically play audio (or videos with an audio track) can be an unpleasant experience for users, so should be avoided when possible. If you must offer autoplay functionality, you should make it opt-in (requiring a user to specifically enable it). However, this can be useful when creating media elements whose source will be set at a later time, under user control. See our autoplay guide for additional information about how to properly use autoplay.

-
-
-
{{htmlattrdef("controls")}}
-
If this attribute is present, the browser will offer controls to allow the user to control audio playback, including volume, seeking, and pause/resume playback.
-
{{htmlattrdef("crossorigin")}}
-
This enumerated attribute indicates whether to use CORS to fetch the related audio file. CORS-enabled resources can be reused in the {{HTMLElement("canvas")}} element without being tainted. The allowed values are: -
-
anonymous
-
Sends a cross-origin request without a credential. In other words, it sends the Origin: HTTP header without a cookie, X.509 certificate, or performing HTTP Basic authentication. If the server does not give credentials to the origin site (by not setting the Access-Control-Allow-Origin: HTTP header), the image will be tainted, and its usage restricted.
-
use-credentials
-
Sends a cross-origin request with a credential. In other words, it sends the Origin: HTTP header with a cookie, a certificate, or performing HTTP Basic authentication. If the server does not give credentials to the origin site (through Access-Control-Allow-Credentials: HTTP header), the image will be tainted and its usage restricted.
-
- When not present, the resource is fetched without a CORS request (i.e. without sending the Origin: HTTP header), preventing its non-tainted used in {{HTMLElement('canvas')}} elements. If invalid, it is handled as if the enumerated keyword anonymous was used. See CORS settings attributes for additional information.
-
{{htmlattrdef("disableremoteplayback")}} {{experimental_inline}}
-
A Boolean attribute used to disable the capability of remote playback in devices that are attached using wired (HDMI, DVI, etc.) and wireless technologies (Miracast, Chromecast, DLNA, AirPlay, etc). See this proposed specification for more information. -
-

Note: In Safari, you can use x-webkit-airplay="deny" as a fallback.

-
-
-
{{htmlattrdef("loop")}}
-
A Boolean attribute: if specified, the audio player will automatically seek back to the start upon reaching the end of the audio.
-
{{htmlattrdef("muted")}}
-
A Boolean attribute that indicates whether the audio will be initially silenced. Its default value is false.
-
{{htmlattrdef("preload")}}
-
This enumerated attribute is intended to provide a hint to the browser about what the author thinks will lead to the best user experience. It may have one of the following values: -
    -
  • none: Indicates that the audio should not be preloaded.
    • -
  • metadata: Indicates that only audio metadata (e.g. length) is fetched.
    • -
  • auto: Indicates that the whole audio file can be downloaded, even if the user is not expected to use it.
    • -
  • empty string: A synonym of the auto value.
    • -
- -

The default value is different for each browser. The spec advises it to be set to metadata.

- -
-

Note:

-
    -
  • The autoplay attribute has precedence over preload. If autoplay is specified, the browser would obviously need to start downloading the audio for playback.
    • -
  • The browser is not forced by the specification to follow the value of this attribute; it is a mere hint.
    • -
-
-
-
{{htmlattrdef("src")}}
-
The URL of the audio to embed. This is subject to HTTP access controls. This is optional; you may instead use the {{htmlelement("source")}} element within the audio block to specify the audio to embed.
-
- -

Events

+{{HTMLRef}} + +The **`