Table of contents

HTML <source> Tag

What is HTML <source> Tag?

The HTML source tag is used to specify multiple media resources for media elements like audio, video, and picture. It allows web developers to provide different file formats for the same media, ensuring that browsers can choose the best-supported option.

This tag helps improve website compatibility and loading efficiency. The browser automatically selects the first supported file it finds among the listed source elements. The source tag must be placed inside the audio, video, or picture element, but it does not display anything by itself.

Syntax of the HTML <source> Tag

plaintext
<source src="mediafile.format" type="media/type">

The src attribute defines the file path, while the type attribute defines the MIME type of the media. The tag must always start with <source> and end with </source>.

Examples of HTML <source> Tag

Example 1: Basic HTML Source Tag

plaintext
<!DOCTYPE html>
<html lang="en">
<body>

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

In this example, two formats (MP4 and OGG) are provided for a single video. The browser will play the one it supports best. This ensures compatibility across different browsers.

Example 2: SEO-Optimized Source Tag

plaintext
<!DOCTYPE html>
<html lang="en">
<body>

  <audio controls>
    <source src="https://www.scholar247.com/audio/learning-guide.mp3" type="audio/mpeg">
    <source src="https://www.scholar247.com/audio/learning-guide.ogg" type="audio/ogg">
    Your browser does not support the audio element.
  </audio>

</body>
</html>

In this SEO-friendly example, the audio files are hosted on Scholar247. Providing multiple formats improves accessibility, user experience, and search engine optimization by ensuring smooth playback on all browsers.

Attributes of the HTML <source> Tag

• src: Specifies the URL of the media file.
• type: Defines the MIME type of the media (for example, video/mp4 or audio/mpeg).
• media: Used inside the picture tag to define specific media conditions like screen width for responsive images.
• srcset: Used in the picture tag to provide multiple image sources for different resolutions or screen sizes.

These attributes make the source tag flexible for handling audio, video, and image elements efficiently.

Best Practices for HTML <source> Tag

• Always provide multiple source formats to ensure browser compatibility.
• Use correct MIME types to help browsers understand your files.
• Optimize media file size for faster loading and better SEO.
• Keep file names descriptive and SEO-friendly.
• Always include fallback content in case a browser doesn’t support the media tag.
• Use HTTPS links for secure and reliable file delivery.

FAQs About the HTML <source> Tag

Q1: What is the purpose of the HTML source tag?

The source tag defines alternative media files for audio, video, or picture elements. It ensures that browsers can load the best-supported format available.

Q2: Can the source tag be used alone?

No, the source tag must be placed inside media elements like audio, video, or picture. It cannot function independently.

Q3: What is the difference between src and srcset?

The src attribute defines a single media source, while srcset provides multiple sources for responsive images used with the picture tag.

Q4: Does the source tag support closing tags?

The source tag is a self-closing tag, meaning it does not require a separate closing tag. It starts and ends with <source>.

Q5: How does the source tag affect SEO?

Providing optimized and accessible media through multiple source formats improves user experience, site speed, and SEO performance.

HTML

Related Articles