HTML <source> Tag

The <source> tag is an empty element. It means that the tag does not have any content, as well as a closing tag.

The <source> tag is one of the HTML5 elements. It is used to define multiple media resources in different formats: video, audio or image. This is necessary to achieve the best possible cross-browser compatibility. From the possible options browser can choose the format, which it supports and play audio and video files without any difficulty.

The <source> element can be used multiple times in one document to indicate the alternative audio/video files and images of numerous formats.

If the <source> tag is included in the <audio> or <video> tags, it should be placed before the <track> tag and after media files. It should be placed before <img> if it’s inside a <picture> tag.

Syntax

The <source> tag is empty, which means that the closing tag isn’t required. But in XHTML, the (<source>) tag must be closed (<source/>).

Example of the HTML <source> tag:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <picture>
      <source media="(min-width: 650px)" alt="img_1" srcset="/uploads/media/news_gallery/0001/01/thumb_348_news_gallery_list.jpeg">
      <source media="(min-width: 430px)" alt="img_2" srcset="/uploads/media/news_gallery/0001/01/thumb_316_news_gallery_list.jpeg">
      <img src="/uploads/media/news_gallery/0001/01/thumb_366_news_gallery_list.jpeg" alt="img" style="width:auto;">
    </picture>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
  </body>
</html>

Try it Yourself »

Example of the HTML <source> tag with the src and type attributes:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      video {
        width: 300px;
        height: 220px;
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <video controls>
      <source src="http://techslides.com/demos/sample-videos/small.ogv" type=video/ogg>
      <source src="/build/videos/arcnet.io(7-sec).mp4" type=video/mp4>
    </video>
    <p>Some information about video</p>
  </body>
</html>

Try it Yourself »

Attributes

Attributes	Value	Description
media	media_query	Indicates that the file is adapted to certain type of devices.
sizes		Indicates the relative acceptable size of the source. Added in HTML5.
src	URL	Indicates the URL address of the media file.
srcset	URL	Indicates images which are used in different situations (for ipad screens, for retina screens, etc.) Added in HTML5.
type	Value for video: video/ogg video/mp4 video/webm Value for audio: audio/ogg audio/mpeg	Indicates the mime-type of media source.