Working with language in HTML (tutorial)

Why should you read this?

Information about the language in use on a page is important for accessibility, styling, searching, and other reasons. In addition, language information that is typically transmitted between the user agent and server can be used to help improve navigation for users and the localizability of your site. This tutorial will help you take advantage of the opportunities that are available now and in the near future by declaring language information appropriately.

Objectives

When you have finished this tutorial you should:

Intended audience: HTML coders, script developers, 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.

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

Always add a lang attribute to the html tag to set the default language of your page.

<html lang="en">

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 pseudo-class in CSS to apply styles dependent on the language of your content.

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.

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.

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.

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

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

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