Do you think IIT Guwahati certified course can help you in your career?
Introduction
The HTMLmedia attribute is used to specify the type of media or device for which a linked resource is optimized. It is commonly used with the <link> and <style> tags to apply different styles based on screen size, resolution, or device type. This attribute helps in creating responsive designs by loading appropriate stylesheets.
In this article, you will learn about the syntax, usage, and benefits of the media attribute in HTML.
Definition and Usage
The `<media>` tag in HTML is not a standalone tag but rather a general term used to describe elements that handle media content on a webpage. These include tags like `<audio>`, `<video>`, and `<picture>`. These tags allow developers to embed multimedia files directly into their websites, making the content more interactive and engaging for users.
For example, the `<video>` tag lets you add video files, while the `<audio>` tag is used for sound files. These tags come with attributes that help control how the media behaves on the page. Attributes like `controls`, `autoplay`, and `loop` give developers flexibility in customizing the user experience.
Let’s take a closer look at how these tags work with examples.
Example 1: Using the `<video>` Tag
To embed a video file into your webpage, you can use the `<video>` tag. Let’s see how it works:
<!DOCTYPE html>
<html>
<head>
<title>Video Example</title>
</head>
<body>
<h1>My First Video</h1>
<video width="320" height="240" controls>
<source src="example.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</body>
</html>
Output
Explanation:
The `<video>` tag is used to embed a video file.
The `width` and `height` attributes define the size of the video player.
The `controls` attribute adds play, pause, and volume buttons to the video player.
Inside the `<video>` tag, the `<source>` element specifies the file path (`example.mp4`) and its type (`video/mp4`).
If the browser doesn’t support the `<video>` tag, the text "Your browser does not support the video tag" will be displayed instead.
Example 2: Using the `<audio>` Tag
Similarly, you can embed audio files using the `<audio>` tag. For example:
<!DOCTYPE html>
<html>
<head>
<title>Audio Example</title>
</head>
<body>
<h1>My First Audio</h1>
<audio controls>
<source src="example.mp3" type="audio/mp3">
Your browser does not support the audio tag.
</audio>
</body>
</html>
Output
Explanation:
The `<audio>` tag is used to embed an audio file.
The `controls` attribute adds play, pause, and volume buttons.
The `<source>` element specifies the file path (`example.mp3`) and its type (`audio/mp3`).
If the browser doesn’t support the `<audio>` tag, the fallback text "Your browser does not support the audio tag" will be shown.
These examples show how simple it is to add media to your website using HTML. Developers can customize these tags further by adding attributes like `autoplay`, `loop`, or `muted` to enhance functionality.
Syntax
In HTML, media tags include <audio> and <video> to embed multimedia content. Below is the basic syntax for each:
Audio Tag Syntax
<audio controls>
<source src="audiofile.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Video Tag Syntax
<video width="320" height="240" controls>
<source src="videofile.mp4" type="video/mp4">
Your browser does not support the video element.
</video>
Explanation:
The <audio> and <video> tags define multimedia elements.
The <source> tag specifies the media file and its type.
The controls attribute adds playback controls.
The fallback text is displayed if the browser does not support the media tag.
Supported Tags
HTML provides different media-related tags:
Tag
Description
<audio>
Embeds audio content.
<video>
Embeds video content.
<source>
Specifies the media source file.
<track>
Provides text tracks for video/audio.
<embed>
Embeds external media content.
<object>
Embeds different types of media files.
HTML Media Attribute Examples
Example 1: Embedding an Audio File
<audio controls>
<source src="music.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Output:
This will display an audio player with play, pause, and volume controls.
Example 2: Embedding a Video File
<video width="400" height="300" controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Output:
A video player will appear on the webpage with playback controls.
The kind="subtitles" specifies that it is a subtitle file.
srclang="en" specifies the language.
Example 4: Embedding a Video Using the <embed> Tag
<embed src="video.mp4" width="400" height="300">
This tag is used to embed media without playback controls.
Applies to
The `<media>` tag, or more specifically the media-related tags like `<audio>`, `<video>`, and `<picture>`, are widely used in modern web development. These tags are essential for creating websites that are visually appealing and interactive. Let’s discuss where these tags are commonly applied and how they contribute to different types of projects.
1. Educational Websites
Educational platforms often use videos and audio files to deliver lectures, tutorials, or podcasts. For example, a coding tutorial website might include video demonstrations to explain complex concepts. Let’s see how you can embed a tutorial video:
<!DOCTYPE html>
<html>
<head>
<title>Educational Video</title>
</head>
<body>
<h1>Coding Tutorial</h1>
<video width="640" height="360" controls>
<source src="coding-tutorial.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</body>
</html>
Output
Explanation:
This code embeds a video tutorial on a webpage.
The `controls` attribute allows users to pause, play, or adjust the volume.
The video file (`coding-tutorial.mp4`) is specified using the `<source>` tag.
2. Entertainment Platforms
Streaming services like YouTube or Spotify rely heavily on media tags to deliver content. For instance, embedding a music player on a personal blog can make it more engaging. For example:
<!DOCTYPE html>
<html>
<head>
<title>Music Player</title>
</head>
<body>
<h1>Listen to My Favorite Song</h1>
<audio controls>
<source src="favorite-song.mp3" type="audio/mp3">
Your browser does not support the audio tag.
</audio>
</body>
</html>
Output
Explanation:
This code adds an audio player to a webpage.
Users can control playback using the built-in controls.
The audio file (`favorite-song.mp3`) is embedded using the `<source>` tag.
3. E-commerce Websites
Online stores often use videos to showcase products in action. For example, a product page might include a video demonstrating how a gadget works. Let’s see how you can implement this:
<!DOCTYPE html>
<html>
<head>
<title>Product Demo</title>
</head>
<body>
<h1>Smartphone Features</h1>
<video width="640" height="360" controls>
<source src="smartphone-demo.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</body>
</html>
Output
Explanation:
This code embeds a product demo video on a webpage.
The `controls` attribute ensures users can interact with the video.
The video file (`smartphone-demo.mp4`) is specified using the `<source>` tag.
4. Responsive Web Design
The `<picture>` tag is another media-related element that helps create responsive websites. It allows developers to display different images based on screen size or resolution. For example:
The `<picture>` tag is used to display different images based on screen size.
The `media` attribute specifies conditions for displaying each image.
If none of the conditions are met, the default image (`small-image.jpg`) is displayed.
Supported Browsers
Feature
Chrome
Firefox
Edge
Safari
Opera
<audio>
Yes
Yes
Yes
Yes
Yes
<video>
Yes
Yes
Yes
Yes
Yes
<source>
Yes
Yes
Yes
Yes
Yes
<track>
Yes
Yes
Yes
Yes
Yes
<embed>
Yes
Yes
Yes
Yes
Yes
Most modern browsers support HTML media tags. However, it is always good to check compatibility for older versions.
Frequently Asked Questions
What is the purpose of the <audio> and <video> tags in HTML?
These tags allow embedding multimedia elements like sound and video in web pages. They enhance the user experience by making content more interactive.
How can I add subtitles to a video in HTML?
We can use the <track> tag inside the <video> element and specify the subtitle file.
What happens if a browser does not support the <video> or <audio> tag?
If a browser does not support these tags, the fallback text inside the tag will be displayed to the user.
Conclusion
In this article, we learned the media attribute in HTML, which is used in the <link> and <style> tags to specify different styles for different devices or screen sizes. It helps in creating responsive designs by applying styles based on conditions like screen width, resolution, or device type. Understanding the media attribute improves web page adaptability and user experience.
Live masterclass
Microsoft SDE Roadmap: Use AI Tools to Succeed
by Pranav Malik
19 May, 2025
01:30 PM
Break into MAANG Data Analyst roles from Non-Tech Profession
by Abhishek Soni
20 May, 2025
01:30 PM
SDE LinkedIn & Naukri Hacks to Get More Recruiter Calls
by Shantanu Shubham
21 May, 2025
01:30 PM
Amazon Data Analyst: Advanced Excel & AI Interview Tips
by Megna Roy
22 May, 2025
01:30 PM
Microsoft SDE Roadmap: Use AI Tools to Succeed
by Pranav Malik
19 May, 2025
01:30 PM
Break into MAANG Data Analyst roles from Non-Tech Profession
518+ registered 
