HTML <source> Tag

The HTML <source> tag is used to define multiple media resources for elements like <video>, <audio>, and <picture>. It provides flexibility for specifying different formats, resolutions, or conditions for media playback, enabling responsive and optimized delivery based on user devices or browser capabilities.

The <source> tag must be nested within the parent element it applies to, and it does not have a closing tag (self-closing). Multiple <source> tags can be used within the same parent element.

Basic Syntax of HTML <source> Tag

The basic structure of the <source> tag within different parent elements is:

For Video:

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

For Audio:

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

For Picture:

</>
Copy
<picture>
    <source srcset="image-large.jpg" media="(min-width: 800px)">
    <source srcset="image-small.jpg" media="(max-width: 799px)">
    <img src="image-default.jpg" alt="A responsive image">
</picture>

In each case, the browser selects the first compatible source to use based on its attributes and the user’s device.

Attributes of HTML <source> Tag

  • src: Specifies the URL of the media resource.
  • type: Defines the MIME type of the media resource (e.g., video/mp4, audio/ogg).
  • media: Specifies a media query for selecting the resource, commonly used within the <picture> tag.
  • srcset: Provides a list of image sources and descriptors for responsive images, applicable in the <picture> tag.
  • sizes: Specifies the sizes attribute for images, used alongside srcset in responsive images.

These attributes allow the <source> tag to handle diverse scenarios for video, audio, and image delivery.

Example of Video with Multiple Formats

Here’s an example of using the <source> tag with the <video> element:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <body>
        <h2>Video Example</h2>
        <video controls width="600">
            <source src="movie.mp4" type="video/mp4">
            <source src="movie.ogg" type="video/ogg">
            Your browser does not support the video tag.
        </video>
    </body>
</html>

Explanation: The browser checks the formats in the order specified, using the first compatible resource. If none is supported, the fallback message is displayed.

Example of Picture for Responsive Images

The <source> tag can also be used for responsive images with the <picture> tag:

</>
Copy
<!DOCTYPE html>
<html>
    <body>
        <h2>Responsive Image Example</h2>
        <picture>
            <source srcset="image-large.jpg" media="(min-width: 800px)">
            <source srcset="image-small.jpg" media="(max-width: 799px)">
            <img src="image-default.jpg" alt="A responsive image">
        </picture>
    </body>
</html>

Explanation: Depending on the screen size, the browser chooses the most suitable image source. For devices with widths above 800px, “image-large.jpg” is loaded, while smaller screens load “image-small.jpg.”

Styling Media with CSS

You can style the parent elements of the <source> tag, such as <video>, <audio>, or <img>, to enhance their appearance:

</>
Copy
<style>
    video, img {
        border: 2px solid #007BFF;
        border-radius: 8px;
    }
</style>

Result: Videos, images, or other media elements can be styled with custom borders and rounded corners for a polished look.

Practical Applications of the <source> Tag

  • Responsive Images: Serve optimized images for different screen sizes using the <picture> element.
  • Video Compatibility: Provide multiple video formats (e.g., MP4, WebM, OGG) to ensure cross-browser compatibility.
  • Audio Options: Deliver different audio formats (e.g., MP3, OGG) for diverse browser support.
  • Performance Optimization: Load appropriate media based on the user’s device or connection speed.

The <source> tag is a key component for building responsive, efficient, and user-friendly multimedia experiences on the web.