The HTML hreflang attribute is used to specify the language and optional geographic region of a linked document.
Definition and Usage
➔ The hreflang attribute can be used within an <a> tag, but it is primarily used in the <link> tag within the <head> section of an HTML document for international SEO purposes.
➔ The hreflang in the <a> tag indicates the language of the linked page (e.g.: <a href="https://myexample.com/en/" hreflang="en">See the English version</a>).
➔ The hreflang attribute is used within the <link> element placed in the <head> section of an HTML page.
Example: <head> <link rel="alternate" href="https://example.com/en" hreflang="en" /> </head>- The hreflang attribute should always be used with the href and rel="alternate" attributes.
- rel="alternate": The linked document is an alternate version of the current page.
- hreflang: Specifies a language and/or region code, which is formatted as a two-letter language code, a hyphen, followed by a two-letter region code. (Ex: en-us).
- x-default: Indicates the default page when no other language/region version matches.
Syntax
//In HTML a element
<a href="https://myexample.com/en/" hreflang="en">Visit English version</a>
//In HTML link element
<head>
<link rel="alternate" href="https://myexample.com/fr" hreflang="fr" />
<link rel="alternate" href="https://myexample.com/es" hreflang="es" />
<link id="linkIdEn" rel="alternate" href="https://myexample.com/en" hreflang="en" />
<link rel="alternate" href="https://myexample.com/en-us" hreflang="en-us" />
<link rel="alternate" href="https://myexample.com/en-gb" hreflang="en-gb" />
<link rel="alternate" href="https://myexample.com/default" hreflang="x-default" />
</head>
//In JavaScript
<script>
//Dynamically creating and adding a link element to head section.
const linkElement = document.createElement('link');
linkElement.rel = 'alternate';
linkElement.hreflang = "en-us"; // Set the hreflang property
linkElement.href = "https://myexample.com/en-us"; // Set the href property
head.appendChild(linkElement);
//Setting hreflang on existing link element in head section.
let element = document.querySelector("#linkIdEn");
element.rel = 'alternate';
element.hreflang = "en-us";
element.href = "https://myexample.com/en-us";
</script>
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML hreflang attribute example</title>
<style>
.mydiv {
border: 2px solid black;
padding: 30px;
background: rgb(100, 100, 100, 0.3);
}
input {
padding: 3px;
}
button {
margin: 10px 75px;
padding: 3px;
}
</style>
</head>
<body>
<div class="mydiv">
<h3>HTML hreflang attribute example</h3>
<p>The hreflang attribute is used to specify the language of a linked document.</p>
<p><a hreflang="en" href="https://www.w3context.com">Visit w3context.com</a></p>
</div>
</body>
</html>
Click on the "Try it Now" button to see how it works.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML hreflang attribute example</title>
<style>
.mydiv {
border: 2px solid black;
padding: 30px;
background: rgb(100, 100, 100, 0.3);
}
input {
padding: 3px;
}
button {
margin: 10px 75px;
padding: 3px;
}
</style>
<link id="linkIdEn" rel="alternate" href="https://w3context.com/" hreflang="en" />
</head>
<body>
<div class="mydiv">
<h3>HTML hreflang attribute example</h3>
<p>The hreflang attribute is used to specify the language of a linked document.</p>
<p><a hreflang="en" href="https://www.w3context.com">Visit w3context.com</a></p><br><br>
<p>Note: hreflang in the <link> element is used for international SEO, which helps search engines serve
the correct version of a webpage to users based on their language and location.</p>
<p>Where the hreflang of the <a> element is used to inform users about the language used in the linked
resource.</p>
</div>
</body>
</html>
Click on the "Try it Now" button to see how it works.