Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to add multi-language content in HTML?
The lang attribute in HTML allows you to specify the language of content within elements, enabling proper rendering, accessibility, and search engine optimization for multi-language websites. This attribute helps browsers, screen readers, and translation tools understand and process content correctly.
Syntax
Following is the syntax for the lang attribute −
<element lang="language-code">Content</element>
The language code follows the ISO 639-1 standard (two-letter codes like en, fr, es) or BCP 47 standard for more specific regional variants (like en-US, fr-CA).
Document-Level Language Declaration
The most important use of the lang attribute is declaring the primary language of the entire document by placing it on the <html> element −
<html lang="en"> <!-- Document content in English --> </html>
Example − Basic Multi-Language Content
Following example demonstrates adding content in multiple languages using the lang attribute −
<!DOCTYPE html> <html lang="en"> <head> <title>Multi-Language Content</title> </head> <body style="font-family: Arial, sans-serif; padding: 20px;"> <h1>Welcome Message in Different Languages</h1> <h2>English</h2> <p lang="en">This is demo text in English.</p> <h2>French</h2> <p lang="fr">Ceci est un texte de démonstration en français.</p> <h2>Spanish</h2> <p lang="es">Este es un texto de demostración en español.</p> <h2>German</h2> <p lang="de">Dies ist ein Demonstrationstext auf Deutsch.</p> </body> </html>
The output displays content in multiple languages with proper language identification −
Welcome Message in Different Languages English This is demo text in English. French Ceci est un texte de démonstration en français. Spanish Este es un texto de demostración en español. German Dies ist ein Demonstrationstext auf Deutsch.
Regional Language Variants
You can specify regional variants of languages using extended language codes that include country or region identifiers −
Example
<!DOCTYPE html> <html lang="en-US"> <head> <title>Regional Language Variants</title> </head> <body style="font-family: Arial, sans-serif; padding: 20px;"> <h1>Regional Language Examples</h1> <h2>American English</h2> <p lang="en-US">The color of the sweater is gray.</p> <h2>British English</h2> <p lang="en-GB">The colour of the jumper is grey.</p> <h2>Canadian French</h2> <p lang="fr-CA">Bonjour, comment allez-vous?</p> <h2>European French</h2> <p lang="fr-FR">Bonjour, comment ça va?</p> </body> </html>
Regional variants help distinguish between different spellings, pronunciations, and cultural expressions of the same language.
CSS Styling Based on Language
The lang attribute can be used as a CSS selector to apply different styles to content based on language −
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Language-Based CSS Styling</title>
<style>
p[lang="en"] {
color: blue;
font-style: normal;
}
p[lang="fr"] {
color: red;
font-style: italic;
}
p[lang="ar"] {
color: green;
direction: rtl;
text-align: right;
}
p[lang="zh"] {
color: purple;
font-family: "Microsoft YaHei", sans-serif;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h1>Language-Specific Styling</h1>
<p lang="en">Hello World in English</p>
<p lang="fr">Bonjour le monde en français</p>
<p lang="ar">????? ??????? ????????</p>
<p lang="zh">???????</p>
</body>
</html>
Each language displays with different colors and formatting. Arabic text appears right-to-left, and Chinese uses an appropriate font family −
Language-Specific Styling Hello World in English (blue, normal) Bonjour le monde en français (red, italic) ????? ??????? ???????? (green, right-aligned) ??????? (purple, Chinese font)
Common Language Codes
Following table shows commonly used language codes for the lang attribute −
| Language | Code | Regional Variant Example |
|---|---|---|
| English | en | en-US (American), en-GB (British) |
| French | fr | fr-FR (France), fr-CA (Canada) |
| Spanish | es | es-ES (Spain), es-MX (Mexico) |
| German | de | de-DE (Germany), de-AT (Austria) |
| Chinese | zh | zh-CN (Simplified), zh-TW (Traditional) |
| Japanese | ja | ja-JP |
| Arabic | ar | ar-SA (Saudi Arabia), ar-EG (Egypt) |
Mixed Language Content
When a document contains mixed languages, set the primary language on the <html> element and override it on specific elements that contain different languages −
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Mixed Language Document</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h1>International Phrases</h1>
<p>The French phrase <span lang="fr">"Bonjour tout le monde"</span> means "Hello everyone" in English.</p>
<p>In Spanish, we say <span lang="es">"¡Hola mundo!"</span> to greet the world.</p>
<p>The German equivalent is <span lang="de">"Hallo Welt!"</span> which has the same meaning.</p>
<blockquote lang="zh">
<p>??????????????</p>
</blockquote>
</body>
</html>
This approach allows assistive technologies and browsers to handle each language phrase appropriately within the primarily English document.
Conclusion
The lang attribute is essential for creating accessible, SEO-friendly multi-language websites. Always declare the primary language on the <html> element and use specific language codes on individual elements containing different languages. This ensures proper rendering, accessibility, and functionality across different browsers and assistive technologies.
4K+ Views
