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:
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
Share your thoughts in the comments
Please Login to comment...