Content index
What is HTML lang attribute?
Why is the HTML lang attribute important and useful?
Does HTML lang attribute affect SEO?
How to implement the lang attribute on your website
How to choose language codes
Common mistakes when implementing html lang tags
Conclusion
The HTML lang attribute specifies the language of text content used in a web page. It is generally used to clearly indicate what language is on the page to avoid any confusion.
Search engines use the lang attribute to return language-specific results to the search engine, and it also instructs the screen reader’s speech engine to switch to another language.
This article will help you understand the HTML lang tag and its importance, what it does, how to implement it on your site, and if it affects SEO.
Ready? let’s begin
What is the HTML Lang Attribute?
The HTML lang attribute is used to determine the language of text used on any web page. The main purpose of this attribute is to signal the language of the main document.
It is also used by online readers who switch languages to display the correct pronunciation and accent of web page content.
The HTML lang tag is supported by commonly used web browsers such as Chrome, Internet Explorer, Firefox, Safari and Opera.
This is the syntax for the html lang attribute:
<html lang = "language_code">
In the syntax above, you use language_code
to specify the ISO language code.
For example, if the content language is English, the language code should be “en”:
<html lang = "en">
Similarly, if the content is in French, the language code should be:
<html lang = "fr">
In HTML 5, the lang attribute can be used with any HTML element, such as
And
.
For example, if you have a web page whose content is written in 4 different languages (English, French, Russian and Spanish), you can specify the correct language codes as follows:
<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 español</p>
</body></html>
In the above code, search engines can clearly understand the language of four different paragraphs and display them in the SERP when appropriate.
Additionally, screen readers can choose the correct language and pronunciation for better accessibility for visually impaired users.
Why is the HTML Lang attribute important and useful?
The lang HTML attribute is essential because it helps search engines like Google, Bing, Yandex and others to return language specific results in the SERP.
Image source: Reliable software
If you have multiple versions of a web page for different regions or languages, you should inform search engines of these versions. This will help search engines display the best version of your site based on your language or location.
Here are some of the main reasons the HTML lang tag is useful:
- It helps search engines understand the correct language of the webpage. This improves the quality of search results because search engines can return results based on the user’s language preferences.
- Browser extensions and other software, such as translation tools, can use the lang tag to display information in the correct language.
- Lang tags also allow you to vary the style of the content based on the language. For example, you can set a specific font for a certain language. In addition, user agents can make automatic character selections based on the language of the document.
- Screen readers, speech synthesizers, and Braille translators use the lang attribute to produce output from text. In countries like the UK, the government mandates the use of proper lang tags based on the W3C Guidelines for Web Accessibility.
Does HTML Lang Attribute Affect Your SEO?
The HTML lang attribute doesn’t affect SEO because major search engines like Google and Bing don’t use this tag to filter search results based on language or location.
Google uses the tag hreflang to determine the location and language of your content.
Here is the syntax for the hreflang tag:
<link rel="alternate" hreflang="lang_code" href="https://www.seoptimer.com/es/blog/html-lang/url_of_page"/>
OR
<link rel="alternate" hreflang="en-gb">
Where en
refers to English and gb
refers to the United Kingdom. This means that the page is for English-speaking users in the UK.
Similarly, Bing uses the “content-language” meta tag to understand the language of the document.
Here is the syntax for 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 that the page is for English-speaking users in the United States.
Therefore, the HTML lang attribute does not affect SEO. However, you should always use the lang tag because it affects user experience and helps make your website W3C compliant.
When managing multilingual websites, you should use the hreflang and 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 to a web page by editing the source code.
You should always use the HTML element as a declaration to define the language, as HTML inherits all other elements of a page.
For example, if you want to set the language for the entire web page to French, 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>
You can also specify the language of different paragraphs within a document. In this case, you must use multiple HTML language tags together.
Below you can see an example of a page that has 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>
Also, if you want to specify the language of some content without markup, use span, bdi, or div.
For example:
<p>Say hello in Korean as <span lang="ko">
안녕하세요
</span>.</p>
How to choose language codes
You should always add the lang HTML attribute to set the default language of a web page.
Browsers, search engines, and other applications can use this information to display information to users in the most appropriate way.
When it comes to multiple languages, you need help choosing the right codes for each location.
Here is the complete list of ISO language codes for each location:
Tongue | ISO code |
---|---|
abjaso | ab |
Distant | aa |
Afrikaans | From |
Acan | AND |
Albanian | sqm |
amharic | I am |
Arabic | ar |
Aragonese | A |
Armenia | hy |
Assamese | AS |
Avarice | From |
Avestan | ae |
Aymara | AND |
Azerbaijani | THE |
They wear it | bm |
Basir | ba |
Vasco | European Union |
Belarusian | To be |
Bengali (Bengali) | bn |
Bihar | Well |
Bislam | bi |
bosnia | bs |
Breton | Brother |
Bulgarian | bg |
Burmese | My |
Catalan | about |
Camorro | Postal Code |
Chechen | there is |
Chichewa, Chewa, Nyanja | THE |
stooped | zh |
Simplified Chinese) | zh-Hans |
Traditional Chinese) | zh-Hant |
shower | CV |
Cornish | kw |
Course | co |
Cree | cr |
Croatian | Now |
Czech | cs |
Danish | AND |
Divehi, Dhivehi, Maldives | dv |
Dutch | nl |
Zongkha | dz |
English | In |
Esperanto | eo |
Estonia | et |
Sheep | YES |
Fierce | fo |
Fiiano | fj |
Finnish | fi |
French | fr |
Fula, Fulah, Pulaar, Pular | ff |
Gallego | gl |
Gaelic (Scottish) | gd |
Gaelic (Manx) | jn |
Georgian | THE |
German | From |
Greek | He |
Greenland | kl |
Guarani | gn |
gujarati | OJ |
Haitian Creole | ht |
Hausa | ha |
Jewish | He |
Herero | hz |
Hindi | HI |
National Seal | TO |
Hungarian | uh |
Icelandic | AND |
I do | I |
Ibo | ig |
Indonesian | inside |
Interlanguage | I |
Interlanguage | Meaning what |
Inuktitut | I |
The Inupia | I |
irish | ga |
Italian | It |
Japanese | AND |
Javanese | jv |
Greenlandic fishing boats | kl |
Kannada | no |
Kanuri | kr |
Kashmir | ks |
kazakh | kk |
Jemer | km |
Kikuyu | TO |
Kinyarwanda (Rwanda) | rw |
Still | rn |
Kyrgyzstan | ky |
Come on | kv |
Congo | kg |
Korean | AND |
Kurdish | TO |
Animal | kj |
Laos | Here you are |
Latin | THE |
Latvian (Latvian) | lev |
Limburgish (Limburgish) | there |
lingala | ln |
Lithuanian | lt |
Upper Katanga | lu |
English, Ganda | LG |
Luxembourgish | lb |
Hands | jn |
Macedonian | mk |
Malagasy | mg |
Distant | SM |
malayalam | ml |
Maltese | mt |
Maori | me |
Marathi | Mr |
Marshals | mh |
Moldovan | mo |
Mongolian | mn |
Nauru | Already |
Navajo | nv |
Pray | From |
Northern Ndebele | na |
Nepalese | And |
Norwegian | NO |
Norwegian bokmal | NB |
Norwegian Nynorsk | nos |
new | ii |
Occitan | oc |
Ojibwe | gu |
Old Church Slavonic, Old Bulgarian | cu |
Oria | OR |
Oromo (English) | From |
I heard it | os |
Pali | pi |
Pashto, Pushto | ps |
lost (farsi) | does |
Polish | pl |
Portuguese | pt |
Punjabi (Eastern) | Pope |
Quechua | That |
Romansh | rm |
Romanian | ro |
Russian | ru |
Sami | with |
samoan | sm |
Sango | sg |
Sanskrit | ON |
Serbia | mr |
Serb Croat | sh |
English | st |
English | tn |
Shona | sn |
Sichuan Yi | ii |
Sindhi | SD |
sinhalese | AND |
Sisvati | ss |
Slovak | sk |
Slovenian | sl |
somali | AS |
Southern Ndebele | no |
Español | eg |
Sundanes | I am |
Swahili (Swahili) | sw |
Swati | ss |
Swedish | sv |
tree trunk | tl |
Tahitian | ty |
We have lost it | tg |
Tamil | in front of |
Tartar | tt |
telugu | THE |
Thai | th |
Tibetan | bo |
tiger | From |
Tonga | TO |
Tonga | ts |
Turkish | tr |
Turkmen | tk |
Twi | tw |
uyghur | AND |
Ukrainian | UK |
Urdu | eur |
Uzbek | TO |
Sale | fri |
Vietnamese | YOU |
Volapük | vo |
Walloon | From |
Welsh | cy |
Wolof | trouble |
West Frisian | fy |
xosa | xh |
Yiddish | yi, ji |
Yoruba | yo |
Zhuang, Chuang | For |
Zulu | TO |
You can select a language code based on your target location and add it to your website.
If you want to find subtags for regional languages, you can use a language subtag finder.
Enter the main location code of the target location and the tool will automatically find all related subtags for that location.
For example:
Common mistakes when implementing lang HTML tags
Here are some of the most common mistakes made when using the HTML lang attribute:
- Using incorrect language code. For example, use ch for China instead of zh.
- Common typos when writing lang tag syntax. For example, write instead of for English and/or instead of for Turkish.
- Adding wrong country codes, for example using the country code before the language. For example, is correct, while it’s incorrect. The language must always precede the country code. To view the complete 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 attributes is crucial for improving the accessibility and user experience of your website.
If you’re looking to improve your website’s SEO, make sure you use the hreflang tag and content language tag respectively.
I hope this HTML lang guide helped you answer the most frequently asked questions about the HTML lang tag.
Happy tagging!