HTML Area Tag Hreflang Attribute

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
[sourcecode language=”html”]
<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>
[/sourcecode]

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

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
[sourcecode language=”html”]

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>
[/sourcecode]

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

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
[sourcecode language=”html”]
<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>
[/sourcecode]

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

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
[sourcecode language=”html”]
<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>
[/sourcecode]

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

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
[sourcecode language=”html”]
<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>
[/sourcecode]
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

HTML Area Tag Shape Attribute

The HTML Area Tag Shape attribute defines the shape of the area, within an image, that can be clicked.

In other words we can say that by using the HTML Area Tag Shape Attribute we define the shape of clickable area within an image.

HTML Area tag Shape Attribute is always used with the HTML Area Coords Attribute to define the shape, size and even the placement of the area.


 Syntax of HTML Area Tag Shape Attribute

<area shape=”default|rect|circle|poly”>

HTML Area Tag Shape Attribute Values

HTML Area Shape Values Description
default Specifies that the entire region within an image is clickable
Rect Specifies a rectangular clickable region within the image
Circle Specifies a circular clickable region within the image
Poly Specifies a polygonal clickable region within the image

Example of HTML Area Tag Shape Attribute

HTML Area Tag Shape Attribute code Output
[sourcecode language=”html”]

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" type="image/gif" />
<area coords="62,30,82,40" shape="rect" href="triangle.jpg" target="_blank" type="image/gif" />
<area coords="115,35,10" shape="circle" href="star.jpg" target="_blank" type="image/gif" />
</map>
[/sourcecode]

Click on the shapes to watch them:

Shapes

Here in the above HTML Area Shape Attribute example we can see that we have defined the “Circle” and “Star” containing image areas as “Circle” format and the area having the triangle as “Rect” format.


HTML Area Tag Shape 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 Type Attribute

HTML Area Tag Type Attribute defines the MIME type of the linked resource or webpage.

HTML Area Tag Type Attribute is used only when the HTML href attribute is also used in the HTML area tag.


Syntax of using the HTML Area Tag Type Attribute

<area type="MIME_type">

The HTML Area Tag Type Attribute can have the following values:

HTML Area Type Attribute Value Description
MIME_type Defines the MIME type of the linked resource or webpage.

Please visit http://www.iana.org/assignments/media-types  to see complete list of standard MIME types.


Example of using HTML Area Tag Type Attribute

HTML Area type attribute code Output
[sourcecode language=”html”]
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" type="image/gif" />
<area coords="62,30,82,40" shape="rect" href="triangle.jpg"
target="_blank" type="image/gif" />
<area coords="115,35,10" shape="circle" href="star.jpg"
target="_blank" type="image/gif" />
</map>
[/sourcecode]
Click on the shapes to watch them:

Shapes

Here in the above HTML Area Type Attribute example, we are telling the browser that the linked resource or webpage is having image or gif type.


HTML Area Tag Type 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 Anchor Tag Shape Attribute

The HTML Anchor Tag Shape attribute <shape> defines the shape of the link, within an image or object, which can be clicked.

In other words we can say that by using the HTML Anchor Tag Shape Attribute we define the shape of clickable area within an image or object.

HTML Anchor Tag Shape Attribute is always used with the HTML Anchor Tag Coords attribute to define the shape, size and even the placement of the link in the area.


HTML Anchor Tag Shape Attribute Syntax

<a shape=”default|rect|circle|poly”>

HTML Anchor Tag Shape Attribute Values

HTML Anchor Tag Shape Attribute Values Description
Default Specifies that the entire region within an image is clickable
Rect Specifies a rectangular clickable region within the image
Circle Specifies a circular clickable region within the image
Poly Specifies a polygonal clickable region within the image

HTML Anchor Tag Shape Attribute Example

