How to set the page language

Short answer

Set the language with the lang attribute on the <html> element:

<!DOCTYPE html>
<html lang="en">
  <body>
    <p>The whole page is in English.</p>
  </body>
</html>

The language code is short: en, ru, de, fr. A region can be added: en-GB, pt-BR.

Why it is needed

• A screen reader picks the correct pronunciation.
• The browser hyphenates (hyphens: auto) and places the quotes of the <q> element correctly.
• The browser does not offer to translate a page written in the user's language and correctly detects which language to translate from.
• Search engines better understand whom to show the page to.

A fragment in another language

If a phrase in another language appears inside the page, mark it with the same attribute:

<p lang="en">The French say <span lang="fr">bon appétit</span> before a meal.</p>

Common mistake

The page template was copied with lang="en", while the site text is in another language, say German. A screen reader reads German words with English pronunciation, which is almost impossible to understand, and hyphens and quotes follow the wrong rules. Check lang in the template of every new project.