• Chapter 6 — Embedded Content
  • 6.1 — <img> — Image
  • 6.2 — <picture>
  • 6.3 — <source>
  • 6.4 — <video>
  • 6.5 — <audio>
  • 6.6 — <track>
  • 6.7 — <iframe> — Inline Frame
  • 6.8 — <embed>
  • 6.9 — <object>
  • 6.10 — <canvas>
  • 6.11 — <map> and <area> — Image Maps
  • 6.12 — <svg> and <math>
    • <svg>
    • <math>

§Chapter 6 — Embedded Content

Embedded content elements bring external resources into the document — images, video, audio, iframes, canvases, and vector graphics.

§6.1 — <img> — Image

Embeds an image. A void element.

Element-specific attributes:

Four responsive image patterns:

<!-- Pattern 1: Resolution switching — same image, different sizes -->
<img src="hero-800.webp"
     srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1600.webp 1600w"
     sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1600px"
     alt="Hero image"
     width="1600" height="900"
     loading="eager" fetchpriority="high">

<!-- Pattern 2: Art direction — different crops per breakpoint -->
<picture>
  <source media="(max-width: 767px)" srcset="hero-portrait.webp">
  <source media="(min-width: 768px)" srcset="hero-landscape.webp">
  <img src="hero-landscape.webp" alt="Hero" width="1200" height="600">
</picture>

<!-- Pattern 3: Format selection — modern format with fallback -->
<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Product photo" width="600" height="400" loading="lazy">
</picture>

<!-- Pattern 4: sizes="auto" — lazy-loaded images with auto sizing (2024+) -->
<img src="photo.jpg" srcset="photo-400.jpg 400w, photo-800.jpg 800w"
     sizes="auto"
     loading="lazy"
     alt="Auto-sized lazy image"
     width="800" height="600">

Alt text rules:

• Informative image: describe what the image conveys, not what it looks like
• Decorative image: alt="" (empty string, not absent)
• Image of text: reproduce the text in alt
• Complex image (chart): brief alt + aria-describedby pointing to detailed description

§6.2 — <picture>

Container for multiple <source> elements and one <img>. The browser selects the best <source> and falls back to <img>.

No element-specific attributes — globals only.

Nesting rules: Zero or more <source> elements followed by exactly one <img>. The <img> is mandatory and must be last.

§6.3 — <source>

Specifies a media resource. Void element. Different attributes apply depending on the parent element.

In <picture>:

In <video> or <audio>:

<!-- In picture: format + art direction -->
<picture>
  <source media="(min-width: 1024px)" srcset="wide.avif" type="image/avif">
  <source media="(min-width: 1024px)" srcset="wide.webp" type="image/webp">
  <source srcset="narrow.avif" type="image/avif">
  <source srcset="narrow.webp" type="image/webp">
  <img src="narrow.jpg" alt="Responsive image" width="400" height="300">
</picture>

<!-- In video: multiple formats -->
<video controls width="800">
  <source src="video.av1.mp4" type="video/mp4; codecs=av01">
  <source src="video.h264.mp4" type="video/mp4">
</video>

§6.4 — <video>

Embeds a video player.

Element-specific attributes:

<video controls width="800" height="450"
       poster="/thumbnails/intro.jpg"
       preload="metadata"
       controlslist="nodownload"
       disablepictureinpicture>
  <source src="intro.av1.mp4" type="video/mp4; codecs=av01">
  <source src="intro.h264.mp4" type="video/mp4">
  <track kind="subtitles" src="subs-en.vtt" srclang="en" label="English" default>
  <track kind="subtitles" src="subs-fr.vtt" srclang="fr" label="Français">
  <p>Your browser doesn't support HTML video.
     <a href="intro.mp4">Download the video</a>.</p>
</video>

<!-- Autoplay hero video: must be muted -->
<video autoplay muted loop playsinline
       disableremoteplayback
       aria-label="Background video of product in use">
  <source src="hero.webm" type="video/webm">
  <source src="hero.mp4" type="video/mp4">
</video>

controlslist note: nodownload, nofullscreen, noremoteplayback are Chrome-specific — not in the HTML standard. For cross-browser remote playback control, use the standardised disableremoteplayback attribute.

§6.5 — <audio>

Embeds an audio player.

Element-specific attributes:

<audio controls preload="metadata">
  <source src="podcast.opus" type="audio/ogg; codecs=opus">
  <source src="podcast.mp3" type="audio/mpeg">
  <p>Your browser doesn't support audio.
     <a href="podcast.mp3">Download episode</a>.</p>
</audio>

§6.6 — <track>

Adds text tracks to <video> or <audio> — subtitles, captions, descriptions, chapters, metadata.

Element-specific attributes:

kind values:

<video controls>
  <source src="film.mp4" type="video/mp4">
  <track kind="subtitles" src="subs-en.vtt" srclang="en" label="English" default>
  <track kind="subtitles" src="subs-fr.vtt" srclang="fr" label="Français">
  <track kind="captions" src="captions-en.vtt" srclang="en" label="English Captions">
  <track kind="descriptions" src="desc-en.vtt" srclang="en" label="Audio Description">
  <track kind="chapters" src="chapters.vtt" srclang="en" label="Chapters">
