HTML <source> Tag
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;" > w3wiki </ 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;" > w3wiki </ 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
Contact Us