HTML Area Tag Media Attribute

HTML Area Tag Media AttributeHTML 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
Print 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:

Shapes

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

Tagged , , , , . Bookmark the permalink.