Skip to content
Related Articles

Related Articles

Improve Article

How to serve a page with content in multiple languages ?

  • Last Updated : 28 Jul, 2021

In this article, we will see how the page content can be served in multiple languages. We can set the language in the HTML document by setting the lang attribute in the code. By default, the specified language is English, but it can be changed at our convenience. There is a way to change the content language by using Google for that, you can check this article, How To Add Google Translate Button On Your Webpage?
By default:

<html lang="en">

To change the language, just simply set the lang attribute. We can define it anywhere in the document, such as in the body, in the paragraph, in the heading, or in the span tag. But the best practice is to set the lang in the span tag.

  • Example 1: Like here, we have changed the language to French in the span tag.

    <p> French " <span lang="fr"> Bonjour </span> " </p>
  • Example 2:

    <p> Spanish " <span lang="es">Hola</span> "</p>

Now let’s see the whole HTML code through which we can understand it more properly. Please note that by changing the lang attribute, the visual of the HTML document remains the same. The only difference will be there in the translation of that language.



To accomplish this task, we have 2 ways to achieve the same result. The first that we are following the below approach in which Html lang attribute is setting to either in English language or in French language or any suitable language & the second approach, we will use the google translate API reference & will add this API to our Html code. Let’s start the discussion with our first approach.

In below, there are two examples showing that what happens when you change the language of your HTML document other than your browser language. In the first example, the HTML document is serving in the “ENGLISH” language whereas in the second example the HTML document is serving in the “FRENCH” language.

Example 1: HTML document in the English language

HTML




<!DOCTYPE html>
<html lang="en">
  
<body>
    <p>
        We can use different languages in the HTML
        document simply by defining the
        "lang" property
    </p>
  
    <p>French " <span lang="fr">Bonjour</span> "</p>
    <p>Spanish " <span lang="es">Hola</span> "</p>
    <p>Hindi " <span lang="hi">नमस्ते</span> "</p>
</body>
  
</html>

Output:

Output when the English language is used

Example 2: HTML document with a different language ( other than English) ( here French is used )

HTML




<!DOCTYPE html>
<html lang="fr">
  
<body>
    <p>
        We can use different languages in the HTML
        document simply by defining the
        "lang" property
    </p>
  
    <p>French " <span lang="fr">Bonjour</span> "</p>
    <p>Spanish " <span lang="es">Hola</span> "</p>
    <p>Hindi " <span lang="hi">नमस्ते</span> "</p>
  
</body>
  
</html>

Output: Here, you can see that there is no difference in the HTML document. It will look exactly the same excluding whether the language is English or French. The only difference is, that the browser will be able to understand or identify that the language of the whole HTML document is either French or English or some other language, and based on that, it will translate the page into your preferred language.

Language translation

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :