HTML source tag

Example

An audio player with two source files. The browser will choose the first <source> it supports:

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

Definition and Usage

The <source> tag is used to specify multiple media resources for media elements, such as <video>, <audio>, and <picture>.

The <source> tag allows you to specify alternative video/audio/image files which the browser may choose from, based on browser support or viewport width. The browser will choose the first <source> it supports.

Browser Support

The numbers in the table specify the first browser version that fully supports the element.

Element
<source>	4.0	9.0	3.5	4.0	10.5

Attributes

Attribute	Value	Description
media	media_query	Accepts any valid media query that would normally be defined in a CSS
sizes	Specifies image sizes for different page layouts
src	URL	Required when <source> is used in <audio> and <video>. Specifies the URL of the media file
srcset	URL	Required when <source> is used in <picture>. Specifies the URL of the image to use in different situations
type	MIME-type	Specifies the MIME-type of the resource

Global Attributes

The <source> tag also supports the Global Attributes in HTML.

Event Attributes

The <source> tag also supports the Event Attributes in HTML.

More Examples

Example

Use <source> within <video> to play a video:

<video width="320" height="240" controls>
<source src="love.mp4" type="video/mp4">
<source src="love.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

Example

Use <source> within <picture> to define different images based on the viewport width:

<picture>
<source media="(min-width:650px)" srcset="img_sun.jpg"><!-- Image changes at 650px -->
<img src="img_suns.jpg" alt="Sun" style="width:auto;">
</picture>

Default CSS Settings

None.