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>

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>

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.

The <source> tag also supports the Global Attributes and the Event Attributes.


Browser support

4+ 3.5+ 4+ 10.5+


Do you find this helpful?

Related articles