HTML <source>
Tag
HTML
The <source>
tag is used to specify appropriate media resources.
HTML <source>
Tag
The <source>
element specifies multiple media resources for the <picture>
, the <audio>
element, or the <video>
element from where suitable media can be loaded according to availability and viewport size.
The <source>
element is always followed by a fallback option because the media may not be available or the browser may not be supported.
Element Attributes
Attribute | Value | Description |
---|---|---|
media |
media_query | Media queries targeted by resources. Allowed if the source element's parent is a picture element |
sizes |
Specify image sizes in different page layouts. Allowed if the parent of source element is a picture element. |
|
src |
url | Specifies the address of the media resource. Required if the parent of source element is an audio and video element. |
srcset |
url | Required if the source element's parent is a picture element. This specifies the URL of image used in different situations. |
type |
MIME-type | The MIME media type of the resource. |
Global attributes
Global attributes may be applied on all elements, although some elements may have no effect on them.
<accesskey>
,
<class>
,
<contenteditable>
,
<contextmenu>
,
<data-*>
,
<dir>
,
<draggable>
,
<dropzone>
,
<hidden>
,
<id>
,
<lang>
,
<spellcheck>
,
<style>
,
<tabindex>
,
<title>
,
<translate>
.
Global Event Handler Attributes
Global Event Handler attributes may be applied on all elements, although some elements may have no effect on them.
<onabort>
,
<onautocomplete>
,
<onautocompleteerror>
,
<onblur>
,
<oncancel>
,
<oncanplay>
,
<oncanplaythrough>
,
<onchange>
,
<onclick>
,
<onclose>
,
<oncontextmenu>
,
<oncuechange>
,
<ondblclick>
,
<ondrag>
,
<ondragend>
,
<ondragenter>
,
<ondragleave>
,
<ondragover>
,
<ondragstart>
,
<ondrop>
,
<ondurationchange>
,
<onemptied>
,
<onended>
,
<onerror>
,
<onfocus>
,
<oninput>
,
<oninvalid>
,
<onkeydown>
,
<onkeypress>
,
<onkeyup>
,
<onload>
,
<onloadeddata>
,
<onloadedmetadata>
,
<onloadstart>
,
<onmousedown>
,
<onmouseenter>
,
<onmouseleave>
,
<onmousemove>
,
<onmouseout>
,
<onmouseover>
,
<onmouseup>
,
<onmousewheel>
,
<onpause>
,
<onplay>
,
<onplaying>
,
<onprogress>
,
<onratechange>
,
<onreset>
,
<onresize>
,
<onscroll>
,
<onseeked>
,
<onseeking>
,
<onselect>
,
<onshow>
,
<onsort>
,
<onstalled>
,
<onsubmit>
,
<onsuspend>
,
<ontimeupdate>
,
<ontoggle>
,
<onvolumechange>
,
<onwaiting>
.
Learning with HTML Editor "Try it Now"
You can edit the HTML code and view the result using online editor.
Example
<audio controls>
<source src="audiodemo.ogg" type="audio/ogg">
<source src="audiodemo.mp3" type="audio/mpeg">
Sorry this browser does not support the audio element.
</audio>
Click on the "Try it Now" button to see how it works.
Example
<video controls>
<source src="videodemo.ogg" type="audio/ogg">
<source src="vediodemo.mp3" type="audio/mpeg">
Sorry this browser does not support the video element.
</video>
Click on the "Try it Now" button to see how it works.
Sample Code
Copy each file contents and paste it to your own project and run to see the final output
Example
<picture>
<source media="(min-width:600px)" srcset="img1.png">
<source media="(min-width:450px)" srcset="img2.png">
<img src="img3.png" alt="Metal Box" style="width:auto;">
</picture>
Click on the "Try it Now" button to see how it works.