HTML <area> media Attribute

The media attribute on an <area> tag specifies the media or device the link is optimized for. This attribute accepts multiple media or device type values combined with logical conditions (and, or, not).

Example

#

A media attribute on an <area> tag.
The attribute value states that Google is optimized for 1440-pixel screens.

Computer monitor

Click the monitor area to invoke the link.

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

Using media

The media attribute specifies the media or device type the linked page or resource is optimized for.

This attribute specifies that a page or resource is designed for certain mobile devices, print media, and others.

media accepts multiple media or device type values combined with logical conditions (and, or, not).

Note: The media attribute requires that href has a value.


Syntax

<area href="URL" 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

#

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

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

 Back to <area>
Guides