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