Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

What are the media element tags introduced by HTML5 ?

  • Last Updated : 01 Sep, 2021

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.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

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
Recommended Articles
Page :

Start Your Coding Journey Now!