HTML source Tag

The HTML <source> tag is used to specify multiple media resources for media elements such as <audio> or <video>. It allows you to provide different versions or formats of the same media content, ensuring compatibility across various browsers and devices.

Here’s an example of how the <source> tag can be used:

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

In the above example, the <video> element is used to display a video with playback controls. The <source> tags within the <video> element specify different versions of the video using the src attribute and the MIME type using the type attribute. The browser will choose the first compatible format and play it. If none of the specified formats are supported, the fallback content within the <video> element, in this case, the <p> tag, will be displayed.

By providing multiple <source> tags with different file formats, you ensure broader support for the video across different browsers. It’s common to include formats such as MP4, WebM, and Ogg to cover a wide range of devices and browsers.

The <source> tag is also used for audio elements (<audio>) in a similar way, specifying different audio file formats such as MP3, Ogg, or WAV.

It’s important to include a fallback option within the media element, such as a text message or alternative content, for cases where none of the specified media formats are supported by the user’s browser.

The <source> tag, along with the media elements, allows you to provide a fallback mechanism and ensure compatibility when incorporating audio or video content into your HTML documents.