What the HTML lang Attribute Does
The lang attribute on the html element declares the primary language of your page's content. It tells browsers, search engines, screen readers, and translation tools what language the text is written in. This single attribute influences how content is rendered, indexed, and communicated to assistive technologies.
Search engines use the lang attribute to match pages with appropriate language-specific search results. When a user searches on google.de (German Google), pages with lang="de" are more likely to appear than pages without a language declaration. Google also uses it to avoid serving English-language results for queries in other languages, improving result quality for international users.
Screen readers rely on the lang attribute to select the correct pronunciation engine. A page with lang="en" uses an English voice. The same page with lang="es" switches to Spanish pronunciation. Without the attribute, screen readers guess the language, often selecting the wrong voice and producing unintelligible output for non-English content.
How to Set the lang Attribute Correctly
Add the lang attribute to the opening html tag with a valid BCP 47 language code. BCP 47 combines a language subtag with optional region and script subtags using hyphens:
<!-- English -->
<html lang="en">
<!-- British English -->
<html lang="en-GB">
<!-- Spanish -->
<html lang="es">
<!-- Brazilian Portuguese -->
<html lang="pt-BR">
<!-- Simplified Chinese -->
<html lang="zh-Hans">The most common mistake is using only the language subtag without the region subtag when both are needed. "en" means English (any region), while "en-US" means American English. For sites targeting a specific country's audience, include the region subtag. It helps Google determine which regional search results to include your page in.
For pages with content in multiple languages, use lang attributes on specific elements rather than only on the html tag. When a French quotation appears in an English article, mark the quoted section:
<p>The philosopher wrote: <q lang="fr">Je pense, donc je suis</q>,
which translates to "I think, therefore I am."</p>This tells screen readers to switch to French pronunciation for that specific section and then switch back to English. Search engines also use element-level lang attributes to understand multilingual content within a single page.
lang Attribute and hreflang Relationship
The lang attribute and the hreflang tag work together but serve different purposes. The lang attribute declares the language of the current page. The hreflang tag in the head section or HTTP header tells search engines about alternative versions of the same page in different languages:
<!-- Current page is English (US) -->
<html lang="en-US">
<!-- hreflang tags declare alternate language versions -->
<link rel="alternate" hreflang="es" href="https://example.com/es/page">
<link rel="alternate" hreflang="fr" href="https://example.com/fr/page">
<link rel="alternate" hreflang="de" href="https://example.com/de/page">
<link rel="alternate" hreflang="x-default" href="https://example.com/page">Every hreflang tag should match the lang attribute on the referenced page's html element. If your Spanish page has lang="es" but its hreflang tag says hreflang="es-ES", there is a mismatch that could confuse search engines about the target audience for that page.
Multi-Language Site Implementation
For a site with content in three languages (English, Spanish, French), every page needs a lang attribute matching its content language. The site structure should clearly separate languages through URL patterns:
https://example.com/en/about (lang="en")
https://example.com/es/about (lang="es")
https://example.com/fr/about (lang="fr")Each language version should include hreflang tags pointing to all other versions, including a self-referencing hreflang and an x-default pointing to the primary language. Our hreflang checker validates that your lang attributes and hreflang tags are consistent across all language versions of your site.
For pages that switch languages mid-content (like an English article quoting foreign language passages), mark each language segment with the appropriate lang attribute. This prevents screen readers from mispronouncing foreign text and helps search engines understand which portions of the content are in which language.
Common lang Attribute Mistakes
Omitting the attribute entirely is the most common error. Every HTML page should have a lang attribute. Without it, browsers cannot assist with translation, screen readers cannot select the correct voice, and search engines make their own assumptions about the language.
Using incorrect language codes causes misidentification. "eng" is the ISO 639-2 code, but HTML requires the ISO 639-1 two-letter code "en." "br" is not Brazilian Portuguese (that is pt-BR); br is Breton, a Celtic language. Verify your language codes against the IANA Language Subtag Registry.
Mismatching lang and content language confuses assistive technologies. If your page has lang="en" but the content is actually in German, screen readers will attempt to read German text with an English pronunciation engine, producing garbled audio. Always ensure the lang attribute matches the actual content language.
Using lang on non-HTML elements is unnecessary. The lang attribute belongs on the html element for page-level declaration and on specific elements for inline language changes. Adding it to body or div elements is redundant when the html element already declares the page language.
Verifying Your lang Attribute
Check your lang attribute by viewing your page source and looking at the opening html tag. Use our HTML validator to verify the attribute is present, correctly formatted, and uses a valid language code. For multi-language sites, validate every page in each language version to ensure consistency between the lang attribute and the actual content language.
Browser developer tools can also verify the lang attribute. In Chrome DevTools, run the Accessibility panel and check the "Computed Properties" section for the document's language. This shows exactly what language the browser has detected, which should match what you declared in the HTML.