diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 98a4e0fff98df49a..e7253fa3db0db2bc 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -221,7 +221,7 @@ This will make it easier to submit a pull request for your changes. #### Linting edited files -To ensure that all MDN documents follow the same formatting, we use both [Prettier](https://www.prettier.io) and [Markdownlint](https://github.com/DavidAnson/markdownlint) to format and lint Markdown files. This helps us enforce uniform styling across all documents with minimal reviewer intervention. +To ensure that all MDN documents follow the same formatting, we use both [Prettier](https://www.prettier.io) and [MarkdownLint](https://github.com/DavidAnson/markdownlint) to format and lint Markdown files. This helps us enforce uniform styling across all documents with minimal reviewer intervention. If you have a [local checkout](#forking-and-cloning-the-repository) of the repository and have [installed the dependencies](#preparing-the-project), or you are using [github.dev](https://github.dev), a pre-commit hook will be installed which automatically runs while making a commit. To save some headache and improve your work flow while authoring, you may wish to [configure your editor to automatically run Prettier](https://prettier.io/docs/en/editors.html). Alternatively, you may run `yarn fix:md` in the command line to manually format all Markdown files. diff --git a/files/en-us/_redirects.txt b/files/en-us/_redirects.txt index e3e8cce2f4efcb95..8dc5ede0af510016 100644 --- a/files/en-us/_redirects.txt +++ b/files/en-us/_redirects.txt @@ -11569,7 +11569,8 @@ /en-US/docs/Web/CSS/clamp() /en-US/docs/Web/CSS/clamp /en-US/docs/Web/CSS/color-adjust /en-US/docs/Web/CSS/print-color-adjust /en-US/docs/Web/CSS/color_value/color() /en-US/docs/Web/CSS/color_value/color -/en-US/docs/Web/CSS/color_value/color-contrast() /en-US/docs/Web/CSS/color_value/color-contrast +/en-US/docs/Web/CSS/color_value/color-contrast /en-US/docs/Web/CSS/color_value +/en-US/docs/Web/CSS/color_value/color-contrast() /en-US/docs/Web/CSS/color_value /en-US/docs/Web/CSS/color_value/color-mix() /en-US/docs/Web/CSS/color_value/color-mix /en-US/docs/Web/CSS/color_value/color_keywords /en-US/docs/Web/CSS/named-color /en-US/docs/Web/CSS/color_value/device-cmyk() /en-US/docs/Web/CSS/color_value/device-cmyk @@ -12285,12 +12286,14 @@ /en-US/docs/Web/HTTP/Feature_Policy /en-US/docs/Web/HTTP/Permissions_Policy /en-US/docs/Web/HTTP/Gecko_user_agent_string_reference /en-US/docs/Web/HTTP/Headers/User-Agent/Firefox /en-US/docs/Web/HTTP/HTTP_response_codes /en-US/docs/Web/HTTP/Status +/en-US/docs/Web/HTTP/Headers/Accept-Charset /en-US/docs/Web/HTTP/Headers /en-US/docs/Web/HTTP/Headers/Cache-Disposition /en-US/docs/Web/HTTP/Headers/Content-Disposition /en-US/docs/Web/HTTP/Headers/Content-Security-Policy/Sources /en-US/docs/Web/HTTP/Headers/Content-Security-Policy#fetch_directive_syntax /en-US/docs/Web/HTTP/Headers/Content-Security-Policy/navigate-to /en-US/docs/Web/HTTP/Headers/Content-Security-Policy /en-US/docs/Web/HTTP/Headers/Content-Security-Policy/referrer /en-US/docs/Web/HTTP/Headers/Referrer-Policy /en-US/docs/Web/HTTP/Headers/Content-Security-Policy/require-sri-for /en-US/docs/Web/HTTP/Headers/Content-Security-Policy /en-US/docs/Web/HTTP/Headers/Cookie2 /en-US/docs/Web/HTTP/Headers/Cookie +/en-US/docs/Web/HTTP/Headers/Digest /en-US/docs/Web/HTTP/Headers/Content-Digest /en-US/docs/Web/HTTP/Headers/Feature-Policy /en-US/docs/Web/HTTP/Headers/Permissions-Policy /en-US/docs/Web/HTTP/Headers/Feature-Policy/accelerometer /en-US/docs/Web/HTTP/Headers/Permissions-Policy/accelerometer /en-US/docs/Web/HTTP/Headers/Feature-Policy/ambient-light-sensor /en-US/docs/Web/HTTP/Headers/Permissions-Policy/ambient-light-sensor @@ -12336,6 +12339,7 @@ /en-US/docs/Web/HTTP/Headers/Ranges /en-US/docs/Web/HTTP/Headers/Range /en-US/docs/Web/HTTP/Headers/Set-Cookie/SameSite /en-US/docs/Web/HTTP/Headers/Set-Cookie#samesitesamesite-value /en-US/docs/Web/HTTP/Headers/Set-Cookie2 /en-US/docs/Web/HTTP/Headers/Set-Cookie +/en-US/docs/Web/HTTP/Headers/Want-Digest /en-US/docs/Web/HTTP/Headers/Want-Content-Digest /en-US/docs/Web/HTTP/History_of_HTTP_versions /en-US/docs/Web/HTTP/Evolution_of_HTTP /en-US/docs/Web/HTTP/Index /en-US/docs/Web/HTTP /en-US/docs/Web/HTTP/Link_prefetching_FAQ /en-US/docs/Glossary/Prefetch diff --git a/files/en-us/_wikihistory.json b/files/en-us/_wikihistory.json index e3472ee6857b36fd..aa4e7911a32b7972 100644 --- a/files/en-us/_wikihistory.json +++ b/files/en-us/_wikihistory.json @@ -98998,17 +98998,6 @@ "modified": "2020-10-15T22:23:14.705Z", "contributors": ["j9t", "Malvoz", "bershanskiy"] }, - "Web/HTTP/Headers/Accept-Charset": { - "modified": "2020-10-15T21:48:48.975Z", - "contributors": [ - "mfuji09", - "Tigt", - "fscholz", - "ottaviano", - "Minstel", - "teoli" - ] - }, "Web/HTTP/Headers/Accept-Encoding": { "modified": "2020-12-04T01:30:23.076Z", "contributors": [ @@ -99624,10 +99613,6 @@ "modified": "2020-10-15T22:23:16.957Z", "contributors": ["mfuji09", "darby", "bershanskiy"] }, - "Web/HTTP/Headers/Digest": { - "modified": "2020-10-15T22:21:39.013Z", - "contributors": ["ioggstream", "wbamberg"] - }, "Web/HTTP/Headers/ETag": { "modified": "2020-10-15T21:48:49.703Z", "contributors": [ @@ -100249,10 +100234,6 @@ "teoli" ] }, - "Web/HTTP/Headers/Want-Digest": { - "modified": "2020-10-15T22:21:41.704Z", - "contributors": ["wbamberg"] - }, "Web/HTTP/Headers/Warning": { "modified": "2020-10-15T21:48:41.051Z", "contributors": ["chrisdavidmills", "janslow", "PotHix", "fscholz"] diff --git a/files/en-us/games/publishing_games/game_distribution/index.md b/files/en-us/games/publishing_games/game_distribution/index.md index b723c79fbf923009..4c4cf929a6b7782b 100644 --- a/files/en-us/games/publishing_games/game_distribution/index.md +++ b/files/en-us/games/publishing_games/game_distribution/index.md @@ -100,7 +100,7 @@ The web is the first and the best choice for HTML games, but if you want to reac There are various tools to choose from depending on your skills, preferred frameworks or target platforms. It's all about picking the best tool for your particular task. - [Ejecta](https://impactjs.com/ejecta) — a tool specifically for packaging games created with [the ImpactJS](https://impactjs.com/) framework for iOS, built by the ImpactJS author. It provides seamless integration with ImpactJS, but it supports only one framework and app store. -- [NW.js](https://nwjs.io/) — formerly known as Node-Webkit, this is the first choice when it comes to building a desktop game that works on Windows, Mac and Linux. The distributions are packaged with the WebKit engine to provide rendering on any platform. +- [NW.js](https://nwjs.io/) — formerly known as Node-WebKit, this is the first choice when it comes to building a desktop game that works on Windows, Mac and Linux. The distributions are packaged with the WebKit engine to provide rendering on any platform. Other alternative tools are: diff --git a/files/en-us/games/techniques/3d_on_the_web/basic_theory/index.md b/files/en-us/games/techniques/3d_on_the_web/basic_theory/index.md index c528dea5667c8ebd..cac1a42ae374f840 100644 --- a/files/en-us/games/techniques/3d_on_the_web/basic_theory/index.md +++ b/files/en-us/games/techniques/3d_on_the_web/basic_theory/index.md @@ -55,7 +55,7 @@ There are four stages to this processing: the first one involves arranging the o ![Camera](mdn-games-3d-camera.png) -**Projection transformation** (also called perspective transformation) then defines the camera settings. It sets up what can be seen by the camera — the configuration includes _field of view_, _aspect ratio_ and optional _near_ and _far planes_. read the [Camera paragraph](/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js#camera) in the Three.js article to learn about those. +**Projection transformation** (also called perspective transformation) then defines the camera settings. It sets up what can be seen by the camera — the configuration includes _field of view_, _aspect ratio_ and optional _near_ and _far planes_. Read the [Camera paragraph](/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js#camera) in the Three.js article to learn about those. ![Camera settings](mdn-games-3d-camera-settings.png) diff --git a/files/en-us/glossary/algorithm/index.md b/files/en-us/glossary/algorithm/index.md index c6e83fb4b9d0e9a7..8b481fb7569d04e9 100644 --- a/files/en-us/glossary/algorithm/index.md +++ b/files/en-us/glossary/algorithm/index.md @@ -12,7 +12,7 @@ In other words, an algorithm is a means of describing a way to solve a problem s For example: -- A cooking recipe is a simple algorithm for humans. +- A cooking recipe is an algorithm for humans. - A sorting algorithm is often used in computer programming to explain to a machine how to sort data. Common algorithms are Pathfinding algorithms such as the optimization [Traveling Salesman Problem](https://optimization.cbe.cornell.edu/index.php?title=Traveling_salesman_problem), [Tree Traversal algorithms](https://brilliant.org/wiki/traversals/), and so on. diff --git a/files/en-us/glossary/authenticator/index.md b/files/en-us/glossary/authenticator/index.md index 1b60707bfe247dce..9e3dc94dead546b6 100644 --- a/files/en-us/glossary/authenticator/index.md +++ b/files/en-us/glossary/authenticator/index.md @@ -8,7 +8,7 @@ page-type: glossary-definition An **authenticator** is an entity that can perform the cryptographic operations needed to register and authenticate users, and securely store the cryptographic keys used in these operations. -An authenticator might be implemented in hardware or software. It may be integrated into the device, like the [Touch ID](https://en.wikipedia.org/wiki/Touch_ID) system in Apple devices or the [Windows Hello](https://en.wikipedia.org/wiki/Windows_10#System_security) system, or it might be a removable module like a [Yubikey](https://en.wikipedia.org/wiki/YubiKey). +An authenticator might be implemented in hardware or software. It may be integrated into the device, like the [Touch ID](https://en.wikipedia.org/wiki/Touch_ID) system in Apple devices or the [Windows Hello](https://en.wikipedia.org/wiki/Windows_10#System_security) system, or it might be a removable module like a [YubiKey](https://en.wikipedia.org/wiki/YubiKey). The [Web Authentication API](/en-US/docs/Web/API/Web_Authentication_API) makes authenticators available to websites as part of the [Credential Management API](/en-US/docs/Web/API/Credential_Management_API). This enables websites to use authenticators to generate {{glossary("credential", "credentials")}} based on {{glossary("public-key cryptography")}}, which can then be used to sign users into websites. diff --git a/files/en-us/glossary/bezier_curve/index.md b/files/en-us/glossary/bezier_curve/index.md index e55ced39c9327b7a..633dccabe8d1681a 100644 --- a/files/en-us/glossary/bezier_curve/index.md +++ b/files/en-us/glossary/bezier_curve/index.md @@ -17,5 +17,5 @@ To draw a quadratic Bézier curve, two imaginary lines are drawn, one from P` element** (blink tag) is an obsolete HTML feature no longer supported by web browsers, and no longer documented on MDN. It was used make text content blink on and off (flash) continually. +The **`` element** (blink tag) is an obsolete HTML feature no longer supported by web browsers and no longer documented on MDN. It was used to make text content blink on and off (flash) continually. ## Brief history -In the early days of the web (the early- to mid-90s), there were not many features available for styling web pages. The [CSS](/en-US/docs/Web/CSS) specification (version 1) was first released in 1996, and not adopted consistently by browsers until much later. Before CSS, browsers experimented with several features to make particular text sections stand out and grab the user's attention if desired. The `` element was one of these, introduced in early versions of [Netscape Navigator](/en-US/docs/Glossary/Netscape_Navigator); [Internet Explorer's](/en-US/docs/Glossary/Microsoft_Internet_Explorer) {{htmlelement("marquee")}} element was another one. +In the early days of the web (the early- to mid-90s), there were not many features available for styling web pages. The [CSS](/en-US/docs/Web/CSS) specification (version 1) was first released in 1996 and not adopted consistently by browsers until much later. Before CSS, browsers experimented with several features to make particular text sections stand out and grab the user's attention. The `` element was one of these, introduced in early versions of [Netscape Navigator](/en-US/docs/Glossary/Netscape_Navigator); [Internet Explorer's](/en-US/docs/Glossary/Microsoft_Internet_Explorer) {{htmlelement("marquee")}} element was another. -The `` element was apparently created after a conversation in a bar in Mountain View between Netscape engineer [Lou Montulli](https://en.wikipedia.org/wiki/Lou_Montulli) and colleagues. When he went into the office the next morning, he found that one of his fellow engineers have stayed up all night and implemented it ([read the story here](https://web.archive.org/web/20220331020029/http://www.montulli.org/theoriginofthe%3Cblink%3Etag)). +The `` element was apparently created after a conversation in a bar in Mountain View between Netscape engineer [Lou Montulli](https://en.wikipedia.org/wiki/Lou_Montulli) and colleagues. When he went into the office the next morning, he found that one of his fellow engineers had stayed up all night and implemented it ([read the story here](https://web.archive.org/web/20220331020029/http://www.montulli.org/theoriginofthe%3Cblink%3Etag)). -While initially popular, `` became much maligned because of overuse; many people found it annoying. More importantly, it degrades readability, and can be particularly problematic for users with visual impairments or [cognitive disorders](/en-US/docs/Web/Accessibility/Cognitive_accessibility) such as epilepsy or ADHD. It can be disorienting or, in the worst cases, even [trigger seizures](/en-US/docs/Web/Accessibility/Seizure_disorders). +While initially popular, `` became much maligned because of overuse; many people found it annoying. More importantly, it degrades readability and can be particularly problematic for users with visual impairments or [cognitive disorders](/en-US/docs/Web/Accessibility/Cognitive_accessibility) such as epilepsy or ADHD. It can be disorienting or, in the worst cases, even [trigger seizures](/en-US/docs/Web/Accessibility/Seizure_disorders). -`` was never properly specified, and never achieved significant cross-browser support. It can be considered a piece of web history. +`` was never properly specified and never achieved significant cross-browser support. It can be considered a piece of web history. ## Syntax diff --git a/files/en-us/glossary/cloud_computing/index.md b/files/en-us/glossary/cloud_computing/index.md index ae1da01b885d93c4..5d818aaabb552f39 100644 --- a/files/en-us/glossary/cloud_computing/index.md +++ b/files/en-us/glossary/cloud_computing/index.md @@ -17,7 +17,7 @@ The three main types of cloud computing are Infrastructure as a Service (IaaS), - Platform as a Service - : PaaS provides a platform allowing customers to develop, run, and manage applications without worrying about the underlying infrastructure such as servers, storage, and networking. PaaS allows developers to focus on writing code and application logic, without managing servers or operating systems. Examples include Google App Engine, Microsoft Azure App Service, Heroku, and AWS Elastic Beanstalk. - Software as a Service - - : SaaS delivers software applications over the internet, which users can access via a web browser. The provider manages all the underlying infrastructure, platform, and data. Businesses using SaaS don't need to install or manage software locally. Instead, they can access software such as email, CRM, and collaboration tools directly from a web browser. Examples include Google Workspace, Microsoft 365, Slack, Github, and ChatGPT. + - : SaaS delivers software applications over the internet, which users can access via a web browser. The provider manages all the underlying infrastructure, platform, and data. Businesses using SaaS don't need to install or manage software locally. Instead, they can access software such as email, CRM, and collaboration tools directly from a web browser. Examples include Google Workspace, Microsoft 365, Slack, GitHub, and ChatGPT. ## See also diff --git a/files/en-us/glossary/cls/index.md b/files/en-us/glossary/cls/index.md index fa305c7672e896df..9a5d310b7a334606 100644 --- a/files/en-us/glossary/cls/index.md +++ b/files/en-us/glossary/cls/index.md @@ -6,7 +6,7 @@ page-type: glossary-definition {{GlossarySidebar}} -**Cumulative Layout Shift (CLS)** is a usability metric for websites, designed by Google as one of the [Core Web Vital](https://web.dev/explore/learn-core-web-vitals) metrics. +**Cumulative Layout Shift (CLS)** is a usability metric for websites, designed by Google as one of the [Core Web Vital](https://web.dev/articles/vitals) metrics. It measures the extent to which users encounter unexpected layout shifts, in which elements of the page are moved in an unexpected way: that is, that are not the result of a user action like pressing a button or part of an animation. diff --git a/files/en-us/glossary/code_splitting/index.md b/files/en-us/glossary/code_splitting/index.md index 7130e19663206ef3..efc1be9a291d6b42 100644 --- a/files/en-us/glossary/code_splitting/index.md +++ b/files/en-us/glossary/code_splitting/index.md @@ -10,7 +10,7 @@ page-type: glossary-definition This allows an application to load only the code it actually needs at a given point in time, and load other bundles on demand. This approach is used to improve application performance, especially on initial load. -Code splitting is a feature supported by bundlers like [Webpack](https://webpack.js.org/) and [Browserify](https://browserify.org/) which can create multiple bundles that can be dynamically loaded at runtime. +Code splitting is a feature supported by bundlers like [webpack](https://webpack.js.org/) and [Browserify](https://browserify.org/) which can create multiple bundles that can be dynamically loaded at runtime. ## See also diff --git a/files/en-us/glossary/first_contentful_paint/index.md b/files/en-us/glossary/first_contentful_paint/index.md index 7405963182a24f02..dfd3ebedc3000c6a 100644 --- a/files/en-us/glossary/first_contentful_paint/index.md +++ b/files/en-us/glossary/first_contentful_paint/index.md @@ -1,12 +1,12 @@ --- -title: First contentful paint +title: First Contentful Paint (FCP) slug: Glossary/First_contentful_paint page-type: glossary-definition --- {{GlossarySidebar}} -**First Contentful Paint** (FCP) is when the browser renders the first bit of content from the DOM, providing the first feedback to the user that the page is actually loading. The question "Is it happening?" is "yes" when the first contentful paint completes. +**First Contentful Paint** (FCP) is when the browser renders the first content from the DOM, providing feedback to the user that the page is loading. Completing the first contentful paint answers the question "Is it happening?" _The First Contentful Paint_ timestamp is when the browser first rendered any text, image (including background images), video, canvas that had been drawn into, or non-empty SVG. This excludes any content of iframes, but includes text with pending webfonts. This is the first time users could start consuming page content. @@ -14,7 +14,7 @@ _The First Contentful Paint_ timestamp is when the browser first rendered any te - [`PerformancePaintTiming`](/en-US/docs/Web/API/PerformancePaintTiming) - Related glossary terms: - - {{Glossary("First paint")}} - - {{Glossary("Largest contentful paint")}} - - {{Glossary("First meaningful paint")}} + - {{Glossary("First Paint")}} + - {{Glossary("Largest Contentful Paint")}} + - {{Glossary("First Meaningful Paint")}} - [First Contentful Paint](https://web.dev/articles/fcp) at web.dev diff --git a/files/en-us/glossary/first_input_delay/index.md b/files/en-us/glossary/first_input_delay/index.md index 7270846166c54ae3..f33c07e38c0da04e 100644 --- a/files/en-us/glossary/first_input_delay/index.md +++ b/files/en-us/glossary/first_input_delay/index.md @@ -1,12 +1,17 @@ --- -title: First input delay +title: First Input Delay (FID) slug: Glossary/First_input_delay page-type: glossary-definition +status: + - deprecated --- {{GlossarySidebar}} -**First input delay** (FID) measures the time from when a user first interacts with your site (i.e. when they click a link, tap on a button, or use a custom, JavaScript-powered control) to the time when the browser is actually able to respond to that interaction. +**First input delay** (FID) measures the time from when a user first interacts with your site (for example, when they click a link, tap on a button, or use a custom, JavaScript-powered control) to the time when the browser is actually able to respond to that interaction. + +> [!WARNING] +> FID was designed by Google as one of the [Core Web Vital](https://web.dev/articles/vitals) metrics but was replaced by {{Glossary("Interaction to Next Paint")}} (INP) [in May 2024](https://web.dev/blog/inp-cwv-launch). It is the length of time, in milliseconds, between the first user interaction on a web page and the browser's response to that interaction. Scrolling and zooming are not included in this metric. @@ -14,5 +19,4 @@ The time between when content is painted to the page and when all the functional ## See also -- [requestIdleCallback](/en-US/docs/Web/API/Window/requestIdleCallback) -- [lazy loading](/en-US/docs/Web/Performance/Lazy_loading) +- [Interaction to Next Paint is officially a Core Web Vital](https://web.dev/blog/inp-cwv-launch) on web.dev (2024) diff --git a/files/en-us/glossary/first_meaningful_paint/index.md b/files/en-us/glossary/first_meaningful_paint/index.md index c8b5f96daf3771a9..89628a765c585e76 100644 --- a/files/en-us/glossary/first_meaningful_paint/index.md +++ b/files/en-us/glossary/first_meaningful_paint/index.md @@ -1,5 +1,5 @@ --- -title: First Meaningful Paint +title: First Meaningful Paint (FMP) slug: Glossary/First_meaningful_paint page-type: glossary-definition --- @@ -16,5 +16,5 @@ FMP is very sensitive to small differences in the page load. This can lead to in ## See also - Related glossary terms: - - {{Glossary("First contentful paint")}} - - {{Glossary("Largest contentful paint")}} + - {{Glossary("First Contentful Paint")}} + - {{Glossary("Largest Contentful Paint")}} diff --git a/files/en-us/glossary/first_paint/index.md b/files/en-us/glossary/first_paint/index.md index d3e4d520c33a9dca..aebd80f083fb073a 100644 --- a/files/en-us/glossary/first_paint/index.md +++ b/files/en-us/glossary/first_paint/index.md @@ -1,5 +1,5 @@ --- -title: First paint +title: First Paint (FP) slug: Glossary/First_paint page-type: glossary-definition --- @@ -12,6 +12,6 @@ page-type: glossary-definition - [`PerformancePaintTiming`](/en-US/docs/Web/API/PerformancePaintTiming) - Related glossary terms: - - {{Glossary("First contentful paint")}} - - {{Glossary("Largest contentful paint")}} - - {{Glossary("First meaningful paint")}} + - {{Glossary("First Contentful Paint")}} + - {{Glossary("Largest Contentful Paint")}} + - {{Glossary("First Meaningful Paint")}} diff --git a/files/en-us/glossary/forbidden_header_name/index.md b/files/en-us/glossary/forbidden_header_name/index.md index c7dbf7f985b63635..f92b9255f3f71e57 100644 --- a/files/en-us/glossary/forbidden_header_name/index.md +++ b/files/en-us/glossary/forbidden_header_name/index.md @@ -22,7 +22,6 @@ fetch("https://httpbin.org/get", { Names starting with `Sec-` are reserved for creating new headers safe from {{glossary("API","APIs")}} that grant developers control over headers, such as {{domxref("Window/fetch", "fetch()")}}. Forbidden header names start with `Proxy-` or `Sec-`, or are one of the following names: -- {{HTTPHeader("Accept-Charset")}} - {{HTTPHeader("Accept-Encoding")}} - {{HTTPHeader("Access-Control-Request-Headers")}} - {{HTTPHeader("Access-Control-Request-Method")}} diff --git a/files/en-us/glossary/interaction_to_next_paint/index.md b/files/en-us/glossary/interaction_to_next_paint/index.md new file mode 100644 index 0000000000000000..a40d5578b0ff4217 --- /dev/null +++ b/files/en-us/glossary/interaction_to_next_paint/index.md @@ -0,0 +1,28 @@ +--- +title: Interaction to Next Paint (INP) +slug: Glossary/Interaction_to_next_paint +page-type: glossary-definition +--- + +{{GlossarySidebar}} + +**Interaction to Next Paint** (INP) measures the responsiveness of a website to user interactions (for example, when they click a link, tap on a button, or use a custom, JavaScript-powered control). + +INP was designed by Google as one of the [Core Web Vital](https://web.dev/articles/vitals) metrics, replacing {{Glossary("First Input Delay")}} (FID) in May 2024. There are two key differences between FID and INP that make INP a more reliable measure of a page's responsiveness: + +- FID measures only the first user interaction, whereas INP considers all user interactions. +- FID only measures the input delay of the interaction, whereas INP measures for a longer period: beginning at the input delay, followed by the time it takes to process event handlers, and the browser's presentation time until the browser has painted the next frame. + +INP measures the worst length of time (minus some outliers), in milliseconds, between the user interaction on a web page and the next frame presentation after that interaction is processed. Scrolling and zooming are not included in this metric. INP is calculated using the [Event Timing API](/en-US/docs/Web/API/PerformanceEventTiming). Asynchronous operations such as network fetches or file reads usually do not delay INP as painting can occur while such operations are handled. + +All eligible interactions throughout the page lifetime are considered. For highly interactive pages of 50 or more interactions, the 98th percentile is used to exclude some extreme outliers that are not reflective of overall page responsiveness. + +The longer the delay, the worse the user experience. The [Long Animation Frames API](/en-US/docs/Web/API/Performance_API/Long_animation_frame_timing) can help identify causes of high INP. + +## See also + +- [Long animation frame timing](/en-US/docs/Web/API/Performance_API/Long_animation_frame_timing) +- [PerformanceEventTiming](/en-US/docs/Web/API/PerformanceEventTiming) +- [INP](https://web.dev/articles/inp) on web.dev (2023) +- [Optimizing INP](https://web.dev/articles/optimizing-inp) on web.dev (2023) +- [Interaction to Next Paint is officially a Core Web Vital](https://web.dev/blog/inp-cwv-launch) on web.dev (2024) diff --git a/files/en-us/glossary/javascript/index.md b/files/en-us/glossary/javascript/index.md index 63cfa9f84c78da6d..7cadd825af71bd1b 100644 --- a/files/en-us/glossary/javascript/index.md +++ b/files/en-us/glossary/javascript/index.md @@ -6,7 +6,7 @@ page-type: glossary-definition {{GlossarySidebar}} -JavaScript (or "JS") is a programming language used most often for dynamic client-side scripts on webpages, but it is also often used on the {{Glossary("Server","server")}}-side, using a runtime such as [Node.js](https://nodejs.org/en). +JavaScript (or "JS") is a programming language used most often for dynamic client-side scripts on webpages, but it is also often used on the {{Glossary("Server","server")}}-side, using a runtime such as {{Glossary("Node.js")}}, {{Glossary("Deno")}}, and [Bun](https://bun.sh/). JavaScript **should not** be confused with the [Java programming language](). Although _"Java"_ and _"JavaScript"_ are trademarks (or registered trademarks) of Oracle in the U.S. and other countries, the two programming languages are significantly different in their syntax, semantics, and use cases. diff --git a/files/en-us/glossary/largest_contentful_paint/index.md b/files/en-us/glossary/largest_contentful_paint/index.md index d62ebf5714e5d182..4f7822537eea2739 100644 --- a/files/en-us/glossary/largest_contentful_paint/index.md +++ b/files/en-us/glossary/largest_contentful_paint/index.md @@ -1,5 +1,5 @@ --- -title: Largest contentful paint +title: Largest Contentful Paint (LCP) slug: Glossary/Largest_contentful_paint page-type: glossary-definition --- @@ -20,5 +20,5 @@ The following elements are considered when determining the LCP: - [`LargestContentfulPaint`](/en-US/docs/Web/API/LargestContentfulPaint) - Related glossary terms: - - {{Glossary("First contentful paint")}} - - {{Glossary("First paint")}} + - {{Glossary("First Contentful Paint")}} + - {{Glossary("First Paint")}} diff --git a/files/en-us/glossary/quality_values/index.md b/files/en-us/glossary/quality_values/index.md index 2afeff504922a5d1..9bf79e2aeeaf7919 100644 --- a/files/en-us/glossary/quality_values/index.md +++ b/files/en-us/glossary/quality_values/index.md @@ -42,5 +42,5 @@ Some syntax, like the one of {{HTTPHeader("Accept")}}, allow additional specifie ## More information -- [HTTP headers](/en-US/docs/Web/HTTP/Headers) using q-values in their syntax: {{HTTPHeader("Accept")}}, {{HTTPHeader("Accept-Encoding")}}, {{HTTPHeader("Accept-Language")}}, {{HTTPHeader("TE")}}, {{HTTPHeader("Want-Digest")}}. +- [HTTP headers](/en-US/docs/Web/HTTP/Headers) using q-values in their syntax: {{HTTPHeader("Accept")}}, {{HTTPHeader("Accept-Encoding")}}, {{HTTPHeader("Accept-Language")}}, {{HTTPHeader("TE")}}. - [Header field definitions.](https://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html) diff --git a/files/en-us/glossary/representation_header/index.md b/files/en-us/glossary/representation_header/index.md index 183574e19fac551d..423ee9f172bcb457 100644 --- a/files/en-us/glossary/representation_header/index.md +++ b/files/en-us/glossary/representation_header/index.md @@ -36,10 +36,9 @@ Representation headers are not mutually exclusive with {{Glossary("Content heade ## See also -- [RFC 9110, section 3.2: Representations](https://httpwg.org/specs/rfc9110.html#representations) -- [List of all HTTP headers](/en-US/docs/Web/HTTP/Headers) - Related glossary terms: - {{Glossary("Content header")}} +- [RFC 9110, section 3.2: Representations](https://httpwg.org/specs/rfc9110.html#representations) +- [List of all HTTP headers](/en-US/docs/Web/HTTP/Headers) - {{HTTPHeader("Repr-Digest")}}, {{HTTPHeader("Want-Repr-Digest")}} - {{HTTPHeader("Content-Digest")}}, {{HTTPHeader("Want-Content-Digest")}} -- {{HTTPHeader("Digest")}} {{Deprecated_Inline}}, {{HTTPHeader("Want-Digest")}} {{Deprecated_Inline}} diff --git a/files/en-us/glossary/ssg/index.md b/files/en-us/glossary/ssg/index.md index 52e78c7500b9a4e3..c3298ff4eb608d8a 100644 --- a/files/en-us/glossary/ssg/index.md +++ b/files/en-us/glossary/ssg/index.md @@ -15,7 +15,7 @@ Static sites are commonly used for blogs, documentation, and other content-drive - [Introduction to client-side frameworks > static site generators](/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction#static_site_generators) - [Static site generator](https://en.wikipedia.org/wiki/Static_site_generator) on Wikipedia - [Jamstack site generators](https://jamstack.org/generators/) -- [Wordpress](https://wordpress.com/) +- [WordPress](https://wordpress.com/) - [Docusaurus](https://docusaurus.io/) - [Jekyll](https://jekyllrb.com/) - [Astro](https://astro.build/) diff --git a/files/en-us/glossary/websockets/index.md b/files/en-us/glossary/websockets/index.md index 2f6b0bf1356e77ff..d358e6843b23454d 100644 --- a/files/en-us/glossary/websockets/index.md +++ b/files/en-us/glossary/websockets/index.md @@ -12,7 +12,7 @@ Any client or server application can use WebSocket, but principally web {{Glossa ## See also -- [Websocket](https://en.wikipedia.org/wiki/Websocket) on Wikipedia +- [WebSocket](https://en.wikipedia.org/wiki/WebSocket) on Wikipedia - [WebSocket reference on MDN](/en-US/docs/Web/API/WebSocket) - [Writing WebSocket client applications](/en-US/docs/Web/API/WebSockets_API/Writing_WebSocket_client_applications) - [Writing WebSocket servers](/en-US/docs/Web/API/WebSockets_API/Writing_WebSocket_servers) diff --git a/files/en-us/learn/accessibility/css_and_javascript/test_your_skills_colon__css_and_javascript_accessibility/index.md b/files/en-us/learn/accessibility/css_and_javascript/test_your_skills_colon__css_and_javascript_accessibility/index.md index d6f6464737c20106..00b404495198cf1e 100644 --- a/files/en-us/learn/accessibility/css_and_javascript/test_your_skills_colon__css_and_javascript_accessibility/index.md +++ b/files/en-us/learn/accessibility/css_and_javascript/test_your_skills_colon__css_and_javascript_accessibility/index.md @@ -46,7 +46,7 @@ Try updating the live code below to recreate the finished example: ## JavaScript accessibility 1 -In our final task here, you have some JavaScripting to do. We have a simple app that presents a list of animal names. Clicking one of the animal names causes a further description of that animal to appear in a box below the list. +In our final task here, you have some JavaScripting to do. We have an app that presents a list of animal names. Clicking one of the animal names causes a further description of that animal to appear in a box below the list. But it is not very accessible — in its current state you can only operate it with the mouse. We'd like you to add to the HTML and JavaScript to make it keyboard accessible too. diff --git a/files/en-us/learn/accessibility/index.md b/files/en-us/learn/accessibility/index.md index c9786d479df5314e..01c5ff43cf8e9f85 100644 --- a/files/en-us/learn/accessibility/index.md +++ b/files/en-us/learn/accessibility/index.md @@ -27,7 +27,7 @@ The Firefox Accessibility Inspector is a very useful tool for checking out acces To get the most out of this module, it would be a good idea to either work through at least the first two modules of the [HTML](/en-US/docs/Learn/HTML), [CSS](/en-US/docs/Learn/CSS), and [JavaScript](/en-US/docs/Learn/JavaScript) topics, or perhaps even better, work through the relevant parts of the accessibility module as you work through the related technology topics. > [!NOTE] -> If you are working on a computer/tablet/other devices where you don't have the ability to create your own files, you can try out most of the code examples in an online coding program such as [JSBin](https://jsbin.com/) or [Glitch](https://glitch.com/). +> If you are working on a computer/tablet/other devices where you don't have the ability to create your own files, you can try out most of the code examples in an online coding program such as [JS Bin](https://jsbin.com/) or [Glitch](https://glitch.com/). ## Guides diff --git a/files/en-us/learn/accessibility/test_your_skills_colon__html_accessibility/index.md b/files/en-us/learn/accessibility/test_your_skills_colon__html_accessibility/index.md index 187b18f281d0e413..de7a711788d58391 100644 --- a/files/en-us/learn/accessibility/test_your_skills_colon__html_accessibility/index.md +++ b/files/en-us/learn/accessibility/test_your_skills_colon__html_accessibility/index.md @@ -15,7 +15,7 @@ The aim of this skill test is to assess whether you've understood our [HTML: A g ## HTML accessibility 1 -In this task we will test your understanding of text semantics, and why they are good for accessibility. The given text is a simple information panel with action buttons, but the HTML is really bad. +In this task we will test your understanding of text semantics, and why they are good for accessibility. The given text is an information panel with action buttons, but the HTML is really bad. We want you to update it use appropriate semantic HTML. You don't need to worry too much about recreating the _exact_ same look and text sizing, as long as the semantics are good. @@ -61,7 +61,7 @@ Try updating the live code below to recreate the finished example: ## HTML accessibility 4 -In our final HTML accessibility task, you are given a simple image gallery, which has some accessibility problems. Can you fix them? +In our final HTML accessibility task, you are given an image gallery, which has some accessibility problems. Can you fix them? - The header image has an accessibility issue, and so do the gallery images. - You could take the header image further and implement it using CSS for arguably better accessibility. Why is this better, and what would a solution look like? diff --git a/files/en-us/learn/accessibility/wai-aria_basics/test_your_skills_colon__wai-aria/index.md b/files/en-us/learn/accessibility/wai-aria_basics/test_your_skills_colon__wai-aria/index.md index 489cc7dc8f6dd252..aa26d0e6178801d6 100644 --- a/files/en-us/learn/accessibility/wai-aria_basics/test_your_skills_colon__wai-aria/index.md +++ b/files/en-us/learn/accessibility/wai-aria_basics/test_your_skills_colon__wai-aria/index.md @@ -42,7 +42,7 @@ Try updating the live code below to recreate the finished example: ## WAI-ARIA 3 -For this final WAI-ARIA task, we return to an example we previously saw in the [CSS and JavaScript skill test](/en-US/docs/Learn/Accessibility/CSS_and_JavaScript/Test_your_skills:_CSS_and_JavaScript_accessibility). As before, we have a simple app that presents a list of animal names. Clicking one of the animal names causes a further description of that animal to appear in a box below the list. Here, we are starting with a mouse- and keyboard-accessible version. +For this final WAI-ARIA task, we return to an example we previously saw in the [CSS and JavaScript skill test](/en-US/docs/Learn/Accessibility/CSS_and_JavaScript/Test_your_skills:_CSS_and_JavaScript_accessibility). As before, we have an app that presents a list of animal names. Clicking one of the animal names causes a further description of that animal to appear in a box below the list. Here, we are starting with a mouse- and keyboard-accessible version. The problem we have now is that when the DOM changes to show a new description, screen readers cannot see what has changed. Can you update it so that description changes are announced by the screen reader? diff --git a/files/en-us/learn/common_questions/tools_and_setup/available_text_editors/index.md b/files/en-us/learn/common_questions/tools_and_setup/available_text_editors/index.md index 5706a492ca29c8d2..946bb8715ed2f868 100644 --- a/files/en-us/learn/common_questions/tools_and_setup/available_text_editors/index.md +++ b/files/en-us/learn/common_questions/tools_and_setup/available_text_editors/index.md @@ -302,7 +302,7 @@ Here are some popular editors: No - Vim + VIM FAQ Documentation - Yes + Yes diff --git a/files/en-us/learn/common_questions/tools_and_setup/how_much_does_it_cost/index.md b/files/en-us/learn/common_questions/tools_and_setup/how_much_does_it_cost/index.md index d418ea8531ddf818..3d683d317c015df7 100644 --- a/files/en-us/learn/common_questions/tools_and_setup/how_much_does_it_cost/index.md +++ b/files/en-us/learn/common_questions/tools_and_setup/how_much_does_it_cost/index.md @@ -46,7 +46,7 @@ When launching a website, you may spend nothing, or your costs may go through th You likely have a text editor: such as, Notepad on Windows, Gedit on Linux, TextEdit on Mac. You'll have an easier time writing code if you choose an editor that color-codes, checks your syntax, and assists you with code structure. -Many editors are free, for example [Brackets](https://brackets.io/), [Bluefish](https://bluefish.openoffice.nl/index.html), [TextWrangler](https://www.barebones.com/products/textwrangler/), [Eclipse](https://www.eclipse.org/), [Netbeans](https://netbeans.apache.org/), and [Visual Studio Code](https://code.visualstudio.com/). Some, like [Sublime Text](https://www.sublimetext.com/), you can test as long as you like, but you're encouraged to pay. Some, like [PhpStorm](https://www.jetbrains.com/phpstorm/), can cost between a few dozen and 200 dollars, depending on the plan you purchase. Some of them, like [Microsoft Visual Studio](https://visualstudio.microsoft.com/), can cost hundreds, or thousands of dollars; though Visual Studio Community is free for individual developers or open source projects. Often, for-pay editors will have a trial version. +Many editors are free, for example [Brackets](https://brackets.io/), [Bluefish](https://bluefish.openoffice.nl/index.html), [TextWrangler](https://www.barebones.com/products/textwrangler/), [Eclipse](https://www.eclipse.org/), [NetBeans](https://netbeans.apache.org/), and [Visual Studio Code](https://code.visualstudio.com/). Some, like [Sublime Text](https://www.sublimetext.com/), you can test as long as you like, but you're encouraged to pay. Some, like [PhpStorm](https://www.jetbrains.com/phpstorm/), can cost between a few dozen and 200 dollars, depending on the plan you purchase. Some of them, like [Microsoft Visual Studio](https://visualstudio.microsoft.com/), can cost hundreds, or thousands of dollars; though Visual Studio Community is free for individual developers or open source projects. Often, for-pay editors will have a trial version. To start, we suggest trying out several editors, to get a sense of which works best for you. If you're only writing simple {{Glossary("HTML")}}, {{Glossary("CSS")}}, and {{Glossary("JavaScript")}}, go with a simple editor. @@ -54,7 +54,7 @@ Price does not reliably reflect a text editor's quality or usefulness. You have ### Image editors -Your system likely includes a simple image editor, or viewer: Paint on Windows, Eye of Gnome on Ubuntu, Preview on Mac. Those programs are relatively limited, you'll soon want a more robust editor to add layers, effects, and grouping. +Your system likely includes an image editor, or viewer: Paint on Windows, Eye of GNOME on Ubuntu, Preview on Mac. Those programs are relatively limited, you'll soon want a more robust editor to add layers, effects, and grouping. Editors can be free ([GIMP](https://www.gimp.org/), [Paint.NET](https://www.getpaint.net/)), moderately expensive ([PaintShop Pro](https://www.paintshoppro.com/), less than $100), or several hundred dollars ([Adobe Photoshop](https://www.adobe.com/products/photoshop.html)). @@ -115,9 +115,9 @@ Your domain name has to be purchased through a domain name provider (a registrar ### Do-it-yourself hosting vs. "packaged" hosting -When you want to publish a website, you could do everything by yourself: set up a database (if needed), Content Management System, or {{Glossary("CMS")}} (like [Wordpress](https://wordpress.org/), [Dotclear](https://dotclear.org/), [spip](https://www.spip.net/en_rubrique25.html), etc.), upload pre-made or your own templates. +When you want to publish a website, you could do everything by yourself: set up a database (if needed), Content Management System, or {{Glossary("CMS")}} (like [WordPress](https://wordpress.org/), [Dotclear](https://dotclear.org/), [spip](https://www.spip.net/en_rubrique25.html), etc.), upload pre-made or your own templates. -You could use your hosting provider's environment, for roughly ten to fifteen dollars per month, or subscribe directly to a dedicated hosting service with pre-packaged CMSs (e.g., [Wordpress](https://wordpress.com/), [Tumblr](https://www.tumblr.com/), [Blogger](https://www.blogger.com/)). For the latter, you won't have to pay anything, but you may have less control over templating and other options. +You could use your hosting provider's environment, for roughly ten to fifteen dollars per month, or subscribe directly to a dedicated hosting service with pre-packaged CMSs (e.g., [WordPress](https://wordpress.com/), [Tumblr](https://www.tumblr.com/), [Blogger](https://www.blogger.com/)). For the latter, you won't have to pay anything, but you may have less control over templating and other options. ### Free hosting vs. paid hosting diff --git a/files/en-us/learn/common_questions/tools_and_setup/set_up_a_local_testing_server/index.md b/files/en-us/learn/common_questions/tools_and_setup/set_up_a_local_testing_server/index.md index df5e6c132cea28d5..d5f701b6bdf40165 100644 --- a/files/en-us/learn/common_questions/tools_and_setup/set_up_a_local_testing_server/index.md +++ b/files/en-us/learn/common_questions/tools_and_setup/set_up_a_local_testing_server/index.md @@ -52,7 +52,7 @@ To get around the problem of async requests, we need to test such examples by ru If you only need HTML, CSS and JavaScript, and no server-side language, the easiest way may be to check for extensions in your code editor. As well as automating installation and set-up for your local HTTP server, they also integrate nicely with your code editors. Testing local files in an HTTP server may be one click away. -For VSCode, you can check the following free extension: +For VS Code, you can check the following free extension: - `vscode-preview-server`. You can check it on its [home page](https://marketplace.visualstudio.com/items?itemName=yuichinukiyama.vscode-preview-server). diff --git a/files/en-us/learn/common_questions/tools_and_setup/what_software_do_i_need/index.md b/files/en-us/learn/common_questions/tools_and_setup/what_software_do_i_need/index.md index 4cf5855b9b8f03fc..3124010a3e8da80d 100644 --- a/files/en-us/learn/common_questions/tools_and_setup/what_software_do_i_need/index.md +++ b/files/en-us/learn/common_questions/tools_and_setup/what_software_do_i_need/index.md @@ -129,7 +129,7 @@ All desktop operating systems come with a basic text editor. These editors are a GEdit - (Gnome) + (GNOME)
    • Emacs
      • -
    • Vim
      • +
    • VIM
    • Visual Studio Code
      • @@ -223,7 +223,7 @@ Uploading files to a web server is a very important step while creating a websit rel="external" >Nautilus/Files - (Gnome) + (GNOME)
    • Dolphin (KDE) diff --git a/files/en-us/learn/common_questions/web_mechanics/how_does_the_internet_work/index.md b/files/en-us/learn/common_questions/web_mechanics/how_does_the_internet_work/index.md index 5db3d515c9bb6a0e..52f8bc9938acb07e 100644 --- a/files/en-us/learn/common_questions/web_mechanics/how_does_the_internet_work/index.md +++ b/files/en-us/learn/common_questions/web_mechanics/how_does_the_internet_work/index.md @@ -45,7 +45,7 @@ The **Internet** is the backbone of the Web, the technical infrastructure that m ### A simple network -When two computers need to communicate, you have to link them, either physically (usually with an [Ethernet cable](https://en.wikipedia.org/wiki/Ethernet_crossover_cable)) or wirelessly (for example with [Wi-Fi](https://en.wikipedia.org/wiki/WiFi) or [Bluetooth](https://en.wikipedia.org/wiki/Bluetooth) systems). All modern computers can sustain any of those connections. +When two computers need to communicate, you have to link them, either physically (usually with an [Ethernet cable](https://en.wikipedia.org/wiki/Ethernet_crossover_cable)) or wirelessly (for example with [Wi-Fi](https://en.wikipedia.org/wiki/Wi-Fi) or [Bluetooth](https://en.wikipedia.org/wiki/Bluetooth) systems). All modern computers can sustain any of those connections. > [!NOTE] > For the rest of this article, we will only talk about physical cables, but wireless networks work the same. diff --git a/files/en-us/learn/common_questions/web_mechanics/pages_sites_servers_and_search_engines/index.md b/files/en-us/learn/common_questions/web_mechanics/pages_sites_servers_and_search_engines/index.md index 0bb91967efd90978..6d8bf696a7bd4470 100644 --- a/files/en-us/learn/common_questions/web_mechanics/pages_sites_servers_and_search_engines/index.md +++ b/files/en-us/learn/common_questions/web_mechanics/pages_sites_servers_and_search_engines/index.md @@ -44,7 +44,7 @@ We'll cover these terms and technologies in more detail as we explore further, b - search engine - : A web service that helps you find other web pages, such as Google, Bing, Yahoo, or DuckDuckGo. Search engines are normally accessed through a web browser (e.g. you can perform search engine searches directly in the address bar of Firefox, Chrome, etc.) or through a web page (e.g. [bing.com](https://www.bing.com/) or [duckduckgo.com](https://duckduckgo.com/)). -Let's look at a simple analogy — a public library. This is what you would generally do when visiting a library: +Let's look at an analogy — a public library. This is what you would generally do when visiting a library: 1. Find a search index and look for the title of the book you want. 2. Make a note of the catalog number of the book. diff --git a/files/en-us/learn/css/building_blocks/advanced_styling_effects/index.md b/files/en-us/learn/css/building_blocks/advanced_styling_effects/index.md index 01a5a8b8055a14fd..c35d76bc2c5804c0 100644 --- a/files/en-us/learn/css/building_blocks/advanced_styling_effects/index.md +++ b/files/en-us/learn/css/building_blocks/advanced_styling_effects/index.md @@ -429,7 +429,7 @@ The `circle()` function is just one of a few basic shapes that are defined, howe ## -webkit-background-clip: text -Another feature we thought we'd mention briefly is the `text` value for {{cssxref("background-clip")}}. When used along with the proprietary `-webkit-text-fill-color: transparent;` feature, this allows you to clip background images to the shape of the element's text, making for some nice effects. This is not an official standard, but has been implemented across multiple browsers, as it is popular, and used fairly widely by developers. When used in this context, both of the properties would require a `-webkit-` vendor prefix, even for non-Webkit/Chrome-based browsers. +Another feature we thought we'd mention briefly is the `text` value for {{cssxref("background-clip")}}. When used along with the proprietary `-webkit-text-fill-color: transparent;` feature, this allows you to clip background images to the shape of the element's text, making for some nice effects. This is not an official standard, but has been implemented across multiple browsers, as it is popular, and used fairly widely by developers. When used in this context, both of the properties would require a `-webkit-` vendor prefix, even for non-WebKit/Chrome-based browsers. You can see this in action in the live sample below: ```html live-sample___webkit-background-clip diff --git a/files/en-us/learn/css/building_blocks/index.md b/files/en-us/learn/css/building_blocks/index.md index f2b972832c5dfd37..a47314ac39044b01 100644 --- a/files/en-us/learn/css/building_blocks/index.md +++ b/files/en-us/learn/css/building_blocks/index.md @@ -20,7 +20,7 @@ Before starting this module, you should have: 4. An understanding of the basics of CSS, as discussed in the [CSS first steps](/en-US/docs/Learn/CSS/First_steps) module. > [!NOTE] -> If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as [JSBin](https://jsbin.com/) or [Glitch](https://glitch.com/). +> If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as [JS Bin](https://jsbin.com/) or [Glitch](https://glitch.com/). ## Guides diff --git a/files/en-us/learn/css/css_layout/grids/index.md b/files/en-us/learn/css/css_layout/grids/index.md index 24cc58df8ebef717..98ef91edcb11bf8e 100644 --- a/files/en-us/learn/css/css_layout/grids/index.md +++ b/files/en-us/learn/css/css_layout/grids/index.md @@ -378,7 +378,7 @@ Alternatively, you can also use shorthand properties that let you specify the st - {{cssxref("grid-column")}} shorthand for `grid-column-start` and `grid-column-end` - {{cssxref("grid-row")}} shorthand for `grid-row-start` and `grid-row-end` -To see this in action, download the [line-based placement starting point file](https://github.com/mdn/learning-area/blob/main/css/css-layout/grids/8-placement-starting-point.html) or [see it live here](https://mdn.github.io/learning-area/css/css-layout/grids/8-placement-starting-point.html). It has a defined grid and a simple article outlined. You can see that _auto-placement_ is placing each item into its own cell in the grid. +To see this in action, download the [line-based placement starting point file](https://github.com/mdn/learning-area/blob/main/css/css-layout/grids/8-placement-starting-point.html) or [see it live here](https://mdn.github.io/learning-area/css/css-layout/grids/8-placement-starting-point.html). It has a defined grid and an article outlined. You can see that _auto-placement_ is placing each item into its own cell in the grid. Let's arrange all of the elements for our site by using the grid lines. Add the following rules to the bottom of your CSS: diff --git a/files/en-us/learn/css/css_layout/index.md b/files/en-us/learn/css/css_layout/index.md index 337e749a709ead4b..8e25d540bcc461cb 100644 --- a/files/en-us/learn/css/css_layout/index.md +++ b/files/en-us/learn/css/css_layout/index.md @@ -17,7 +17,7 @@ Before starting this module, you should already: 3. Understand how to [style boxes](/en-US/docs/Learn/CSS/Building_blocks). > [!NOTE] -> If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as [JSBin](https://jsbin.com/) or [Glitch](https://glitch.com/). +> If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as [JS Bin](https://jsbin.com/) or [Glitch](https://glitch.com/). ## Guides diff --git a/files/en-us/learn/css/first_steps/index.md b/files/en-us/learn/css/first_steps/index.md index af2694e29dd46231..8271f8d475bff2ae 100644 --- a/files/en-us/learn/css/first_steps/index.md +++ b/files/en-us/learn/css/first_steps/index.md @@ -17,7 +17,7 @@ Before starting this module, you should have: 3. Basic familiarity with HTML, as discussed in the [Introduction to HTML](/en-US/docs/Learn/HTML/Introduction_to_HTML) module. > [!NOTE] -> If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as [JSBin](https://jsbin.com/) or [Glitch](https://glitch.com/). +> If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as [JS Bin](https://jsbin.com/) or [Glitch](https://glitch.com/). ## Guides diff --git a/files/en-us/learn/css/howto/css_faq/index.md b/files/en-us/learn/css/howto/css_faq/index.md index d07b2d48afc53cc1..63d07e7457fe4823 100644 --- a/files/en-us/learn/css/howto/css_faq/index.md +++ b/files/en-us/learn/css/howto/css_faq/index.md @@ -273,7 +273,7 @@ text-stroke: 4px navy; ## How does z-index relate to positioning? -The z-index property specifies the stack order of elements. +The `z-index` property specifies the stack order of elements. An element with a higher z-index/stack order is always rendered in front of an element with a lower z-index/stack order on the screen. Z-index will only work on elements that have a specified position (`position:absolute`, `position:relative`, or `position:fixed`). diff --git a/files/en-us/learn/css/styling_text/index.md b/files/en-us/learn/css/styling_text/index.md index dbc71538577f15f3..4abba8107a09899c 100644 --- a/files/en-us/learn/css/styling_text/index.md +++ b/files/en-us/learn/css/styling_text/index.md @@ -13,7 +13,7 @@ With the basics of the CSS language covered, the next CSS topic for you to conce Before starting this module, you should already have basic familiarity with HTML, as discussed in the [Introduction to HTML](/en-US/docs/Learn/HTML/Introduction_to_HTML) module, and be comfortable with CSS fundamentals, as discussed in [Introduction to CSS](/en-US/docs/Learn/CSS/First_steps). > [!NOTE] -> If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as [JSBin](https://jsbin.com/) or [Glitch](https://glitch.com/). +> If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as [JS Bin](https://jsbin.com/) or [Glitch](https://glitch.com/). ## Guides diff --git a/files/en-us/learn/forms/form_validation/index.md b/files/en-us/learn/forms/form_validation/index.md index 6341129bf4d059e1..d7af8a93dc352ccb 100644 --- a/files/en-us/learn/forms/form_validation/index.md +++ b/files/en-us/learn/forms/form_validation/index.md @@ -129,7 +129,7 @@ input:valid { {{EmbedLiveSample("Simple_start_file", "100%", 80)}} -To begin, make a copy of the [`fruit-start.html` file found on Github](https://github.com/mdn/learning-area/blob/main/html/forms/form-validation/fruit-start.html) in a new directory on your hard drive. +To begin, make a copy of the [`fruit-start.html` file found on GitHub](https://github.com/mdn/learning-area/blob/main/html/forms/form-validation/fruit-start.html) in a new directory on your hard drive. ### The required attribute @@ -176,7 +176,7 @@ We also added a background gradient when the input is required _and_ invalid. Tr {{EmbedLiveSample("The_required_attribute", "100%", 80)}} -Try submitting the form from the [live `required` example](https://mdn.github.io/learning-area/html/forms/form-validation/fruit-required.html) without a value. Note how the invalid input gets focus, a default error message ("Please fill out this field") appears, and the form is prevented from being sent. You can also see the [source code on Github](https://github.com/mdn/learning-area/blob/main/html/forms/form-validation/fruit-required.html). +Try submitting the form from the [live `required` example](https://mdn.github.io/learning-area/html/forms/form-validation/fruit-required.html) without a value. Note how the invalid input gets focus, a default error message ("Please fill out this field") appears, and the form is prevented from being sent. You can also see the [source code on GitHub](https://github.com/mdn/learning-area/blob/main/html/forms/form-validation/fruit-required.html). ### Validating against a regular expression @@ -454,7 +454,7 @@ These automated messages have two drawbacks: ![Example of an error message with Firefox in French on an English page](error-firefox-win7.png) Customizing these error messages is one of the most common use cases of the Constraint Validation API. -Let's work through a simple example of how to do this. +Let's work through an example of how to do this. We'll start with some HTML (feel free to put this in a blank HTML file; use a fresh copy of [fruit-start.html](https://github.com/mdn/learning-area/blob/main/html/forms/form-validation/fruit-start.html) as a basis, if you like): diff --git a/files/en-us/learn/forms/index.md b/files/en-us/learn/forms/index.md index d6e0009007f79efb..12672a309301de6f 100644 --- a/files/en-us/learn/forms/index.md +++ b/files/en-us/learn/forms/index.md @@ -17,7 +17,7 @@ Mastering forms however requires more than just HTML knowledge — you also need The above text is a good indicator as to why we've put web forms into its own standalone module, rather than trying to mix bits of it into the HTML, CSS, and JavaScript topic areas — form elements are more complex than most other HTML elements, and they also require a close marriage of related CSS and JavaScript techniques to get the most out of them. > [!NOTE] -> If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as [JSBin](https://jsbin.com/) or [Glitch](https://glitch.com/). +> If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as [JS Bin](https://jsbin.com/) or [Glitch](https://glitch.com/). ## Introductory guides diff --git a/files/en-us/learn/forms/test_your_skills_colon__form_validation/index.md b/files/en-us/learn/forms/test_your_skills_colon__form_validation/index.md index ef5a76b70d001e1b..cca4f1027f325c68 100644 --- a/files/en-us/learn/forms/test_your_skills_colon__form_validation/index.md +++ b/files/en-us/learn/forms/test_your_skills_colon__form_validation/index.md @@ -46,7 +46,7 @@ Again, to help you might want to consider adding some simple CSS to show when a ## Form validation 3 -In our final task for this set, we are providing you with a similar example to what you saw in the accompanying article — a simple email address entry input. We would like you to use the constraint validation API, plus some form validation attributes, to program some custom error messages. +In our final task for this set, we are providing you with a similar example to what you saw in the accompanying article — an email address entry input. We would like you to use the constraint validation API, plus some form validation attributes, to program some custom error messages. 1. Make the input mandatory to fill in, and give it a minimum length of 10 characters. 2. Add an event listener that checks whether the inputted value is an email address, and whether it is long enough. If it doesn't look like an email address or is too short, provide the user with appropriate custom error messages. diff --git a/files/en-us/learn/forms/ui_pseudo-classes/index.md b/files/en-us/learn/forms/ui_pseudo-classes/index.md index f7339858f5c0f998..88051e54df0bcfea 100644 --- a/files/en-us/learn/forms/ui_pseudo-classes/index.md +++ b/files/en-us/learn/forms/ui_pseudo-classes/index.md @@ -215,7 +215,7 @@ You can target form controls using the {{cssxref(":valid")}} and {{cssxref(":inv - Controls whose current value is outside the range limits specified by the [`min`](/en-US/docs/Web/HTML/Element/input#min) and [`max`](/en-US/docs/Web/HTML/Element/input#max) attributes are (matched with) `:invalid`, but also matched by {{cssxref(":out-of-range")}}, as you'll see later on. - There are some other ways to make an element matched by `:valid`/`:invalid`, as you'll see in the [Client-side form validation](/en-US/docs/Learn/Forms/Form_validation) article. But we'll keep things simple for now. -Let's go in and look at a simple example of `:valid`/`:invalid` (see [valid-invalid.html](https://mdn.github.io/learning-area/html/forms/pseudo-classes/valid-invalid.html) for the live version, and also check out the [source code](https://github.com/mdn/learning-area/blob/main/html/forms/pseudo-classes/valid-invalid.html)). +Let's go in and look at an example of `:valid`/`:invalid` (see [valid-invalid.html](https://mdn.github.io/learning-area/html/forms/pseudo-classes/valid-invalid.html) for the live version, and also check out the [source code](https://github.com/mdn/learning-area/blob/main/html/forms/pseudo-classes/valid-invalid.html)). As in the previous example, we've got extra ``s to generate content on, which we'll use to provide indicators of valid/invalid data: diff --git a/files/en-us/learn/getting_started_with_the_web/html_basics/index.md b/files/en-us/learn/getting_started_with_the_web/html_basics/index.md index 8bd91e0e6e298ec2..89b1fa1a7e4ed037 100644 --- a/files/en-us/learn/getting_started_with_the_web/html_basics/index.md +++ b/files/en-us/learn/getting_started_with_the_web/html_basics/index.md @@ -199,7 +199,7 @@ Try adding an ordered or unordered list to your example page. ## Links -Links are very important — they are what makes the web a web! To add a link, we need to use a simple element — {{htmlelement("a")}} — "a" being the short form for "anchor". To make text within your paragraph into a link, follow these steps: +Links are very important — they are what makes the web a web! To add a link, we need to use an element — {{htmlelement("a")}} — "a" being the short form for "anchor". To make text within your paragraph into a link, follow these steps: 1. Choose some text. We chose the text "Mozilla Manifesto". 2. Wrap the text in an {{htmlelement("a")}} element, as shown below: diff --git a/files/en-us/learn/getting_started_with_the_web/the_web_and_web_standards/index.md b/files/en-us/learn/getting_started_with_the_web/the_web_and_web_standards/index.md index 3cfd601cde8c2362..38a5647919a4fdce 100644 --- a/files/en-us/learn/getting_started_with_the_web/the_web_and_web_standards/index.md +++ b/files/en-us/learn/getting_started_with_the_web/the_web_and_web_standards/index.md @@ -94,7 +94,7 @@ The actual syntax for HTTP messages (called requests and responses) is not that If we adopted a house-building analogy, HTML would be like the foundations and walls of the house, which give it structure and hold it together. -- Cascading Style Sheets (**CSS**) is a rule-based language used to apply styles to your HTML — for example, setting text and background colors, adding borders, animating things, or laying out a page in a certain way. As a simple example, the following code would turn our HTML paragraph red: +- Cascading Style Sheets (**CSS**) is a rule-based language used to apply styles to your HTML — for example, setting text and background colors, adding borders, animating things, or laying out a page in a certain way. As an example, the following code would turn our HTML paragraph red: ```css p { diff --git a/files/en-us/learn/html/cheatsheet/index.md b/files/en-us/learn/html/cheatsheet/index.md index 5db88e9bd5b0a627..3ee1858628f5587c 100644 --- a/files/en-us/learn/html/cheatsheet/index.md +++ b/files/en-us/learn/html/cheatsheet/index.md @@ -279,7 +279,7 @@ an extended quotation.</blockquote> 
       <details>
