HTML source tag

The HTML <source> tag specifies one of several alternative media resources for a <picture>, <audio>, or <video> element. It is an empty (void) element: it has no content and no closing tag.

This page explains why you would use <source> instead of a single src attribute, where it is allowed, and how the browser decides which source to load.

Why use `<source>` instead of a plain `src`?

A single src attribute points to exactly one file. The <source> element lets you offer the browser a list of candidates so it can pick the best one it actually supports. The browser reads the <source> children in order and uses the first one it can play or display — the rest are ignored.

This solves two real problems:

Format fallbacks for <video> and <audio>. No single video or audio format is supported by every browser. By listing several encodings (for example WebM and MP4), each browser plays the first format it understands.
Responsive and art-directed images for <picture>. Using the media and srcset attributes, you can serve a different image — or a differently cropped one — depending on the viewport size or display resolution.

The <source> element is one of the HTML5 elements and can appear multiple times inside a single parent to list the available alternatives.

Danger

If the <source> tag is included in the <audio> or <video> tags, it should be placed before the <track> tag and after media files. It should be placed before <img> if it’s inside a <picture> tag.

Syntax

The <source> tag is empty, which means that the closing tag isn’t required. But in XHTML, the (<source>) tag must be closed (<source/>).

Example of `<source>` inside a `<picture>` element

Note that <source> does not take an alt attribute. The alternative text always belongs on the fallback <img> element, which is also what older browsers display.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <picture>
      <source media="(min-width: 650px)" srcset="https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" />
      <source media="(min-width: 430px)" srcset="https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" />
      <img src="https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" alt="W3Docs logo" style="width:auto;" />
    </picture>
    <p>The browser loads the first <source> whose media query matches. If none match, it falls back to the <img> element.</p>
  </body>
</html>

Try it Yourself »

Example of `<source>` inside a `<video>` element

Here the browser tries the WebM file first; if it cannot play WebM, it falls back to the MP4 file. The type attribute lets the browser skip a format it does not support without downloading it.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      video {
        width: 300px;
        height: 220px;
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <video controls>
      <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" type="video/webm" />
      <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4" />
      Your browser does not support the video tag.
    </video>
    <p>Some information about the video.</p>
  </body>
</html>

Try it Yourself »

Example of `<source>` inside an `<audio>` element

The same format-fallback logic applies to audio. The browser plays the first encoding it supports; the text after the sources is shown only if <audio> is not supported at all.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <audio controls>
      <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.ogg" type="audio/ogg" />
      <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3" type="audio/mpeg" />
      Your browser does not support the audio element.
    </audio>
    <p>Some information about the audio.</p>
  </body>
</html>

Attributes

Attribute	Value	Description
`media`	CSS media query, e.g. `(min-width: 768px)`	Only for `<picture>`. The browser uses this source when the media query matches.
`sizes`	One or more sizes, e.g. `(max-width: 600px) 480px, 800px`	Only for `<picture>`. Describes how wide the image will be displayed so the browser can pick the right candidate from `srcset`.
`src`	URL	The address of the media file. Used inside `<audio>` and `<video>`.
`srcset`	URL or comma-separated URL list with width/density descriptors	Only for `<picture>`. Lists image candidates for different screen resolutions or sizes.
`type`	A MIME type, e.g. `video/webm`, `video/mp4`, `audio/ogg`, `audio/mpeg`, `image/webp`	The MIME type of the resource. Lets the browser skip formats it cannot handle.

The <source> tag also supports the Global Attributes and the Event Attributes.

Practice

When a browser meets several source elements inside a video element, which one does it use?

The first source whose format the browser supports; the rest are ignored.The last source listed, because it overrides the earlier ones.All of them at once, played in sequence.A source chosen at random from the list.

Why use <source> instead of a plain src?