Lesson 05 · First page

Images, audio and video

An HTML file is plain text, so it cannot hold a photo, a song or a film. Instead, three elements point at separate media files: <img> for pictures, <audio> for sound and <video> for moving pictures. Follow a seven-line page as the browser reads each tag, fetches the file it names and draws a picture or a player in its place. Along the way meet alt text, the controls attribute and the file formats every browser understands.

8 min9 steps5 questionsBeginner

Fig 5 · Interactive

Loading figure…

or ← →

Check yourself

5 quick questions

Pick an answer to see why. Your score saves with your progress.

01Where is the picture in <img src="cat.jpg" alt="Grey cat"> stored?

HTML is text, so media live in separate files. src names the file; the browser loads it and draws it where the tag stands.

02Which line is correct HTML for an image?

img is a void element: one tag with its attributes, no content and no closing tag.

03What is the alt text for?

alt is the image's text alternative. Screen readers speak it, and the browser shows it if the picture does not load. A purely decorative image gets alt="".

04What does <audio src="purr.mp3"></audio> show on the page, with no controls attribute?

controls is a boolean attribute: present means on. Without it, an audio element is not drawn at all.

05Which pair is a sound format and a video format that every major browser plays?

MP3 is a sound format and MP4 (with H.264 video inside) is a video format; JPEG, PNG, WebP and SVG are image formats.

Key terms

Glossary

Media: Pictures, sounds and videos on a page. Each is its own file, separate from the HTML.
src: Short for source: the attribute that names the file an img, audio or video element shows or plays.
Void element: An element with no content and no closing tag, such as <img>. You write only the opening tag.
alt: The text alternative of an image: read aloud by screen readers and shown if the picture cannot load.
Screen reader: A program that reads a page aloud (or to a braille display) for people who cannot see the screen.
Boolean attribute: An attribute with no value, such as controls: being present switches it on, leaving it out switches it off.
Frame: One still picture of a video. Shown quickly one after another, frames look like movement.
File format: The way a file's data is stored, usually named by the file's ending: .jpg, .png, .mp3, .mp4.

Fine print

Notes and sources

The figure loads one file per step so you can follow it. A real browser starts loading each media file as soon as it reads the tag, often all three at nearly the same time.
Images, audio and video sit in a line like very large words, so the picture and the audio player share a row until there is no room left. CSS can change that.
Add width and height (in pixels) to an img or video, and the browser can save the right space before the file arrives, so the page does not jump.
A video can list several files in <source> elements inside it; the browser plays the first one it can. Text inside <video>, after them, shows only in browsers with no video support.
MP4 is a container: a box that holds a picture track and a sound track. The picture inside is usually H.264, which every major browser plays.
A picture that is only decoration gets an empty alt, alt="", so screen readers skip it.

Quiz Unlocks after the last step.