Define the Language of the Document

Defining the language of the document allows the following.

  • Text-to-speech engines, like screen readers, know how to read the text
  • Spell checkers know what language to use
  • Text styling

Here is a demonstration of how a screen reader user experiences a document without language attributes.

checkmark-smallDefining the language for an HTML5 or HTML 4 document

Source Code

<html lang="en-US">

checkmark-smallDefining the language for an XHTML document

Source Code

<html lang="en" xml:lang="en" xmlns= "http://www.w3.org/1999/xhtml">

checkmark-smallDefining multiple languages within a document with one predominant language

Source Code

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8">
    <title>Welcome - Bienvenue</title> 
  </head>
  <body>
    <h1>Welcome!</h1>
    <p>Lots of text in English...</p>
    <p lang="fr">Une petite quantité de texte en français...</p>
  </body> 
</html>

Good TechniqueDefining multiple languages within a document with the quantity of each language being roughly equally

Source Code

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Welcome - Bienvenue</title> 
  </head> 
  <body> 
    <div lang="en"> 
      <h1>Welcome!</h1> 
      <p>Lots of text in English...</p> 
    </div> 
    <div lang="fr"> 
      <h1>Bienvenue !</h1> 
      <p>Beaucoup de texte en français...</p> 
    </div> 
  </body> 
</html>

x-smallNot defining the language of the document.

If you do not define the language of the page, the user agent will default to using its own default language setting for rendering the page. If both the page and the user agent are in the same language everything will work fine, however, if for instance the user agent is set up for English and the page is in French, a user agent such as a screen reader will attempt to speak the French text like a bad American tourist.

Source Code

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Welcome - Bienvenue</title> 
  </head>
  <body>
    <h1>Welcome!</h1>
    <p>Lots of text in English...</p>
    <p>Une petite quantité de texte en français...</p>
  </body> 
</html>

x-smallSimply defining the language of the doctype.

Defining the language in the doctype declaration simply defines the language of the doctype schema, not the language of the page itself. You must also define the language of the page using one of the previous techniques.

Source Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Further Reading

For more information, please refer to the W3C documentation on specifying languages, from which these examples were created.