Last Updated : 12 Jul, 2025
The HTML media attribute is employed to specify the media or device the coupled document is optimized for. This attribute specifies that the target URL is designed for special devices like iPhones, speech, or print media.
syntax<element media="value">Element Description
<a> Represents a hyperlink, linking to another resource. <area> Defines a clickable area inside an image map. <link> Specifies the relationship between a document and an external resource. <source> Specifies multiple media resources for media elements like <audio> and <video>. <style> Contains CSS rules to style HTML elements.
Example1: In this example we demonstrates the use of the media attribute, which is incorrect for anchor elements. Instead, it uses the target attribute to specify whether links open in the same or a different tab.
index.html
<!DOCTYPE html>
<html>
<head>
<title>HTML media Attribute</title>
</head>
<body>
<h2>HTML media Attribute</h2>
<a href="https://www.geeksforgeeks.org/" target="_self">
Click to open in the same tab
</a>
<br />
<a href="https://www.geeksforgeeks.org/community/" target="_blank">
Click to open in a different tab
</a>
</body>
</html>
Note: The HTML iframe syntax is correct, the
https://www.geeksforgeeks.org/website does not allow itself to be embedded in iframes on other domains. This is due to protective headers (X-Frame-Options,CSP) that prevent clickjacking and preserve content security. As a result, the iframe appears broken, even though the code itself is valid. You can use some other website link to check the output.
Example2: In this example the media attribute specifies conditions (such as screen width) under which different image sources defined in the <source> element are applied for responsive design.
html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"
content="width=device-width,
initial-scale=1.0" />
</head>
<body>
<picture>
<source media="(min-width: 900px)"
srcset=
"https://media.geeksforgeeks.org/wp-content/uploads/20190328185307/gfg28.png" />
<source media="(min-width: 600px)"
srcset=
"https://media.geeksforgeeks.org/wp-content/uploads/20190809013546/gfg_350X350.png" />
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190521140445/gfglogo2.png"
style="width: auto" />
</picture>
</body>
</html>
Output: Change the browser size.
Supported Browsers: The browsers supported by HTML media attribute are listed below:
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4