Multilingual Content

Languages Other Than English

When content is presented in a language other than English, the lang attribute must be used to indicate the language to the browser. This applies whether the content is a single word or an entire page. The value of the lang attribute should be the language's language tag. Choosing a language tag [W3C website] can be a complex topic, but we most commonly use en (English) and es (Spanish).

When providing the contents of a page in multiple languages, it is recommended to provide the whole page in each language, with each version linking to the other versions in a prominent location. The links to the versions of the current page in other languages should be in the destination language and placed, so readers who don't understand the current language can more easily find the content in their desired language. For example, a link to a Spanish version of this page would use the word "Español" rather than "Spanish", and the Spanish version of the page would have a link back to the English version which uses the word "English".

Why Only for Other Languages?

The page templates have been configured to include lang="en" on the page's <html> element, so users don't have to deal with these details when creating pages with content in English. Since most of our sites are designed with English content in mind, this works for the majority of our content. We have attempted to make it possible for users to build multilingual sites, but internationalization of web content [W3C website] is a complex topic which should be thoroughly considered when doing so.

Creating a Page in Another Language

A language-code directory variable has been created to help with the process of creating pages in different languages. Ideally, all of the pages for your site would also exist in each additional language, and you would have a section named after that language's language code to house the content in that language. The page names and sub-sections within that section would all be named in that language. By applying the language-code directory variable to the section named after that language code, all of the pages within that section would have the lang attribute on their <html> elements set appropriately.

For this to work properly, all of the site's navigation and header/footer content also needs to be internationalized and a number of other directory variables will need to be used to configure the section to use that content.

Using Other Languages on Predominantly English Pages

If content is presented in another language on a page which predominantly uses English, then you need to add the lang attribute to an element that contains the content. In most cases, you will either apply the attribute to an existing element or add a div or span to contain the content.

When linking to a page in another language, you generally should apply a title attribute to the <a> element which uses the language of the current page, then surround the link text (which should be in the destination language) with a span with the lang attribute applied to it, e.g.

<a title="Spanish" href="/es/conozca-a-la-presidenta"><span lang="es">Español</span></a>