Identify the language of the page or content

Applicable Role(s): Developer

Overview

Identifying the language of the page, or inline content as needed, is important for assistive technology so they can present content with the right pronunciation and spelling. It can also help browsers present the content in line with the user's settings.

Best Practices and Tips

  • Apply a lang attribute to the <html> element on all pages.
  • If part of a paragraph or other inline text switches into another language, indicate that in the element.
  • The language code needs to be valid. See the IANA listing of possible lang values.

Examples/Patterns

Global lang on <html> element

By default, a lang="[value]" attribute should be applied to all pages, containing a valid language code value.

<html lang="en">

For multiple countries that speak a similar language and have regional differences, a region value can help further clarify how to parse and pronounce the text. 

<html lang="[language]-[region]">

Example:

  • <html lang="es"> for traditional Spanish/Castilian, or <html lang="es-GT"> for Guatamalan Spanish
  • <html lang="en-CA"> for Canadian English, or <html lang="en-AU"> for Australian English

Inline lang in text

Part of a paragraph is in French, so a <span> with a French lang attribute of is applied to that part.

<p>It has a certain <span lang="fr">je ne sais quois.</span></p>

Note

Do not apply a lang attribute to the following tags: 

  • <applet>
  • <base>
  • <basefont>
  • <br>
  • <frame>
  • <frameset>
  • <iframe>
  • <param>
  • <script> 

The lang attribute is not valid on these elements.