Real-World Media Examples

The previous three lessons introduced <audio>, <video>, <source>, and <iframe> individually. This lesson shows how they appear in real page patterns and ends with a capstone exercise that creates a new page from scratch.

Pattern 1: Blog post with an image

A typical article page uses an image near the top to illustrate the subject. The image sits inside the <article>, before or after the opening paragraph.

<article>
  <h2>Five Trails Worth Waking Up Early For</h2>
  <img src="images/sunrise-trail.jpg" alt="Misty forest trail at sunrise with light filtering through trees" width="800" height="500">
  <p>The best trail hours are the ones most hikers skip. Here is what you miss when you sleep in.</p>
</article>

width and height on <img> tell the browser how much space to reserve before the image loads, preventing layout shift.

Pattern 2: Podcast page with audio

A podcast page typically shows episode metadata alongside a player. The <audio> element with controls is the player.

<article>
  <h2>Episode 12: Reading a Trail Map</h2>
  <p>Published May 2026 · 34 minutes</p>
  <audio controls>
    <source src="audio/ep12-trail-map.mp3" type="audio/mpeg">
    <source src="audio/ep12-trail-map.ogg" type="audio/ogg">
    Your browser does not support the audio element.
  </audio>
  <p>In this episode: contour lines, elevation gain, and how to tell north from a topo map.</p>
</article>

Multiple <source> elements offer format fallbacks. The browser uses the first one it can play.

Pattern 3: Video lesson page

An educational page embeds a video with a supporting transcript note.

<section>
  <h2>How to Pack a Backpack</h2>
  <video controls width="720" height="405">
    <source src="videos/pack-a-backpack.webm" type="video/webm">
    <source src="videos/pack-a-backpack.mp4" type="video/mp4">
    Your browser does not support the video element.
  </video>
  <p>A full written transcript of this video is available below.</p>
</section>

width and height set the player size and prevent layout shift. The transcript note acknowledges that video alone is not fully accessible.

Pattern 4: Embedded map

A contact or location page embeds a map using <iframe>. The embed URL comes from the map provider.

<section>
  <h2>Find Us</h2>
  <p>We meet every Saturday at the trailhead parking lot.</p>
  <iframe
    src="about:blank"
    width="600"
    height="450"
    title="Map showing trailhead location at Pine Ridge State Park"
  ></iframe>
</section>

A real deployment replaces about:blank with the map provider’s embed URL. The title always describes the specific location shown.

Capstone exercise: build `media.html`

For this lesson, you will create a new file — media.html — in the same folder as index.html. This is your first multi-page site: index.html is your main page; media.html is a dedicated media page.

Why a new file?

index.html has been growing across every module. A real site separates concerns into distinct pages. A media page keeps audio, video, and embeds together without cluttering the main content.

Steps

In VS Code, create a new file called media.html in the same folder as index.html.
Start with the standard HTML document structure you know from Module 01:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Media — [Your Topic]</title>
  </head>
  <body>
    <header>
      <h1>Media</h1>
      <nav>
        <ul>
          <li><a href="index.html">Home</a></li>
          <li><a href="media.html">Media</a></li>
        </ul>
      </nav>
    </header>

    <main>
      <!-- you will fill this in below -->
    </main>

    <footer>
      <p>&copy; 2026</p>
    </footer>
  </body>
</html>

Inside <main>, add at least one of each media type you learned in this module. Use placeholder paths where you do not have real files:

<main>
  <section>
    <h2>Photo</h2>
    <img src="images/placeholder.jpg" alt="Describe what this image shows" width="800" height="500">
  </section>

  <section>
    <h2>Audio</h2>
    <audio controls>
      <source src="audio/placeholder.mp3" type="audio/mpeg">
      Your browser does not support the audio element.
    </audio>
  </section>

  <section>
    <h2>Video</h2>
    <video controls width="720" height="405">
      <source src="videos/placeholder.mp4" type="video/mp4">
      Your browser does not support the video element.
    </video>
  </section>

  <section>
    <h2>Map</h2>
    <iframe
      src="about:blank"
      width="600"
      height="450"
      title="Describe the specific location shown"
    ></iframe>
  </section>
</main>

Go back to index.html and add a link to media.html in your <nav>:

<nav>
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="media.html">Media</a></li>
  </ul>
</nav>

Open index.html in your browser. Click the Media link — it should navigate to media.html. Click Home — it should return. You now have a two-page site with working navigation.
Run through the accessibility checklist from Lesson 03:
- Every <img> has alt
- Every <audio> and <video> has controls, no autoplay
- Every <iframe> has a descriptive title

Module 07 Recap

<audio> embeds sound. <video> embeds video. Use controls on both. Never use autoplay.
<source> inside <audio> or <video> provides format fallbacks. The browser picks the first it supports.
Set width and height on <video> (and on <img>) to prevent layout shift.
<iframe> embeds external content. It requires a title attribute describing the specific content.
Never construct embed URLs manually — copy them from the provider’s embed tool.
Some sites block iframe embedding via HTTP headers. Only embed content that provides an official embed URL.
Accessibility requirements: alt on every meaningful image, controls on every media element, title on every <iframe>, fallback text inside <audio> and <video>.