Working with language in HTML

Intended audience: XHTML/HTML coders (using editors or scripting), script developers (PHP, JSP, etc.), CSS coders, and anyone who needs guidance on how to declare and use language information in HTML. It is assumed that you have a basic familiarity with HTML and CSS.

Updated

This tutorial gathers together and organizes pointers to articles that, taken together, help you understand the essential aspects of how to work with language information when authoring HTML and CSS.

In a nutshell

This section is for people in a hurry who just want to know the key recommendations from the tutorial. If you don't understand something, or if you want more detail, read the rest of the tutorial.

Always add a lang attribute to the html tag to set the default language of your page. If this is XHTML 1.x or an HTML5 polyglot document served as XML, you should also use the xml:lang attribute (with the same value). If your page is only served as XML, just use the xml:lang attribute.

Do not use the meta element with http-equiv set to Content-Language.

Choose tags from the IANA Subtag Registry, and follow the syntax rules in BCP 47 when using more than just a language subtag. Keep your language tags as short as possible.

Use the :lang property in CSS to apply styles dependent on the language of your content.

This material describes the latest thinking embodied in the HTML5 specification. While it is important to note that the HTML5 specification is still not completely stable, we do not expect that there will be anything that will change, or cause problems if it does.

Why declare language?

This part of the tutorial sets the motivation for reading the remainder. If you are in a hurry and just want to know what to do, without the theory, start reading from the section How to declare the language of a page or element.

Browsers and other applications can use information about the language of content to deliver to users the most appropriate information, or to present information to users in the most appropriate way. The more content is tagged and tagged correctly, the more useful and pervasive such applications will become.

Why use the language attribute? includes examples of how language information can be useful.

How to declare the language of a page or element

You should set the language of the text in your page using language attributes. Unfortunately, there is more than one attribute involved in some formats, and a few other things to clarify. This section discusses the various options: those you should use, and those you should avoid (and why).

Declaring language in HTML provides a summary of how to declare language using attributes. It includes the following:

HTTP headers, meta elements and language information describes how language metadata differs from the actual language of the text, and discusses Content-Language as used in HTTP headers and meta elements. It includes the following:

Working with language tags

This section looks at how to choose and create language tags, ie. the values used for language attributes.

To be sure that all user agents recognize which language you mean, you need to follow a standard approach when providing language values. You may also need to consider how to refer to dialectal differences in a standard way, eg. the difference between US English and British English, which diverge significantly in terms of spelling and pronunciation.

Language tags in HTML and XML describes the syntax of language tags using the specification BCP 47. It covers:

Choosing a Language Tag provides practical information about how to select the right subtags from the thousands available to represent the language you need. It covers:

Setting your browser's language preferences

When your browser pulls a document from the Web, it sends an HTTP request to the server where the information is stored. With the request, the browser sends information about its language preference settings. These preferences can determine what content is sent back to you. Learn how to set or change these preferences.

Setting language preferences in a browser covers:

Using language information to style your document

You often want to apply different styles to text in different languages (eg. font or line height information, or perhaps different emphasis styles, etc.) If you have used attributes to identify the language of your content, you can use some powerful selectors in CSS to automatically apply different styling to the content as the language changes. The following article explores the various options for doing so.

Styling using language attributes covers: