What the lang attribute does
The lang attribute on the html element says which language a page is written in. Screen readers pick their pronunciation by it, browsers and translation services the language.
How it works
At the very top of every HTML page sits the html element. Its lang attribute names the language of the content:
<html lang="en">
A screen reader, a program that reads pages aloud, switches its voice accordingly. Without it, it uses the language set in the operating system. English text then gets read with German pronunciation, say, and numbers and abbreviations come out wrong. Browsers use lang to offer translation, and CSS hyphenation (hyphens: auto) depends on it too.
If a passage is in another language, it gets its own lang, such as <blockquote lang="de">. The voice then changes for that part only.
WCAG 2.2, the standard for accessible web content, asks for the language of the page in success criterion 3.1.1 and for the language of parts in 3.1.2.
What matters
- A valid language code. The value follows BCP 47, the standard for language tags:
en,de, with a regionen-GBorde-AT. Values such asenglishoren_GBwith an underscore are invalid. - The language that is actually there. A German page marked
lang="en"is worse than no attribute at all. Watch out for templates that always insert the language of the installation. - Each language version on its own. On multilingual sites every version carries its own code.
- For search engines, one hint among several. Google says it detects the language from the visible text. Language versions are the job of hreflang. A correct
langnever hurts, though, and it helps browsers and other services.
How to set it up
The html element comes from the template of your theme or framework. In WordPress a well-made theme fills it from the site language (Settings · General); if it is missing, the theme is to blame. In other systems and on hand-built sites it sits in the layout file all pages share. On multilingual sites the plugin or framework has to set the code per version. Afterwards, check the source of one page in each language.