Home > Abakada: Back to Basics > Language References > HTML Elements > SOURCE Element
| Defines alternative media resources for media elements. | HTML 5 |
HTML Syntax
<source
height (in picture) = vertical dimension
media = media_query
sizes (in picture) = image sizes for different page layouts
src (in audio or video) = url
srcset (in picture) = url
type = mime-type
width (in picture) = horiontal dimension
>
NOTE: Only the <source> start tag must be present. The element has no end tag.
The <source> element is used to specify multiple media resources for media elements, such as <video>, <audio>, and <picture>.
This allows web authors to specify alternative video/audio/image files which the browser may choose from, based on browser support or viewport width.
<source> tags are defined as a child of a <picture> element, before the <img> element; or as a child of the <audio> and <video> elements, before any flow content or <track> elements.
The <source> element supports the following attributes, in addition to global attributes common to all HTML elements.
| 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 |
NOTE: This section of the workshop is under major reconstruction, in short, work in progress. So please bear with whatever inconvenience you may encounter; we hope to complete the job at the soonest possible time. 
The <source> element supports the following attributes, in addition to global attributes common to all HTML elements.
| 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 |
The following examples show how the <source> element may be used.
For the audio element:
<audio controls>
<source src="happy-day.mp3" type="audio/mpeg">
Sorry, your browser does not support the audio element.
</audio>
which would render on a Web page as follows:
For the video element:
<video autoplay controls width=640 height=360>
<source src="praise.mp4" type="video/mp4">
Sorry, your browser does not support the video element.
</video>
which would render on a Web page as follows:
AUDIO PICTURE VIDEO