HTML source Tag
Web structure starts with solid HTML. Learn how HTML source Tag contributes to accessible and semantic web pages in the tutorial below.
HTML <source> tag is used as a child element to define more than one media resources for <audio>, <video>, and <picture> element.
It is utilized to deliver identical media content in various formats like mp3, mp4, and more.
When multiple resources are embedded with identical content but varying formats, the browser will select the most suitable format and present or play the media file.
The <source> tag was introduced in HTML5.
Syntax
<source src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" type=" ">
Here are some details regarding the HTML <source> element:
| Display | Inline |
|---|---|
| Start tag/End tag | Empty tag( Only start tag) |
| Usage | Media resource |
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML source tag</title>
</head>
<body>
<h2>Example of source tag</h2>
<video controls="controls" height="200" width="300">
<source src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" type="video/webm" >
<source src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" type="video/mp4">
Your browser does not support the HTML5 video element.
</video>
</body>
</html>
Output:
Attribute:
Tag-specific attributes:
| Attribute | Value | Description |
|---|---|---|
| media | Media_query | It determines that for which media/device the linked source is optimized. |
| sizes | It specifies acceptable image sizes for different page layout. | |
src |
It determines the URL of media files. | |
| srcset | Specifies the URL of the image for different situations. It is only used when <source> is child of <picture> element. | |
type |
video/oggvideo/mp4video/webmaudio/oggaudio/mpeg | It determines the media type of resource. |
Global attribute:
The <source> tag enables the utilization of Global attributes within HTML.
Event attribute:
The <source> element facilitates the utilization of Event attributes within HTML.
Supporting Browsers
| Element | Chrome | IE | Firefox | Opera | Safari |
|---|---|---|---|---|---|
<source> |
Yes | Yes | Yes | Yes | Yes |
