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>
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
Coursera
Pros
  • Professional service
  • Flexible timetables
  • A variety of features to choose from
Main Features
  • Professional certificates of completion
  • University-level courses
  • Multiple Online degree programs
Datacamp
Pros
  • Great user experience
  • Offers quality content
  • Very transparent with their pricing
Main Features
  • Free certificates of completion
  • Focused on data science skills
  • Flexible learning timetable

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

Latest Udacity Coupon Found:

Verified STAFF PICK

75% OFF COURSES

Udacity Black Friday Offer

The best time to save on Udacity courses is now - follow this coupon to access a 75% Udacity Black Friday discount & enjoy learning at a very low cost!

Expiration date: 27/02/2021
3176 People Used
Only 97 Left
Rating
5.0