HTML Area Shape attribute Code Output
[sourcecode language=”html”]
<p>Click on the shapes to watch them:</p>
<img src=" HTMLAreaTagEx.gif" alt="Shapes"
usemap="#shapemap" width="145" height="126">
<map name="shapemap">
<a shape="circle" coords="25,30,12"  href="Circle.jpg"
target=_blank>
<a shape="rect" coords="62,30,82,40"  href="triangle.jpg"
target=_blank >
<a shape="circle" coords="115,35,10"  href="star.jpg"
target=_blank >
</map>
[/sourcecode]
Click on the shapes to watch them:

Shapes




Here in the above HTML Anchor Tag Shape Attribute example we can see that we have defined the “Circle” and “Star” containing image areas as “Circle” format and the area having the triangle as “Rect” format.


HTML Anchor Tag Shape Attribute Supporting Browsers

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

HTML Bdo Tag Dir Attribute

HTML Bdo Tag Dir Attribute

HTML Bdo Tag Dir AttributeHTML Bdo Tag Dir Attribute is used to give direction to the text within the HTML Bdo Tag.

HTML Bdo Tag (<bdo>) stands for bidirectional override.

The HTML Bdo Tag is used to overrule the existing direction of text in any HTML resource or webpage.


HTML Bdo Tag Dir Attribute Syntax

<bdo dir=”rtl|ltr”>
Some text here
</bdo>

HTML Bdo Tag Dir Attribute Example

HTML Bdo Tag Code Output
[sourcecode language=”html”]
<p> This text is left to right </p>
<p><bdo dir="rtl"> This text is right to left </bdo>
[/sourcecode]
This text is left to right This text is right to left

In the HTML BDo Tag example output, we can see that the text “This text is right to left” is actually rendered from right to left because we have wrapped the text in HTML Bdo Tag and have used the value of “dir” attribute as “rtl”.

Notice the use of “dir” attribute to orient the text from right to left.


HTML Bdo Tag Dir Attribute Values

HTML Bdo Tag Dir Attribute Value Meaning
rtl | ltr Rtl stands for right to left orientationLtr stands for left to right orientation

HTML Bdo Tag Dir 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 Blockquote Tag Cite Attribute

HTML Blockquote Tag Cite Attribute

HTML Blockquote Tag Cite AttributeThe HTML Blockquote Tag <blockquote> Cite Attribute is used to classify the URL of the resource from where we are quoting text or information in the HTML Blockquote Tag.

HTML Blockquote tag is a closed tag and needs closing HTML Blockquote Tag </blockquote>.

Note: Browsers usually tend to indent the elements and text within the Blockquote HTML Tag.


HTML Blockquote Tag Cite Attribute Syntax

<blockquote cite=”URL”>
Some text from other resource
</blockquote>

HTML Blockquote Tag Cite Attribute Example

HTML Blockquote Tag Cite Attribute Code Output
[sourcecode language=”html”]
<h1> Computer </h1>
<p>
Below is the quote from
Wikipedia Website on Computer
</p>
<blockquote cite="http://en.wikipedia.org/wiki/Computer">
A computer is a general purpose device
that can be programmed to carry out
a finite set of arithmetic or logical operations.
Since a sequence of operations can be
readily changed, the computer can solve
more than one kind of problem.
</blockquote>
[/sourcecode]
Computer

Below is the quote from Wikipedia Website on Computer

A computer is a general purpose device that can be programmed to carry out a finite set of arithmetic or logical operations. Since a sequence of operations can be readily changed, the computer can solve more than one kind of problem.

The above HTML Blockquote Tag Cite Attribute example renders the text (taken from Wikipedia Website) in an indented form as we have wrapped the content in HTML 5 Blockquote Tag.

Also, note the usage of the Blockquote HTML Tag’s Cite Attribute.


HTML Blockquote Tag Cite Attribute Values

HTML Blockquote Tag Cite Attribute Value Description
URL Defines the location of the resource being quoted.

HTML Blockquote Tag Cite 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