HTML source Tag

Example

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

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

More "Try it Yourself" examples below.

---

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 its media type, codec support or media query.

---

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

---

Differences Between HTML 4.01 and HTML5

The <source> tag is new in HTML5.

---

---

Attributes

Attribute	Value	Description
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
media	media_query	Accepts any valid media query that would normally be defined in a CSS
sizes		Specifies image sizes for different page layouts
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

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 »

---

Related Pages

HTML tutorial: HTML5 Video

HTML tutorial: HTML5 Audio

HTML DOM reference: Source Object

---

Default CSS Settings

None.