What Is The 'Lang' Attribute of The <HTML> Tag Used For

What is the 'lang' attribute of the <html> tag used for?

I am quoting this from W3C:

Declaring language in HTML
Always use a language attribute on the html tag to declare the default language of the text in the page. When the page contains content in another language, add a language attribute to an element surrounding that content.
Use the lang attribute for pages served as HTML, and the xml:lang attribute for pages served as XML. For XHTML 1.x and HTML5 polyglot documents, use both together.
Use language tags from the IANA Language Subtag Registry.

Also a good read is Why use the language attribute?.

Where should I put my lang attribute?

The lang attribute is "cascading" down to all contained elements. You just need to set it once globally, and all the elements in the page will inherit its value.

The only time you'd set it on nested elements is if those elements are in a different language, e.g.:

<div lang="en">
    <h1>"Hello" in different languages:</h1>

    <h2>Japanese</h2>
    <p lang="ja">こんにちは</p>

    <h2>German</h2>
    <p lang="de">Hallo</p>
</div>

How to properly use lang in HTML

You can't have two <html> tags in the same document. You should use one <html> tag without the lang attribute and use the lang attribute on tags that contain only one language. Here is an example:

<html>
<head>
    <!--some elements in the head-->
</head>
<body>
    <p lang="en">This is text</p>
    <p lang="fr">Ceci est du texte</p>
</body>
</html>

What <html lang=> attribute value should I use for a mixed language page?

As far as I can tell from reading the HTML5 spec the lang attribute:

value must be a valid BCP 47 language tag, or the empty string

Source: http://www.w3.org/TR/html5/dom.html#the-lang-and-xml:lang-attributes

There's no mention in the spec of an array of language strings and every example I've found uses a single language string.

This makes sense since really a given section can only be in one language unless we're creating a new hybrid language.

Since the lang attribute is valid on all HTML elements you can wrap your language specific code in a new tag in order to indicate its language.

<html lang="en">
[...]
<body>
<h1>I am a heading <span lang="de-DE">Eine Überschrift</span></h1>
</body>
</html>

Can someone explain what the xml:lang attribute does in HTML5?

As the standards draft explains in 3.2.3.3 The lang and xml:lang attributes, it is the XML variant of the standard lang attribute, specifying the natural language of the document. It can take any value defined by BCP47. Note however that you may only use the xml:lang attribute if you either have an XML document or also define the lang attribute, and in the latter case they must have the same value. This is because xml:lang is allowed only to ease transition of old XHTML documents:

Authors must not use the lang attribute in the XML namespace on HTML elements in HTML documents. To ease migration to and from XHTML, authors may specify an attribute in no namespace with no prefix and with the literal localname "xml:lang" on HTML elements in HTML documents, but such attributes must only be specified if a lang attribute in no namespace is also specified, and both attributes must have the same value when compared in an ASCII case-insensitive manner.

Why does the HTML lang attribute change font ligatures and how can I avoid this?

f-ligatures are generally undesirable in German typography because they usually occur across compound words like the fl in auflagen or the fb in laufband. Some typographers follow the same rule in English as well, and some go further to avoid ligatures that would join two syllables together.

EB Garamond was designed by a German-speaking type designer who included localization features so that f-ligatures are completely disabled in texts that are flagged as German. If you want to manually apply ligatures to German text, don't change the lang= property to "en" or "". You can simply turn off the OpenType locl feature for a single word like this:

<h1 lang="de"><span class="de-liga">schachingerfilm</span> kamera und postproduktion</h1>

.de-liga {
  font-feature-settings: 'locl' 0;
}

This would effectively apply the liga OpenType feature to the fi in schachingerfilm because the locl feature is no longer preventing it.

What's the difference between the lang attribute and the <meta http-equiv=Content-Language content=en-US> tag?

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.

What Is The 'Lang' Attribute of The <HTML> Tag Used For