HTML <source> tag
HTML <source> tag : Definition
• The HTML <source> tag specifies an alternative media resources for the media elements like <audio>, <video>, <image> or external web documents etc.
• It is an empty <element> it means that it has no content and does not have a ending <tag>.
Html <source> tag example 1:
<!DOCTYPE html> <html> <head> <title>source Tag example</title> </head> <body> <p>Click on the play button to play a sound:</p> <audio src="try_it/media/tiger-roar.mp3" controls> Your browser does not support the audio element. </audio> </body> </html>
Output :
Click on the play button to play a sound:
Html <source> tag example 2:
<!DOCTYPE html> <html> <head> <title>source Tag example</title> </head> <body> <p>Click on the play button to play a video:</p> <video width="320" height="240" controls src="try_it/media/tiger-roar.mp4"> <b>Note:</b> The .ogg fileformat is not supported in IE and Safari.</p> </video> </body> </html>
Output :
Note: The .ogg fileformat is not supported in IE and Safari.
source tag attributes
Attribute | Value | Description |
---|---|---|
media | media_query | Accepts any valid media query that would normally be defined in a CSS |
sizes | Specifies image sizes for different page layouts | |
src | URL | Required when <source> is used in <audio> and <video>. Specifies the URL of the media file |
srcset | URL | Required when <source> is used in <picture>. Specifies the URL of the image to use in different situations |
type | MIME-type | Specifies the MIME-type of the resource |