Dofactory.com
Dofactory.com
Earn income with your HTML skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.

HTML hreflang Attribute

The hreflang attribute on an element specifies the language and country region of the element.

This value is purely advisory.

Elements that accept this attribute include <a>, <area>, and <link>.

Example

#

An hreflang attribute on an <a> tag.
This attribute specifies the link is a page in English.

Go to Microsoft.
Go to 
<a hreflang="en" target="_blank"
   href="https://microsoft.com/en-us/">Microsoft</a>.

For additional details see our HTML anchor hreflang Reference.


Using hreflang

The hreflang attribute specifies the language and country region of the linked resource.

Its value is for advisory purposes only.

The first two characters in the hreflang value represents the language code, such as 'en'.

And, the last two characters in the hreflang value represents the country code, such as 'US'.

For example, the hreflang value of 'en-GB' specifies the English language in Great Britain.


Syntax

<tagname href="URL" hreflang="language-code-country-code" />

Values

#

Value Description
language-code-country-code The first 2 characters represent the language code of the linked page or resource.
The last 2 characters represent the country code (optional).

Elements that accept hreflang

The following elements accept the hreflang attribute.

Elements Description
<a> Specifies an anchor link -- see example above
<area> Creates clickable area inside an image map.
<link> Links an external source to the current page.

<area> with hreflang

An <area> tag with an hreflang attribute.

Computer Monitor Keyboard Mouse
<img src="/img/html/computer-map.png" 
     alt="Computer" 
     usemap="#computermap">

<map name="computermap">
  <area hreflang="en-US" shape="rect" alt="Monitor" coords="253,142,16,2" 
        href="https://www.google.com/search?q=monitor" target="_blank">
  <area hreflang="en-US" shape="rect" alt="Keyboard" coords="262,218,0,156" 
        href="https://www.google.com/search?q=keyboard" target="_blank">
  <area hreflang="en-US" shape="circle" alt="Mouse" coords="267,234,22" 
        href="https://www.google.com/search?q=mouse" target="_blank">
</map>

For additional details see our HTML area hreflang Reference.


<link> with hreflang

A <link> tag with an hreflang attribute.

<link rel="preload" as="video" type="video/mp4" 
      href="/media/movie.mp4" hreflang="en" />

For additional details see our HTML link hreflang Reference.


Browser support

Here is when hreflang support started for each browser:

Chrome
1.0 Sep 2008
Firefox
1.0 Sep 2002
IE/Edge
1.0 Aug 1995
Opera
1.0 Jan 2006
Safari
1.0 Jan 2003

You may also like




Last updated on Sep 30, 2023

Earn income with your HTML skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.

Guides