Introduction
Web browsers read your HTML and display it according to the HTML <tag and attribute> used. One such attribute is the lang attribute which stands for the language of a piece of text. This attribute helps define the language of an element: the language that non-editable elements are written in, or the language that the editable elements should be written in by the user. Identifying the language of your content allows you to automatically do a number of things, from changing the look and the behavior of a page to extracting information, to changing the way an application works. Some language applications work at the level of the document as a whole, some work on appropriately labeled fragments of a document.
According to statistics, 20% of the world population speaks English. When developing a web application, developers do not want to limit the scope of their websites if they are created for everyone. Also, they do not want the browser to render the text in the wrong way due to the wrong interpretation.
Default language for web page
The default value of lang is unknown, therefore it is recommended to always specify this attribute with the appropriate value. This HTML attribute is used by various programs, search engines included, to help figure out what language the page is written in hence improving the search experience based on linguistic preferences. This is helpful when trying to match the right content to the right user hence providing a better User Experience.
We can tell the browser what the default language for the document is by defining the lang attribute in the html element. It will be inherited by all the other elements, and so will set a default language for the text in the document's head element.
For example:
<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<p>The default language of this documents is English</p>
</body>
</html> In the above example, defining the lang attribute in the <html> tag with the value "en"( HTML Language code for English), we choose English as our main language for this HTML document.
Defining language for an element
<tag lang = "attribute-value">Content</tag>
Take a look at the code snippet below:
<p id="en-GB" lang="en-GB">This paragraph is defined as British English.</p>
<p id="fr" lang="fr">Ce paragraphe est défini en français.</p> Here, the languages for the paragraph are defined as British English and French, respectively, regardless of the default language of the document. This way you can insert the text in a different language than the specified default one.
Let's take a look at a different example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello World!</title>
</head>
<body>
<p>Below are the translation of Hello World! in different languages</p>
<p>Russian - <span lang="ru">Привет мир!</span><br> <!-- 1 -->
French - <span lang="fr">Bonjour le monde!</span><br> <!-- 2 -->
German - <span lang="de">Hallo Welt!</span><br> <!-- 3 -->
Spanish - <span lang="es">Hola Mundo!</span><br></p> <!-- 4 -->
</body>
</html> In the above example, we define English as the default language for the HTML file. The first <p> tag contains English text but for the next paragraph tag, we define 4 different languages for four different spans independent of one another. This way we can have a multilingual website. Also, notice that the value of the lang attribute for different languages does not always have a connection with the name of the language so it is always better to look it up in HTML Language Code Reference.
Conclusion
Developers use the lang attribute to define the language for the document. The default value of the attribute is unknown, and it is always better to specify it so the browser does not display the wrong text. As the lang attribute is widely used, all modern web browsers support it.