HTML - hreflang Attribute

HTML hreflang attribute is used to specify the language of the linked document or URL.

It works only when the href attribute is specified otherwise not. The HTML hreflang tag is used to tell search engines about the different versions of the same page in different languages. This helps search engines to serve the correct version of the page to their users based on their language preference.

Syntax

<a hreflang = "value"></a>

Where value is two letter code of language.

Applies On

Below listed elements allow using of the HTML hreflang attribute

Element	Description
<a>	HTML <a> tag is used to attach external resource using links to webpage.
<link>	HTML <link> tag specifies relationship between the current document and an external resource.
<area>	HTML <area> tag specifies the areas of the image, mapping that can be clicked on or are active areas that are linked to by hyperlinks.

Examples of HTML hreflang Attribute

Below examples will illustrate the HTML href attribute, where and how we should use this attribute!

Using hreflang to Specify English Language

In the following example, we are going to use the HTML hreflang = ‘en’ attribute within the <a> element to specify language of hyperlink provided is English.

<!DOCTYPE html>
<html lang="en">

<body>
   <h3>Example of HTML 'hreflang' attribute</h3>
   <p>
      Below link will redirect 
      you to Tutorialspoint
   </p>
   <a href="/index.htm" hreflang="en">
      Click here!
   </a>
</body>

</html>

hreflang attribute to specify language of stylesheet

Considering the another scenario, where we are going to use the hreflang attribute with link tag to specify language of CSS stylesheet as English.

<!DOCTYPE html>
<html lang="en">
   <head>
   <title>Example of hreflang Attribute</title>
   <link rel="alternate" 
         hreflang="en" 
         href="styles.css" />
   </head>
</html>

style.css

* {
   margin: 0;
   padding: 0;
   border: 0 solid transparent;
   }
   
   html {
   -webkit-text-size-adjust: 100%;
   }
   
   body {
   min-height: 100vh;
   line-height: 1;
   text-rendering: optimizeSpeed;
   }

Hreflang attribute inside area tag

In this example we use hreflang attribute inside area map, where we redirect according to the part of image clicked. Here all the values of hreflang is English(en) since all the website we redirect is also in English.

<!DOCTYPE html>
<html lang="en">

<body>
   <h1>Welcome to our interactive map!</h1>
   <p>
      Click on a region to visit the 
      respective language page:
   </p>
   <img src="/html/images/lang.jpg" 
        usemap="#langmap" 
        alt="World Map" />

   <map name="langmap">
      <area shape="rect" 
            coords="0,0,180,165" 
            alt="HTML" 
            href="html/index.htm" 
            target="_blank" 
            hreflang="en" />
      <area shape="rect" 
            coords="180,0,375,167" 
            alt="JavaScript" 
            href="javascript/index.htm" 
            target="_blank" 
            hreflang="en" />
      <area shape="rect" 
            coords="0,166,180,338" 
            alt="PHP" 
            href="/php/index.htm" 
            target="_blank" hreflang="en" />
      <area shape="rect" 
            coords="180,165,375,338" 
            alt="ReactJS" 
            href="reactjs/index.htm" 
            target="_blank" 
            hreflang="en" />
   </map>
</body>
</html>

Supported Browsers

Attribute
hreflang	Yes	Yes	Yes	Yes	Yes

html_attributes_reference.htm

Print Page