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?
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.
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).
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.
http-equiv = "content-type" Indicates that the meta element is in the encoding declaration state and represents a character encoding declaration.
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.
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"
.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With