The <source> tag in HTML is used within media elements like <video>, <audio>, and <picture> to specify multiple media files or image resources. This allows the browser to choose the most suitable file format or resolution to display or play.
📌 What Is the <source> Tag?
<source>defines alternative media sources for<video>,<audio>, or<picture>.- It is an empty (void) tag — it doesn’t have a closing tag.
- Enables responsive and fallback media strategies by providing multiple options.
✅ Basic Syntax
<video controls>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
Your browser does not support the video tag.
</video>
🧩 How <source> Works
Browsers try each <source> in order until one is supported. If none match, the fallback content (usually text) is shown.
🧪 Example 1: Multiple Video Formats
<video controls width="640" height="360">
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
<source src="movie.ogv" type="video/ogg">
Your browser does not support the video tag.
</video>
This ensures maximum browser compatibility.
🧪 Example 2: Responsive Images with <picture> and <source>
<picture>
<source media="(min-width: 800px)" srcset="large.jpg">
<source media="(min-width: 400px)" srcset="medium.jpg">
<img src="small.jpg" alt="Responsive image">
</picture>
Here, different images load based on screen size.
🧪 Example 3: Audio with Multiple Formats
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
🎨 Attributes of <source>
| Attribute | Description |
|---|---|
src | URL of the media file |
type | Media type and codec (e.g., video/mp4) |
media | Media query condition (for <picture>) |
sizes | Image sizes attribute (for responsive images) |
srcset | Defines multiple image candidates (for <picture>) |
⚠️ Best Practices
- Always provide multiple media formats for best browser support.
- Include fallback content inside media tags.
- Use
<picture>with<source>for responsive images.
🔁 <source> vs Other Tags
| Tag | Use Case |
|---|---|
<source> | Specifies alternative media sources |
<img> | Displays an image (single source) |
<video> | Embeds video player |
<audio> | Embeds audio player |
<picture> | Responsive images with multiple sources |
🏁 Summary
The <source> tag is essential for delivering flexible, compatible multimedia content on the web. By offering alternative files, you ensure users get the best experience regardless of their device or browser.