HTML Attributes
Understand how to add extra details to your elements using attributes.
HTML Attributes is a free HTML for Kids lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the HTML for Kids learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
1
Multimedia: Adding Videos and Audio
Welcome to the next lesson! Today, we’ll learn how to add videos and audio to your web pages. Multimedia makes your pages more interactive and fun!
2
Why Add Multimedia?
Videos and audio can make your web pages:
- More engaging
- Informative and fun
- Interactive
Let’s learn how to add them using HTML!
3
Adding a Video
Videos are added using the <video> tag. You can specify the video file using the src attribute.
Example:
In this example:
src: Specifies the video file.controls: Adds play, pause, and volume controls.width: Sets the width of the video.
<video src="example.mp4" controls width="400"></video>
4
Adding Multiple Video Formats
Not all browsers support the same video formats. You can include multiple sources using the <source> tag.
Example:
<video controls width="400">
<source src="example.mp4" type="video/mp4">
<source src="example.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
5
Adding Audio
Audio is added using the <audio> tag. You can specify the audio file using the src attribute.
In this example:
src: Specifies the audio file.controls: Adds play, pause, and volume controls.
<audio src="example.mp3" controls></audio>
6
Adding Multiple Audio Formats
Just like videos, you can include multiple audio sources for better browser compatibility.
Example:
<audio controls>
<source src="example.mp3" type="audio/mpeg">
<source src="example.ogg" type="audio/ogg">
Your browser does not support the audio tag.
</audio>
7
Autoplay and Loop
You can make videos and audio autoplay or loop by adding the autoplay and loop attributes.
Example:
Note: Autoplay may be disabled in some browsers for user experience reasons.
<audio src="example.mp3" autoplay loop></audio>
8
Embedding YouTube Videos
You can embed YouTube videos on your page using the <iframe> tag.
Example:
Replace example with the video’s unique ID.
<iframe width="560" height="315" src="https://www.youtube.com/embed/example" frameborder="0" allowfullscreen></iframe>
9
10
Great Job!
Congratulations! You’ve learned how to add videos, audio, and even YouTube embeds to your web pages. Multimedia makes your content more dynamic and engaging. In the next lesson, we’ll dive into styling with CSS to make your web pages look amazing. Get ready to explore the world of design!
Frequently asked questions
Is the “HTML Attributes” lesson free?
Yes — the full text of “HTML Attributes” is free to read here on the web, and the HTML for Kids course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the HTML for Kids course, upgrade to CoddyKit PRO.
What will I learn in “HTML Attributes”?
Understand how to add extra details to your elements using attributes. You practise HTML for Kids with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start HTML for Kids?
No prior experience is required. HTML for Kids on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “HTML Attributes” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this HTML for Kids lesson?
Yes. Every HTML for Kids lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.