Embedding Media

Beyond text and images, modern websites include audio, video, and interactive media. This tutorial covers embedding and optimizing media content.

What you’ll learn:

The <audio> and <video> elements
Video and audio formats and codecs
Using multiple source files for compatibility
Responsive images with <picture> and srcset
The <figure> element for illustrations
Accessibility for media content
Optimizing media file sizes

Prerequisites:

Completed Creating Tables

Embedding Audio

The <audio> element plays sound files:

<audio controls>
<source src="audio-file.mp3" type="audio/mpeg">
Your browser doesn't support HTML5 audio.
</audio>

Result

Interactive code playground requires JavaScript. Here's the code:

<audio controls>
<source src="audio-file.mp3" type="audio/mpeg">
Your browser doesn't support HTML5 audio.
</audio>

The controls attribute adds play, pause, and volume buttons. The fallback text appears if the browser doesn’t support HTML5 audio.

Multiple Audio Formats

Different browsers support different formats. Provide multiple sources:

<audio controls>
<source src="song.mp3" type="audio/mpeg">
<source src="song.ogg" type="audio/ogg">
<source src="song.wav" type="audio/wav">
Your browser doesn't support HTML5 audio.
</audio>

Result

Interactive code playground requires JavaScript. Here's the code:

<audio controls>
<source src="song.mp3" type="audio/mpeg">
<source src="song.ogg" type="audio/ogg">
<source src="song.wav" type="audio/wav">
Your browser doesn't support HTML5 audio.
</audio>

Browsers use the first format they support. Common formats:

MP3 (audio/mpeg) — Most widely supported
WAV (audio/wav) — High quality, larger files
OGG (audio/ogg) — Open source, good compression
AAC (audio/aac) — Used by iTunes

Audio Attributes

<audio controls autoplay loop muted>
<source src="background-music.mp3" type="audio/mpeg">
</audio>

Result

Interactive code playground requires JavaScript. Here's the code:

<audio controls autoplay loop muted>
<source src="background-music.mp3" type="audio/mpeg">
</audio>

controls: Shows play/pause buttons
autoplay: Starts playing automatically
loop: Repeats when it ends
muted: Starts muted (required for autoplay in many browsers)
preload="auto|metadata|none": How much to load before playing

Embedding Video

The <video> element plays video files:

<video controls width="400" height="300">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
Your browser doesn't support HTML5 video.
</video>

Result

Interactive code playground requires JavaScript. Here's the code:

<video controls width="400" height="300">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
Your browser doesn't support HTML5 video.
</video>

Video Attributes

<video controls
      width="400"
      height="300"
      poster="thumbnail.jpg"
      autoplay
      loop>
<source src="video.mp4" type="video/mp4">
Your browser doesn't support HTML5 video.
</video>

Result

Interactive code playground requires JavaScript. Here's the code:

<video controls
      width="400"
      height="300"
      poster="thumbnail.jpg"
      autoplay
      loop>
<source src="video.mp4" type="video/mp4">
Your browser doesn't support HTML5 video.
</video>

controls: Shows play, pause, progress bar, volume
width/height: Video dimensions (maintain aspect ratio)
poster: Image to show before playing
autoplay: Starts playing automatically
loop: Repeats when it ends
muted: Required for autoplay in most browsers

Video Formats

<video controls width="400" height="300" poster="preview.jpg">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
<source src="video.ogv" type="video/ogg">
Your browser doesn't support HTML5 video.
</video>

Result

Interactive code playground requires JavaScript. Here's the code:

<video controls width="400" height="300" poster="preview.jpg">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
<source src="video.ogv" type="video/ogg">
Your browser doesn't support HTML5 video.
</video>

Common formats:

MP4 (video/mp4) — Most widely supported, good compression
WebM (video/webm) — Open source, excellent compression
Ogg/Theora (video/ogg) — Open source, older browsers

Always include MP4 first for compatibility.

Responsive Images with `<picture>`

The <picture> element lets you serve different images for different screen sizes:

<picture>
<source media="(max-width: 600px)"
        srcset="small-image.jpg">
<source media="(max-width: 1200px)"
        srcset="medium-image.jpg">
<img src="large-image.jpg"
     alt="A beautiful landscape"
     width="800"
     height="600">
</picture>

Result

Interactive code playground requires JavaScript. Here's the code:

<picture>
<source media="(max-width: 600px)"
        srcset="small-image.jpg">
<source media="(max-width: 1200px)"
        srcset="medium-image.jpg">
<img src="large-image.jpg"
     alt="A beautiful landscape"
     width="800"
     height="600">
</picture>

The browser:

