Phase 1 — HTML Fundamentals
#3 Media elements
img, video, audio, figure
Images
The <img> tag embeds images in your page. It is a self-closing tag with two required attributes:
Basic image
<img src="photo.jpg" alt="A beautiful landscape">
<!-- With explicit dimensions to prevent layout shift -->
<img src="photo.jpg" alt="A landscape" width="800" height="600">
<!-- Responsive image with srcset -->
<img
src="photo-800.jpg"
srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
sizes="(max-width: 600px) 400px, 800px"
alt="A responsive landscape"
>Always include the alt attribute — it describes the image for screen readers and is shown if the image fails to load.
Video and audio
Use <video> and <audio> to embed media directly in HTML, without plugins:
Video
<video controls width="640" poster="thumbnail.jpg">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
Your browser does not support the video tag.
</video>Audio
<audio controls>
<source src="podcast.mp3" type="audio/mpeg">
<source src="podcast.ogg" type="audio/ogg">
Your browser does not support audio.
</audio>Figure and figcaption
Wrap media with <figure> and add a caption with <figcaption>:
Figure with caption
<figure>
<img src="chart.png" alt="Sales chart for Q4 2024">
<figcaption>Figure 1: Sales data for Q4 2024</figcaption>
</figure>Embedding external content
iframe
<!-- Embed a YouTube video -->
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/VIDEO_ID"
title="Video title"
allow="accelerometer; autoplay; clipboard-write"
allowfullscreen
></iframe>Your turn
Try the media element commands below:
terminal — browser