Images & Media
Learn how to add images, audio, and video to your web pages — and why a few small attributes make a huge difference for accessibility and performance.
A web page with only text is like a cinema with only subtitles. It communicates, but it doesn't engage. HTML gives you simple, powerful tools to embed images, audio, and video directly into your pages — no plugins, no tricks. In this lesson we will start with the humble <img> tag, understand why alt text matters deeply, and then peek at how <audio> and <video> work. Along the way we will talk about something every beginner trips over: file paths.
#The <img> Tag
The <img> tag places an image on the page. It is a void element — it has no closing tag, because it has no content of its own; it just points to an image file.
The two attributes you always need are src and alt.
<img src="cat.jpg" alt="A ginger cat sleeping on a windowsill">src and alt are like a picture and its caption
Imagine a framed photo on a wall. src is the photo itself — without it, the frame is empty. alt is the little label beside the frame that says what you are looking at.
If the photo falls off the wall (the file is missing or slow to load), visitors can still read the label. Screen readers used by blind users read the label aloud — always. That label is alt.
#Why alt Text Matters
alt is not optional in spirit, even if the browser won't crash without it. Here is why it matters:
- Accessibility. Screen readers announce
alttext to blind or low-vision users. Without it, they hear "image" — or nothing at all. - Broken images. When a file path is wrong or a network is slow, browsers display the
alttext as a fallback. - Search engines. Google and others use
altto understand what an image shows, which helps people find your page.
Write alt as a brief, honest description of what the image shows and why it is there. A decorative divider line can have an empty alt="" — that tells screen readers to skip it. But a photo of your product, your team, or a key diagram always deserves a real description.
<!-- Good: describes the image meaningfully -->
<img src="team.jpg" alt="Four engineers gathered around a laptop in a bright office">
<!-- Decorative: explicitly empty alt tells screen readers to skip it -->
<img src="divider.png" alt="">
<!-- Bad: says nothing useful -->
<img src="img1.jpg" alt="image">#Controlling Size with width and height
You can set an image's display size with the width and height attributes (numbers, in pixels). This is good practice for two reasons: the browser can reserve space for the image before it has finished downloading, preventing the page from jumping around, and it gives you a quick way to resize without CSS.
<img
src="logo.png"
alt="Quest logo"
width="200"
height="80"
>Always add width and height to avoid layout shift
When a browser loads a page, it needs to know how much space to reserve for each image before the image itself arrives. If you omit width and height, the browser guesses zero — then the image loads and everything on the page suddenly jumps down. This jarring effect is called Cumulative Layout Shift (CLS) and it frustrates users. Adding width and height (matching the image's real proportions) prevents it entirely.
#Making Images Responsive
A fixed width="800" looks fine on a desktop, but it overflows a phone screen. The modern solution is one line of CSS: set max-width: 100% on the image. This tells it: "never be wider than your container, but shrink if you have to."
You can apply this to all images at once in a stylesheet:
img {
max-width: 100%;
height: auto; /* keep the original proportions when scaling down */
}With height: auto, the browser recalculates the height to match the width proportionally, so the image never gets squished or stretched. You keep the width and height HTML attributes for layout-shift prevention, but CSS takes over for actual display size.
#File Paths: Relative vs Absolute
The src in <img src="..."> is a file path — directions to the image file. Getting this wrong is one of the most common beginner mistakes. There are two kinds:
Relative paths are directions from the current HTML file.
Absolute paths are full URLs starting with https:// or /.
<!-- Relative: image is in the same folder as the HTML file -->
<img src="photo.jpg" alt="...">
<!-- Relative: image is in an 'images' subfolder -->
<img src="images/photo.jpg" alt="...">
<!-- Relative: go up one folder, then into 'assets' -->
<img src="../assets/photo.jpg" alt="...">
<!-- Absolute: a full URL from another website -->
<img src="https://example.com/photo.jpg" alt="...">Broken image? Check the path first
If your image shows a broken icon, the first thing to check is the src path. The most common mistakes are:
- Wrong capitalisation —
Photo.jpgis not the same asphoto.jpgon most servers. - Wrong folder — You put the image in
images/but wrotesrc="photo.jpg". - Spaces in file names —
my photo.jpgbreaks paths. Always use hyphens or underscores:my-photo.jpg.
When in doubt, open your browser's developer tools (F12), go to the Console or Network tab, and look for a 404 error — it will show you the exact path the browser tried.
#Adding Audio with <audio>
The <audio> element embeds sound. The controls attribute gives the user a play button and volume slider — without it, the audio is invisible and unplayable. Always include it.
<audio controls>
<source src="podcast.mp3" type="audio/mpeg">
<source src="podcast.ogg" type="audio/ogg">
Your browser does not support audio.
</audio>A few useful <audio> attributes: - controls — show the player UI (always add this) - autoplay — start playing immediately (use sparingly; it annoys users) - loop — repeat the audio when it ends - muted — start with the audio muted
#Embedding Video with <video>
<video> works exactly like <audio> but shows a visual frame. You can also add a poster attribute — a still image shown before the video plays, like a thumbnail.
<video
controls
width="640"
height="360"
poster="video-thumbnail.jpg"
>
<source src="demo.mp4" type="video/mp4">
<source src="demo.webm" type="video/webm">
Your browser does not support video.
</video>A blind user visits your page using a screen reader. Your page has an image of a bar chart showing sales data. Which alt attribute is most helpful?
Key takeaways
- The `<img>` tag needs `src` (where the file is) and `alt` (what it shows) — both are essential for function and accessibility.
- Write meaningful `alt` text so screen reader users and people with broken images still understand the content; use `alt=""` only for purely decorative images.
- Add `width` and `height` attributes to images to prevent layout shift while the page loads, then use `max-width: 100%; height: auto;` in CSS to make them responsive.
- File paths are directions to your file — double-check capitalisation, folder structure, and avoid spaces in filenames when images appear broken.
- `<audio>` and `<video>` both use the `controls` attribute to show a player UI; offer multiple `<source>` formats for the widest browser support.
Complete this image tag so it has the two attributes every image needs: one that points to the file, and one that describes it.
<img ="cat.jpg" ="A ginger cat sleeping on a windowsill">
This code has a bug — what's wrong?
<img src="logo.png" alt="Quest logo"></img>The HTML file lives in the folder 'site/'. The image file lives at 'site/images/photo.jpg'. What does this tag do in the browser?
<img src="photo.jpg" alt="A sunset over the sea">Arrange these lines into a valid <audio> element that offers two formats and a fallback message.
<source src="podcast.mp3" type="audio/mpeg">
</audio>
<audio controls>
Your browser does not support audio.
<source src="podcast.ogg" type="audio/ogg">
Build a small media card for a fictional nature documentary called 'Deep Ocean'. It should show a banner image with a meaningful alt description, display the title as a heading, include a short paragraph description, and embed a video player with a poster image and controls. Make the image responsive using CSS.
Try it live — edit the code and hit Run to see it rendered: