HTML <a> media Attribute

The media attribute on an <a> tag specifies the media or device type 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 <a> tag.
It states 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>.

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

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