Checks each <source> media query from top to bottom
Uses the first matching source
Falls back to <img> if nothing matches
The <img> alt text is used for accessibility

Responsive Images with Srcset

The srcset attribute specifies multiple image sizes:

<picture>
<source media="(min-width: 1200px)"
        srcset="desktop.jpg 1200w, desktop-2x.jpg 2400w">
<source media="(min-width: 768px)"
        srcset="tablet.jpg 768w, tablet-2x.jpg 1536w">
<source media="(max-width: 767px)"
        srcset="mobile.jpg 400w, mobile-2x.jpg 800w">
<img src="fallback.jpg"
     alt="A responsive image"
     width="1200"
     height="800">
</picture>

Result

Interactive code playground requires JavaScript. Here's the code:

<picture>
<source media="(min-width: 1200px)"
        srcset="desktop.jpg 1200w, desktop-2x.jpg 2400w">
<source media="(min-width: 768px)"
        srcset="tablet.jpg 768w, tablet-2x.jpg 1536w">
<source media="(max-width: 767px)"
        srcset="mobile.jpg 400w, mobile-2x.jpg 800w">
<img src="fallback.jpg"
     alt="A responsive image"
     width="1200"
     height="800">
</picture>

The browser downloads only the image that matches:

The viewport size
The device pixel ratio (2x for retina)

This saves bandwidth on mobile devices.

Simple Responsive Images

For simple cases, use srcset directly on <img>:

<img src="image-medium.jpg"
   srcset="image-small.jpg 400w,
           image-medium.jpg 800w,
           image-large.jpg 1200w,
           image-xlarge.jpg 1600w"
   sizes="(max-width: 600px) 100vw,
          (max-width: 1200px) 50vw,
          33vw"
   alt="A landscape photograph"
   width="800"
   height="600">

Result

Interactive code playground requires JavaScript. Here's the code:

<img src="image-medium.jpg"
   srcset="image-small.jpg 400w,
           image-medium.jpg 800w,
           image-large.jpg 1200w,
           image-xlarge.jpg 1600w"
   sizes="(max-width: 600px) 100vw,
          (max-width: 1200px) 50vw,
          33vw"
   alt="A landscape photograph"
   width="800"
   height="600">

The sizes attribute tells the browser what width the image will be displayed at:

On small screens (under 600px): 100% of viewport width
On medium screens (under 1200px): 50% of viewport width
On large screens: 33% of viewport width

Accessible Media

Always provide alternatives for media content:

Audio with Transcript

<section>
<h2>Podcast: Learning HTML</h2>
<audio controls>
  <source src="podcast.mp3" type="audio/mpeg">
</audio>

<h3>Transcript</h3>
<p>
  [Host]: Welcome to the Learning HTML podcast. Today we're
  discussing semantic HTML...
</p>
</section>

Result

Interactive code playground requires JavaScript. Here's the code:

<section>
<h2>Podcast: Learning HTML</h2>
<audio controls>
  <source src="podcast.mp3" type="audio/mpeg">
</audio>

<h3>Transcript</h3>
<p>
  [Host]: Welcome to the Learning HTML podcast. Today we're
  discussing semantic HTML...
</p>
</section>

Video with Captions

<video controls width="400" height="300" poster="preview.jpg">
<source src="tutorial.mp4" type="video/mp4">
<track kind="captions" src="captions.vtt" srclang="en" label="English">
<track kind="captions" src="captions-es.vtt" srclang="es" label="Español">
Your browser doesn't support HTML5 video.
</video>

Result

Interactive code playground requires JavaScript. Here's the code:

<video controls width="400" height="300" poster="preview.jpg">
<source src="tutorial.mp4" type="video/mp4">
<track kind="captions" src="captions.vtt" srclang="en" label="English">
<track kind="captions" src="captions-es.vtt" srclang="es" label="Español">
Your browser doesn't support HTML5 video.
</video>

The <track> element adds captions, subtitles, or descriptions:

kind="captions" — Captions for people who are deaf or hard of hearing
kind="subtitles" — Translations or dialog
kind="descriptions" — Describes what’s happening in the video
srclang — Language code (en, es, fr, etc.)

Complete Example: Product Demo Video

<article>
<h2>Product Demo: Web Editor</h2>
<p>Learn how to use our new web editor in this 5-minute tutorial.</p>

<picture>
  <source media="(max-width: 768px)" srcset="demo-small.jpg">
  <img src="demo-large.jpg" alt="Web Editor Demo" width="800" height="600">
</picture>

