Logo
×

HTML <source> tag

For media attributes, such as <video> tag, <audio> tag, and <picture> tag, we use the <source> tag in html for adding such type of multiple media html elements in our web page.

A developer can use alternative video, audio, and picture files using the source> tag.

Syntax:

<audio controls>
<source src="# " type="# ">
<source src="# " type="#">
  …….
</audio>

Example

Here is an example of an audio player having two source files. The browser will select the first one that it supports:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="deepanshu ">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> html source tag </title>
</head>
<body>
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>
</body>
</html>

Output:

HTML <source> Tag

Attributes of Source Tag

Type:

The MIME media type of the data and information, maybe used with a codecs parameter.

<audio controls>
<source src="horse.ogg" type="audio/ogg">
</audio>

Src:

This attribute is used when the source element is an audio or video element, but it is prohibited if the parent element of the origin resource is a picture element.

It is made up of the media resource's address.

<img src="https://cdn.pixabay.com/photo/2013/07/21/13/00/rose-165819__340.jpg" alt="Flowers" style="width:auto;">

Srcset:

It must be present if the source element is a picture element. It can not be used when the source element is an audio or video element.

We can specify the more than two string using commas.

<source media="(min-width:650px)" srcset="https://cdn.pixabay.com/photo/2013/07/21/13/00/rose-165819__340.jpg">

Sizes:

This attribute is used when the parent of source element is specified as picture.  This attribute cannot be used when the source is specified as video or audio.

Media:

If the source element is a picture element, then this can be used in source tag.  This attribute cannot be used when the source is specified as video or audio.

<source media="(min-width:650px)" srcset="https://cdn.pixabay.com/photo/2013/07/21/13/00/rose-165819__340.jpg">

Height:

If the source element is a picture element, then this can be used in source tag. This attribute cannot be used when the source is specified as video or audio.

<img src="https://cdn.pixabay.com/photo/2013/07/21/13/00/rose-165819__340.jpg" alt="Flowers" style="height:4500;">

Width:

If the source element is a picture element, then this can be used in source tag. This attribute cannot be used when the source is specified as video or audio.

<img src="https://cdn.pixabay.com/photo/2013/07/21/13/00/rose-165819__340.jpg" alt="Flowers" style="width:567;">

Example

In this example, we use video value in source tag to play a video:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="deepanshu ">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> html source tag </title>
</head>
<body>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>
</body>
</html>

Output:

HTML <source> Tag

Example

We use picture value in source tag to define different images based on the viewport width:

<!DOCTYPE html>
<html>
<head>
<title> html source tag </title>
</head>
<body>
<picture>
<source media="(min-width:650px)" srcset="https://cdn.pixabay.com/photo/2013/07/21/13/00/rose-165819__340.jpg">
<source media="(min-width:465px)" srcset="https://cdn.pixabay.com/photo/2013/07/21/13/00/rose-165819__340.jpg">
<img src="https://cdn.pixabay.com/photo/2013/07/21/13/00/rose-165819__340.jpg" alt="Flowers" style="width:auto;">
</picture>
</body>
</html>

Output:

HTML Source Tag

Browser support:

List of browsers that support html <section> tag are mentioned below:

Chrome: Yes

Microsoft Edge: Yes – version 12 needed

Firefox: Yes – version 3.5 needed

Safari: Yes

Opera: Yes

Related Topics

HTML <script> Tag

For embedding a client -side script, we use script tag in html tag. This <script> tag can be used for containing scripting statements. It can also point another external script file...

2 minutes read.

How to add Google Translate Button on your Webpage?

Google translator is a multi-language translator used for translating the webpage. Google develops it. In today's digital age, it is essential because information is available worldwide in some specific language...

5 minutes read.

HTML Font Size

The HTML <font> tag uses the size attribute to specify the size of the text. We can set the size attribute’s value from 1 to 7. The default size of...

4 minutes read.

HTML <section> tag

The section element in HTML is used to define sections in a document. Syntax of Section Tag: <body> <h1>……….</h1> <section> <h2>……….</h2> <p> …………………………</p> </section> <section> <h2>………..</h2> <p>…………………………. <p> </section> </body> Examples of Section Tag Example 1: In this example, we use the HTML "section" element...

3 minutes read.

HTML Frames

Frames in Html is used to divide the browser into different sections where each section can load different Html documents. Collection of frame is known as Frameset. Creating frames:We use frameset...

2 minutes read.

HTML 5 Tutorial

What is HTML5? HTML5 is a programming language which stands for the acronym Hyper Text Markup Language 5. It is program that enables the appearance of web pages to be changed, as well as changes...

5 minutes read.

HTML Basic Tags

Heading Tags: This tag represents the document header. It is said to be a good practice if every document starts with Heading. Heading tags ranges from H1 to H6 i.e....

3 minutes read.

How to change text color in HTML

Changing the text colour of a web page is essential because it enhances readability. There are several ways to change the colour of the text in HTML, which are as follows: Text...

7 minutes read.

Font tag in HTML

HTML stands for Hypertext Mark-up Language and is used to create web pages and other information that can be later displayed in a web browser. It also consists of a...

4 minutes read.

How to create a link with no underline in HTML

In HTML, an anchor tag (<a>) is a Styled Container tag, which means when a hyperlink is created using this, browsers, by default, display the link by applying some styles...

5 minutes read.

HTML <address> Tag

Hyper Text Markup Language, HTML is the best markup language for creating Web pages. HTML consists of a wide variety of elements. In all of these elements, one element is...

4 minutes read.

Caption Tag in HTML

Caption Tag in HTML: The < caption > tag in HTML describes the heading of a table in the HTML text. Browsers typically make the text found above the table...

4 minutes read.

HTML Images

HTML has <img> tag to display image on the web pages or web application. This tag is an empty tag i.e. we don't have to close this tag while using. SYNTAX: <img src="source address" attributes="alt, height, width"> Example: <html>   <body>   <center>Image tag Example</center>   <img src="https://www.tutorialandexample.com/resources/images/favicon.png"    alt="tutorialandexample"/>   </body>   </html> Output: Image...

1 minute read.

HTML &lt;body> alink Attribute

HTML <body> alink Attribute What is HTML? The HTML or HyperText Markup Language is used to design web pages. The file extension name for HTML file is ".html". It was released in...

2 minutes read.

HTML <style> tag

The section of information that we want to style is contained in html style tag. It includes CSS, which is used to design the text and images in the web page. Syntax: <head> <title>…………....

3 minutes read.

How to insert image in HTML

An image (technically digital image) in HTML or even in general technical aspects is a binary representation of visual information. By visual information we mean, in the form of drawings/pictures,...

5 minutes read.

HTML Code Tag

The code tag in HTML is a phrase tag used to insert a piece of computer programming code. In HTML there is a separate tag named as <code> tag. Sometimes,...

3 minutes read.

HTML Audio

HTML AUDIO: HTML5 provides a method to embed the audio file into a webpage by using HTML5. Before HTML5 audio files is used to play on the browser with the help of...

1 minute read.

HTML Paragraphs

In html, there are some elements which starts with new line and one of them is paragraph. Which is said to be a block of text. In html <p> tag...

4 minutes read.

HTML <sup> Tag

The HTML sup element is used to describe one or more superscript contents. The sup tag shows a text which is presented above the regular line and half the length...

2 minutes read.