HTML Area Tag Media Attribute specifies for what device(s) the media, linked to the current area via HTML area tag, is optimized for.
In other words we can say that by using the HTML Area Tag Media Attribute we specify the device(s) for which the linked resource or webpage is optimized.
The HTML Area Tag Media Attribute is used to specify that the linked resource or webpage is optimized for which special devices like printer, speech or even iPhone for that matter.
The HTML Area Tag Media attribute is used only if the href attribute is present in the HTML Area Tag.
Syntax for HTML Area Tag Media Attribute
<area media= “value”>
Operators which can be used with HTML Area Tag Media Attribute
| Operator Value | Description |
| and | Defines and Condition |
| not | Defines NOT Condition |
| , | Defines OR Condition |
Values accepted by HTML Area Tag Media Attribute
| Values | Description |
| width | Defines the width of the area targeted for display. Usage of “min” and “max” prefixes is allowed. e.g. media=”screen and (max-width:800px)” |
| height | Defines the height of the area targeted for display. Usage of “min” and “max” prefixes is allowed. e.g. media=”screen and (max-height:800px)” |
| device-width | Defines the width of the area targeted for display or paper (if printing). Usage of “min” and “max” prefixes is allowed. e.g. media=”screen and (device-width:800px)” |
| device-height | Defines the width of the area targeted for display or paper (if printing). Usage of “min” and “max” prefixes is allowed. e.g. media=”screen and (device-height:800px)” |
| orientation | Defines the orientation of the area targeted for display or paper (if printing). Possible values can be portrait and landscape. e.g. media=”screen and (orientation: portrait)” |
| aspect-ratio | Defines the width/height ratio of the area targeted for display. Usage of “min” and “max” prefixes is allowed. e.g. media=”screen and (aspect-ratio: 16:9)” |
| device-aspect-ratio | Defines the device’s width/device’s height ratio of the area targeted for display or paper (if printing). Usage of “min” and “max” prefixes is allowed. e.g. media=”screen and (device-aspect-ratio: 16:9)” |
| color | Defines the bits per color of the targeted display area. Usage of “min” and “max” prefixes is allowed. e.g. media=”screen and (color:3)” |
| color-index | Defines the number of colors that the targeted display will be able to handle. Usage of “min” and “max” prefixes is allowed. e.g. media=”screen and (min-color-index:256)” |
| monochrome | Defines the bits/pixel in case of a monochrome frame buffer. Usage of “min” and “max” prefixes is allowed. e.g. media=”screen and (monochrome:2)” |
| resolution | Defines the pixel density (dpcm or dpi) of the targeted display or paper (if printing). Usage of “min” and “max” prefixes is allowed. e.g. media=”print and (resolution:600dpi)” |
| scan | Defined the scanning method for a TV display. Possible values can be: “progressive” and “interlaced” e.g. media=”tv and (scan:progressive)” |
| grid | Defined whether the output device is a grid or bitmap. Possible values are: “1” for grid and “0” in other cases. e.g. media=”handheld and (grid:1)” |
Devices which can be used with HTML Area Media Attribute
| Device Name | Description |
| All | Suitable for all the devices |
| Aural | Suitable for speech synthesizers |
| Braille | Suitable for devices with Braille feedback |
| Handheld | Suitable for devices which are handheld e.g. cell phones |
| Projection | Suitable for projectors |
| Suitable for print preview mode or print pages | |
| Screen | Various computer displays |
| Tty | Teletypes and similar devices |
| tv | Television type devices |
Example of using HTML Area Tag Media Attribute
| HTML Area Media Attribute Code | Output |
Click on the shapes to watch them: <img alt="Shapes" src=" HTMLAreaTagEx.gif" usemap="#shapemap" width="145" height="126" /> <map name="shapemap"> <area coords="25,30,12" shape="circle" href="Circle.jpg" target="_blank" media="screen" /> <area coords="72,35,10" shape="circle" href="triangle.jpg" target="_blank" media="screen" /> <area coords="115,35,10" shape="circle" href="star.jpg" target="_blank" media="screen" /> </map> |
Click on the shapes to watch them:
|
Here we can see that in the HTML area media attribute example we have supplied values to the HTML area media attribute the values of “screen” to inform the browser that the the images that will appear once the area is clicked are optimized for computer screen type devices.
HTML Area Tag Media Attribute Supporting Browsers
| S. No. | Browser | Supported(Yes/No) |
| 1 | Internet Explorer | Yes |
| 2 | Firefox | Yes |
| 3 | Google Chrome | Yes |
| 4 | Opera | Yes |
| 5 | Safari | Yes |