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