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>

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

GET 25% OFF

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

UP TO 70% OFF

Pros

• A wide range of learning programs
• University-level courses
• Easy to navigate
• Verified certificates
• Free learning track available

Main Features

• University-level courses
• Suitable for enterprises
• Verified certificates of completion

FREE COURSES

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

Chrome

All

Edge

All

Firefox

3.5+

IE

9+

Opera

All

Safari

All

Mobile browser support

Chrome

All

Firefox

4+

Opera

-

Safari

All