<video controls
       width="100%"
       max-width="800px"
       height="auto"
       poster="demo-poster.jpg">
  <source src="demo.mp4" type="video/mp4">
  <source src="demo.webm" type="video/webm">
  <track kind="captions" src="captions.vtt" srclang="en">
  Your browser doesn't support HTML5 video.
</video>

<h3>What You'll Learn</h3>
<ul>
  <li>Creating a new project</li>
  <li>Writing and formatting code</li>
  <li>Running and debugging your code</li>
  <li>Sharing your work with others</li>
</ul>

<h3>Transcript</h3>
<p>
  [Intro music plays]
  Welcome to the Web Editor tutorial...
</p>
</article>

Result

Interactive code playground requires JavaScript. Here's the code:

<article>
<h2>Product Demo: Web Editor</h2>
<p>Learn how to use our new web editor in this 5-minute tutorial.</p>

<picture>
  <source media="(max-width: 768px)" srcset="demo-small.jpg">
  <img src="demo-large.jpg" alt="Web Editor Demo" width="800" height="600">
</picture>

<video controls
       width="100%"
       max-width="800px"
       height="auto"
       poster="demo-poster.jpg">
  <source src="demo.mp4" type="video/mp4">
  <source src="demo.webm" type="video/webm">
  <track kind="captions" src="captions.vtt" srclang="en">
  Your browser doesn't support HTML5 video.
</video>

<h3>What You'll Learn</h3>
<ul>
  <li>Creating a new project</li>
  <li>Writing and formatting code</li>
  <li>Running and debugging your code</li>
  <li>Sharing your work with others</li>
</ul>

<h3>Transcript</h3>
<p>
  [Intro music plays]
  Welcome to the Web Editor tutorial...
</p>
</article>

File Size Optimization

Media files can be large. Here are optimization tips:

Images

<!-- Use modern formats -->
<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="description">
</picture>

WebP images are 25-35% smaller than JPEG while maintaining quality.

Video

When preparing videos:

Use H.264 codec for MP4 (best compatibility)
Use VP8/VP9 for WebM (better compression)
Aim for 1-2 Mbps bitrate for web
Use a service like Handbrake to compress

Audio

MP3: 128 kbps is acceptable for most audio
Use 44.1 kHz sample rate (standard)
Mono for voice, stereo for music

Try It Yourself

Create a media-rich article:

<article>
<h1>My Media Gallery</h1>

<section>
  <h2>Background Music</h2>
  <audio controls>
    <source src="song.mp3" type="audio/mpeg">
  </audio>
</section>

<section>
  <h2>Tutorial Video</h2>
  <video controls width="400" height="300" poster="preview.jpg">
    <source src="tutorial.mp4" type="video/mp4">
  </video>
</section>

<section>
  <h2>Responsive Images</h2>
  <picture>
    <source media="(max-width: 600px)" srcset="small.jpg">
    <img src="large.jpg" alt="Your image here" width="600" height="400">
  </picture>
</section>
</article>

Result

Interactive code playground requires JavaScript. Here's the code:

<article>
<h1>My Media Gallery</h1>

<section>
  <h2>Background Music</h2>
  <audio controls>
    <source src="song.mp3" type="audio/mpeg">
  </audio>
</section>

<section>
  <h2>Tutorial Video</h2>
  <video controls width="400" height="300" poster="preview.jpg">
    <source src="tutorial.mp4" type="video/mp4">
  </video>
</section>

<section>
  <h2>Responsive Images</h2>
  <picture>
    <source media="(max-width: 600px)" srcset="small.jpg">
    <img src="large.jpg" alt="Your image here" width="600" height="400">
  </picture>
</section>
</article>

Common Mistakes

Summary

Use <audio> and <video> for media content
Provide multiple formats for compatibility (MP4 + WebM for video, MP3 + OGG for audio)
Use <picture> and srcset for responsive images
Add <track> elements for captions and descriptions
Always include alt text for images
Optimize file sizes for web delivery
Provide transcripts for audio and captions for video
Use poster attribute to show a preview image
Include fallback text for older browsers

Next Steps

Metadata & SEO

Optimize your pages with meta tags and structured data. Continue →

Accessibility

Deep dive into WCAG compliance and ARIA attributes. Continue →

Embedding Media

Embedding Media

Embedding Audio

Multiple Audio Formats

Audio Attributes

Embedding Video

Video Attributes

Video Formats

Responsive Images with <picture>

Responsive Images with Srcset

Simple Responsive Images

Accessible Media

Audio with Transcript

Video with Captions

Complete Example: Product Demo Video

File Size Optimization

Images

Video

Audio

Try It Yourself

Common Mistakes

Summary

Next Steps

Responsive Images with `<picture>`