Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

Set the language of the linked document in HTML

HTML Web Development Front End Technology

The hreflang attribute in HTML specifies the language of the linked document. This attribute helps search engines understand the language of the target page and assists browsers in providing appropriate language-based features to users.

Syntax

Following is the syntax for the hreflang attribute −

<a href="URL" hreflang="language-code">Link Text</a>

The language-code follows the ISO 639-1 standard (two-letter language codes) and can optionally include a country code using ISO 3166-1 alpha-2 format.

Common Language Codes

Here are some commonly used language codes with the hreflang attribute −

Language Code Language Example Usage
en English hreflang="en"
es Spanish hreflang="es"
fr French hreflang="fr"
de German hreflang="de"
en-US English (United States) hreflang="en-US"
en-GB English (United Kingdom) hreflang="en-GB"

Basic Example

Following example demonstrates the basic usage of the hreflang attribute −

<!DOCTYPE html>
<html>
<head>
   <title>HTML hreflang Attribute</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
   <h2>Database Tutorials</h2>
   <p>Choose your preferred language:</p>
   <ul>
      <li><a href="dbms/index.htm" hreflang="en">DBMS Tutorial (English)</a></li>
      <li><a href="dbms/index-es.htm" hreflang="es">Tutorial DBMS (Spanish)</a></li>
      <li><a href="dbms/index-fr.htm" hreflang="fr">Tutoriel DBMS (French)</a></li>
   </ul>
</body>
</html>

This creates a list of links where each link specifies the language of the target document −

Database Tutorials

Choose your preferred language:
? DBMS Tutorial (English)
? Tutorial DBMS (Spanish)  
? Tutoriel DBMS (French)

Using hreflang with Country Codes

The hreflang attribute can include country-specific language variants using the format language-country. This is particularly useful for languages spoken in multiple countries with regional differences.

Example

<!DOCTYPE html>
<html>
<head>
   <title>Regional Language Variants</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
   <h2>Programming Tutorials</h2>
   <p>Select your region:</p>
   <div>
      <a href="tutorial-us.htm" hreflang="en-US">English (United States)</a> |
      <a href="tutorial-uk.htm" hreflang="en-GB">English (United Kingdom)</a> |
      <a href="tutorial-au.htm" hreflang="en-AU">English (Australia)</a>
   </div>
   <br>
   <div>
      <a href="tutorial-es.htm" hreflang="es-ES">Español (Spain)</a> |
      <a href="tutorial-mx.htm" hreflang="es-MX">Español (Mexico)</a>
   </div>
</body>
</html>

This provides region-specific content links that help search engines and browsers understand the target audience −

Programming Tutorials

Select your region:
English (United States) | English (United Kingdom) | English (Australia)

Español (Spain) | Español (Mexico)
hreflang Attribute Benefits SEO Benefits ? Search engines understand content ? Better ranking in regional searches ? Avoids duplicate content penalties ? Improved indexing User Experience ? Browsers can offer translation features ? Language-specific functionality ? Clear content expectations ? Better accessibility Technical ? Works with <a> and <link> elements ? ISO standard codes ? Optional country specification ? Case insensitive ? W3C compliant

Alternative Language Links

The hreflang attribute is commonly used with the HTML <link> element in the document head to indicate alternative language versions of the same page. This is particularly important for international websites.

Example

<!DOCTYPE html>
<html lang="en">
<head>
   <title>International Website</title>
   <link rel="alternate" hreflang="en" href="https://example.com/en/">
   <link rel="alternate" hreflang="es" href="https://example.com/es/">
   <link rel="alternate" hreflang="fr" href="https://example.com/fr/">
   <link rel="alternate" hreflang="x-default" href="https://example.com/">
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
   <h1>Welcome to Our Global Site</h1>
   <p>Choose your language:</p>
   <nav>
      <a href="https://example.com/en/" hreflang="en">English</a> |
      <a href="https://example.com/es/" hreflang="es">Español</a> |
      <a href="https://example.com/fr/" hreflang="fr">Français</a>
   </nav>
</body>
</html>

The x-default value indicates the default page when no specific language preference is detected. This setup helps search engines show the appropriate language version to users based on their location and language settings.

Key Points

  • The hreflang attribute works with both <a> and <link> elements.

  • Language codes are case-insensitive, but lowercase is recommended.

  • Use x-default to specify a fallback page for unmatched languages.

  • The attribute helps prevent duplicate content issues in search engines.

  • Browsers may use this information to offer translation services or language-specific features.

Conclusion

The hreflang attribute is essential for international websites as it helps search engines understand the language and regional targeting of linked documents. By properly implementing hreflang, you improve SEO performance and provide better user experience for multilingual content.

Updated on: 2026-03-16T21:38:53+05:30

181 Views

Learn More in Our Tutorials

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements