HTML <source> Tag
In this tutorial, we will learn about source tag in HTML with the help of examples.
<source> Tag
Source tag <source> is used to define multimedia resources for <audio>,<picture> and <video> tag.
The <source> tag allows us to specify alternative video/audio/image files which the browser may choose based on browser support or viewport width.
Note : The browser will choose the first supported file in <source> tag.
Syntax
<source />
Example
<!DOCTYPE html>
<html>
<head>
<title>Source Tag</title>
</head>
<body>
<audio controls>
<source src = "audio.mp3" type = "audio/mp3">
<source src = "audio.ogg" type = "audio/ogg">
Your browser does not support the audio format.
</audio>
</body>
</html>Output
Specific Attribute
| Attribute | Value | Description |
|---|---|---|
| media | media_query | Used to defines the type of media resource |
| sizes | pixels/number | It specifies image sizes for different page layouts |
| src | URL | Specifies the source/URL of the media type |
| srcreset | URL | It is required when <source> in used in <picture> tag. It specifies the URL of the images to use in different situations |
| type | media_type | Specifies the media type of media resource |
Global Attribute
Source Tag support all the global attributes of HTML.
Event Attribute
Source Tag support all the event attributes of HTML.
Next Tutorial
We hope that this tutorial helped you develop better understanding of the concept of <source> tag in HTML.
Keep Learning : )
In the next tutorial, you'll learn about HTML <span> Tag.