HTML lang Attribute: Set the Language of a Web Page

The lang attribute tells browsers, screen readers, translation tools, and search engines what language your HTML content is written in. Setting it correctly improves accessibility, text rendering, and language-sensitive features across the page.

Quick answer: Use lang on the <html> element to declare the main language of the document, and use it on smaller elements only when a section switches language. For example, <html lang="en"> marks the page as English.

Difficulty: Beginner

You'll understand this better if you know: basic HTML element structure, attributes, and how screen readers read web pages.

1. What Is the lang Attribute?

The lang attribute is a global HTML attribute that declares the language of an element’s text content. In most cases, you set it on the root <html> element so the whole page has a default language.

It identifies the language for the document or a section of the document.
It uses language tags such as en, fr, es, or more specific tags like en-US.
It helps assistive technology pronounce text correctly.
It supports language-aware browser features, spell checking, and translation tools.

In HTML, lang is not a visual style. It does not change fonts, colors, or layout by itself. It is metadata for language handling.

2. Why lang Matters

Declaring the correct language helps people and software understand your content. This is especially important for accessibility, international websites, and pages that include more than one language.

Screen readers use the language setting to choose the right pronunciation rules. Browsers and operating systems may use it for spell checking and text processing. Search engines can also use it as a signal when indexing multilingual content.

If you omit lang, tools may guess incorrectly. That can lead to mispronounced text, poor translation behavior, and confusing accessibility experiences.

3. Basic Syntax or Core Idea

The syntax is simple: add lang with a valid language tag value. The most common place is the root element.

Minimal example

This example declares the entire document as English:

<html lang="en">
  <head>
    <title>My Page</title>
  </head>
  <body>
    <p>Hello, world!</p>
  </body>
</html>

Here, lang="en" tells user agents that the page is written in English. Because it is on <html>, the language applies to the whole document unless overridden on a child element.

Language tags can be more specific

You can use a region-specific tag when that distinction matters:

<html lang="en-GB">

This says the page is English as used in Great Britain. That can matter for spelling, vocabulary, and pronunciation.

4. Step-by-Step Examples

Example 1: A complete English page

This is the standard setup for a page written entirely in English:

<html lang="en">
  <body>
    <h1>Contact Us</h1>
    <p>We reply within one business day.</p>
  </body>
</html>

This is the most common pattern. If one language dominates the page, set it once at the top level.

Example 2: A page in French

If the page content is French, declare that instead:

<html lang="fr">
  <body>
    <h1>Bienvenue</h1>
    <p>Ce site est en français.</p>
  </body>
</html>

Now assistive technologies and language tools can treat the content as French from the start.

Example 3: Switching language inside a page

Sometimes a page is mostly one language but includes a quoted phrase, product name, or translated passage in another language. In that case, change the language only on the specific element:

<html lang="en">
  <body>
    <p>The menu includes the phrase <span lang="es">¡Buen provecho!</span>.</p>
  </body>
</html>

This helps screen readers pronounce the Spanish phrase correctly instead of trying to read it as English.

Example 4: Localized spelling and pronunciation

Use a regional language tag when the locale affects how content should be interpreted:

<html lang="pt-BR">
  <body>
    <p>Este site usa português do Brasil.</p>
  </body>
</html>

This is useful when your audience expects a particular regional form of a language.

5. Practical Use Cases

You will use lang in many real projects, including:

Marketing pages for a specific country or language market.
Documentation sites that offer translated versions of the same content.
Blogs that quote text in another language.
E-commerce sites with localized product descriptions and checkout content.
Government, education, and nonprofit sites that must support accessibility standards.
Applications that mix user-generated content in multiple languages.

For multi-language sites, lang should usually be part of your content model or template system, not added as a last-minute fix.

6. Common Mistakes

Mistake 1: Omitting lang on the root element

Many beginners forget to declare the page language at all. That leaves browsers and assistive technologies to guess.

Problem: Without a document language, screen readers may use the wrong pronunciation rules, and browsers may not offer the best language-aware behavior.

<html>
  <body>
    <p>Hello, world!</p>
  </body>
</html>

Fix: Declare the main language on <html>.

<html lang="en">
  <body>
    <p>Hello, world!</p>
  </body>
</html>

The corrected version gives the entire document a clear language default.

Mistake 2: Using the wrong language code

Some developers confuse language names with language tags. The value must be a valid BCP 47 language tag, not a human-readable label.

Problem: Values like english or french are not correct language tags, so tools may ignore them.

