HTML <source> Tag

The <source> tag specifies picture, audio, or video sources for one of these media elements: <picture>, <audio>, or <video>. This element is commonly used to provide multiple file source options for the same control.

HTML Tag

Example

#

A <source> element inside an <audio> element.

<audio controls>
  <source src="/media/epic.mp3" type="audio/mpeg">
</audio>

Using <source>

The <source> tag specifies media sources for <audio>, <picture>, and <video>.

This element is commonly used to provide multiple source options for the same control.

An optional media attribute can check for acceptable media conditions (see example below).

More Examples

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>

Attributes for <source>

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.


Additional Examples

Three <source> elements in a <picture> element. The browser determines which image to use depending on the media queries in the media attributes.

Vincent Van Gogh
<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.


Media Tags

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, these tags 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

Browser support

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

You may also like

Guides