-  <summary>Html Cheat Sheet</summary>
+  <summary>HTML Cheat Sheet</summary>
   <p>Inline elements</p>
   <p>Block elements</p>
 </details>
      diff --git a/files/en-us/learn/html/howto/use_data_attributes/index.md b/files/en-us/learn/html/howto/use_data_attributes/index.md index ff60410d317e1411..2aaccbfcd554f67c 100644 --- a/files/en-us/learn/html/howto/use_data_attributes/index.md +++ b/files/en-us/learn/html/howto/use_data_attributes/index.md @@ -61,9 +61,9 @@ article[data-columns="4"] { } ``` -You can see all this working together [in this JSBin example](https://jsbin.com/ujiday/2/edit). +You can see all this working together [in this JS Bin example](https://jsbin.com/ujiday/2/edit). -Data attributes can also be stored to contain information that is constantly changing, like scores in a game. Using the CSS selectors and JavaScript access here this allows you to build some nifty effects without having to write your own display routines. See [this screencast](https://www.youtube.com/watch?v=On_WyUB1gOk) for an example using generated content and CSS transitions ([JSBin example](https://jsbin.com/atawaz/3/edit)). +Data attributes can also be stored to contain information that is constantly changing, like scores in a game. Using the CSS selectors and JavaScript access here this allows you to build some nifty effects without having to write your own display routines. See [this screencast](https://www.youtube.com/watch?v=On_WyUB1gOk) for an example using generated content and CSS transitions ([JS Bin example](https://jsbin.com/atawaz/3/edit)). Data values are strings. Number values must be quoted in the selector for the styling to take effect. diff --git a/files/en-us/learn/html/introduction_to_html/index.md b/files/en-us/learn/html/introduction_to_html/index.md index 4e33b3d05ad2b04d..1729636f8bded329 100644 --- a/files/en-us/learn/html/introduction_to_html/index.md +++ b/files/en-us/learn/html/introduction_to_html/index.md @@ -13,7 +13,7 @@ At its heart, {{glossary("HTML")}} is a language made up of {{Glossary("Element" Before starting this module, you don't need any previous HTML knowledge, but you should have at least basic familiarity with using computers and using the web passively (i.e., just looking at it and consuming content). You should have a basic work environment set up (as detailed in [Installing basic software](/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software)), and understand how to create and manage files (as detailed in [Dealing with files](/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files)). Both are parts of our [Getting started with the web](/en-US/docs/Learn/Getting_started_with_the_web) complete beginner's module. > [!NOTE] -> If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as [JSBin](https://jsbin.com/) or [Glitch](https://glitch.com/). +> If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as [JS Bin](https://jsbin.com/) or [Glitch](https://glitch.com/). ## Guides diff --git a/files/en-us/learn/html/introduction_to_html/the_head_metadata_in_html/index.md b/files/en-us/learn/html/introduction_to_html/the_head_metadata_in_html/index.md index c84668f69f58d19b..802afd112b58a3dd 100644 --- a/files/en-us/learn/html/introduction_to_html/the_head_metadata_in_html/index.md +++ b/files/en-us/learn/html/introduction_to_html/the_head_metadata_in_html/index.md @@ -64,7 +64,7 @@ We've already seen the {{htmlelement("title")}} element in action — this can b - The {{htmlelement("Heading_Elements", "h1")}} element appears on the page when loaded in the browser — generally this should be used once per page, to mark up the title of your page content (the story title, or news headline, or whatever is appropriate to your usage.) - The {{htmlelement("title")}} element is metadata that represents the title of the overall HTML document (not the document's content.) -### Active learning: Inspecting a simple example +### Active learning: Inspecting an example 1. To start off this active learning, we'd like you to go to our GitHub repo and download a copy of our [title-example.html page](https://github.com/mdn/learning-area/blob/main/html/introduction-to-html/the-html-head/title-example.html). To do this, either diff --git a/files/en-us/learn/html/multimedia_and_embedding/images_in_html/index.md b/files/en-us/learn/html/multimedia_and_embedding/images_in_html/index.md index b2f8c75febde5845..fb8a88e1d0945ed5 100644 --- a/files/en-us/learn/html/multimedia_and_embedding/images_in_html/index.md +++ b/files/en-us/learn/html/multimedia_and_embedding/images_in_html/index.md @@ -6,7 +6,7 @@ page-type: learn-module-chapter {{LearnSidebar}}{{NextMenu("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding")}} -In the beginning, the Web was just text, and it was really quite boring. Fortunately, it wasn't too long before the ability to embed images (and other more interesting types of content) inside web pages was added. It is logical to start with the humble {{htmlelement("img")}} element, used to embed a simple image in a webpage, but there are other types of multimedia to consider. In this article we'll look at how to use it in depth, including the basics, annotating it with captions using {{htmlelement("figure")}}, and detailing how it relates to {{glossary("CSS")}} background images, and we'll introduce other graphics available to the web platform. +In the beginning, the Web was just text, and it was really quite boring. Fortunately, it wasn't too long before the ability to embed images (and other more interesting types of content) inside web pages was added. It is logical to start with the humble {{htmlelement("img")}} element, used to embed an image in a webpage, but there are other types of multimedia to consider. In this article we'll look at how to use it in depth, including the basics, annotating it with captions using {{htmlelement("figure")}}, and detailing how it relates to {{glossary("CSS")}} background images, and we'll introduce other graphics available to the web platform. @@ -39,7 +39,7 @@ In the beginning, the Web was just text, and it was really quite boring. Fortuna ## How do we put an image on a webpage? -In order to put a simple image on a web page, we use the {{htmlelement("img")}} element. This is a {{Glossary("void element")}} (meaning, it cannot have any child content and cannot have an end tag) that requires two attributes to be useful: `src` and `alt`. The `src` attribute contains a URL pointing to the image you want to embed in the page. As with the `href` attribute for {{htmlelement("a")}} elements, the `src` attribute can be a relative URL or an absolute URL. Without a `src` attribute, an `img` element has no image to load. +In order to put an image on a web page, we use the {{htmlelement("img")}} element. This is a {{Glossary("void element")}} (meaning, it cannot have any child content and cannot have an end tag) that requires two attributes to be useful: `src` and `alt`. The `src` attribute contains a URL pointing to the image you want to embed in the page. As with the `href` attribute for {{htmlelement("a")}} elements, the `src` attribute can be a relative URL or an absolute URL. Without a `src` attribute, an `img` element has no image to load. The [`alt` attribute is described below](#alternative_text). @@ -208,7 +208,7 @@ It is better to include such supporting information in the main article text, ra ### Active learning: embedding an image -It is now your turn to play! This active learning section will have you up and running with a simple embedding exercise. You are provided with a basic {{htmlelement("img")}} tag; we'd like you to embed the image located at the following URL: +It is now your turn to play! This active learning section will have you up and running with an embedding exercise. You are provided with a basic {{htmlelement("img")}} tag; we'd like you to embed the image located at the following URL: ```url https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg diff --git a/files/en-us/learn/html/multimedia_and_embedding/images_in_html/test_your_skills_colon__html_images/index.md b/files/en-us/learn/html/multimedia_and_embedding/images_in_html/test_your_skills_colon__html_images/index.md index 66641d1f10c3ab38..af10e57421a2d086 100644 --- a/files/en-us/learn/html/multimedia_and_embedding/images_in_html/test_your_skills_colon__html_images/index.md +++ b/files/en-us/learn/html/multimedia_and_embedding/images_in_html/test_your_skills_colon__html_images/index.md @@ -15,7 +15,7 @@ The aim of this skill test is to assess whether you understand [images and how t ## Task 1 -In this task, we want you to embed a simple image of some Blueberries into the page. You need to: +In this task, we want you to embed an image of some Blueberries into the page. You need to: - Add the path to the image to an appropriate attribute to embed it on the page. The image is called `blueberries.jpg`, and it is in a folder inside the current folder called `images`. - Add some alternative text to an appropriate attribute to describe the image, for people that cannot see it. diff --git a/files/en-us/learn/html/multimedia_and_embedding/index.md b/files/en-us/learn/html/multimedia_and_embedding/index.md index 2294f815614eee48..53a8de50edccd471 100644 --- a/files/en-us/learn/html/multimedia_and_embedding/index.md +++ b/files/en-us/learn/html/multimedia_and_embedding/index.md @@ -13,14 +13,14 @@ We've looked at a lot of text so far in this course, but the web would be really Before starting this module, you should have a reasonable understanding of the basics of HTML, as previously covered in [Introduction to HTML](/en-US/docs/Learn/HTML/Introduction_to_HTML). If you have not worked through this module (or something similar), work through it first, then come back! > [!NOTE] -> If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as [JSBin](https://jsbin.com/) or [Glitch](https://glitch.com/). +> If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as [JS Bin](https://jsbin.com/) or [Glitch](https://glitch.com/). ## Guides This module contains the following articles, which will take you through all the fundamentals of embedding multimedia on webpages. - [Images in HTML](/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML) - - : There are other types of multimedia to consider, but it is logical to start with the humble {{htmlelement("img")}} element used to embed a simple image in a webpage. In this article we'll look at how to use it in more depth, including basics, annotating it with captions using {{htmlelement("figure")}}, and how it relates to CSS background images. + - : There are other types of multimedia to consider, but it is logical to start with the humble {{htmlelement("img")}} element used to embed an image in a webpage. In this article we'll look at how to use it in more depth, including basics, annotating it with captions using {{htmlelement("figure")}}, and how it relates to CSS background images. - [Video and audio content](/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content) - : Next, we'll look at how to use the HTML {{htmlelement("video")}} and {{htmlelement("audio")}} elements to embed video and audio on our pages, including basics, providing access to different file formats to different browsers, adding captions and subtitles, and how to add fallbacks for older browsers. - [From \ to \
      Multimedia and Embedding Images