HTML | <area> media Attribute
The HTML area media attribute is used to specify the media or device the target URL is optimized for.
this attribute specify the style is for specific devices like print media or speech. This attribute can accept several values. Only used if the href attribute is present. This attribute is purely advisory.
Syntax:
<area media="value">
Possible Operators:
| Value | Description |
|---|---|
| and | AND operator |
| not | NOT operator |
| , | OR operator |
Devices:
| Value | Description |
|---|---|
| all | Suitable for all devices |
| aural | Speech synthesizers |
| braille | Braille feedback devices |
| handheld | Handheld devices (small screen, limited bandwidth) |
| projection | Projectors |
| Print preview mode/printed pages | |
| screen | Computer screens |
| tty | Teletypes and similar media using a fixed-pitch character grid |
| tv | Low resolution or limited scroll ability type devices like Television. |
Values:
| Value | Description |
|---|---|
| width | Targeted display area’s width. |
| height | Targeted display area’s height |
| device-width | Target display or paper’s width. |
| device-height | Target display or paper’s height. |
| orientation | Target display or paper’s orientation. |
| aspect-ratio | Width/height ratio of the targeted display area. |
| device-aspect-ratio | Device-width/device-height ratio of the target display/paper. |
| color | Bits per color of target display. |
| color-index | Number of colors the target display can handle. |
| monochrome | Bits per pixel in a monochrome frame buffer. |
| resolution | Pixel density (dpi or dpcm) of the target display/paper. |
| scan | Scanning method of a tv display. |
| grid | If the output device is grid or bitmap. |
Note: Prefixes like “min-“ and “max-“ can be used.
Example:
html
<!DOCTYPE html><html><head> <title> HTML area rel Attribute </title></head><body style="text-align:center;"> <img src= alt="" width="300" height="119" class="aligncenter" usemap="#shapemap" /> <map name="shapemap"> <!-- area tag contained image. --> <area shape="poly" coords="59, 31, 28, 83, 91, 83" href= alt="Triangle" rel="alternate" media="screen and (min-color-index:256)"> <area shape="circle" coords="155, 56, 26" href= alt="Circle" rel="alternate"> <area shape="rect" coords="224, 30, 276, 82" href= alt="Square" rel="alternate"> </map></body></html> |
Output:
Before click on specific clickable area
After click on specific clickable area
Supported Browsers: The browsers supported by HTML area media attribute are listed below:
- Google Chrome
- Edge 12 and above
- Internet Explorer
- Firefox
- Apple Safari
- Opera
Please Login to comment...