Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 653
mariachimike Avatar asked Dec 14 '10 06:12

mariachimike


People also ask

What is a lang attribute?

The HTML lang attribute is used to identify the language of text content on the web. This information helps search engines return language specific results, and it is also used by screen readers that switch language profiles to provide the correct accent and pronunciation.

What is a language meta tag?

The language metatag is used to indicate which natural language your website is in (e.g. English, French, etc.) as opposed to the coding language (such as html).

What is the purpose of lang attribute in this code?

The lang global attribute helps define the language of an element: the language that non-editable elements are written in, or the language that the editable elements should be written in by the user.

What does meta HTTP-equiv content-type mean?

http-equiv = "content-type" Indicates that the meta element is in the encoding declaration state and represents a character encoding declaration.


3 Answers

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.

like image 61
Quentin Avatar answered Sep 19 '22 13:09

Quentin


HTML5 update: meta http-equiv="Content-Language" is obsolete, and the lang attribute can be used on all elements.


They mean the same thing — setting the language of the content in question — however the lang attribute has a higher precedence. See 8.1.2 Inheritance of language codes. They handle different use cases — the lang attribute can be set <i lang=la>exempla gratis</i> on an individual element, while the Content-Language header can be configured globally by the server to apply to a whole set of documents.

Your examples show two equivalent ways to set the language of the html element, but since the lang attribute takes precedence, the value will be "en" and not "en-US".

like image 26
Josh Lee Avatar answered Sep 17 '22 13:09

Josh Lee