HTML media Attribute

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>.

Example

#

A media attribute on an <a> element.
The attribute specifies that the Wikipedia page is optimized for 1440-pixel screens.

Go to Wikipedia.
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.


Using media

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).


Syntax

<tagname media="expression" />

Operators

#

Operator Description
and Specifies an AND operator
, (comma) Specifies an OR operator
not Specifies a NOT operator

Devices

#

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
print 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

Values

#

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.

Expression Examples

#

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)"

Elements that accept media

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.

<area> with media

An <area> tag with a media attribute.
The attribute specifies the optimal screen dimensions for the link to Google.

Computer monitor
<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.


<link> with media

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.


<style> with media

A <style> tag with a media attribute.
The attribute specifies that the styles (color settings) are only used when printing the document.

Successful purchase!

You will receive an email shortly.
<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.


<source> with media

Several <source> tags with a media attributes.
The media queries determine the optimal image to display or print.

Vincent Van Gogh
<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.


Browser support

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

You may also like



Guides