HTML <area> mediaAttribute
HTML <area> TagExamples
Image map with clickable areas:
<img src="planets.gif.html" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun"
href="sun.htm.html" media="screen and (min-color-index:256)">
</map>
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun"
href="sun.htm.html" media="screen and (min-color-index:256)">
</map>
Try it Yourself »
Browser Support
All major browsers support the media attribute
Definition and Usage
The media attribute specifies what device the target URL will be displayed on.
This attribute is used to display the specified URL on a specified device (such as iPhone), audio, or print media.
This attribute can accept multiple values.
The media attribute is only required if the href attribute is used.
Differences between HTML 4.01 and HTML5
The media attribute is new in HTML5.
Syntax
<area media="value">
Possible Operators
| Value | Description |
|---|---|
| and | Specifies the AND operator |
| not | Specifies the NOT operator |
| , | Specifies the OR operator |
Devices
| Value | Description |
|---|---|
| all | Default. Suitable for all devices. |
| aural | Speech synthesizers |
| braille | Braille feedback devices |
| handheld | Handheld devices (small screen, limited bandwidth) |
| projection | Projection |
| Print preview mode / printed pages | |
| screen | Computer screen |
| tty | Teletypewriters and similar media using fixed-pitch character grids |
| tv | Television-type devices (low resolution, limited scrolling ability) |
Value
| Value | Description |
|---|---|
| width | The width of the specified display area. Usually uses the "min-" and "max-" prefixes. Example: media="screen and (min-width:500px)" |
| height | The height of the specified display area. Usually uses the "min-" and "max-" prefixes. Example: media="screen and (max-height:700px)" |
| device-width | Specifies the width of the target display/printed paper Usually uses the "min-" and "max-" prefixes. Example: media="screen and (device-width:500px)" |
| device-height | Specifies the height of the target display/printed paper Usually uses the "min-" and "max-" prefixes. 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 | The width/height ratio of the specified target display area. Usually uses the "min-" and "max-" prefixes. Example: media="screen and (aspect-ratio:16/9)" |
| device-aspect-ratio | The device-width/device-height ratio of the specified target display area. Usually uses the "min-" and "max-" prefixes. Example: media="screen and (aspect-ratio:16/9)" |
| color | Specifies the number of bits per color for the target display. Usually uses the "min-" and "max-" prefixes. Example: media="screen and (color:3)" |
| color-index | Specifies the number of colors the target display can handle. Usually uses the "min-" and "max-" prefixes. Example: media="screen and (min-color-index:256)" |
| monochrome | Specifies the number of bits per pixel in a monochrome frame buffer. Usually uses the "min-" and "max-" prefixes. Example: media="screen and (monochrome:2)" |
| resolution | Specifies the pixel density of the target display/paper (DPI or DPCM). Usually uses the "min-" and "max-" prefixes. Example: media="print and (resolution:300dpi)" |
| scan | Specifies the scanning method of a television display. Possible values are "progressive" and "interlace". Example: media="tv and (scan:interlace)" |
| grid | Specifies whether the output device is a grid or bitmap The grid value is "1", others are "0" Example: media="handheld and (grid:1)" |
Other Extensions