# HTML lang Attribute: Set the Language of a Web Page

Source: https://devdocs10.com/articles/html/html-lang  
By Murat Bo · Published 2026-10-12 · DevDocs10 (https://devdocs10.com)

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

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
<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
<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
<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
<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
<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
<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
<html>
  <body>
    <p>Hello, world!</p>
  </body>
</html>
```

**Fix:** Declare the main language on `<html>`.

```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
<html lang="english">
  <body>
    <p>Welcome</p>
  </body>
</html>
```

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

```html
<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
<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
<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
<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
<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.

```html
<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
<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
<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.