HTML hreflang Attribute


The hreflang attribute of the <area> element is used to set the language of the url in the area. Following is the syntax −

<area hreflang="language_code">

Above, code is the ISO language code set for the language, for example, en for English, fr for French, js for Japanese, etc.

 Let us now see an example to implement the hreflang attribute for the <area> element −

Example

 Live Demo

<!DOCTYPE html>
<html>
<body>
<h2>Learning</h2>
<p>Learn these technologies with ease....</p>
<img src = /images/usemap.gif alt = "usemap" border = "0" usemap = "#tutorials"/>
<map name = "tutorials">
   <area shape = "poly" coords = "74,0,113,29,98,72,52,72,38,27"
      href = "/perl/index.htm" alt = "Perl Tutorial" download="perl" hreflang="en"/>
   <area shape = "rect" coords = "22,83,126,125" alt = "HTML Tutorial"
      href = "/html/index.htm" target = "_blank" download="html" hreflang="en"/>
   <area shape = "circle" coords = "73,168,32" alt = "PHP Tutorial"
      href = "/php/index.htm" target = "_blank" download="php" hreflang="en"/>
</map>
</body>
</html>

Output

In the above example, we have set the map on the following image −

<img src = /images/usemap.gif alt = "usemap" border = "0" usemap = "#tutorials"/>

Now, we have set the map and area within it for shape −

<map name = "tutorials">
   <area shape = "poly" coords = "74,0,113,29,98,72,52,72,38,27"
      href = "/perl/index.htm" alt = "Perl Tutorial" download="perl" hreflang="en"/>
   <area shape = "rect" coords = "22,83,126,125" alt = "HTML Tutorial"
      href = "/html/index.htm" target = "_blank" download="html" hreflang="en"/>
   <area shape = "circle" coords = "73,168,32" alt = "PHP Tutorial"
      href = "/php/index.htm" target = "_blank" download="php" hreflang="en"/>
</map>

The language of the url we have set using the hreflang attribute −

hreflang="en"

Above, we have set for English.

Updated on: 30-Jul-2019

115 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements