HTML - hreflang Attribute

The 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. Its value will be the language code value that hints at the human language of the linked URL.

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

Following is the syntax for HTML hreflang attribute − 

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

Example

In the following example, we are going to use the HTML hreflang = ‘en’ attribute within the <a> element.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML 'hreflang' attribute</title>
   <style>
      a {
         background-color: rgb(13, 124, 124);
         padding: 10px;
         color: white;
      }
   </style>
</head>
<body>
   <!--HTML 'hreflang' attribute-->
   <h3>Example of the HTML 'hreflang' attribute</h3>
   <p>Click on the below link to redirect to Tutorialspoint.com</p>
   <a href="https://www.tutorialspoint.com/index.htm" hreflang="en">Click here!</a>
</body>
</html>

When we run the above code, it will generate an output consisting of the text along with hyperlink applied with CSS displayed on the webpage. when we click on the link it will redirects to tutorialspoint homepsge.

Example

Considering the another scenario, where we are going to use the hreflang attribute with lan='es' along with the <a> element.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML 'hreflang' attribute</title>
   <style>
      a {
         text-decoration: none;
         background-color: rgb(12, 104, 231);
         padding: 10px;
         color: white;
      }
   </style>
</head>
<body>
   <!--HTML 'hreflang' attribute-->
   <h3>Example of the HTML 'hreflang' attribute</h3>
   <p>Click on the below button to redirect to Flamenco wikipedia</p>
   <a href="https://es.wikipedia.org/wiki/Flamenco" hreflang="es">Click here!</a>
</body>
</html>

On running the above code, the output window will pop up displaying the text along with a hyperlink on the webpage. when the user clicks on the link it redirects to wikipedia.

html_attributes_reference.htm
Advertisements