HTML media Attribute

HTML media Attribute: This attribute defines what media the linked document is optimized for. The media attribute specifies that the target URL is designed for special devices.

HTML media Attribute

This attribute can be applied for <a>, <area>, <link>, <source> and <style>.

Browser Support

Chrome- supports all the elements except the source element.
Firefox- supports all the elements except the source element.
Internet Explorer- supports all the elements the except source element.
Safari-supports all the elements except the source element.
Opera- supports all the elements except the source element.

Example: for using <a> element

<!DOCTYPE html>
<html>
<body>
<p>
<a href="att_a_media.asp?output=print" media="print and (resolution:300dpi)">Open media attribute page for print</a>
</p>
</body>
</html>

Example: for using <area> element

<!DOCTYPE html>
<html>
<body>
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm" media="screen and (min-color-index:256)">
</map>
</body>
</html>

Example: for using <link> element

<!DOCTYPE html>
<html>
<head>
  <link href="tag_link.asp" rel="parent" rev="subsection" hreflang="en">
</head>
<body>
<p>Freshersnow</p>
<p>The hreflang attribute does not render as anything special in any of the major browsers. It can be used by search engines or in scripts.</p>
</body>
</html>

Example: for using <style> element

<!DOCTYPE html>
<html>
<head>
<style>
h1 {color:#FF0000;}
p {color:#0000FF;}
body {background-color:#FFEFD6;}
</style>
<style media="print">
h1 {color:#000000;}
p {color:#000000;}
body {background-color:#FFFFFF;}
</style>
</head>
<body>
<h1>Freshersnow Example</h1>
<p><a href="freshersnow.htm" target="_blank">Click here</a> to open this page in a new window (without the tryit part).</p>
<p>If you print this page, or open it in print preview, you will see that it is styled with the media="print" stylesheet. The "print" stylesheet contains black text on white background.</p>

</body>
</html>

Output:

HTML media attribute