Definition and Usage

lang attribute specifies the primary language of an element's content and of any text-containing attributes.
Using this attribute provides language information for human-readable content that can be used by screen readers, browsers, and search engines.

Features

  • This is a global attribute that can be applied to any HTML element.
  • The lang attribute value is inherited by child elements.
  • The default value of the lang attribute is unknown, so it is recommended to always set this attribute to an appropriate value.
  • If the attribute value is an empty string (lang=""), the language is set to unknown.

Using the lang attribute provides the following benefits:

  • Allows screen readers to recognize the language of a web page and provide speech output in the appropriate language.
  • Enables browsers, such as Chrome, to automatically detect the page language for translation features.
  • Helps search engines identify the language of the web page and deliver search results in the corresponding language.

Examples

Le's look at some examples of using the lang attribute.

Specifying the Primary Language for a Page

To set the primary language of the page text, always use the lang attribute on the root <html> tag.

HTML 
<html lang="en">

The <html> tag is the top-level tag of the document, so it is not affected by inheritance from <head> or <body> tags.

When a Page Contains Content in Another Language

If a page contains content in a different language, add the lang attribute to the tag wrapping that content.

HTML 
<p>제목은 "<span lang="fr">Le Bon Usage</span>"입니다.</p>

Code Explanation
The <span> tag is an inline container with no inherent meaning, used to apply styles, attributes, or scripts to specific portions of text or inline content.

This allows you to specify a different language only for the content you want.

Things to Keep in Mind

There are a few points to be aware of when using the lang attribute.

Applies to Text-Containing Attributes as Well

The lang attribute specifies the primary language not only for a tag's content but also for all text-containing attributes.

In the example below, the lang attribute would cause both the content and the title attribute text to be interpreted as Spanish.
This is clearly incorrect.

HTML Bad code. Do not copy! 
<a lang="es" title="Spanish" href="qa-html-language-declarations.es">Español</a>

Instead, move text in a different language to a separate tag. In the following example, the <a> tag inherits lang="en" from the <html> tag.

HTML 
<a title="Spanish" href="qa-html-language-declarations.es">
    <span lang="es">Español</span>
</a>

When There Is No Appropriate Markup Around the Content

If you want to specify the language of certain content but there is no surrounding markup, you can use HTML tags such as <span>, <bdi>, or <div>. This allows you to explicitly define the language of that content.

HTML 
<p>This content is in Chinese: <span lang="zh-Hans">中国科学院文献情报中心</span>.</p>

lang Attribute Values

To ensure all user agents (browsers) can correctly recognize the language, follow standard conventions when specifying the lang attribute value. Also, consider how to reference dialect differences in a standard way, such as the spelling and pronunciation differences between American English and British English.

The lang attribute value corresponds to a "language tag" as described in the Tags for Identifying Languages (BCP47) specification.

These tags follow the formats below:

HTML Examples of lang attribute values 
<!-- Using only a language tag -->
<p lang="en">Hello!</p> <!-- Required -->

<!-- Using a language tag with a region subtag -->
<p lang="en-US">Hello!</p> <!-- Optional -->

<!-- Using a language tag with a script subtag -->
<p lang="ja-Kana">こんにちは</p> <!-- Optional -->
Format

Language Subtag

Required.
A two-letter code representing the language. For example, English is en, Spanish is es.

This code is listed in ISO 639-1.

Region Subtag

Optional.
Defines a regional variant of the language within the language tag. It consists of either two uppercase letters matching a country code or three digits matching a non-country region.

For example, en-US means "English used in the United States", and es-013 means "Spanish used in Central America".

You can find these region subtags in the Language subtag lookup.

Script Subtag

Optional.
Indicates the writing system of the language. Always four letters, with the first letter capitalized.

For example, ja-Kana indicates that the Japanese text is written in kana characters.

lang="en-US"

Indicates that the web page content is written in English as used in the United States.

en-US represents the regional American English, while en represents general English without specifying a region. The choice depends on the situation. If you want to emphasize a specific regional variant, en-US is recommended. Otherwise, using just en is sufficient for general English.

Browser compatibility

Browser compatibility for the lang Attribute
Attribute
Desktop Chrome
Chrome
DesktopDesktop Edge
Edge
Desktop Firefox
Firefox
Safari
Safari
lang 1 12 1 4

Specifications

Specification for the lang Attribute
Specification
lang HTML Standard
#attr-lang

References

See also