Skip to content
Related Articles
Open in App
Not now

Related Articles

What are the media element tags introduced by HTML5 ?

Improve Article
Save Article
  • Last Updated : 01 Sep, 2021
Improve Article
Save Article

HTML5 introduced 5 most popular media element tags i.e. <audio>, <video>, <source>, <embed>, <track>. This media element tags changed the entire development using HTML.

In this article, you will get to know about these five media element tags briefly.

Media Tags:

  • <audio>: It is an inline element that is used to embed sound files into a web page.
  • <video> It is used to embed video files into a web page.
  • <source>: It is used to attach multimedia files like audio, video, and pictures.
  • <embed>: It is used for embedding external applications which are generally multimedia content like audio or video into an HTML document.
  • <track>:  It specifies text tracks for media components audio and video.

Advantage of Media tag:

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

HTML




<!DOCTYPE html>
<html>
  
<head>
    <style>
        h1 {
            color: green;
        }
    </style>
</head>
  
<body>
    <center>
        <h1>GeeksforGeeks</h1>
  
        <p>Audio Sample</p>
  
        <!--- Autoplay ensure to run audio automatically
              after running the program -->
        <audio controls autoplay>
            <source src=
                type="audio/ogg">
  
            <source src=
                type="audio/mpeg">
        </audio>
    </center>
</body>
  
</html>

Output:

 

<video>: It is a standard way to embed a video into your web page.

Syntax:

 <video src="" controls>   </video>

Example:

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:

<embed>: It is used as a container for embedding plug-ins such as flash animations.

Syntax:

<embed attributes>

HTML




<!DOCTYPE html>
<html>
  
<head>
    <style>
        h1 {
            color: green;
        }
    </style>
</head>
  
<body>
    <center>
        <h1>GeeksforGeeks</h1>
  
        <p>Embed Sample</p>
  
        <embed
            src=
            width="300px" height="300px">
    </center>
</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>

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 sectors for the <audio> and <video> elements.

Syntax:

<track Attribute>

HTML




<!DOCTYPE html>
<html>
  
<head>
    <style>
        h1 {
            color: green;
        }
    </style>
</head>
  
<body>
    <center>
        <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>
    </center>
</body>
  
</html>

Output:


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!