HTML source Tag

HTML source Tag: Main Tips

• HTML source tags specify multiple sources for media elements.
• You do not need to use a closing tag, as HTML source element is empty.
• Apart from tag-specific attributes, HTML source tag also supports global ones.
• It was newly introduced in HTML5.

Defining Media Sources

HTML source tags are used to define multiple media sources for <audio>, <video> and <picture> elements. The browser then selects the source based on its codecs and media type support:

<audio controls>
  <source src="melody.mp3" type="audio/mpeg">
  <source src="melody.ogg" type="audio/ogg">
  This text will be displayed if the browser does not support the audio element.
</audio>

Available source Tag Attributes

There are five attributes you can use with HTML source tags. However, not all of them can be used with any type of media element.

type defines the media type (also called a MIME type) of the embedded content:

<audio controls>
  <source src="melody.mp3" type="audio/mpeg">
  <source src="melody.ogg" type="audio/ogg">
  This text will be displayed if the browser does not support the audio element.
</audio>

src defines URL of the media file for <audio> and <video> elements:

<audio controls>
  <source src="melody.mp3" type="audio/mpeg">
  <source src="melody.ogg" type="audio/ogg">
  This text will be displayed if the browser does not support the audio element.
</audio>

Note: if the HTML source element is located in a picture element, the value of src will be ignored.

srcset and media attributes can only be used with <picture> elements. srcset defines a URL of the image for the element, and media specifies a media query in CSS:

<picture>
  <source srcset="SpaceDogg.png" media="(min-width: 550px)">
  <img src="alt_SpaceDogg.png" alt="SpaceDogg">
</picture>

Note: you can also use sizes which is a list of HTML image source sizes specifying the rendered image width. Browsers use it to choose the right HTML image source.

Browser support

Mobile browser support