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 specify the language of the element's content in HTML?
The lang attribute in HTML specifies the language of an element's content. This attribute helps browsers, search engines, and screen readers understand the language being used, enabling proper text-to-speech pronunciation, spell checking, and search engine optimization.
Syntax
Following is the syntax for using the lang attribute −
<element lang="language-code">Content</element>
The language-code is typically a two-letter ISO 639-1 code (like "en" for English, "fr" for French) or a more specific variant (like "en-US" for American English).
Common Language Codes
Following are some commonly used language codes −
en− Englishfr− Frenches− Spanishde− Germanit− Italianja− Japanesezh− Chinesear− Arabichi− Hindi
Document-Level Language Declaration
The most common use of the lang attribute is on the <html> element to declare the primary language of the entire document.
Example
<!DOCTYPE html> <html lang="en"> <head> <title>Document Language Example</title> </head> <body style="font-family: Arial, sans-serif; padding: 10px;"> <h1>Welcome to Our Website</h1> <p>This entire document is in English.</p> </body> </html>
This declares English as the primary language for the entire HTML document.
Element-Level Language Specification
You can specify different languages for individual elements within a document when content contains multiple languages.
Example − Multiple Languages
<!DOCTYPE html> <html lang="en"> <head> <title>Multiple Languages Example</title> </head> <body style="font-family: Arial, sans-serif; padding: 10px;"> <h1>Multilingual Content</h1> <h2>English</h2> <p lang="en">The Best E-Way Learning.</p> <h2>French</h2> <p lang="fr">Le meilleur apprentissage E-Way.</p> <h2>Spanish</h2> <p lang="es">El mejor aprendizaje E-Way.</p> </body> </html>
The output displays content in three different languages, each properly tagged −
Multilingual Content English The Best E-Way Learning. French Le meilleur apprentissage E-Way. Spanish El mejor aprendizaje E-Way.
Example − Mixed Language Quotes
Following example shows how to handle quotes or phrases in different languages within the same paragraph −
<!DOCTYPE html>
<html lang="en">
<head>
<title>Mixed Language Content</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px; line-height: 1.6;">
<h1>Famous Quotes in Different Languages</h1>
<p>The French say <span lang="fr">"Bonjour le monde"</span> while Germans say <span lang="de">"Hallo Welt"</span> for "Hello World".</p>
<p>In Spanish, <span lang="es">"Hola Mundo"</span> means the same thing.</p>
<blockquote lang="it">
"La vita è bella" - Life is beautiful (Italian proverb)
</blockquote>
</body>
</html>
This example shows how different parts of the content can have specific language declarations for proper pronunciation by screen readers.
Regional Language Variants
The lang attribute also supports regional variants of languages using extended language codes.
Example − Regional Variants
<!DOCTYPE html> <html lang="en-US"> <head> <title>Regional Language Variants</title> </head> <body style="font-family: Arial, sans-serif; padding: 10px;"> <h1>Regional Language Examples</h1> <p lang="en-US">Color, flavor, organize (American English)</p> <p lang="en-GB">Colour, flavour, organise (British English)</p> <p lang="zh-CN">???? (Simplified Chinese)</p> <p lang="zh-TW">???? (Traditional Chinese)</p> <p lang="pt-BR">Português brasileiro</p> <p lang="pt-PT">Português europeu</p> </body> </html>
Regional variants help browsers and assistive technologies provide more accurate language processing for specific regions.
Common Language Codes Reference
| Language | Code | Regional Variants |
|---|---|---|
| English | en | en-US, en-GB, en-AU, en-CA |
| Spanish | es | es-ES, es-MX, es-AR |
| French | fr | fr-FR, fr-CA, fr-BE |
| German | de | de-DE, de-AT, de-CH |
| Chinese | zh | zh-CN, zh-TW, zh-HK |
| Portuguese | pt | pt-BR, pt-PT |
CSS Styling Based on Language
CSS can apply different styles based on the language attribute using the :lang() pseudo-class selector.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Language Styling</title>
<style>
p:lang(en) { color: blue; font-weight: bold; }
p:lang(fr) { color: red; font-style: italic; }
p:lang(es) { color: green; text-decoration: underline; }
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h1>Language-Based Styling</h1>
<p lang="en">This English text is blue and bold.</p>
<p lang="fr">Ce texte français est rouge et en italique.</p>
<p lang="es">Este texto español es verde y subrayado.</p>
</body>
</html>
The output shows different styling applied based on the language attribute −
Language-Based Styling This English text is blue and bold. (blue, bold) Ce texte français est rouge et en italique. (red, italic) Este texto español es verde y subrayado. (green, underlined)
Conclusion
The lang attribute is essential for creating accessible, SEO-friendly web content. It should be declared at the document level on the <html> element and on individual elements when content switches languages. This enables proper text-to-speech pronunciation, improved search engine indexing, and better user experience across different languages and regions.
485 Views
