<source>: The SOURCE Element
Last updated: 2026-10-13
<source>The SOURCE Element
Supplies media resources for audio, video or picture, allowing multiple variants for compatibility or responsiveness.
| Category | Links & Media |
|---|---|
| Content Model | Void element |
| Allowed Parents | Any element that accepts flow content |
| Content Tag | Self-closing — no closing tag needed |
| Status | Standard |
📝 Syntax
<source src="..." type="...">⚙️ Attributes
This element supports the global attributes plus the following:
| Attribute | Value | Description |
|---|---|---|
src | Media resource URL. | |
type | MIME type of the resource, e.g. audio/mpeg. | |
media | Media query condition (used by picture for responsiveness). |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <source> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Supported in all major browsers | |||||
Tip： source is a void element (no closing tag); the browser picks the first supported source.
❓ FAQ
QCan source be used standalone?
ANo.
<source> is a void element that may only appear inside <picture>, <video>, or <audio>, supplying candidate resources to its parent; it renders nothing itself.QWhat is the difference between src and srcset on source?
AUse
src for video/audio (a single URL); use srcset on picture's source (multiple 'URL + width/density descriptors', combined with sizes for responsive selection). Wrong attribute combinations are silently ignored by the browser.QDoes the order of multiple source elements matter?
AThe browser takes the first one it supports, top to bottom — so put new formats and smaller files first and the fallback last (in picture the fallback is the img itself). A reversed order lets the old format win and the new format never loads.
🏷️ Related Tags
💡 Related Cases
More case studies coming soon — check back later.
📚 Related Tutorials
