What are the media element tags introduced by HTML5 ?
Last Updated :
30 Jan, 2024
HTML5 introduced 5 most popular media element tags i.e. <audio>, <video>, <source>, <embed>, <track>. These media element tags changed the entire development using HTML. In this article, you will get to know about these five media element tags briefly.
| <audio> |
An inline element is used to embed sound files into a web page. |
| <video> |
Used to embed video files into a web page. |
| <source> |
Used to attach multimedia files like audio, video, and pictures. |
| <embed> |
Used for embedding external applications, generally multimedia content like audio or video, into an HTML document.< |
| <track> |
Specifies text tracks for media components, specifically for audio and video elements. |
- Plugins are no longer required
- Speed – anything naturally integrated into a browser will be rendered and executed in a faster fashion than imported third-party
- Native (built-in) controls are provided by the browser.
- Accessibilities (keyboard, mouse) are built-in automatically
<audio> Tag:
It is a useful tag if you want to add audio such as songs, or any sound files into your webpage.
Syntax:
<audio>
<source src="sample.mp3" type="audio/mpeg">
</audio>
Example 1: In this example, we will use <audio> tag with an example.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: green;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<p>Audio Sample</p>
<audio controls autoplay>
<source src=
type="audio/ogg">
<source src=
type="audio/mpeg">
</audio>
</body>
</html>
|
Output:
<video>:
It is a standard way to embed a video into your web page.
Syntax:
<video src="" controls> </video>
Example 2: In this example, we will see the use of <video>tag.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: green;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<p>Video Sample</p>
<video width="400" height="350" controls preload>
<source src="myvid.mp4" type="video/mp4">
<source src="myvid.ogg" type="video/ogg">
</video>
</center>
</body>
</html>
|
Output:
Adding youtube videos:
Youtube videos can also be directly added to your web page using the embed video option on any youtube video. <iframe> element is used to add the video with the src attribute but a shortcut to that is simply to go to any youtube video and right-click on the video, then select the copy embed code option.
Example 3: In this code we will see how to add youtube videos with the help of iframe tag in an HTML document.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<iframe width="942" height="530"
src=
title=
"Introduction to Python | Sample Video for Python Foundation Course | GeeksforGeeks"
frameborder="0"
allow=
"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen>
</iframe>
</body>
</html>
|
Output:
<embed>:
It is used as a container for embedding plug-ins such as flash animations.
Syntax:
<embed attributes>
Example 4: In this example, we will use <embed> tag with an example.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: green;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<p>Embed Sample</p>
<embed src=
width="300px" height="300px">
</body>
</html>
|
Output:
<source>:
As you can observe that  <audio>, <video>  elements contain the <source> element, the <source> tag is  used to attach multimedia files.
Syntax:
<source src="" type="">
...
</source>
Example 5: In this example, we will use <source> tag with an example.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: green;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h2>Source Tag</h2>
<audio controls>
<source src="audio.mp3"
type="audio/mp3">
</audio>
</center>
</body>
</html>
|
Output:
<track>:
It is used to specify subtitles, caption files, or different files containing text, that ought to be visible once the media is taking part in it.Thus it is a simple sector for the <audio> and <video> elements.
Syntax:
<track Attribute>
Example 6: In this example, we will use <track> tag with an example.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: green;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>Track Tag: Both Audio and Video</h2>
<video width="300" height="300" controls>
<source src="myvid.mp4" type="video/mp4">
<track src=
kind="subtitle" srclang="en"
label="English">
</video>
</body>
</html>
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...