Tech Honey

The #1 Website for Oracle PL/SQL, OA Framework and HTML

HTML Area Tag Hreflang Attribute

by

HTML Area Tag Hreflang Attribute defines the language of the target resource or webpage to which the area is linked via HTML Area Tag Href Attribute.

The HTML Area Tag Hreflang Attribute is used only if the Href Attribute is also used because if there is no targeted resource or webpage then how can there be a language of targeted resource or webpage.

Note: For HTML 5 the Hreflang is a new attribute for Area Tag.

Syntax of HTML Area Tag Hreflang Attribute

<area hreflang="language_code">

HTML Area Tag Hreflang Attribute Values

HTML Area Hreflang Attribute Value Output
language_code This is a2 letter language code that defines the language of the resource or webpage linked or targeted in the href attribute.

Language codes can be found in our ISO Language Code Reference

Example of HTML Area Tag Hreflang Attribute

HTML Area Tag Hreflang Attribute Code Output 
<p>Click on the shapes to watch them:</p>
<img src=" HTMLAreaTagEx.gif" alt="Shapes" 
usemap="#shapemap" width="145" height="126">
<map name="shapemap">
<area shape="circle" coords="25,30,12" href="Circle.jpg" 
hreflang =”en” target=_blank>
<area shape="circle" coords="72,35,10" href="triangle.jpg" 
hreflang =”en” target=_blank >
<area shape="circle" coords="115,35,10" href="star.jpg" 
hreflang =”en” target=_blank >
</map>

Click on the shapes to watch them:

Shapes

Here in the above example for HTML area Hreflang attribute we have provided the language code values to the hreflang attribute. These language code values define the language of the linked resource.

HTML Area Tag Hreflang 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

HTML Area Tag Media Attribute

by

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

HTML Area Tag NoHref Attribute

by

HTML Area Tag NoHref AttributeHTML Area Nohref attribute defines that the area is not linked to any resource or webpage and hence cannot be clicked.

In other words we can say, that once we mention the area as nohref then the area becomes unclick-able and hence cannot be linked to any resource or webpage.

HTML area nohref attribute’s functionality to make an area non clickable can be very simply achieved by not including any href attribute in the HTML area tag.

Note: HTML Area Nohref attribute is not supported in HTML 5.

Syntax of HTML Area Nohref Attibute

<area nohref>

Example of HTML Area Tag Nohref Attribute

HTML Area Tag Nohref Code Output 
<p>Click on the shapes to watch them:</p>
<img src=" HTMLAreaTagEx.gif" alt="Shapes" 
usemap="#shapemap" width="145" height="126">
<map name="shapemap">
<area shape="circle" coords="25,30,12"  nohref
target=_blank>
<area shape="circle" coords="72,35,10"  nohref
target=_blank >
<area shape="circle" coords="115,35,10"  href="star.jpg"
target=_blank >
</map>

Click on the shapes to watch them:

Shapes

Here in the above HTML Area Nohref Attribute example we can see that we have made the circle and triangle area as nohref and hence in the output the areas cannot be clicked as opposed to the Star shape area which can still be clicked as we have not made it nohref.

HTML Area Tag NoHref Attribute Supporting Browsers

S. No. Browser Supported(Yes/No)
1 Internet Explorer No
2 Firefox No
3 Google Chrome No
4 Opera No
5 Safari No

HTML Area Tag Rel Attribute

by

The HTML Area Tag Rel Attribute defines the relationship between the linking resource or webpage and the linked resource or webpage.

HTML Area Tag Rel Attribute is used only if the HTML Href Attribute is also used in the HTML area(<area>) tag.

Note: HTML Area Tag Rel Attribute is new in HTML 5.

Syntax of HTML Area Tag Rel Attribute

<area rel="value">

Values that HTML Area Tag Rel Attribute can have

HTML Area rel attribute Values Description
alternate This will link to the alternative version of resource or webpage e.g. print friendly page
author This links to the Author of the resource or webpage
bookmark Defines the permanent URL for bookmarking the resource or webpage
help This links to the help resource or webpage.
license Links to the copyright information of the resource or webpage
next Links to the next resource or document in the flow.
nofollow Links to an unauthorized resource or webpage

(Google spiders or bots use this information for not following the linked resource or webpage)
noreferrer Defines that the browser should not send an HTTP referrer header if the user chooses to click and follow the hyperlink.
prefetch Defines that the targeted resource or webpage should be cached
prev Links to the previous resource or document in the flow.
search This links to the search tool for the resource or webpage
tag Defines a tag or keyword(s) for the current resource or webpage

 Example of using the HTML Area Tag Rel Attribute

HTML Area Tag Rel Attribute Code Output 
<p>Click on the shapes to watch them:</p>
<img src=" HTMLAreaTagEx.gif" alt="Shapes" 
usemap="#shapemap" width="145" height="126">
<map name="shapemap">
<area shape="circle" coords="25,30,12" href="Circle.jpg"
type="image/gif" target=_blank>
<area shape="rect" coords="62,30,82,40" href="triangle.jpg"
type="image/gif" target=_blank >
<area shape="circle" coords="115,35,10" href="star.jpg"
type="image/gif" target=_blank >
</map>

Click on the shapes to watch them:

Shapes

Here in the above HTML Area rel attribute example we are telling the browsers that once an area is clicked the browser must open the corresponding images and the images are alternate of the images that have been clicked.

HTML Area Tag Rel 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

HTML Area Tag Target Attribute

by

In HTML opening link in a new window is very easy and frequently achieved functionality.

In order to open link in a new window we use the target attribute of the HTML area(<area>) tag.

Note: HTML Area Tag Target Attribute is used only if the HTML Area Href Attribute is used.

Syntax of using HTML Area Tag Target Attribute

<area target =”_blank|_self|_parent|_top|frame_name”>

Here in the above syntax the values for the HTML Area target Attribute mean the following:

Value Description
_blank Opens the linked resource/webpage  in a new window or tab
_self Opens the linked resource/webpage  in the same frame as it was clicked (this is default)
_parent Opens the linked resource/webpage  in the parent frame
_top Opens the linked resource/webpage  in the full body of the window
framename Opens the linked resource/webpage  in a named frame

Also note that by default the _self value will be set for the target attribute i.e. if we do not mention the target attribute in the HTML area tag then the linked resource/webpage will open in the same frame in which the link was clicked.

Examples of Using the HTML Area Tag Target Attribute

HTML Open link in a new window:

HTML Area Tag Target Attribute Code Output 
<p>Click on the shapes to watch them:</p>
<img src=" HTMLAreaTagEx.gif" alt="Shapes"
usemap="#shapemap" width="145" height="126">
<map name="shapemap">
<area shape="circle" coords="25,30,12" href="Circle.jpg"
type="image/gif" target=_blank>
<area shape="rect" coords="62,30,82,40" href="triangle.jpg"
type="image/gif" target=_blank >
<area shape="circle" coords="115,35,10" href="star.jpg"
type="image/gif" target=_blank >
</map>
Click on the shapes to watch them:Shapes

Here in the above HTML area target attribute example we have mentioned that once the certain portion of the image is clicked the respective image should open in a new browser window or tab by giving target attribute a value of _blank.

HTML Area Target 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