What's the difference between the lang attribute and the <meta http-equiv="Content-Language" content="en-US"> tag?
I was wondering what's the significance of using the "lang" attribute and how that differs from using the meta "Content-Language" tag?
Consider the following code:
<html lang="en">
<head>
<meta http-equiv="Content-Language" content="en-US">
</head>...
My assumption is that the browser is reading the meta tag's value, but the DOM is concerned with the "lang" attribute. Is this correct? Are there any nuances I'm unaware of?
Answer
The lang attribute (on the HTML element) specifies the language for the document (unless overridden with another lang attribute which can change the language for a section of the document).
The Content-Language HTTP header specifies the language of the intended audience. This is not the same as the language the document is actually written in. For example, part of a French language course could consist of a page written in French, but Content-Language would be en as it was intended for English speakers learning French.
From the spec:
The Content-Language entity-header field describes the natural language(s) of the intended audience for the enclosed entity. Note that this might not be equivalent to all the languages used within the entity-body.
Meta HTTP-equiv is the poor man's HTTP header. It has all the meaning of the real HTTP header, but less respect (and support).
As a rule of thumb, Content-Language is of more interest to search engines and the lang attribute is of more interest to screen readers.