Horje
What is HTML media Attribute

Definition and Usage

The media attribute specifies what media/device the linked document is optimized for.

This attribute is used to specify that the target URL is designed for special devices (like iPhone) , speech or print media.

This attribute can accept several values.


Applies to

The media attribute can be used on the following elements:

Elements Attribute
<a> media
<area> media
<link> media
<source> media
<style> media

Browser Support

The media attribute has the following browser support for each element.


How to add A link with a media attribute

A Example.
index.html
Example: HTML
<!DOCTYPE html>
<html>
<body>

<h1>The a media attribute</h1>

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

</body>
</html>

Output should be:

How to add A link with a media attribute

How to add An image map, with a clickable area

Area Example.
index.html
Example: HTML
<!DOCTYPE html>
<html>
<body>

<h1>The area media attribute</h1>

<p>Click on the sun to watch it closer:</p>

<img src="https://horje.com/avatar.png" 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>

Output should be:

How to add An image map, with a clickable area

How to add Two different style sheets for two different media types (screen and print)

Link Example.
index.html
Example: HTML
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="https://www.w3schools.com/tags/demo_screen.css">
  <link rel="stylesheet" type="text/css" href="https://www.w3schools.com/tags/demo_print.css" media="print">
</head>
<body>

<h1>Horje Example</h1>
<p><a href="tryhtml_link_media.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 should be:

How to add Two different style sheets for two different media types (screen and print)

How to Use of the media attribute

Source Example.
index.html
Example: HTML
<picture>
  <source media="(min-width: 650px)" srcset="https://horje.com/avatar.png">
  <source media="(min-width: 465px)" srcset="https://horje.com/avatar.png">
  <img src="https://horje.com/avatar.png" alt="Flowers" style="width:auto;">
</picture>

Output should be:

How to Use of the media attribute

How to add Specify the style to use for print

Style Example.
index.html
Example: HTML
<style>
h1 {color:#FF0000;}
p {color:#0000FF;}
body {background-color:#FFEFD6;}
</style>

Output should be:

How to add Specify the style to use for print




html media attribute

Related Articles
How to add HTML accept Attribute HTML Input HTML Attribute
How to add HTML accept-charset Attribute HTML Attribute
What is HTML accesskey Attribute HTML Attribute
What is HTML action Attribute HTML Attribute
What is HTML alt Attribute HTML Attribute
What is HTML async Attribute HTML Attribute
What is HTML autocomplete Attribute in HTML HTML Attribute
What is HTML autofocus Attribute HTML Attribute
What is HTML autoplay Attribute HTML Attribute
What is HTML charset Attribute HTML Attribute
What is HTML checked Attribute HTML Attribute
What is HTML cite Attribute HTML Attribute
What is HTML class Attribute HTML Attribute
What is HTML cols Attribute HTML Attribute
What is HTML colspan Attribute HTML Attribute
What is HTML content Attribute HTML Attribute
What is HTML contenteditable Attribute HTML Attribute
What is HTML controls Attribute HTML Attribute
What is HTML coords Attribute HTML Attribute
What is HTML data Attribute HTML Attribute
What is HTML data-* Attribute HTML Attribute
What is HTML datetime Attribute HTML Attribute
What is HTML controls Attribute HTML Attribute
What is HTML default Attribute HTML Attribute
What is HTML defer Attribute HTML Attribute
What is HTML dir Attribute HTML Attribute
What is HTML dirname Attribute HTML Attribute
What is HTML disabled Attribute HTML Attribute
What is HTML download Attribute HTML Attribute
What is HTML draggable Attribute HTML Attribute
What is HTML enctype Attribute HTML Attribute
What is HTML enterkeyhint Attribute HTML Attribute
What is HTML for Attribute HTML Attribute
What is HTML form Attribute HTML Attribute
What is HTML formaction Attribute HTML Attribute
What is HTML headers Attribute HTML Attribute
What is HTML height Attribute HTML Attribute
What is HTML hidden Attribute HTML Attribute
What is HTML high Attribute HTML Attribute
What is HTML href Attribute HTML Attribute
What is HTML hreflang Attribute HTML Attribute
What is HTML http-equiv Attribute HTML Attribute
What is HTML id Attribute HTML Attribute
What is HTML inert Attribute HTML Attribute
What is HTML inputmode Attribute HTML Attribute
What is HTML ismap Attribute HTML Attribute
What is HTML kind Attribute HTML Attribute
What is HTML label Attribute HTML Attribute
What is HTML lang Attribute HTML Attribute
What is HTML list Attribute HTML Attribute
What is HTML loop Attribute HTML Attribute
What is HTML low Attribute HTML Attribute
What is HTML max Attribute HTML Attribute
What is HTML maxlength Attribute HTML Attribute
What is HTML media Attribute HTML Attribute
What is HTML method Attribute HTML Attribute
What is HTML min Attribute HTML Attribute
What is HTML multiple Attribute HTML Attribute
What is HTML muted Attribute HTML Attribute
What is HTML name Attribute HTML Attribute
What is HTML novalidate Attribute HTML Attribute
What is HTML onabort Attribute HTML Attribute
What is HTML onafterprint Attribute HTML Attribute
What is HTML onbeforeprint Attribute HTML Attribute
What is HTML onbeforeunload Attribute HTML Attribute
What is HTML onblur Attribute HTML Attribute
What is HTML oncanplay Attribute HTML Attribute
What is HTML oncanplaythrough Attribute HTML Attribute
What is HTML onchange Attribute HTML Attribute
What is HTML onclick Attribute HTML Attribute

Single Articles
How to add A link with a media attributeHTML Attribute
How to add An image map, with a clickable areaHTML Attribute
How to add Two different style sheets for two different media types (screen and print)HTML Attribute
How to Use of the media attributeHTML Attribute
How to add Specify the style to use for printHTML Attribute

Read Full:
HTML Attribute
Type:
Develop
Category:
Web Tutorial
Sub Category:
HTML Attribute
Uploaded:
5 days ago
Uploaded by:
Admin
Views:
29


Reffered: https://www.w3schools.com/tags/att_media.asp

Share on: