The HTML lang attribute specifies the language of an element’s content. It helps browsers, search engines, screen readers, and other tools understand which language is being used on a webpage.
For example, if your website content is written in English, you can set the language to English using lang="en". If your content is written in Telugu, you can use lang="te".
In this tutorial, you will learn how to use the HTML lang attribute, choose language codes, and improve the accessibility of your website.
What Is the HTML Lang Attribute?
The lang attribute identifies the language of the text contained within an HTML element. It is a global HTML attribute, so you can use it with most HTML elements.
Here is a simple example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Lang Attribute</title>
</head>
<body>
<h1>Welcome to Web4Learners</h1>
<p>Learn HTML step by step.</p>
</body>
</html>
In this example, lang="en" tells browsers and assistive technologies that the primary language of the page is English.
For more information about attributes that can be used across HTML elements, read our guide to HTML global attributes.
HTML Lang Attribute Syntax
The basic syntax is:
<tagname lang="language-code">Content</tagname>
The language code identifies the language of the content.
For example:
<p lang="en">Hello, welcome!</p>
<p lang="te">నమస్కారం!</p>
<p lang="hi">नमस्ते!</p>
These examples identify the content as English, Telugu, and Hindi, respectively.
Common HTML Language Codes
Here are some commonly used language codes:
| Language | Code |
|---|---|
| English | en |
| Telugu | te |
| Hindi | hi |
| Tamil | ta |
| Spanish | es |
| French | fr |
| German | de |
| Arabic | ar |
| Japanese | ja |
| Chinese | zh |
You can also use more specific language tags when appropriate. For example, en-US identifies US English, while en-GB identifies British English.
Choose a language tag that accurately represents the content.
Using Different Languages on One Webpage
A webpage can contain content in multiple languages. You can apply the lang attribute to individual elements to identify each section’s language.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Multilingual Webpage</title>
</head>
<body>
<h1>Welcome</h1>
<p lang="en">This paragraph is written in English.</p>
<p lang="te">ఈ పేరా తెలుగులో ఉంది.</p>
<p lang="hi">यह पैराग्राफ हिंदी में है।</p>
</body>
</html>
The page’s default language is English, but the other paragraphs specify their own languages.
This is useful for multilingual websites, educational content, and pages that include translated quotations.
Why Is the HTML Lang Attribute Important?
The lang attribute supports several important functions:
- Accessibility: Screen readers can use language information to select suitable pronunciation rules.
- Browser behavior: Some browser features may use the language information to handle text appropriately.
- Search engines: Language information can help systems interpret page content, although it does not guarantee a particular ranking.
- Multilingual content: It identifies sections written in different languages.
- Text processing: Translation tools and other software can use language metadata to interpret content.
For accessibility, it is generally recommended to specify the primary language on the root <html> element.
Difference Between the Lang Attribute and the Title Attribute
The lang and title attributes serve different purposes.
| Feature | Lang Attribute | Title Attribute |
|---|---|---|
| Purpose | Identifies the language of content | Provides additional advisory information |
| Example | lang="en" | title="More information" |
| Main use | Accessibility and language identification | Additional context about an element |
You can learn more about the HTML title attribute to understand how it provides extra information about elements.
Frequently Asked Questions
Is the HTML lang attribute required?
It is not required for every individual element, but specifying the primary language on the <html> element is strongly recommended for accessibility.
Can I use the lang attribute on a paragraph?
Yes. You can use it on a paragraph, heading, link, or many other HTML elements to identify the language of their content.
What does lang="en-US" mean?
It identifies US English. The en part represents English, and US identifies the regional variation.
Does the lang attribute translate a webpage?
No. The lang attribute identifies the language; it does not translate the content. You must provide the translated text yourself or use an appropriate translation system.
Can one HTML document have multiple language attributes?
Yes. You can set a default language on the <html> element and specify different languages on individual elements where necessary.