Learn HTML – Part 57 – source Tag – Media Sources

The HTML source tag is used to define multiple media resources for elements like audio, video, and picture.

It allows the browser to choose the most suitable media file based on format or conditions.

What is the source Tag?

The source element specifies alternative media files.

The browser selects the first compatible file it can play.

Basic Syntax

<audio controls>

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

</audio>

Example – Audio with Multiple Sources

<audio controls>

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

   Your browser does not support audio.
</audio>

Output:

Example – Video with Multiple Sources

<video width="320" controls>

   <source src="video.mp4" type="video/mp4">
   <source src="video.webm" type="video/webm">

   Your browser does not support video.
</video>

Output:

Using source with picture

The source tag is also used inside the picture element for responsive images.

<picture>

   <source media="(max-width:600px)" srcset="small.jpg">
   <img src="large.jpg" alt="Image">

</picture>

Important Attributes

Why Use source?

• Supports multiple media formats
• Improves browser compatibility
• Allows responsive media loading
• Enhances user experience

The source tag provides multiple media options so the browser can choose the best one.

Common Mistakes Beginners Make

• Using source outside supported elements
• Forgetting to include fallback text
• Not specifying the correct type attribute

Conclusion

The HTML source tag is used to define multiple media files for audio, video, and picture elements.

It ensures better compatibility and performance across different browsers and devices.

What’s Next?

Now that you understand the source tag, the next step is learning about the track tag, which is used to add subtitles and captions to video content.

Next: Learn HTML – Part 58 – track Tag – Video Subtitles →

Series: Learn HTML Series