ryrodriguez25 · pull · Oct 22, 2025 · Oct 22, 2025 · Oct 22, 2025 · Oct 22, 2025
diff --git a/...-us/learn_web_development/core/structuring_content/table_accessibility/index.md b/...-us/learn_web_development/core/structuring_content/table_accessibility/index.md
@@ -178,22 +178,115 @@ These elements don't necessarily make the table any more accessible to screen re
 To use them, they should be included in the following order:
 
 - The `<thead>` element must wrap the part of the table that is the header — this is usually the first row containing the column headings, but this is not necessarily always the case. If you are using {{htmlelement("col")}}/{{htmlelement("colgroup")}} elements, the table header should come just below those.
-- The `<tbody>` element needs to wrap the main part of the table content that isn't the table header or footer.
-- The `<tfoot>` element needs to wrap the part of the table that is the footer — this might be a final row with items in the previous rows summed, for example.
+- The `<tbody>` element needs to wrap the main part of the table content that isn't the table header or footer, and should come after the `<thead>`.
+- The `<tfoot>` element needs to wrap the part of the table that is the footer — this might be a final row with items in the previous rows summed, for example. The `<tfoot>` should come after the `<tbody>`.
 
 > [!NOTE]
-> `<tbody>` is always included in every table, implicitly if you don't specify it in your code. To check this, open up one of your previous examples that doesn't include `<tbody>` and look at the HTML code in your [browser developer tools](/en-US/docs/Learn_web_development/Howto/Tools_and_setup/What_are_browser_developer_tools) — you will see that the browser has added this tag for you. You might wonder why you ought to bother including it at all — you should, because it gives you more control over your table structure and styling.
+> `<tbody>` is always implicitly included in every table if you don't specify it in your code. To check this, open up one of your previous examples that doesn't include `<tbody>` and look at the HTML code in your [browser developer tools](/en-US/docs/Learn_web_development/Howto/Tools_and_setup/What_are_browser_developer_tools) — you will see that the browser has added this tag for you. You might wonder why you ought to bother including it at all — you should, because it gives you more control over your table structure and styling.
 
 ### Adding structure to a spending record table
 
 Let's get you to put these new elements into action.
 
-1. First of all, make a local copy of [spending-record.html](https://github.com/mdn/learning-area/blob/main/html/tables/advanced/spending-record.html) and [minimal-table.css](https://github.com/mdn/learning-area/blob/main/html/tables/advanced/minimal-table.css) in a new folder.
-2. Try putting the obvious headers row inside a `<thead>` element, the "SUM" row inside a `<tfoot>` element, and the rest of the content inside a `<tbody>` element.
-3. Next, add a [`colspan`](/en-US/docs/Web/HTML/Reference/Elements/td#colspan) attribute to make the "SUM" cell span across the first four columns, so the actual number appears at the bottom of the "Cost" column.
-4. Let's add some simple extra styling to the table, to give you an idea of how useful these elements are for applying CSS. Inside the head of your HTML document, you'll see an empty {{htmlelement("style")}} element. Inside this element, add the following lines of CSS code:
+1. First of all, create a new HTML file called `spending-record.html` and put the following HTML inside the `<body>`:
+
+   ```html
+   <h1>My spending record</h1>
+
+   <table>
+     <caption>
+       How I chose to spend my money
+     </caption>
+     <tr>
+       <th>Purchase</th>
+       <th>Location</th>
+       <th>Date</th>
+       <th>Evaluation</th>
+       <th>Cost (€)</th>
+     </tr>
+     <tr>
+       <td>Haircut</td>
+       <td>Hairdresser</td>
+       <td>12/09</td>
+       <td>Great idea</td>
+       <td>30</td>
+     </tr>
+     <tr>
+       <td>Lasagna</td>
+       <td>Restaurant</td>
+       <td>12/09</td>
+       <td>Regrets</td>
+       <td>18</td>
+     </tr>
+     <tr>
+       <td>Shoes</td>
+       <td>Shoeshop</td>
+       <td>13/09</td>
+       <td>Big regrets</td>
+       <td>65</td>
+     </tr>
+     <tr>
+       <td>Toothpaste</td>
+       <td>Supermarket</td>
+       <td>13/09</td>
+       <td>Good</td>
+       <td>5</td>
+     </tr>
+     <tr>
+       <td>SUM</td>
+       <td>118</td>
+     </tr>
+   </table>
+   ```
+
+2. Next, create a CSS file called `minimal-table.css` in the same directory as your HTML file and fill it with the following content:
+
+   ```css live-sample___finished-table-structure
+   html {
+     font-family: sans-serif;
+   }
+
+   table {
+     border-collapse: collapse;
+     border: 2px solid rgb(200 200 200);
+     letter-spacing: 1px;
+     font-size: 0.8rem;
+   }
+
+   td,
+   th {
+     border: 1px solid rgb(190 190 190);
+     padding: 10px 20px;
+   }
+
+   th {
+     background-color: rgb(235 235 235);
+   }
+
+   td {
+     text-align: center;
+   }
+
+   tr:nth-child(even) td {
+     background-color: rgb(250 250 250);
+   }
+
+   tr:nth-child(odd) td {
+     background-color: rgb(245 245 245);
+   }
+
+   caption {
+     padding: 10px;
+   }
+   ```
 
-   ```css
+3. Add a `<link>` element into your HTML `<head>` to apply the CSS to the HTML (see [Applying CSS and JavaScript to HTML](/en-US/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata#applying_css_and_javascript_to_html) for help with this).
+
+4. Try putting the obvious headers row inside a `<thead>` element, the "SUM" row inside a `<tfoot>` element, and the rest of the content inside a `<tbody>` element.
+5. Next, add a [`colspan`](/en-US/docs/Web/HTML/Reference/Elements/td#colspan) attribute to make the "SUM" cell span across the first four columns, so the actual number appears at the bottom of the "Cost" column.
+6. Let's add some simple extra styling to the table, to give you an idea of how useful these elements are for applying CSS. Add the following to your CSS file:
+
+   ```css live-sample___finished-table-structure
    tbody {
      font-size: 95%;
      font-style: italic;
@@ -207,14 +300,18 @@ Let's get you to put these new elements into action.
    > [!NOTE]
    > We don't expect you to fully understand the CSS right now. You'll learn more about this when you go through our CSS modules (starting with [CSS Styling basics](/en-US/docs/Learn_web_development/Core/Styling_basics), which includes an article specifically on [styling tables](/en-US/docs/Learn_web_development/Core/Styling_basics/Tables)).
 
-5. Save and refresh, and have a look at the result. If the `<tbody>` and `<tfoot>` elements weren't in place, you'd have to write much more complicated selectors/rules to apply the same styling.
+7. Save and refresh, and have a look at the result. If the `<tbody>` and `<tfoot>` elements weren't in place, you'd have to write much more complicated selectors/rules to apply the same styling.
+
+The finished example should look like this:
+
+{{embedlivesample("finished-table-structure", "100%", "300")}}
 
 <details>
 <summary>Click here to show the solution</summary>
 
 Your finished HTML should look something like this:
 
-```html
+```html live-sample___finished-table-structure
 <table>
   <caption>
     How I chose to spend my money
@@ -228,12 +325,6 @@ Your finished HTML should look something like this:
       <th>Cost (€)</th>
     </tr>
   </thead>
-  <tfoot>
-    <tr>
-      <td colspan="4">SUM</td>
-      <td>118</td>
-    </tr>
-  </tfoot>
   <tbody>
     <tr>
       <td>Haircut</td>
@@ -264,11 +355,15 @@ Your finished HTML should look something like this:
       <td>5</td>
     </tr>
   </tbody>
+  <tfoot>
+    <tr>
+      <td colspan="4">SUM</td>
+      <td>118</td>
+    </tr>
+  </tfoot>
 </table>
 ```
 
-You can find the complete code on GitHub at [spending-record-finished.html](https://github.com/mdn/learning-area/blob/main/html/tables/advanced/spending-record-finished.html) ([see it running live also](https://mdn.github.io/learning-area/html/tables/advanced/spending-record-finished.html)).
-
 </details>
 
 ## The `scope` attribute

diff --git a/files/en-us/web/api/canvas_api/tutorial/using_images/index.md b/files/en-us/web/api/canvas_api/tutorial/using_images/index.md
@@ -44,15 +44,24 @@ We can obtain a reference to images on the same page as the canvas by using one
 - The {{domxref("document.getElementsByTagName()")}} method
 - If you know the ID of the specific image you wish to use, you can use {{domxref("document.getElementById()")}} to retrieve that specific image
 
-### Using images from other domains
+If you want to use many images or [lazy-load resources](/en-US/docs/Web/Performance/Guides/Lazy_loading), you probably need to wait for all the files to be available before drawing to the canvas.
+The example below deals with multiple images using an async function and [`Promise.all`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all) to wait for all images to load before calling `drawImage()`:
 
-Using the [`crossorigin`](/en-US/docs/Web/HTML/Reference/Elements/img#crossorigin) attribute of an {{HTMLElement("img")}} element (reflected by the {{domxref("HTMLImageElement.crossOrigin")}} property), you can request permission to load an image from another domain for use in your call to `drawImage()`. If the hosting domain permits cross-domain access to the image, the image can be used in your canvas without tainting it; otherwise using the image will [taint the canvas](/en-US/docs/Web/HTML/How_to/CORS_enabled_image#security_and_tainted_canvases).
-
-### Using other canvas elements
-
-Just as with normal images, we access other canvas elements using either the {{domxref("document.getElementsByTagName()")}} or {{domxref("document.getElementById()")}} method. Be sure you've drawn something to the source canvas before using it in your target canvas.
+```js
+async function draw() {
+  // Wait for all images to be loaded:
+  await Promise.all(
+    Array.from(document.images).map(
+      (image) =>
+        new Promise((resolve) => image.addEventListener("load", resolve)),
+    ),
+  );
 
-One of the more practical uses of this would be to use a second canvas element as a thumbnail view of the other larger canvas.
+  const ctx = document.getElementById("canvas").getContext("2d");
+  // call drawImage() as usual
+}
+draw();
+```
 
 ### Creating images from scratch
 
@@ -77,24 +86,7 @@ img.addEventListener("load", () => {
 img.src = "myImage.png";
 ```
 
-If you're using one external image, this can be a good approach, but once you want to use many images or [lazy-load resources](/en-US/docs/Web/Performance/Guides/Lazy_loading), you probably need to wait for all the files to be available before drawing to the canvas.
-The examples below that deal with multiple images use an async function and [Promise.all](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all) to wait for all images to load before calling `drawImage()`:
-
-```js
-async function draw() {
-  // Wait for all images to be loaded:
-  await Promise.all(
-    Array.from(document.images).map(
-      (image) =>
-        new Promise((resolve) => image.addEventListener("load", resolve)),
-    ),
-  );
-
-  const ctx = document.getElementById("canvas").getContext("2d");
-  // call drawImage() as usual
-}
-draw();
-```
+Whether you have `<img>` elements in your markup or you create them programmatically in JavaScript, external images may have [CORS](/en-US/docs/Web/HTTP/Guides/CORS) restrictions. By default, externally fetched images [taint the canvas](/en-US/docs/Web/HTML/How_to/CORS_enabled_image#security_and_tainted_canvases), preventing your site from reading data cross-origin. Using the [`crossorigin`](/en-US/docs/Web/HTML/Reference/Elements/img#crossorigin) attribute of an {{HTMLElement("img")}} element (reflected by the {{domxref("HTMLImageElement.crossOrigin")}} property), you can request permission to load an image from another domain using CORS. If the hosting domain permits cross-domain access to the image, the image can be used in your canvas without tainting it.
 
 ### Embedding an image via data: URL
 
@@ -110,19 +102,23 @@ One advantage of data URLs is that the resulting image is available immediately
 
 Some disadvantages of this method are that your image is not cached, and for larger images the encoded URL can become quite long.
 
+### Using other canvas elements
+
+Just as with normal images, we access other canvas elements using either the {{domxref("document.getElementsByTagName()")}} or {{domxref("document.getElementById()")}} method. Be sure you've drawn something to the source canvas before using it in your target canvas.
+
+One of the more practical uses of this would be to use a second canvas element as a thumbnail view of the other larger canvas.
+
 ### Using frames from a video
 
 You can also use frames from a video being presented by a {{HTMLElement("video")}} element (even if the video is not visible). For example, if you have a {{HTMLElement("video")}} element with the ID "myVideo", you can do this:
 
 ```js
-function getMyVideo() {
-  const canvas = document.getElementById("canvas");
-  const ctx = canvas.getContext("2d");
-  return document.getElementById("myVideo");
-}
+const video = document.getElementById("myVideo");
+video.currentTime = 10; // Seek to 10 seconds into the video
+video.pause(); // Pause the video to freeze the frame
 ```
 
-This returns the {{domxref("HTMLVideoElement")}} object for the video, which, as covered earlier, can be used as an image source for the canvas.
+Now the {{domxref("HTMLVideoElement")}} is at the 10 second mark, and you can draw the current frame to your canvas. To make sure that the frame is available when you call `drawImage()`, call `drawImage()` within [`requestVideoFrameCallback()`](/en-US/docs/Web/API/HTMLVideoElement/requestVideoFrameCallback#drawing_video_frames_on_a_canvas).
 
 ## Drawing images
 

diff --git a/files/en-us/web/html/reference/global_attributes/inert/index.md b/files/en-us/web/html/reference/global_attributes/inert/index.md
@@ -29,6 +29,23 @@ Use careful consideration for accessibility when applying the `inert` attribute.
 
 While providing visual and non-visual cues about content inertness, also remember that the visual viewport may contain only sections of content. Users may be zoomed in to a small section of content, or users may not be able to view the content at all. Inert sections not being obviously inert can lead to frustration and bad user experience.
 
+## Examples
+
+In this example, the second {{htmlelement("div")}} and all of its descendants are made inert via the `inert` attribute:
+
+```html
+<div>
+  <label for="button1">Button 1</label>
+  <button id="button1">I am not inert</button>
+</div>
+<div inert>
+  <label for="button2">Button 2</label>
+  <button id="button2">I am inert</button>
+</div>
+```
+
+{{ EmbedLiveSample('Examples', 560, 200) }}
+
 ## Specifications
 
 {{Specifications}}
@@ -40,6 +57,4 @@ While providing visual and non-visual cues about content inertness, also remembe
 ## See also
 
 - HTML {{HTMLElement("dialog")}} element
-- {{domxref("HTMLElement.inert")}} HTML DOM property
-- [Introducing inert](https://web.dev/articles/inert)
-- [The "inert" attribute is finally coming to the web](https://www.stefanjudis.com/blog/the-inert-attribute-is-finally-coming-to-the-web/)
+- {{domxref("HTMLElement.inert")}} DOM property
diff --git a/files/en-us/web/uri/reference/fragment/text_fragments/index.md b/files/en-us/web/uri/reference/fragment/text_fragments/index.md
@@ -76,7 +76,7 @@ Supporting browsers will scroll to and highlight the first text fragment in the
 
 ### Text fragment with textStart
 
-- [https://example.com/#:~:text=for](https://example.com/#:~:text=for) scrolls to and highlights the first instance of the text `for` in the document.
+- [https://example.com/#:~:text=use](https://example.com/#:~:text=use) scrolls to and highlights the first instance of the text `use` in the document.
 - [https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/a#:~:text=human](/en-US/docs/Web/HTML/Reference/Elements/a#:~:text=human) scrolls to and highlights the first instance of the text `human` in the document.
 - [https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/a#:~:text=linked%20URL](/en-US/docs/Web/HTML/Reference/Elements/a#:~:text=linked%20URL) scrolls to and highlights the first instance of the text `linked URL` in the document.
 
@@ -87,7 +87,7 @@ Supporting browsers will scroll to and highlight the first text fragment in the
 
 ### Examples with prefix- and/or -suffix
 
-- [https://example.com/#:~:text=asking-,for](https://example.com/#:~:text=asking-,for) scrolls to and highlights the second instance of the text `for` in the document.
+- [https://example.com/#:~:text=avoid-,use](https://example.com/#:~:text=avoid-,use) scrolls to and highlights the second instance of the text `use` in the document.
 - [https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/a#:~:text=sent-,referrer](/en-US/docs/Web/HTML/Reference/Elements/a#:~:text=sent-,referrer) scrolls to and highlights the first instance of the text `referrer` that has the text `sent` directly before it. This is the 5th instance of `referrer` in the document; without the prefix, the first instance would be highlighted.
 - [https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/a#:~:text=linked%20URL,-'s%20format](/en-US/docs/Web/HTML/Reference/Elements/a#:~:text=linked%20URL,-'s%20format) scrolls to and highlights the first instance of the text `linked URL` that has the text `'s format` directly following it. This is the 5th instance of `linked URL` in the document; without the suffix, the first instance would be highlighted.
 - [https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/a#:~:text=downgrade:-,The%20Referer,be%20sent,-to%20origins](/en-US/docs/Web/HTML/Reference/Elements/a#:~:text=downgrade:-,The%20Referer,be%20sent,-to%20origins) scrolls to and highlights the instance of the text `The Referer ... be sent` that is prefixed by `downgrade:` and suffixed by `to origins`. This illustrates a more complex example where the prefix/suffix are used to home in on the specific text instance you want to link to. Try removing the prefix, for example, and seeing what is matched.

diff --git a/package.json b/package.json
@@ -59,7 +59,7 @@
   },
   "devDependencies": {
     "cheerio": "1.1.2",
-    "cspell": "9.2.1",
+    "cspell": "9.2.2",
     "cspell-group-by-file-reporter": "^1.0.1",
     "file-type": "^21.0.0",
     "fs-extra": "^11.3.2",