The HTML Lang attribute: what is it? Because it is important?

The HTML Lang attribute: what is it?  Because it is important?



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.

html lang attribute browser support

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.

search engine
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.

html only

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>

html lang fr

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:

linguistic subtags

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!







Source link

Related Posts

Leave a Reply

Open chat
Scan the code
Hello 👋
Can we help you?