HTML <source> Attributes

HTML <source> src Attribute

An audio player with two source files. The browser should choose which file (if any) it has support for:

<audio controls>
<source src=”horse.mp3″ type=”audio/mpeg”>
Your browser does not support the audio element.
</audio>

Try it Yourself »


Definition and Usage

The src attribute specifies the URL of the media file to play.

This attribute is required when <source> is used in <audio> and <video>.


HTML <source> srcset Attribute

A <picture> element with two source files, and a fallback image:

<picture>
<source media=”(min-width: 650px)” srcset=”img_pink_flowers.jpg”>
<source media=”(min-width: 465px)” srcset=”img_white_flower.jpg”>
<img src=”img_orange_flowers.jpg” alt=”Flowers” style=”width:auto;”>
</picture>

Try it Yourself »


Definition and Usage

The srcset attribute specifies the URL of the image to use in different situations.

This attribute is required when <source> is used in <picture>.


HTML <source> media Attribute

A <picture> element with two source files, and a fallback image:

<picture>
<source media=”(min-width: 650px)” srcset=”img_pink_flowers.jpg”>
<source media=”(min-width: 465px)” srcset=”img_white_flower.jpg”>
<img src=”img_orange_flowers.jpg” alt=”Flowers” style=”width:auto;”>
</picture>

Try it Yourself »


Definition and Usage

The media attribute accepts any valid media query that would normally be defined in a CSS.

Note: This attribute can accept several values.


HTML <source> type Attribute

Use of the type attribute:

<audio controls>
<source src=”horse.ogg” type=”audio/ogg”>
<source src=”horse.mp3″ type=”audio/mpeg”>
Your browser does not support the audio element.
</audio>

Try it Yourself »


Definition and Usage

The type attribute specifies the Internet media type (formerly known as MIME type) of the media resource.