The HTML lang attribute specifies the language of the text content used on a web page. It is generally used to clearly signal what the on-page language is to avoid any confusion. 

 

Search engines use the lang attribute to return language-specific results to the searcher, and it also signals screen readers' pronunciation engine to switch to another language.

 

This article will help you understand the lang tag in HTML and its importance, what it does, how to implement it on your site, and does it impact SEO?

 

Ready? Let's begin.

 

What is the HTML Lang Attribute?

 

The HTML lang attribute is used to determine the language of the text used on any webpage. This attribute's primary purpose is to signal the language of the main document. 

 

It is also used by online readers that change languages to display the correct pronunciation and accent of the webpage content.

 

The HTML lang tag is supported by commonly used web browsers such as Chrome, Internet Explorer, Firefox, Safari, and Opera.

html lang attribute browser support

 

Here is the syntax of the HTML lang attribute:

 

< html lang = "language_code">

 

In the above syntax, language_code is used to specify the ISO language code.

 

For example, if the content language is English, then the language code should be “en”:

 

< html lang = "en">

 

Similarly, if the content is in the French language, the language code should be:

 

<html  lang = "fr">

 

In HTML 5, the lang attribute can be used with any HTML element like <p> and <h1>.

 

For example, if you have a webpage whose content is written in 4 different languages - English, French, Russian, and Spanish, then the correct lang codes can be specified like this:

 

<html lang="en"> ...
<body>
<p>This paragraph is in English.</p>
<p html lang="fr">ce paragraphe est en français</p>
<p html lang="ru">этот абзац на французском</p>
<p html lang="es">este párrafo está en francés</p>
</body> </html>

 

In the above code, search engines can clearly understand the language of four different paragraphs and display them in the SERP whenever appropriate.

 

Moreover, screen readers can pick the correct language and pronunciation for better accessibility for visually impaired users.

 

Why is the HTML Lang Attribute Important and Useful?

 

The HTML lang attribute is crucial because it helps search engines like Google, Bing, Yandex, and others to return language-specific results on the SERP.

search engines
Image source: Reliablesoft

 

If you have several versions of a webpage for different regions or languages, you should inform the search engines about these versions. This will help the search engines display the best version of your site based on their language or location.

 

Here are some of the top reasons why the HTML lang tag is useful:

 

  • It helps the search engines understand the correct language of the webpage. This improves the quality of the search results because the search engines can return results based on the searcher’s linguistic preferences.
  • Browser extensions and other software such as translation tools can use the lang tag to display the information in the correct language. 
  • Lang tags also let you vary the styling of the content by language. For example, you can set a specific font for a particular language. Besides, user agents can make automatic font selections based on the document's language.
  • Screen readers, speech synthesizers, and Braille translators use the lang attribute to produce output from the text. In countries such as the UK, the government enforces the use of correct lang tags according to W3C Web Accessibility Guidelines.

 

Does the HTML Lang Attribute Impact Your SEO?

 

This HTML lang attribute does not impact SEO because major search engines such as Google and Bing do not use this tag to filter search results based on language or location. 

 

Google uses the hreflang tag to determine the location and language of your content. 

 

Here is the syntax of the hreflang tag:

 

<link rel="alternate" hreflang="lang_code" href="url_of_page"/>

 

Or

 

<link rel="alternate" hreflang="en-gb">

 

Where en refers to English and gb refers to the United Kingdom. This means the page is for English-speaking users in the United Kingdom.

 

Similarly, Bing uses the “content-language” meta tag to understand the language of the document.

 

Here is the syntax of the “content-language” meta tag:

 

<meta http-equiv="content-language” content="">

 

Or

 

<meta http-equiv="content-language” content=”en-us”>

 

Where en refers to English and us refers to the United States. This means the page is for English-speaking users in the United States.

 

Therefore, the HTML lang attribute does not impact SEO. However, you should always use the lang tag because it affects user experience and helps to make your website W3C friendly. 

 

When handling multilingual websites, you should use the hreflang and the content-language tags for Google and Bing, respectively, depending on your target locations and search engines.

 

How to Implement Lang Attribute on Your Website

 

You can add the lang tag on a webpage by editing the source code.

 

You should always use the HTML element as a declaration to define language because HTML inherits all other elements on a page.

html lang attribute in source code

 

For example, if you wish to set French as the language of the entire webpage, then use this tag:

 

<html lang="fr">
<body>
<p>This is a webpage written in English.</p>
<h1>The h1 title tag</h1>
<image src=””>
</body>
</html>

html lang french

 

You can also specify the language of different paragraphs within a document. In this case, you need to use several HTML lang tags together. 

 

Here is an example of a page having two different languages:

 

<html lang="en">
<body>
<p>This is a paragraph written in English.</p>
<h1>...</h1>
<image src=””>
<p html lang="fr">ce paragraphe est en français</p>
<h1>...</h1>
<image src=””>
</body>
</html>

 

Moreover, if you want to specify the language of some content when there is no markup, use span, bdi or div. 

 

Here is an example: 

 

<p>Say hello in Korean as <span lang="ko">안녕하세요</span>.</p>

 

How to Choose Language Codes

 

You should always add the HTML lang attribute to set the default language of a webpage.

 

Browsers, search engines, and other apps can use this information to display information to the users most appropriately. 

 

When dealing with several languages, you need help choosing the correct codes for every location.

 

