HTML Tag
<!--
main_leaderboard, all: [728,90][970,90][320,50][468,60]-->
HTML <source> Tag
❮
Reference
❯
Example
An audio player with two source files. The browser should choose which file (if any) it has support for:
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Try it Yourself »
More "Try it Yourself" examples below.
Definition and Usage
The <source> tag is used to specify multiple media resources for media elements, such as <video>, <audio>,
and <picture>.
The <source> tag allows you to specify alternative video/audio/image
files which the browser may choose from, based on its media type, codec support
or media query.
Browser Support
The numbers in the table specify the first browser version that fully supports the element.
| Element | |||||
|---|---|---|---|---|---|
| <source> | 4.0 | 9.0 | 3.5 | 4.0 | 10.5 |
Differences Between HTML 4.01 and HTML5
The <source> tag is new in HTML5.
<!--
mid_content, all: [300,250][336,280][728,90][970,250][970,90][320,50][468,60]-->
Attributes
| Attribute | Value | Description |
|---|---|---|
| src | URL | Required when <source> is used in <audio> and <video>. Specifies the URL of the media file |
| srcset | URL | Required when <source> is used in <picture>. Specifies the URL of the image to use in different situations |
| media | media_query | Accepts any valid media query that would normally be defined in a CSS |
| sizes | Specifies image sizes for different page layouts | |
| type | MIME-type | Specifies the MIME-type of the resource |
Global Attributes
The <source> tag also supports the Global Attributes in HTML.
Event Attributes
The <source> tag also supports the Event Attributes in HTML.
More Examples
Example
A <picture> element with two source files, and a fallback image:
<picture>
<source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
<source media="(min-width: 465px)" srcset="img_white_flower.jpg">
<img
src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture> Try it Yourself »
Related Pages
HTML tutorial: HTML5 Video
HTML tutorial: HTML5 Audio
HTML DOM reference: Source Object
Default CSS Settings
None.
❮
Reference
❯