🚨 Get Your Free NFT Certificate Mint by Completing the Web3 Exam! START NOW

Code has been added to clipboard!

HTML source Tag

Reading time 2 min
Published Jun 29, 2017
Updated Oct 11, 2019

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:

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

DataCamp
Pros
  • Easy to use with a learn-by-doing approach
  • Offers quality content
  • Gamified in-browser coding experience
  • The price matches the quality
  • Suitable for learners ranging from beginner to advanced
Main Features
  • Free certificates of completion
  • Focused on data science skills
  • Flexible learning timetable
Udacity
Pros
  • Simplistic design (no unnecessary information)
  • High-quality courses (even the free ones)
  • Variety of features
Main Features
  • Nanodegree programs
  • Suitable for enterprises
  • Paid Certificates of completion
Udemy
Pros
  • Easy to navigate
  • No technical issues
  • Seems to care about its users
Main Features
  • Huge variety of courses
  • 30-day refund policy
  • Free certificates of completion

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:

Example
<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:

Example
<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:

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

Browser image
Chrome
All
Browser image
Edge
All
Browser image
Firefox
3.5+
Browser image
IE
9+
Browser image
Opera
All
Browser image
Safari
All

Mobile browser support

Browser image
Chrome
All
Browser image
Firefox
4+
Browser image
Opera
-
Browser image
Safari
All