Short answer: Put lang on the html element with the language of the page, such as lang="en" or lang="es", and add lang to any part written in another language. Screen readers use it to pronounce the text correctly. Google ignores it when it works out the language; hreflang annotations help it link language versions.
What the lang attribute does
MDN describes lang as the attribute that helps define the language of an element. It holds a single BCP 47 language tag, such as en, es or es-419. When nothing indicates the language, it is unknown, and MDN recommends always setting it, especially for accessibility.
WCAG asks for both levels: success criterion 3.1.1 for the language of the page and 3.1.2 for parts in another language. The W3C explains the reason: screen readers can load the correct pronunciation rules. Our screen reader guide shows how people use them.
Where lang goes
| Case | What to write | Why |
|---|---|---|
| The whole page | lang on the html element, such as lang="es" | Every element inherits it, the head included |
| A part in another language | lang on its element, such as lang="en" on a title | Screen readers switch pronunciation |
| A language menu | lang on each language name | Each name is read in its own language |
| Another language version | hreflang annotations, not lang | Google uses them to link the right version |
From MDN, the W3C and Google Search Central, read November 5, 2026.
For the page, the W3C’s rule is to always use a language attribute on the html tag. It warns against the body element, which doesn’t cover the text in the head, and says never to declare the page language with a meta element and Content-Language.
An element without lang inherits it from its parent, so the rest of the page needs nothing. MDN’s own language menu puts lang on each entry, so a screen reader says Español with Spanish sounds.
Which language code to use
The W3C calls it the golden rule: keep the language tag as short as possible. For most pages that means two letters, en for English and es for Spanish.
A region goes after the language only when it adds information you need. The W3C’s examples are es-ES for Spanish as spoken in Spain and es-419 for Spanish as spoken in Latin America.
Parts in another language
WCAG 3.1.2 asks that each passage or phrase in another language can be identified. The exceptions are proper names, technical terms, words of indeterminate language and words that have become part of the surrounding language.
The W3C’s test for doubtful cases: would the word sound the same, apart from accent, in the language around it? An English book title on a Spanish page doesn’t, so it gets lang="en". A borrowed word like rendezvous in English does, so it needs nothing.
What lang does for search
Google reads the language from the text people see on the page. For that it ignores lang attributes and the URL, its documentation says, and it recommends one language for the content and navigation of each page.
To connect the versions of a page in different languages, Google uses hreflang annotations, which our hreflang guide covers. If you are building a Spanish version, our guide to translating a website into Spanish has the full plan.
How to set the language of a page
- Put lang on the html element with the main language of the page.
- Keep the tag short: en or es, plus a region only when it adds information.
- Give each language version of the page its own lang.
- Add lang to any quote, title or phrase written in another language.
- Leave out proper names, technical terms and borrowed words.
- In a language menu, put lang on each language name.
- Link the language versions with hreflang, since lang doesn’t do that job.
What we found on our own pages
On November 5, 2026, we read the language of three pages in each version of our site: home, contact and our keyboard navigation guide. Each one declares it on its html element: en-US for English and es-US for Spanish, with the region because we write both versions for readers in the United States.
The parts were another matter. Our Spanish guides cite many sources in English, and their titles had no lang of their own: they took the page’s Spanish, so a Spanish voice would read them with Spanish sounds. We marked them with lang="en": 263 titles in 101 Spanish guides. Titles that the source gives in Spanish, like web.dev’s, stay as they are.
The look barely changed. The browser renders English text with English rules, which moved some titles by about a pixel, and no line or page height changed.
Before you publish
- The html element carries the language of the page.
- The tag is valid and as short as it can be.
- Titles and quotes in another language carry their own lang.
- Proper names and technical terms carry none.
- Each name in the language menu carries its own lang.
- Each language version links the others with hreflang.
Rememberlang is for the people and the software reading the page. Set it once for the page, again for each part in another language, and leave language versions to hreflang.
We build bilingual pages like these in our web design service.
Quick answers about the lang attribute
What does the lang attribute do?
It tells browsers and assistive technology which language an element is written in. The W3C notes that with it, screen readers can load the correct pronunciation rules, so a Spanish voice doesn’t read an English title as if it were Spanish.
What lang code should I use for Spanish?
Usually es on its own. The W3C’s golden rule is to keep the tag as short as possible. Add a region only when it carries information you need, such as es-419 for Spanish as spoken in Latin America or es-ES for Spain.
Does Google use the lang attribute?
Not to work out the language. Google reads it from the text people see and, its documentation says, doesn’t look at lang attributes for that. To point Google to each language version, use hreflang annotations.
Do I need lang on every element?
No. An element without lang inherits the language of its parent, as MDN explains, so one lang on the html element covers the page. Add it again only on a part written in another language.
What is the difference between lang and hreflang?
lang describes the language of the text in front of you. hreflang tells search engines the language of another version of the page, so Google Search can link each reader to the version in their language.
Sources
Read on November 5, 2026. MDN Web Docs: lang HTML global attribute. W3C Internationalization: Declaring language in HTML and Choosing a language tag. W3C Web Accessibility Initiative: Understanding Success Criterion 3.1.1: Language of Page and Understanding Success Criterion 3.1.2: Language of Parts. Google Search Central: Managing Multi-Regional and Multilingual Sites. Our case: our own pages, read in a browser on November 5, 2026.