HTML | <source> Tag

Last Updated : 04 Sep, 2019

The <source> tag in HTML is used to attach multimedia files like audio, video and pictures. The <audio>, <video> and <picture> elements contain the <source> element.

Syntax:

<source src="" type=""> 
    // Statements
</source>

Attributes: This tag contains five attributes as mentioned above and described below:

src: It is used to hold the path of media content.
type: It is used to define the type of the media content.
srcset: It is used to specify the URL of image used in different situations.
sizes: It is used to specify the sizes of image in different page layout.
type: It is used to specify the MIME-type resource.

Below examples illustrate the <source> tag in HTML:

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

<!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.

<!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: The browsers supported by HTML <source> Tag are listed below:

Google Chrome 4.0
Internet Explorer 9.0
Firefox 3.5
Safari 4.0
Opera 10.5

My Personal Notes

Related Articles