HTML - DOM Element lang Property

Quiz

The HTML DOM Element lang property is used to get (retrieve) and set (update) the language of the current HTML document or any specific element.

In HTML, lang is an attribute that specifies the language code, such as 'en' for English or 'fr' for French, indicating the language of the content within that element.

Syntax

Following is the syntax of the HTML DOM Element lang (to set the property) −

element.lang = lang_code;

Here, the lang_code is the language of content within the element.

Use the following syntax to get the property −

element.lang

Parameters

Since this is a property, it will not accept any parameter.

Return Value

This property returns a string containing the value of the element's lang attribute.

Example 1: Retrieving the lang Property Value

The following is the basic example of the HTML DOM Element lang property. It displays the value of the 'lang' (language) property applied to the<html> element −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM Element lang</title>
</head>
<body>
<h3>HTML DOM Element lang Property</h3> 
<p id="ex">This paragraph is in English.</p>
<button onclick="displayLangAttribute()">Display Lang Property</button>
<div id="output"></div>
<script>
   function displayLangAttribute() {
      const my_ele = document.querySelector("html");
      const langAttribute = my_ele.lang;
      const res = `<p>Lang Attribute Value: ${langAttribute}</p>`;
      document.getElementById('output').innerHTML = res;
   }
</script>
</body>
</html>

The above program displays the "lang" property value in the HTML element.

Example 2: Setting the 'lang' Property to DIV

Following is another example of the HTML DOM Element lang property. We use this property to set the lang property value to the <div> element −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM Element lang</title>
</head>
<body>
<h3>HTML DOM Element lang Property Example</h3>
<p>Click the button to set lang property to "div" below.</p>
<div>Inside div</div><br>
<button onclick="set_prop()">Set "lang" Property</button>
<p id="res"></p>
<script>
   function set_prop() {
      let my_ele = document.querySelector('div');
      my_ele.lang = "fr";
      document.getElementById('res').innerHTML="lang property has been set";
   }
</script>
</body>
</html>

After executing the above program, the "lang" property is set to the "div" element.

Example 3: Displaying 'lang' Property in Various Sections

In the example below, we use the lang property to display its value in various sections −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM Element lang</title>
</head>
<body>
<h1>HTML DOM Element lang Property Example</h2>
<p>It displays the 'lang' property for both English and France 
paragraphs.</p>
<article id="article1" lang="en">
<h2 lang="en">Introduction</h2>
<p lang="en">This is the introduction paragraph in English.</p>
</article>
<article id="article2" lang="fr">
<h2 lang="fr">Introduction</h2>
<p lang="fr">Ceci est le paragraphe d'introduction en franais.</p>
</article>
<button onclick="displayLangAttributes()">Display Lang Property</button>
<p id="ot"></p>
<script>
   function displayLangAttributes() {
      const art=document.querySelectorAll('article');
      let res="<p><b>Lang Attributes:</b></p>";
      art.forEach(article => {
      const articleId = article.id;
      const articleLang = article.lang;
      res+=`<p>${articleId}-Lang:${articleLang}</p>`;
      });
      document.getElementById('ot').innerHTML =res;
   }
</script>
</body>
</html>

The above program displays the "lang" property value in various sections.

Supported Browsers

Property
lang	Yes	Yes	Yes	Yes	Yes

html_dom.htm

Print Page