Open In App

HTML <source> Tag

Improve
Improve
Like Article
Like
Save
Share
Report

The <source> tag in HTML is used to specify multimedia files like <audio>, <video>, and <picture>. It utilizes attributes like src and type for defining the source URL and also enables the inclusion of different file formats for compatibility across browsers.

It is a void element, which means that it has no content and does not require a closing tag. The <source> tag also supports the Global Attributes and Event Attributes in HTML.

Syntax:

<source src=" " type=""> 

// Statements

</source>

Attributes:

Attribute Description
src It holds the path of media content.
media It defines the type of the media content.
srcset It specifies the URL of the image used in different situations.
sizes It specifies the sizes of images in different page layouts.
type It specifies the MIME-type resource.
height Intrinsic image height in pixels (only for <picture>).
width Intrinsic image width in pixels (only for <picture>).

Example 1: This example uses <source> tag with the video media file. 

html




<!DOCTYPE html>
<html>
  
<head>
    <title>
        HTML source Tag
    </title>
</head>
  
<body>
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
  
    <h2>
        HTML <source> Tag
    </h2>
  
    <video width="400" height="350" controls>
        <source src="video.mp4" type="video/mp4">
        <source src="video.ogg" type="video/ogg">
    </video>
</body>
  
</html>


Output:

 

Example 2: This example uses <source> tag with the audio media files. 

html




<!DOCTYPE html>
<html>
  
<head>
    <title>
        HTML source Tag
    </title>
</head>
  
<body>
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
    <h2>
        HTML <source> Tag
    </h2>
    <audio controls>
        <source src="audio.mp3" 
                type="audio/mp3">
    </audio>
</body>
  
</html>


Output:

Supported Browsers:

  • Google Chrome 3
  • Edge 12
  • Firefox 3.5
  • Opera 15
  • Safari 3.1


Last Updated : 28 Dec, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads