The media attributes specifies the optimal media or device for a link or resource.
This attribute may include multiple media or device queries combined with logical conditions (and, or, not).
Elements that accept this attribute include <a>, <area>, <link>, <style>, and <source>.
A media attribute on an <a> element.
The attribute specifies that the Wikipedia page is optimized for 1440-pixel screens.
Go to <a href="https://en.wikipedia.org/wiki/Main_Page" target="_blank"
media="screen and (device-width: 1440px)">Wikipedia</a>.
For additional details see our HTML anchor media Reference.
The media attribute specifies the media or device type the linked page or resource is optimized for.
This attribute can specify pages or resources that are designed for mobile devices, print media, and others.
media accepts multiple media or device type values combined with logical conditions (and, or, not).
<tagname media="expression" />
| Operator | Description |
|---|---|
| and | Specifies an AND operator |
| , (comma) | Specifies an OR operator |
| not | Specifies a NOT operator |
| Device | Description |
|---|---|
| all | Suitable for all devices. This is the default. |
| aural | Speech synthesizers |
| braille | Braille feedback devices -- for the visually impaired |
| handheld | Handheld devices with small screens and limited bandwidth |
| projection | Projector devices |
| Printed pages or in print-preview mode | |
| screen | Computer screens |
| tty | Teletypes and similar devices using a fixed-pitch character grid |
| tv | Television type devices with low resolution and limited scrolling |
| Name | Value | Description |
|---|---|---|
| width | pixels |
Width of targeted display. Name can be prefixed with min- or max-. |
| height | pixels |
Height of targeted display. Name can be prefixed with min- or max-. |
| device-width | pixels |
Width of the device or paper. Name can be prefixed with min- or max-. |
| device-height | pixels |
Height of the device or paper. Name can be prefixed with min- or max-. |
| orientation | landscape, portrait |
Orientation of the device or paper. |
| aspect-ratio | width/height |
Ratio of width/height of the targeted display. Name can be prefixed with min- or max-. |
| device-aspect-ratio | width/height |
Ratio of width/height of the device or paper. Name can be prefixed with min- or max-. |
| color | integer |
Bits per color of targeted display. Name can be prefixed with min- or max-. |
| color-index | integer |
Number of colors the targeted display supports. Name can be prefixed with min- or max-. |
| monochrome | integer |
Bits per pixel in a monochrome frame buffer. Name can be prefixed with min- or max-. |
| resolution | dpi or dpcm |
Pixel density of the targeted display or paper. Name can be prefixed with min- or max-. |
| scan | progressive interlace |
Scanning method of a tv display. |
| grid | 1 = grid 0 = otherwise |
Whether output device is a grid or bitmap type. |
These are some examples of valid media value expressions:
media="all and (orientation: portrait)"media="screen and (aspect-ratio: 16/10)"media="screen , (device-height: 540px)"media="screen , (aspect-ratio: 5/4)"media="screen and not (min-color-index: 512)"media="screen and (min-width: 1200px)"media="screen and (max-height: 720px)"media="handheld and (grid: 1)"media="tv and (scan: interlace)"media="print and (resolution: 400dpi)"media="screen and (max-monochrome: 2)"media="screen and not (device-width: 360px)"media="screen , (color: 8)"These following elements accept the media attribute.
| Elements | Description | |
|---|---|---|
| <a> | Specifies an anchor link -- see example above | |
| <area> | Specifies clickable areas inside an image map. | |
| <link> | Embeds an external source in the page. | |
| <style> | Adds CSS rule in the current page. | |
| <source> | Specifies a media source. |
An <area> tag with a media attribute.
The attribute specifies the optimal screen dimensions for the link to Google.
<img src="/img/html/computer-map.png" alt="Computer" usemap="#computermap">
<map name="computermap">
<area media="screen and (device-width: 1440px)"
shape="rect"
coords="253,142,16,2"
alt="monitor"
target="_blank"
href="http://google.com/search?q=monitor">
</map>
For additional details see our HTML area media Reference.
A <link> tag with a media attribute.
The attribute specifies that the print.css file is used when printing.
<head>
<link rel="stylesheet" type="text/css" href="/tutorial/style.css">
<link rel="stylesheet" type="text/css" href="/tutorial/print.css" media="print">
</head>
For additional details see our HTML link media Reference.
A <style> tag with a media attribute.
The attribute specifies that the styles (color settings) are only used when printing the document.
<style media="print">
h3.header { color: #0a8181; }
div.text { color: #ef523d; }
</style>
<h3 class="header">Successful purchase!</h3>
<div class="text">You will receive an email shortly.</div>
In print or print-preview mode the styles will be applied.
Here is a screenshot in print-preview mode. Notice the color changes.
For additional details see our HTML style media Reference.
Several <source> tags with a media attributes.
The media queries determine the optimal image to display or print.
<picture>
<source media="(max-width: 414px)" srcset="/img/html/vangogh-sm.jpg">
<source media="(max-width: 768px)" srcset="/img/html/vangogh.jpg">
<source media="print" srcset="/img/html/vangogh-bw.jpg">
<img src="/img/html/vangogh-lg.jpg" alt="Vincent Van Gogh">
</picture>
For additional details see our HTML source media Reference.
Here is when media support started for each browser:
 Chrome
|
1.0 | Sep 2008 |
 Firefox
|
1.0 | Sep 2002 |
 IE/Edge
|
1.0 | Aug 1995 |
 Opera
|
1.0 | Jan 2006 |
 Safari
|
1.0 | Jan 2003 |