</video>

§6.7 — <iframe> — Inline Frame

Embeds another HTML document or web page.

Element-specific attributes:

sandbox tokens:

<!-- Secure third-party embed template -->
<iframe src="https://www.youtube.com/embed/VIDEO_ID"
        width="560" height="315"
        title="Video title (required for accessibility)"
        loading="lazy"
        sandbox="allow-scripts allow-same-origin"
        referrerpolicy="strict-origin-when-cross-origin"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture">
</iframe>

<!-- Payment form in isolated iframe -->
<iframe src="https://pay.example.com/checkout"
        title="Payment form"
        sandbox="allow-scripts allow-same-origin allow-forms"
        csp="default-src 'self' pay.example.com">
</iframe>

<!-- Credentialless: no cookies sent -->
<iframe src="https://analytics.example.com/widget"
        credentialless
        loading="lazy"
        title="Analytics widget">
</iframe>

allow feature policy values: accelerometer, autoplay, camera, clipboard-read, clipboard-write, display-capture, encrypted-media, fullscreen, geolocation, gyroscope, magnetometer, microphone, midi, payment, picture-in-picture, screen-wake-lock, usb, web-share, xr-spatial-tracking

§6.8 — <embed>

Embeds external content (typically handled by plugins). Minimal use today — most use cases replaced by <video>, <audio>, or <canvas>.

Attributes: src, type, width, height

<embed src="document.pdf" type="application/pdf" width="600" height="400">

§6.9 — <object>

General-purpose embedded object. Can embed PDFs, videos, images, and other content types.

Element-specific attributes:

<object data="document.pdf" type="application/pdf" width="600" height="800">
  <p>Your browser cannot display PDFs.
     <a href="document.pdf">Download instead</a>.</p>
</object>

<!-- With image map -->
<object data="world-map.svg" type="image/svg+xml"
        width="600" height="400"
        usemap="#world-map">
</object>
<map name="world-map">
  <area shape="rect" coords="0,0,200,400" href="/europe" alt="Europe">
  <area shape="rect" coords="200,0,600,400" href="/americas" alt="Americas">
</map>

Fallback: Content between <object> tags is shown when the object cannot be rendered.

§6.10 — <canvas>

A bitmap canvas for dynamic 2D drawing via the Canvas API (JavaScript required).

Element-specific attributes:

<canvas id="my-canvas" width="800" height="600"
        aria-label="Animated game canvas"
        role="img">
  <!-- Fallback for browsers without Canvas support -->
  <p>Your browser does not support the Canvas API.</p>
</canvas>

<script>
  const canvas = document.getElementById('my-canvas');
  const ctx = canvas.getContext('2d');
  ctx.fillStyle = '#2563eb';
  ctx.fillRect(10, 10, 200, 100);
</script>

Accessibility: Canvas is not inherently accessible. Use aria-label or role="img" with a description, or provide a text alternative.

§6.11 — <map> and <area> — Image Maps

<map> defines clickable regions on an image. <area> defines each clickable region.

<map> attribute:

<area> attributes:

coords values by shape:

• rect: left,top,right,bottom
• circle: x,y,radius
• poly: x1,y1,x2,y2,…
• default: no coords needed — catches remaining area

<img src="solar-system.png" alt="Solar system" usemap="#solar-map"
     width="600" height="300">

<map name="solar-map">
  <area shape="circle" coords="80,150,40"
        href="/sun" alt="The Sun">
  <area shape="circle" coords="180,150,12"
        href="/earth" alt="Earth">
  <area shape="circle" coords="240,150,8"
        href="/mars" alt="Mars">
  <area shape="default" href="/space" alt="Outer space">
</map>

§6.12 — <svg> and <math>

§<svg>

Embeds inline Scalable Vector Graphics. Full SVG namespace applies.

<!-- Inline SVG icon -->
<svg aria-hidden="true" focusable="false" width="24" height="24" viewBox="0 0 24 24">
  <path d="M12 2L2 7l10 5 10-5-10-5z"/>
  <path d="M2 17l10 5 10-5"/>
  <path d="M2 12l10 5 10-5"/>
</svg>

<!-- Accessible SVG with title -->
<svg role="img" aria-labelledby="svg-title">
  <title id="svg-title">Bar chart showing monthly revenue</title>
  <!-- chart elements -->
</svg>

§<math>

Embeds MathML for mathematical notation.

<math>
  <mfrac>
    <mi>a</mi>
    <mi>b</mi>
  </mfrac>
</math>

<p>The quadratic formula is:
  <math display="block">
    <mi>x</mi>
    <mo>=</mo>
    <mfrac>
      <mrow><mo>-</mo><mi>b</mi><mo>±</mo><msqrt><mrow><msup><mi>b</mi><mn>2</mn></msup><mo>-</mo><mn>4</mn><mi>a</mi><mi>c</mi></mrow></msqrt></mrow>
      <mrow><mn>2</mn><mi>a</mi></mrow>
    </mfrac>
  </math>
</p>

Tags: #html #vdsology #webdevelopment #vdsologyhtml #html5 #htmlreference #htmlreference2026