The lang attribute is used to define the language of the text content of an element. It is usually found on the HTML tag, where it is used to define the language of a web page.
Global Usage
The typical location that you have probably seen the lang attribute is on the HTML tag as follows.
<!doctype html>
<html lang="en">
...The above simply states the page language is English, however you can be more specific. For example, you say the page is in English United Kingdom.
<!doctype html>
<html lang="en-gb">
...As the lang attribute supports the full BCP47 syntax, you can be even more specific if you want. For example, German as used in Switzerland, orthography of 1901.
<!doctype html>
<html lang="de-CH-1901">
...Page Language Accessibility Criterion
WCAG Success Criterion 3.1.1 states the following.
The default human language of each Web page can be programmatically determined.
This means that you must have a lang attribute on HTML tag with a valid BCP47 language code in order to meet this criteria. Most automated testing tools will pick up on this if you have forgotten to add it.
Element Usage
A location where you might not have seen or used the lang attribute before is on elements. If some parts of your web page are in a different language to the one specified on the document, then you can add lang attributes to them.
<p lang="en-GB">My name is codeboosh.</p>
<p lang="fr">Je m'appelle codeboosh.</p>Element Language Accessibility Criterion
WCAG Success Criterion 3.1.2 states the following.
The human language of each passage or phrase in the content can be programmatically determined except for proper names, technical terms, words of indeterminate language, and words or phrases that have become part of the vernacular of the immediately surrounding text.
This means that if you have a bit of text content that is in a different language to the one that you set globally, then you must set the language of this content. This one is probably easier to miss if users are putting content into a content management system, so definitely one to watch out for.
So why use it?
Valid use of lang attributes let browsers know what language the page content is in, so that for example they may suggest translating the page. Also, some screen readers use this information to change how they pronounce different words and phrases.
Example BCP47 Language Codes
Here are a few example language codes, however there are many many more available.
- ar-SA Arabic Saudi Arabia
- de-DE German Germany
- el-GR Modern Greek Greece
- en-AU English Australia
- en-GB English United Kingdom
- en-IE English Ireland
- en-US English United States
- en-ZA English South Africa
- es-ES Spanish Spain
- es-MX Spanish Mexico
- fr-CA French Canada
- fr-FR French France
- he-IL Hebrew Israel
- hi-IN Hindi India
- hu-HU Hungarian Hungary
- id-ID Indonesian Indonesia
- it-IT Italian Italy
- ja-JP Japanese Japan
- ko-KR Korean Republic of Korea
- nl-BE Dutch Belgium
- nl-NL Dutch Netherlands
- no-NO Norwegian Norway
- pl-PL Polish Poland
- pt-BR Portuguese Brazil
- pt-PT Portuguese Portugal
- ro-RO Romanian Romania
- ru-RU Russian Russian Federation
- sv-SE Swedish Sweden
- zh-CN Chinese China
- zh-HK Chinese Hong Kong
- zh-TW Chinese Taiwan
The Internet Assigned Numbers Authority (IANA) maintain a database of language identifiers that contains many more examples.
