Source tag in html specify multimedia resources for and elements. Browser based on media type. Media query and codec support by selecting the source.
source tag in html Explain 01
<source src=”source file name” type=”media type/codec support”>HTML Source Tag
In HTML, the <source> tag is used to represent multiple media resources for a picture, an audio or video in a document.
sourcetag is an Empty element.- The
<source>tag is used to serve the same media content in multiple formats which then further supported by different browsers.
HTML <source> Tag Syntax and Usage
The source tag in html requires the start(opening) tag only; it does not require an end tag because it is an empty element.
source tag in html Explain 02
<audio controls>
source src="wikitechy.wav" type="audio/wav"
source src="wikitechy.mp3" type="audio/mp3"
</audio>- The tag is used to define the media resource of the and tags.
- Source tags allow multiple alternative resource files for media elements. The browser can select files. Depending on the media type and codec support.
- The tag supports global attributes and event attributes.
source tag in html attribute
| Attribute | Value | Description |
|---|---|---|
| media | media_query | Accepts any valid media query that would normally be defined in a CSS |
| sizes | Your Value | Sets image sizes for different page layouts |
| src | URL | Required when <source> is used in <audio> and <video>. Sets the URL of the media file |
| srcset | URL | Required when <source> is used in <picture>. Sets the URL of the image to use in different situations |
| type | MIME-type | Sets the MIME-type of the resource |
source tag in html Explain 03
<source> tag used to defines the media resource for <audio> and <video> tag.
<source> tag allows multiple alternate resource files for the media elements, the browser may choose the files depends upon the media type and codec support.
<source> tag supports Global Attributes and Event Attributes.src
The URL where the media is hosted. “/images/tiramisu.jpg” You can use a relative URL. “https://htmlreference.io/images/traffic.jpg” You can use an absolute URL.
srcset
Defines a list of different sources for the same media. The browser will choose the best one to use.
- “/images/sunset-360.jpg 360w,
- /images/sunset-720.jpg 720w,
- /images/sunset-1440.jpg 1440w”
You can use a width descriptor like 360w. This value is divided by one of the source sizes (defined in the sizes attribute) to obtain the pixel density.
sizes
Defines a list of different source sizes. You can combine each of them with a media query. “(min-width: 800px) 1440px, 720px” The browser will use the 1440px image (defined in srcset) if the viewport is larger than 800px. It will use the 720px otherwise.
type
Defines the MIME type of the source. “image/jpg” You can only use audio, video, or picture MIME types.
media
Defines a media query for a <picture> source.
HTML source Tag: Main Tips
- HTML
sourcetags specify multiple sources for media elements. - You do not need to use a closing tag, as HTML
sourceelement is empty. - Apart from tag-specific attributes, HTML
sourcetag also supports global ones. - It was newly introduced in HTML5.
Defining Media Sources
HTML source tag in html are used to define multiple media sources for <audio>, <video> and <picture> elements. The browser then selects the source based on its codecs and media type support:
source tag in html Explain 04
<picture>
<source srcset="SpaceDogg.png" media="(min-width: 550px)">
<img src="alt_SpaceDogg.png" alt="SpaceDogg">
</picture>Description
The <source> tag sets multiple media resources for media elements, such as <video>, <audio>, and <picture>. The <source> tag allows you to set 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.
internal linking suggestions.
This Post Has One Comment