HTML Multimedia Exercise: Build a Lesson Page

Adding a picture or video is the easy part. Making it load efficiently and understandable to every visitor is the real goal.

What You Need to Know

A lesson page may combine a short video, captions, and written steps. Make sure a reader can understand the essential lesson even when playback is unavailable.

In this example: create a multimedia learning lesson.

Try the Example

Take a look at the example. We’ll explain the important lines right below it.

<main>
    <h1>Lesson: How plants grow</h1>
    <figure>
        <img src="images/seedling.jpg" alt="A seedling growing from soil" width="640" height="420">
        <figcaption>Seedling after one week</figcaption>
    </figure>
    <video controls width="640">
        <source src="media/plant-lesson.mp4" type="video/mp4">
        <track src="media/plant-captions.vtt" kind="captions" srclang="en" label="English">
    </video>
</main>

Let’s Read the Code

<main>: The main element marks the primary page content.
<h1>: A top-level heading explains what the page is about.
src: Src identifies a resource path for images, frames, or media.
width: Width gives a preferred or intrinsic media width, depending on the element.

What the example shows: The page combines a clear heading, a captioned photo, and a video with a separate captions file.

What Happens in the Browser?

The paths shown here refer to files in your own example project. Put real images and recordings in those locations before expecting them to load.

What if the resource is missing? Test the page with the media path temporarily broken. The surrounding text should still explain the important idea, and controls should remain understandable. This is especially important for slow connections and accessibility.

Your Turn

Add a short text transcript after the video.

Common Beginner Mistakes

Leaving out real media files or understandable text alternatives.
The media filenames are project resources that you must create; HTML does not generate images or captions.

Key Takeaways

A lesson page may combine a short video, captions, and written steps.
<main>: The main element marks the primary page content.
If the resource cannot load, users still need enough text to understand what was meant to be there.