Define the Language of the Document

Why it is important to define the language of the document

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

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.

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

Defining the language for an HTML5 or HTML 4 document

Source Code

<html lang="en-US">

Defining the language for an XHTML document

Source Code

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

Defining 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>

Defining 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>

Do not simply define 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.

Further Reading

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

Previous
Next