Here is the complete list of ISO language codes for every location:

 

Language ISO Code
Abkhazian ab
Afar aa
Afrikaans af
Akan ak
Albanian sq
Amharic am
Arabic ar
Aragonese an
Armenian hy
Assamese as
Avaric av
Avestan ae
Aymara ay
Azerbaijani az
Bambara bm
Bashkir ba
Basque eu
Belarusian be
Bengali (Bangla) bn
Bihari bh
Bislama bi
Bosnian bs
Breton br
Bulgarian bg
Burmese my
Catalan ca
Chamorro ch
Chechen ce
Chichewa, Chewa, Nyanja ny
Chinese zh
Chinese (Simplified) zh-Hans
Chinese (Traditional) zh-Hant
Chuvash cv
Cornish kw
Corsican co
Cree cr
Croatian hr
Czech cs
Danish da
Divehi, Dhivehi, Maldivian dv
Dutch nl
Dzongkha dz
English en
Esperanto eo
Estonian et
Ewe ee
Faroese fo
Fijian fj
Finnish fi
French fr
Fula, Fulah, Pulaar, Pular ff
Galician gl
Gaelic (Scottish) gd
Gaelic (Manx) gv
Georgian ka
German de
Greek el
Greenlandic kl
Guarani gn
Gujarati gu
Haitian Creole ht
Hausa ha
Hebrew he
Herero hz
Hindi hi
Hiri Motu ho
Hungarian hu
Icelandic is
Ido io
Igbo ig
Indonesian id, in
Interlingua ia
Interlingue ie
Inuktitut iu
Inupiak ik
Irish ga
Italian it
Japanese ja
Javanese jv
Kalaallisut, Greenlandic kl
Kannada kn
Kanuri kr
Kashmiri ks
Kazakh kk
Khmer km
Kikuyu ki
Kinyarwanda (Rwanda) rw
Kirundi rn
Kyrgyz ky
Komi kv
Kongo kg
Korean ko
Kurdish ku
Kwanyama kj
Lao lo
Latin la
Latvian (Lettish) lv
Limburgish ( Limburger) li
Lingala ln
Lithuanian lt
Luga-Katanga lu
Luganda, Ganda lg
Luxembourgish lb
Manx gv
Macedonian mk
Malagasy mg
Malay ms
Malayalam ml
Maltese mt
Maori mi
Marathi mr
Marshallese mh
Moldavian mo
Mongolian mn
Nauru na
Navajo nv
Ndonga ng
Northern Ndebele nd
Nepali ne
Norwegian no
Norwegian bokmål nb
Norwegian nynorsk nn
Nuosu ii
Occitan oc
Ojibwe oj
Old Church Slavonic, Old Bulgarian cu
Oriya or
Oromo (Afaan Oromo) om
Ossetian os
Pāli pi
Pashto, Pushto ps
Persian (Farsi) fa
Polish pl
Portuguese pt
Punjabi (Eastern) pa
Quechua qu
Romansh rm
Romanian ro
Russian ru
Sami se
Samoan sm
Sango sg
Sanskrit sa
Serbian sr
Serbo-Croatian sh
Sesotho st
Setswana tn
Shona sn
Sichuan Yi ii
Sindhi sd
Sinhalese si
Siswati ss
Slovak sk
Slovenian sl
Somali so
Southern Ndebele nr
Spanish es
Sundanese su
Swahili (Kiswahili) sw
Swati ss
Swedish sv
Tagalog tl
Tahitian ty
Tajik tg
Tamil ta
Tatar tt
Telugu te
Thai th
Tibetan bo
Tigrinya ti
Tonga to
Tsonga ts
Turkish tr
Turkmen tk
Twi tw
Uyghur ug
Ukrainian uk
Urdu ur
Uzbek uz
Venda ve
Vietnamese vi
Volapük vo
Wallon wa
Welsh cy
Wolof wo
Western Frisian fy
Xhosa xh
Yiddish yi, ji
Yoruba yo
Zhuang, Chuang za
Zulu zu

 

You can select a language code based on your target location and add it to the webpage.

 

If you wish to find subtags for regional languages, you can use a Language Subtag Lookup tool.

 

Enter the primary location code of your target location, and the tool will automatically fetch all the related subtags for that location.

 

Here is an example:

language subtags

 

Common Mistakes When Implementing HTML Lang Tags

 

Here are some of the most common mistakes made while using the HTML lang attribute:

 

  • Using an incorrect language code. For example, using ch for China, instead of zh.
  • Common typos when writing lang tag syntax. For example, writing <html lan="en"> instead of <html lang="en"> for English and or <html lang="tu"> instead of <html lang="tr"> for Turkish.
  • Adding incorrect country codes such as using country code before the language. For example, <html lang="bn-in”> is correct, while <html lang="in-bn”> is incorrect. The language should always precede the country code. To view the full list of country codes, you can visit this resource.

 

Conclusion

 

The HTML lang attribute is a vital element of your website. It doesn't matter if you serve users from different locations or not; using valid HTML lang attributes is crucial to improving your website's accessibility and user experience. 

 

If you are looking to improve the SEO of your website, then make sure to use the hreflang tag and content-language tag, respectively. 

 

I hope this HTML lang guide helped answer the commonly asked questions related to the HTML lang tag. 

 

Happy tagging!