Media are files
An HTML file holds only text. Pictures, sounds and videos are called media, and each one is a separate file: here cat.jpg, purr.mp3 and cat.mp4, saved in the same folder as index.html. The HTML says which file goes where.
<img> puts an image on the page. Its src attribute (short for source) names the image file. It has no content and no closing tag, so there is no </img>: an element like this is called a void element.
Pictures
The browser reads line 3, sees src="cat.jpg" and loads that file as a separate download. When the picture arrives, the browser draws it where the tag stands. The picture itself never goes inside index.html.
alt holds a short text alternative. Screen readers (programs that read a page aloud) speak it to people who cannot see the picture. If cat.jpg cannot load, the browser shows the alt text in its place, as here.
Sound and video
Line 4 is an audio element. Like <img>, its src names a file, purr.mp3, and the browser loads it separately. Unlike <img>, audio needs a closing tag: </audio>, here on line 5.
controls is a boolean attribute: it has no value, and just being there switches it on. It asks the browser to draw a player: a play button, a time bar and volume. Without it, an audio element shows nothing.
Line 6 works the same way for video. <video> loads cat.mp4 and, because of controls, draws a player: the picture with a play button and a time bar over it. </video> on line 7 closes it.
Press play. A video is a quick run of still pictures, called frames, with the sound kept in step. The browser can start playing before the whole file has arrived, and keeps loading the rest as it plays.
A file's ending names its format: the way its data is stored. JPEG, PNG, WebP and SVG images, MP3 sound and MP4 video play in every major browser. A browser cannot show a format it does not understand.
What happens
;; step 1/9 · media-files index.html text: 7 lines of HTML cat.jpg image, its own file purr.mp3 sound, its own file cat.mp4 video, its own file folder all four files side by side the HTML points at each media file by name
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.