Loading...
HTML <source> Tag

HTML <source> Tag

In this tutorial, we will learn about source tag in HTML with the help of examples.


<source> Tag

Source tag <source> is used to define multimedia resources for <audio>,<picture> and <video> tag.
The <source> tag allows us to specify alternative video/audio/image files which the browser may choose based on browser support or viewport width.

Note : The browser will choose the first supported file in <source> tag.

Syntax

<source />

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Source Tag</title>
  </head>
  <body>
    <audio controls>
      <source src = "audio.mp3" type = "audio/mp3">
      <source src = "audio.ogg" type = "audio/ogg">
      Your browser does not support the audio format.
    </audio>
  </body>
</html>

Output


Specific Attribute

Attribute Value Description
media media_query Used to defines the type of media resource
sizes pixels/number It specifies image sizes for different page layouts
src URL Specifies the source/URL of the media type
srcreset URL It is required when <source> in used in <picture> tag. It specifies the URL of the images to use in different situations
type media_type Specifies the media type of media resource

Global Attribute

Source Tag support all the global attributes of HTML.


Event Attribute

Source Tag support all the event attributes of HTML.


Next Tutorial

We hope that this tutorial helped you develop better understanding of the concept of <source> tag in HTML.

Keep Learning : )

In the next tutorial, you'll learn about HTML <span> Tag.

- Related Topics