<html lang="english">
  <body>
    <p>Welcome</p>
  </body>
</html>

Fix: Use a proper code such as en, fr, or en-US.

<html lang="en">
  <body>
    <p>Welcome</p>
  </body>
</html>

The corrected version uses a standard language tag that browsers and assistive tech understand.

Mistake 3: Marking the whole page with one language when only part changes

Sometimes the main page is correct, but a foreign phrase inside it is not marked separately. That can cause mispronunciation and confusion for assistive technology users.

Problem: If a Spanish phrase is left inside an English page without its own lang, it may be read with the wrong pronunciation.

<html lang="en">
  <body>
    <p>Our team says buenos días every morning.</p>
  </body>
</html>

Fix: Mark the foreign phrase with the correct language.

<html lang="en">
  <body>
    <p>Our team says <span lang="es">buenos días</span> every morning.</p>
  </body>
</html>

The corrected version lets tools switch pronunciation only for the Spanish phrase.

7. Best Practices

Use lang on the root element first

The most important language declaration belongs on <html>. That gives the document a single default language and reduces ambiguity.

<html lang="de">
  <body>
    <p>Willkommen</p>
  </body>
</html>

This approach works well because every nested element inherits the document language unless you override it.

Use specific tags only when they add value

Regional subtags are useful when content varies by locale. If the distinction does not matter, keep the tag simple.

<html lang="en">

A minimal tag is easier to maintain and still valid for general English content. Use en-US or en-GB only when the locale matters.

Keep language changes close to the text they affect

When a single phrase or paragraph changes language, annotate that exact element instead of wrapping unrelated content.

<p>
  Learn more about <span lang="ja">日本語</span>
</p>

This makes your markup more precise and helps screen readers switch language at the right moment.

8. Limitations and Edge Cases

lang does not translate content. It only declares the language of the content you already wrote.
It does not replace hreflang, which is used for alternate-language links in navigation and SEO contexts.
It does not control character encoding. If text shows as broken symbols, that is usually an encoding problem, not a lang problem.
Screen readers usually inherit the nearest valid language ancestor, so nested language changes should be applied carefully.
HTML language tags are case-insensitive in practice, but lowercase forms like en and pt-BR are the usual convention.
Some browsers and tools may not visibly show the effect of lang, which can make it seem like nothing happened even when accessibility behavior improved.

If your page mixes many languages heavily, you may need more detailed content structure so each section gets the right language tag.

9. Practical Mini Project

Let’s build a small multilingual article page that uses lang correctly at the document level and for a short phrase in another language.

<html lang="en">
  <head>
    <title>Travel Tips</title>
  </head>
  <body>
    <main>
      <article>
        <h1>Travel Tips for First-Time Visitors</h1>
        <p>Before you travel, learn a few local phrases.</p>
        <p>
          The phrase <span lang="fr">merci beaucoup</span>
          means "thank you very much."
        </p>
      </article>
    </main>
  </body>
</html>

This example shows the main document in English, with a French phrase marked separately. That gives assistive technology a clear language boundary and keeps the page accessible.

10. Key Points

lang declares the language of HTML content.
Use it on <html> for the page default language.
Use it on smaller elements when a section switches language.
Choose valid language tags such as en, fr, or es-MX.
It improves accessibility, pronunciation, and language-aware browser features.
It does not translate text or affect styling.

11. Practice Exercise

Update the markup so it correctly declares the page language and marks the translated quote with its own language.

The page content is mostly English.
A quoted sentence in Spanish appears inside one paragraph.
Use lang on the root element and on the Spanish quote only.

Expected output: A valid HTML snippet where the whole page is English and the Spanish quote is wrapped with the correct language tag.

Hint: Put lang="en" on <html>, then add lang="es" to the quoted phrase.

Solution:

<html lang="en">
  <body>
    <p>
      The speaker said <span lang="es">muchas gracias</span>
      after the presentation.
    </p>
  </body>
</html>

12. Final Summary

The HTML lang attribute is one of the simplest and most important accessibility and internationalization features in web development. It tells tools what language your content uses, which helps with pronunciation, language selection, and browser behavior.

For most pages, the best practice is to set lang on the root <html> element and then override it only where the language changes. That keeps your markup accurate, readable, and friendly to assistive technologies.

As you build multilingual pages, pay attention to valid language tags and place language declarations as close as possible to the content they describe. Next, explore hreflang for alternate-language links if you are building a site with separate localized pages.