How to Set the HTML Language of a Page

A translated page can still have lang="en" on its opening HTML element, even when its visible instructions are French. A language setting in a generated head block can look reassuring without correcting that declaration. Start by checking the document itself.

This walkthrough uses a fictional drawing workshop page. It sets the language of one document, compares the on-site generator output, and marks one English instruction inside the French text.

Declare the language on the HTML element

For a page served as HTML, use a lang attribute on the opening html element. The W3C language declaration guide recommends this location because it covers both the head and body. Putting the attribute only on body leaves the head outside that scope.

Choose a language tag that describes the actual text. For this workshop, fr identifies French. A French declaration does not translate an English page. Change the content and the declaration together when preparing a translated edition.

In a static template, the relevant opening line is:

<html lang="fr">

In a CMS, find the setting or template that controls the document language for that edition. Record its current value before editing. A shared template should not force the French value onto English pages.

Check what the generator actually supplies

Open the Meta Tag Generator for a small comparison:

1. Enter Atelier Juniper in Page title.
2. Enter Horaires et inscriptions aux ateliers de dessin. in Meta description.
3. Select French (fr) under Language, then select Generate Meta Tags.
4. Find this line in the generated output:

<meta http-equiv="content-language" content="fr">

That is a meta element, not an opening html element. The generator does not add lang to your template or translate its text. The W3C guide recommends declaring text language with the HTML language attribute and advises against using this meta declaration for that purpose.

Change Language to None and generate again. The content-language line disappears; the entered title and description remain. You can draft those useful tags while managing the document language in its proper location. If your CMS already produces the head, update its existing fields rather than inserting a second complete block.

Mark a passage in another language

Elements normally inherit the language of their parent. A local lang attribute changes that declaration for the enclosed passage. The MDN lang reference explains inheritance, BCP 47 tags and their role in helping screen readers choose pronunciation.

This deliberately small example keeps the main page in French and labels the quoted English instruction separately:

<!doctype html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Atelier Juniper</title>
</head>
<body>
  <h1>Inscriptions aux ateliers de dessin</h1>
  <p>Choisissez votre session du samedi.</p>
  <p>Consigne en anglais :
    <span lang="en">Please bring a sketchbook.</span>
  </p>
</body>
</html>

The French paragraph and heading inherit fr. Only the span declares en; the following content would inherit French again. Use language tags such as fr, not informal labels such as French.

Separate document language from search annotations

Google says it identifies page language from visible content, rather than code-level declarations such as lang. Its multilingual site guidance therefore does not support treating this attribute as a way to override language detection or force a ranking outcome.

Keep the main content and navigation consistent with the intended edition. If you also maintain equivalent pages at different language URLs, their relationship is a separate task covered in our hreflang guide for language versions. An HTML language attribute describes text within a document; it does not create those alternate-page annotations.

Verify the delivered page and its template scope

1. Open the published workshop page and inspect its source. Find the real opening html element, not an escaped example in an article.
2. Confirm it has one intended lang="fr" value. Inspect the rendered element too if your application changes markup after loading.
3. Check that the English passage retains its own lang="en" and the surrounding French content has not been relabelled.
4. Open an English page using the same template and confirm its language remains appropriate.
5. Read both pages and test pronunciation with the screen reader used in your accessibility review, when available.

Save the observed values with the page URLs. A correct generator preview cannot establish that the published document or another language edition was updated correctly.