html tutorial - Source <source>-tag in HTML - html5 - html code - html form



  • <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.

Syntax for <source> tag:

<source src=”source file name” type=”media type/codec support”>

Differences between HTML 4.01 and HTML5:

HTML 4.01

  • HTML4 does not support <source> tag.

HTML5

  • HTML5 supports <source> tag.

Sample Coding for <source> tag:

Tryit<!DOCTYPE html>
<html >
    <head>
        <title>Wikitechy source tag</title>
    </head>
    <body>
        <h2>Wikitechy Audio</h2>
        <audio controls>
            source src="wikitechy.wav" type="audio/wav"
            source src="wikitechy.mp3" type="audio/mp3"
        </audio>
    </body>
</html>

Code Explanation for <source> tag:

code explanation for source tag

  1. <audio> tag used to define the media element.
  2. <source> tag used to define the resource of the media element.
  3. “src” attribute is used to set the source file location for the media element reference.
  4. There are two audio file source is mentioned, welcome.mp3, welcome.wav.

Output of <audio> tag:

output for source tag

  1. Here the audio file is displayed in the output with volume adjustment.

Attribute List:

Attribute Value HTML4 HTML5 Description
media media_query No Yes Specifies the type of media resource
src URL No Yes Specifies the URL of the media file
type media_type No Yes Specifies the media type of the media resource

Browser Support for <source> tag:

Browser Mp3 wav ogg
Yes Yes No
Yes No Yes
Yes Yes Yes
Yes Yes No
Yes Yes Yes

Related Searches to Source tag in Html