HTML <source> (Source) Tag
The <source> element with <audio> element:
Example
<audio controls>
<source src="cat.mp3" type="audio/mpeg">
<source src="cat.ogg" type="audio/ogg">
Your browser does not support the audio tag.
</audio>The <source> element with <video> element:
Example
<video controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
Your browser does not support the audio tag.
</video>The <source> element with <picture> element:
Example
<picture>
<source media="(min-width:650px)" srcset="computer.png">
<source media="(min-width:465px)" srcset="clock.png">
<img src="mobile.png" alt="mobile" style="width:auto;">
</picture>Meaning
The <source> is empty HTML5 element is used to specify multiple media resources for media elements like <audio>, <picture> and <video>.
The <source> element is commonly used to provide the same media resource in multiple formats.
Browsers should use multiple source elements in a fall-through fashion finding the first appropriate version for playback.
Page authors should consider putting in an appropriate number of media variations to support for browser differences.
Note: As an empty element, source should be written under XHTML5 with a self-identifying close tag like so <source />.
Version: HTML5
Standard Syntax
HTML: <source src="URL" type="MIME-type">
XHTML: <source src="URL" type="MIME-type" />Browser Support
Status
Attributes
| Attribute | Value | Description |
|---|---|---|
| media | mediaQuery | The intended media type of the media source. |
| sizes | mediaQuery, mediaQuery, mediaQueryN | Specifies image sizes for different page layouts. |
| src | URL | Specifies the URL of the media file. |
| srcset | URL | A list of one or more strings separated by commas indicating a set of possible images represented by the source for the browser to use. |
| type | MIME-type | Specifies the type of the media source |
| height | pixel | Specifies the height of picture element source element. |
| width | pixel | Specifies the width of picture element source element. |
Global Attributes
The <source> element also supports the Global Attributes in HTML.
Event Attributes
The <source> element also supports the Event Attributes in HTML.
More Examples
The <source> element with <picture> element:
Example
<picture>
<source media="(min-width:650px)" srcset="demo/computer.png">
<source media="(min-width:465px)" srcset="demo/clock.png">
<img src="demo/mobile.png" alt="computer" style="width:auto;">
</picture>By Default CSS Value(s)
None.