HTML source Tag: How to Embed Media with Examples

The source tag in HTML helps load different media formats and screen sizes.

You can use it inside many other tags to improve compatibility, such as:

• <video>
• <audio>
• <picture>

Understand the HTML <source> Tag

The <source> tag gives the browser different file options for one media element. It helps load the best file for a user’s device or browser. The browser checks each <source> in order and picks the first one it supports.

Here is the tag:

<source src="file-path" type="media-type" />

You do not close it like a normal element. The tag goes inside a parent, like <video> or <audio>. Also, it can be placed inside <picture>. It does not work alone.

Here are the Common Use Cases for <source:

• Inside <picture> for Responsive Images
• Inside <audio> or <video> for Format Support

Here are the required and optional attributes:

The src attribute:

• It gives the path to the media file.
• It is required in most cases.

Here is an example:

<source src="video.mp4" />

The type attribute:

• Tells the browser the media type and format.
• Helps the browser decide whether it supports the file.

For example:

<source src="video.webm" type="video/webm" />

The media (for <picture> only) attribute:

• Used for screen size or device rules.
• Helps switch images based on screen width.

Here is an example:

<source srcset="image-large.jpg" media="(min-width: 800px)" />

The srcset and sizes (for responsive images) attribute:

• srcset defines multiple image options.
• sizes gives rules to help the browser pick one.

For example:

<source srcset="img-480.jpg 480w, img-800.jpg 800w" sizes="(max-width: 600px) 480px, 800px" />

You add the <source> tag:

• Inside <video> and <audio> to load more than one format.
• Inside <picture> to show different images on different devices.

This tag must be a child of those elements. It cannot stand alone. It lets you offer .mp4 or .webm. Also, it allows you to add .ogg or other formats for different browsers.

Browsers Support <source> Tag in HTML

The <source> tag works on all modern browsers. That includes:

• Chrome
• Firefox
• Safari
• Edge
• Opera

Older browsers may skip unsupported formats. The browser moves to the next <source>.

The Difference Between <source>, <img>, and <track>

<source>

• Helps load media files inside <video>, <audio>, or <picture>.
• Offers multiple formats or resolutions.
• Does not render content by itself.

<img>

• Loads one image file.
• Does not need a container.
• Does not switch formats automatically.

<track>

• Adds subtitles or captions to <video> or <audio>.
• Does not affect file formats or images.
• Works with kind, src, srclang, and label.

Here is a table that shows you key differences:

The use case:

• Use <source> when you want fallback formats or responsive images.
• Use <img> when you only need one static image.
• Use <track> when you need captions or translated text for video or audio.

Examples of <source> Tag in HTML

Responsive Image with <picture>:

<picture>
  <source srcset="image-large.jpg" media="(min-width: 800px)" />
  <source srcset="image-medium.jpg" media="(min-width: 500px)" />
  <img src="image-small.jpg" alt="Responsive example" />
</picture>

This example shows how to use <source> inside <picture> to load different image sizes. The browser uses screen width to pick the right image.

Multiple Formats in a Video Tag:

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

This example uses <source> to offer .webm and .mp4 formats for a video. The browser plays the first format it supports.

Audio with Fallback Formats:

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

This example gives two audio file formats. Some browsers do not support .ogg, so the .mp3 file works as a backup.

Advanced Responsive Image with srcset and sizes:

<picture>
  <source 
    srcset="img-400.jpg 400w, img-800.jpg 800w" 
    sizes="(max-width: 600px) 400px, 800px"
    type="image/jpeg" />
  <img src="img-800.jpg" alt="Advanced responsive image" />
</picture>

This example uses srcset and sizes to handle responsive image loading. It works better than basic media queries by giving size hints to the browser.

Wrapping Up

In this article, you learned what the <source> tag does and where to use it. You saw how it supports different media types, adds responsive images, and improves browser support.

Here is a quick recap:

• Use <source> with <video>, <audio>, or <picture>.
• It supports different file formats and screen rules.
• It does not work alone. You must use it inside a media element.
• <source> differs from <img> and <track> in both use and purpose.
• You can build flexible layouts and stronger fallbacks with it.

FAQs

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

<picture>
  <source media="(min-width: 800px)" srcset="large.jpg">
  <source media="(min-width: 400px)" srcset="medium.jpg">
  <img src="small.jpg" alt="Responsive image">
</picture>

<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>

Similar Reads