HTML <area> media attribute

HTML <a> Tag

Definition and Usage

media The attribute specifies which media or device the linked document is optimized for.

This attribute is used to specify whether the target URL is designed for special devices (such as iPhone), voice, or print media.

This attribute can accept multiple values.

only when it exists href attribute when used.

Note:This attribute is purely advisory.

Example

Specify the target URL optimization for media/devices using the media attribute:

<map name="planetmap">
  <area shape="rect" coords="0,0,114,576" alt="Sun"
  href="sun.html" media="screen and (min-color-index:256)"
</map>

Try it yourself

Syntax

<area media="value>

Possible operators

Operators Description
and Specifies the AND operator.
not Specifies the NOT operator.
, Specifies the OR operator.

Device

Value Description
all Default. Suitable for all devices.
aural Voice synthesizer.
braille Braille feedback device.
handheld Handheld devices (small screen, limited bandwidth).
projection Projector.
print Print preview mode/print page.
screen Computer screen.
tty Teletype and similar media using a monospaced character grid.
tv Television type devices (low resolution, limited pagination capability).

Value

Value Description
width

Specifies the width of the target display area.

Prefixes such as "min-" and "max-" can be used.

Example: media="screen and (min-width:500px)"
height

Specifies the height of the target display area.

Prefixes such as "min-" and "max-" can be used.

Example: media="screen and (max-height:700px)"
device-width

Specifies the width of the target display/paper.

Prefixes such as "min-" and "max-" can be used.

Example: media="screen and (device-width:500px)"
device-height

Specifies the height of the target display/paper.

Prefixes such as "min-" and "max-" can be used.

Example: media="screen and (device-height:500px)"
orientation

Specifies the orientation of the target display/paper.

Possible values: "portrait" or "landscape"

Example: media="all and (orientation: landscape)"
aspect-ratio

Specifies the width/height ratio of the target display area.

Prefixes such as "min-" and "max-" can be used.

Example: media="screen and (aspect-ratio:16/9)"
device-aspect-ratio

Specifies the device-width/device-height ratio of the target display/paper.

Prefixes such as "min-" and "max-" can be used.

Example: media="screen and (aspect-ratio:16/9)"
color

Specifies the number of bits for each color of the target display.

Prefixes such as "min-" and "max-" can be used.

Example: media="screen and (color:3)"
color-index

Specifies the number of colors that the target display can handle.

Prefixes such as "min-" and "max-" can be used.

Example: media="screen and (min-color-index:256)"
monochrome

Specifies the number of bits per pixel in monochrome frame buffer.

Prefixes such as "min-" and "max-" can be used.

Example: media="screen and (monochrome:2)"
resolution

Specifies the pixel density (dpi or dpcm) of the target display/paper.

Prefixes such as "min-" and "max-" can be used.

Example: media="print and (resolution:300dpi)"
scan

Specifies the scanning method of the TV display.

Possible values are: "progressive" and "interlace".

Example: media="tv and (scan:interlace)"
grid

Specifies whether the output device is a grid or bitmap.

Possible values: "1" represents a grid, "0" is other.

Example: media="handheld and (grid:1)"

Browser Support

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support

HTML <a> Tag