HTML Audio and Video Tags: A Complete Beginner's Guide

Introduction

Modern websites often include music, podcasts, tutorials, and videos. HTML provides built-in tags that allow developers to add audio and video content without using external plugins.

In this article, you'll learn how to use the <audio> and <video> tags in HTML.

HTML Audio Tag

The <audio> tag is used to add audio files to a webpage.

Example

<audio controls>
  <source src="music.mp3" type="audio/mpeg">
</audio>

The controls attribute displays play, pause, and volume buttons.

HTML Video Tag

The <video> tag is used to add videos to a webpage.

Example

<video width="500" controls>
  <source src="video.mp4" type="video/mp4">
</video>

This will display a video player with controls.

Common Attributes

Audio Attributes

• controls
• autoplay
• loop
• muted

Example:

<audio controls loop>
  <source src="music.mp3" type="audio/mpeg">
</audio>

Video Attributes

• controls
• autoplay
• loop
• muted
• width
• height

Example:

<video width="400" controls muted>
  <source src="video.mp4" type="video/mp4">
</video>

Benefits of Audio and Video Tags

• Improve user engagement
• Support multimedia content
• Easy to implement
• No external plugins required
• Works on modern browsers

Conclusion

The <audio> and <video> tags make it easy to add multimedia content to websites. These tags are widely used in blogs, educational platforms, streaming websites, and online courses.

FAQs

1. Which tag is used to add audio?

The <audio> tag.

2. Which tag is used to add videos?

The <video> tag.

3. What does the controls attribute do?

It displays play, pause, volume, and other media controls.

4. Can audio and video play automatically?

Yes, using the autoplay attribute.