HTML - Basic HTML Part 5

Instructors: Jess, Carmen, and Eda

Basic HTML

Before this session, please:

• Read Working with Audio and Video Elements: What Are the Roles of the HTML Audio and Video Elements, and How Do They Work? and take notes
• Preview Build an HTML Music Player and try to work through the steps alone, recording questions and any new concepts
• Preview Build an HTML Video Player and try to work through the steps alone, recording questions and any new concepts
• Complete Build an HTML Audio and Video Player on your own

During this session, we’ll:

• Review notes
• We’ll work through key steps from Build an HTML Music Player to better understand audio elements in HTML
• We’ll work through key steps from Build an HTML Video Player to better understand video elements in HTML
• We’ll talk through Build an HTML Audio and Video Player together to help prepare you to finish this on your own, over the next few days

After this session, please:

• Read Working with Images and SVGs: What Are Common Ways to Optimize Media Assets? and take notes
• Read Working with Images and SVGs: What Are the Different Types of Image Licenses, and How Do They Work? and take notes
• Read Working with Images and SVGs: What Are SVGs, and When Should You Use Them? and take notes
• Preview Build a Heart Icon and try to work through the steps alone, recording questions and any new concepts

Instructor notes

Working with Audio and Video Elements: What Are the Roles of the HTML Audio and Video Elements, and How Do They Work?

So far we’ve worked with text, images, and links. Today we add sound and moving pictures to the toolkit.

Audio element: an HTML element used to embed sound content on a web page. The most basic version looks like this:

1<audio src="song.mp3" controls></audio>

Video element: an HTML element used to embed a video on a web page. The most basic version looks like this:

1<video src="movie.mp4" controls></video>

The two elements are very similar in how they work. They share most of the same attributes, and the main difference is just whether they show a visual playback area or not.

Common attributes (these work on both <audio> and <video>):

• src: the path to the media file. Just like with images.
• controls: tells the browser to display the default play, pause, and volume controls. If you leave this off, your media will load but the user has no way to play it.
• autoplay: starts playing automatically when the page loads. Use this very sparingly. Most browsers will block autoplay anyway, especially with sound, because it is annoying.
• loop: restarts the media when it ends.
• muted: starts the media with sound muted. Often paired with autoplay since browsers are more permissive about silent autoplay.
• preload: tells the browser how much of the file to load before the user clicks play. Possible values are none, metadata, and auto.

Video-only attributes:

• width and height: set the display size of the video.
• poster: an image that displays before the video starts playing. Like a thumbnail.

Multiple sources: instead of using a single src attribute, you can put multiple <source> elements inside the audio or video element. This lets you offer the same media in different file formats so the browser can pick whichever one it can play.

1<video controls>
2  <source src="movie.mp4" type="video/mp4" />
3  <source src="movie.webm" type="video/webm" />
4  Your browser does not support the video element.
5</video>

The text between the opening and closing tags is fallback content. It only shows up if the browser can’t play any of the sources, which is rare these days but still good practice.

Questions:

• Why are autoplay and loop considered bad practice on most pages?
• Do I have to provide multiple <source> files, or is one enough in 2026?

Build an HTML Music Player

This workshop focuses on the audio element. You’ll build a small music player from scratch and get hands-on practice with the attributes from the reading.

A few things to keep in mind as you go:

• If your audio loads but you can’t play it, check that you remembered the controls attribute. Without it, the browser plays the audio but doesn’t give the user any way to start it.
• Pay attention to the file paths. If your audio file is in a subfolder, your src needs to reflect that.
• The audio element does not display anything visual on the page on its own. The play controls only appear because of the controls attribute, so don’t be alarmed if your page looks empty when you forget it.

Build an HTML Video Player

This is the video equivalent of the music player workshop. Most of what you learned in the audio one applies here too, with a few extras.

Things to watch for:

• Use the width and height attributes (or CSS) to keep your video at a sensible size. A video that fills the entire screen by default can be jarring.
• Try setting a poster image so the video has something nice to show before someone presses play.
• If you’re adding multiple <source> elements, the order matters. The browser uses the first one it can play, so put your preferred format first.

Build an HTML Audio and Video Player

This is the lab that combines everything from today. You’ll build a single page that includes both an audio player and a video player. We’ll talk through it together so you have a clear sense of what’s needed before you finish it on your own over the next few days.

A few general tips:

• Read all the user stories before you start writing code. It’s much easier to plan the structure once than to rewrite it three times.
• Don’t forget the basics: DOCTYPE, html with lang, head with meta charset, page title. The tests will check for these.
• If a test is failing and you can’t figure out why, read the error message carefully. The lab tests are usually very specific about what they’re looking for.
• Make it yours. The user stories tell you what must be on the page, but the styling, the choice of media, and the surrounding text are up to you.