HTML <source> Tag

The HTML <source> tag is primarily used within <audio>, <video>, and <picture> elements to specify multiple media resources for playback or display. By using the <source> tag, web developers can provide different formats of a media file, ensuring compatibility across various browsers and devices. This tag improves the user experience by offering multiple file types that the browser can choose from, depending on what it supports.

Syntax of the <source> Tag

The syntax for the <source> tag varies depending on whether it's used for <audio>, <video>, or <picture>. Here’s a breakdown of the most common use cases:

For <audio> and <video> elements:

html
<source src="file_path" type="media_type">

For <picture> element:

html
<source srcset="file_path" type="image_type">

The <source> tag doesn't have a closing tag as it is a self-closing element.

Attributes of the <source> Tag

The <source> tag supports the following key attributes:

AttributeDescription
srcSpecifies the URL of the media file to be used.
typeDefines the media type (MIME type) of the source file, like video/mp4, audio/mpeg.
srcsetUsed within the <picture> element to define multiple image resources for different screen sizes or resolutions.
mediaDefines media conditions (for responsive design) like screen width, height, or resolution.
sizesSpecifies the image size for various screen layouts, commonly used with the <picture> element.

These attributes help ensure that the browser selects the most appropriate file based on its compatibility and the user’s device.

Examples of HTML <source> Tag

Example 1: Using <source> with a <video> Element

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Video Example</title>
</head>
<body>
    <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>
</body>
</html>

In this example, two different video formats (MP4 and WebM) are provided using the <source> tag. The browser will choose the format it supports.

Example 2: Using <source> with a <picture> Element.

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Image Example</title>
</head>
<body>
    <picture>
        <source srcset="image-large.jpg" media="(min-width: 800px)">
        <source srcset="image-small.jpg" media="(max-width: 799px)">
        <img src="image-small.jpg" alt="Responsive Image Example">
    </picture>
</body>
</html>

In this example, the <source> tag within the <picture> element is used to serve different image sizes depending on the screen width. The appropriate image is selected based on the user’s device size.

FAQs About HTML <source> Tag

Q1: What is the purpose of the HTML <source> tag?
A: The <source> tag allows web developers to specify multiple media files (audio, video, or image) for a single element, ensuring better compatibility across different browsers and devices.

Q2: Can the <source> tag be used without the <audio>, <video>, or <picture> elements?
A: No, the <source> tag must be nested within the <audio>, <video>, or <picture> elements. It cannot be used as a standalone element.

Q3: How does the browser choose which <source> to load?
A: The browser evaluates the type attribute of each <source> tag and selects the first one it can support. If none of the formats are supported, it will display fallback content (like a message) provided within the element.

Q4: What is the benefit of using the <source> tag with the <picture> element?
A: The <source> tag allows for responsive image loading by serving different images based on screen size or resolution, optimizing the user experience across devices.

Q5: Is the <source> tag supported in all browsers?
A: Yes, the <source> tag is widely supported in all modern browsers, including Chrome, Firefox, Safari, and Edge.

tools

HTML

Related Articles