The <source> tag specifies file sources for <audio>, <picture>, and <video>.
This element commonly provides multiple file sources for the same control.
A <source> element inside an <audio> element.
<audio controls>
<source src="/media/epic.mp3" type="audio/mpeg">
</audio>
The <source> tag specifies a media file or source.
An optional media attribute can check for acceptable media conditions (see below).
Two <source> elements inside an <audio> player.
The browser chooses the first supported audio file that it finds.
<audio controls>
<source src="/media/epic.mp3" type="audio/mpeg">
<source src="/media/epic.wav" type="audio/wav">
</audio>
This table lists the <source> tag attributes.
| Attribute | Value | Description |
|---|---|---|
| src | URL | Required for audio and video source. Media file URL. |
| srcset | URL | Image URLs that display depending on media queries. Required for image sources. |
| type | media-type | Resource media type. |
| media | media-query | Valid CSS media query. |
| id | identifier | Defines a unique identifier for the source element. |
| sizes | media-query image-size | CSS media query followed by image size. |
For additional global attributes see our Global Attributes List.
Three <source> elements in a <picture> element.
The browser determines which image to use depending on the media queries in the media attributes.
<picture>
<source media="(max-width: 414px)" srcset="/img/html/vangogh-sm.jpg">
<source media="(max-width: 768px)" srcset="/img/html/vangogh.jpg">
<source media="print" srcset="/img/html/vangogh-bw.jpg">
<img src="/img/html/vangogh-lg.jpg" alt="Vincent Van Gogh">
</picture>
Tip: Resizing the browser and printing will use different image sources.
The <source> tag is part of a group of tags
that create multi-media experiences on the web.
This group is referred to as the Media tag group.
Together, they allow you to create powerful multi-media solutions.
Here is a list of media tags.
| Element | Description |
|---|---|
| <audio> | Creates a player for sound such as music, sound effects, or others |
| <video> | Creates a video player on a page |
| <source> | Adds a media source for a <video>, <audio>, or <picture> |
| <track> | Adds a text track, such as, subtitles and captions, to the media |
| <embed> | Creates a container for an external resource |
| <iframe> | Creates a frame in which another web page can be embedded |
| <svg> | Displays an scalable vector image |
| <canvas> | Creates a graphics container where JavaScript can draw |
| <img> | Displays an image |
| <area> | Specifies a map area for an image |
| <map> | Defines a client-side image map, i.e. an image with clickable areas |
| <figure> | Displays self-contained content, usually an image |
| <figcaption> | Adds a caption to a <figure> (image) element |
Here is when <source> support started for each browser:
 Chrome
|
4.0 | Jan 2010 |
 Firefox
|
3.5 | Jun 2009 |
 IE/Edge
|
9.0 | Mar 2011 |
 Opera
|
10.5 | Mar 2010 |
 Safari
|
4.0 | Jun 2009 |
