A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://www.geeksforgeeks.org/html/html-area-media-attribute/ below:

HTML | <area> media Attribute

HTML | <area> media Attribute

Last Updated : 20 Jul, 2022

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 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=
"https://media.geeksforgeeks.org/wp-content/uploads/20190227165729/area11.png" 
         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=
"https://media.geeksforgeeks.org/wp-content/uploads/20190227165802/area2.png" 
              alt="Triangle" 
              rel="alternate"
              media="screen and (min-color-index:256)">

        <area shape="circle" 
              coords="155, 56, 26" 
              href=
"https://media.geeksforgeeks.org/wp-content/uploads/20190227165934/area3.png" 
              alt="Circle"
              rel="alternate">

        <area shape="rect"
              coords="224, 30, 276, 82" 
              href=
"https://media.geeksforgeeks.org/wp-content/uploads/20190227170021/area4.png"
              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: 
 


RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4