source tag in html

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.

  • source tag 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

AttributeValueDescription
mediamedia_queryAccepts any valid media query that would normally be defined in a CSS
sizesYour ValueSets 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
typeMIME-typeSets 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 source tags specify multiple sources for media elements.
  • You do not need to use a closing tag, as HTML source element is empty.
  • Apart from tag-specific attributes, HTML source tag 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.

Related Posts

meter element

meter element

How To Use The Meter Element In HTML?

Preg_match_all-in-php.jpg

Preg_match_all in php

The Basic Concept of the PHP preg_match_all Function The PHP preg_match_all function is a pattern-matching function that matches the text. This function is use to search for…

document.queryselector-in-javascript.jpg

what is document.queryselector in javascript

What is document.querySelector() in Javascript? The javascript document.querySelector() method retrieves. The element with the given tag name or id from within a document. The document.querySelector() method returns…

JQuery hide Method.jpg

JQuery hide Method

What can the JQuery Hide Method Do For You? The JQuery Hide Method is a function that one can use to hide text on a website. It…

Push array in php.jpg

Push array in php

What is a php Push Array? A push array is a PHP data type that can store an arbitrary number of values. The push array is a…

How to use map method in javascript.jpg

How to use map method in javascript

What is the Map Method? The map method is a higher-order function in JavaScript. Who can use it to transform an array into another array by iterating…

This Post Has One Comment

Leave a Reply

Your email address will not be published.

Education Template