Skip to content
Related Articles

Related Articles

Improve Article

HTML | <area> media Attribute

  • Last Updated : 04 Jun, 2021

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: 
 

ValueDescription
andAND operator
notNOT operator
,OR operator

Devices: 
 

ValueDescription
allSuitable for all devices
auralSpeech synthesizers
brailleBraille feedback devices
handheldHandheld devices (small screen, limited bandwidth)
projectionProjectors
printPrint preview mode/printed pages
screenComputer screens
ttyTeletypes and similar media using a fixed-pitch character grid
tvLow resolution or limited scroll ability type devices like Television.

Values: 
 

ValueDescription
widthTargeted display area’s width.
heightTargeted display area’s height
device-widthTarget display or paper’s width.
device-heightTarget display or paper’s height.
orientationTarget display or paper’s orientation.
aspect-ratioWidth/height ratio of the targeted display area.
device-aspect-ratioDevice-width/device-height ratio of the target display/paper.
colorBits per color of target display.
color-indexNumber of colors the target display can handle.
monochromeBits per pixel in a monochrome frame buffer.
resolutionPixel density (dpi or dpcm) of the target display/paper.
scanScanning method of a tv display.
gridIf 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
  • Internet Explorer
  • Firefox
  • Apple Safari
  • Opera

 

Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :