demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

CSSslidy: an auto-generated #RWD image slider. 1.5K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

侘寂

Language Support In HTML

html / typography

Estimated reading time: 2 minutes, 18 seconds

Defining the language you are using on a HTML page makes it easier for browsers, speech synthesizers, search engines and online services to understand, present, and translate your content. Generally speaking, you should declare the language of a document by specifying the lang attribute on the <html> element:

<html lang="en">

(You’ll note that I use this approach in my HTML5 boilerplate example.)

The language code is a two-letter acronym that follows ISO 639-1, an international standard for defining every known human language. (You can find a complete list of 639-1 language codes at Wikipedia or IANA). If you are using a specific dialect or derivation of a language, you can also add a sub-code. Often, this sub-code follows the ISO-3166-1 specification (which, interestingly, matches the country’s assigned TLD):

<html lang="en-US"> (“US English”)

<html lang="fr-CA"> (“Canadian French”)

But the sub-code can be specified in other ways:

<html lang="en-cockney">
<html lang="X-klingon">

The W3C suggests that older methods, such as declaring the language in a pragma directive or specifying it in the site’s .htaccess file, which you will find many references to online, should no longer be used.

Language declaration becomes interesting when you are mixing languages on a web page. You can define the fact that you are using multiple languages on the same page by separating the values for each language with commas:

<html lang=en,fr>

Alternatively, you could define a single default language, then switch to another language for a particular element:

<figure>
<blockquote lang="la">Idcirco, quod non animadvertit ea, quae in alius animo aguntur, non facile quisquam repertus est infelix; illos autem, qui sui animi motus non percipiunt, necesse est infelices esse.</blockquote>
<p>Through not observing what is in the mind of another a man has seldom been seen to be unhappy; but those who do not observe the movements of their own minds must of necessity be unhappy.</p>
<figcaption>Marcus Aurelius, The Meditations</figcaption>
</figure>

(Note that in this scenario lang is only effective for the element it is applied to. Once that tag closes, the page goes back to assuming we are writing in the language specified in the html tag. Also note that the directionality of language in HTML is a separate issue.)

In the past it’s been common for small sites with multiple region support to make a separate page for each language, significantly raising the amount of work required to create and maintain the site. Thankfully CSS3 introduces the lang selector, which allows web developers to easily switch the appearance and visibility of different languages written on the same page.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.