The lang attribute in HTML is used to specify the language of the content within an element. It plays a crucial role in making web content more accessible by telling browsers and assistive technologies which language to use for pronunciation, hyphenation, and translation. The attribute is most commonly applied to the <html> tag to define the default language for the entire document.
Works on any element.
en, es, en-US.
Document default.
Nested overrides.
Content vs links.
Switch at runtime.
langThe primary purpose of the lang attribute is to assist browsers and other user agents in correctly rendering and interpreting text. Screen readers use it to pick the right voice and pronunciation rules. Search engines use it to understand page language for ranking and regional results. Spell-checkers and hyphenation tools also rely on lang.
Without a document-level lang, assistive technology may guess the language incorrectly—which leads to poor pronunciation and a frustrating experience for users.
Every page should declare its primary language on the root element, for example <html lang="en">. Add lang on inner elements only when a section uses a different language.
Set the default document language on the root <html> element:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Web Page</title>
</head>
<body>
<!-- page content -->
</body>
</html>lang is a global attribute—valid on every HTML element.en-US, zh-Hans).en, not EN) and proper region casing (en-GB).<html> for the document default; override on nested elements for mixed-language passages.lang="" means unknown language—avoid unless intentional.lang property: document.documentElement.lang = "es".The lang attribute uses BCP 47 language tags. Common examples:
en — English (generic).en-US — English as used in the United States.en-GB — English as used in the United Kingdom.es — Spanish.fr — French.de — German.ja — Japanese.zh-Hans — Chinese, simplified script.pt-BR — Portuguese (Brazil).Read or set the property in JavaScript:
document.documentElement.lang = "es";
document.querySelector("blockquote").lang = "fr";| Use Case | Markup | Notes |
|---|---|---|
| Document language | <html lang="en"> | Required best practice |
| Regional variant | lang="en-US" | Language + region |
| Foreign quote | <q lang="es">...</q> | Nested override |
| Unknown language | lang="" | Rare; disables language hint |
| JavaScript (page) | document.documentElement.lang | Updates <html> |
| JavaScript (element) | element.lang | Any element |
| Element / Context | Supported? | Notes |
|---|---|---|
<html> | Yes | Document default—always set |
<p>, <span>, headings | Yes | Mixed-language paragraphs |
<a>, <li>, <td> | Yes | Any element with text |
<link hreflang> | Different attribute | hreflang for alternate URLs |
<track srclang> | Different attribute | srclang on media text tracks |
lang vs hreflang| Feature | lang | hreflang |
|---|---|---|
| Purpose | Language of content on this page/element | Language of an alternate page URL |
| Used on | Any element (especially <html>) | <link>, <a> (alternate links) |
| Audience | Browsers, screen readers, spell-check | Search engines (international SEO) |
| Example | <html lang="en"> | <link rel="alternate" hreflang="es" href="..."> |
| Both needed? | Often yes on multilingual sites—they solve different problems | |
Document-level English, mixed-language content with nested lang, and switching language with JavaScript.
Mixed-language paragraph: English page with a Spanish phrase marked inline:
The outer block is lang="en"; the quote uses lang="es" so screen readers pronounce Spanish correctly.
Here’s how to use the lang attribute on the <html> tag:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Web Page</title>
</head>
<body>
<!-- Your content goes here -->
</body>
</html>The lang attribute on <html> sets the default language for the whole page. It is inherited by every descendant element until another lang value appears.
When part of a page is in another language, mark that section with its own lang:
<html lang="en">
<body>
<p>The French word for hello is
<span lang="fr">bonjour</span>.
</p>
<blockquote lang="de">
Alle Menschen sind frei und gleich an Würde und Rechten geboren.
</blockquote>
</body>
</html>Child elements inherit lang from ancestors but can override it. Mark only the smallest element that contains the foreign text—not the whole page.
Switch the document language when the user picks a locale:
<script>
function getUserLanguage() {
return navigator.language.startsWith("es") ? "es" : "en";
}
document.documentElement.lang = getUserLanguage();
</script>document.documentElement refers to the <html> element. Setting its lang property updates the content attribute and re-declares the page language at runtime.
<html lang> is the standard way.lang so screen readers use correct pronunciation.lang="en" on a page that is mostly Spanish.lang too.lang helps users of the current page.lang="ar" with dir="rtl" on <html> when the page is Arabic.BCP 47 tag on root.
Unless overridden.
Speech, spell-check, SEO.
Better a11y and global reach.
The lang attribute is supported in all browsers and has been part of HTML for decades. Every modern user agent respects lang for hyphenation, font selection, and accessibility APIs.
All major browsers honor lang on any element.
Bottom line: Set lang on every page—support is universal and the accessibility benefit is immediate.
lang on <html> for every documenten, en-US, zh-Hans)lang on inline foreign phraseslang when JavaScript changes page languagedir="rtl"lang on the root elementlang with hreflang on link tagslang for one small quoteThe lang attribute is a crucial tool for indicating the language of your HTML document, contributing to better accessibility and user experience. It helps screen readers, browsers, and search engines treat your content correctly.
Always declare the document language on <html>, use nested lang for mixed content, and update it dynamically when your site supports language switching. Combined with accurate content, this greatly enhances the global reach of your web pages.
langBookmark these before shipping any page.
Always set default
Documenten, es, en-US
SyntaxCorrect pronunciation
A11yMixed languages
ContentContent vs alt URLs
SEO<html> for the document default. Add it on inner elements when a section or phrase uses a different language.en, es, en-US, or zh-Hans. Use lowercase language subtags and proper region casing.lang describes content language on the current page. hreflang on <link> or <a> points search engines to alternate language versions at other URLs.document.documentElement.lang or element.lang when the user switches language or when dynamic content loads in another locale.<html lang="...">.Practice setting lang on <html> and marking mixed-language content in the Try It editor.
5 people found this page helpful