<source>

The <source> tag is used as a complement to the <audio>, <video>, and <picture> tags to define alternative multimedia files.

It allows offering multiple formats or resolutions to ensure compatibility with various browsers and devices.

It cannot be used alone and must always be embedded in an appropriate parent tag. 😉

Structure and Syntax of the <source> Tag

Structure

Let's take the example of a soundtrack we want to add to our HTML page.

Here’s the code using the <source> tag:

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.ogg" type="audio/ogg">
  Your browser does not support the audio element.
</audio>

A few explanations:

• src: Defines the path to the multimedia file;
• type: Indicates the file's MIME type (e.g., audio/mpeg or video/mp4);
• "Your browser...": This is the text displayed in case the browser does not support the parent tag or its sources.

Usage Examples

Example for <video>

Here’s how it would look when combining the <source> tag with the <video> tag:

<video controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.ogg" type="video/ogg">
  Your browser does not support the video element.
</video>

As you can see, nothing is really different from what we saw earlier with the <audio> tag.

Example for <picture>

With the <picture> tag, here’s how it would look:

<picture>
  <source srcset="image-large.jpg" media="(min-width: 800px)">
  <source srcset="image-small.jpg" media="(max-width: 799px)">
  <img src="fallback.jpg" alt="Image description">
</picture>

Attributes

Specific Attributes for <source>

Some attributes are specific to the <source> tag:

General Attributes

The <source> tag also accepts general attributes such as id, class, style, etc.

Recommendations

Several things should be considered when using the <source> tag: here are our recommendations!

Always Define the MIME Type

The MIME type helps browsers select the most suitable multimedia file. Forgetting to specify it is like navigating blindfolded for your user’s browser: they might end up seeing your fallback text.

That would be a shame, right? 😋

Use Universal Formats

Always prioritize universal formats such as:

• mp4;
• mp3;
• jpeg;
• png.

Add a Fallback Text

As we’ve seen, the fallback text is displayed when none of the formats is compatible with the user’s browser.

If you don’t add one, your user will simply see nothing.

Browser Compatibility

The <source> tag is compatible with all browsers.