Dofactory.com
Dofactory.com
Earn income with your HTML skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.

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>

Last updated on Sep 30, 2023

Earn income with your HTML skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.

Guides