How to Specify Language in HTML5?

Problem

You want to use a specific language in the HTML document. It might be English, German, Spanish, or any other language.

Solution

The Syntax:
To specify a language that you’ll use in an element, add the following attribute in the opening tag of that element-

lang=”language-code”

Here, language-code is the value of the lang attribute which is a two-letter abbreviated way of specifying language.

Example:
The following code specifies that the primary language used to write content inside the entire document is English.<

...
html lang=”en”>
...

Things you should know about language declaration·

  • Declaring English as primary language is optional but recommended
    If the primary language is English, you don’t need to declare it in the html element. Browsers, screen readers will pick it by default. But, it’s a good practice to mention it.·
  • Declare the primary language in HTML element not in body element
    You might think as the texts are written in body element, why not we declare lang attribute in the body element. Well, declaring lang in body element will not cover the document header ex. title text. So, declare lang attribute in the root element – the html element.·
  • You can also declare dialect of a language
    If you want to use a dialect of a language, just add a dash and the dialect code after that language code. For example, the following first code is for declaring US English, and second one is for British English.
    <html lang=”en-US”>
    <html lang=”en-GB”>
  • You can declare languages in any HTML element
    lang attribute can be written in any element. Suppose your want to add Spanish in one of the paragraphs of your document. You can add the lang attribute in the opening <p> tag, though the primary language of the entire document is different. See the example below-

    <!DOCTYPE html>
    <html lang=”en”>
    <head>
    <meta charset=”uft-8” />
    <title>Document with multiple languages</title>
    </head>
    <body>
    <p>The texts inside this paragraph is written in English.</p>
    <p lang=”es”> Los textos dentro de este párrafo está escrito en español.</p>
    <body>
    </html>
    

    In the above example, the primary language is English, but, the language used in the second paragraph is Spanish.

  • Declaring language is helpful for screen reader
    if you use different languages in your document, but, don’t specify these with the lang attributes, screen reader programs that read the text aloud may find it difficult to understand the languages. Specifying the language with lang attribute will help screen reader software to switch to the right mode.
  • Declaring language is helpful for searchers
    If you declare language, search engine will tell users which language the site is written in.