View video tutorial

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>.

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>
Try it Now »

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>
Try it Now »

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>
Try it Now »

Click on the "Try it Now" button to see how it works.