What's the Difference Between HTML[Lang="En"] and HTML:Lang(En) in CSS

What's the difference between html[lang= en ] and html:lang(en) in CSS?

In HTML, both the :lang() pseudo-class and the attribute selector will match an element with the corresponding lang attribute.

The difference is that a browser may have other ways of determining the language of a given element when testing against the :lang() pseudo-class which may be defined by the document language and/or the implementation, whereas an attribute selector will only check an element for that given attribute, without any accompanying document-based semantics.

For example, in HTML, the pseudo-class will also match any of the element's descendants for which there isn't a different lang, depending on how a browser determines the language for those descendants. Usually, the descendants will inherit the language attribute from their ancestor if it is not explicitly set.

Here's what the spec says:

The difference between :lang(C) and the ‘|=’ operator is that the ‘|=’ operator only performs a comparison against a given attribute on the element, while the :lang(C) pseudo-class uses the UAs knowledge of the document's semantics to perform the comparison.
In this HTML example, only the BODY matches [lang|=fr] (because it has a LANG attribute) but both the BODY and the P match :lang(fr) (because both are in French). The P does not match the [lang|=fr] because it does not have a LANG attribute.
<body lang=fr>
  <p>Je suis français.</p>
</body>

Notice the specific phrasings of "has a LANG attribute" and "are in French". These two phrases have very different meanings in English, as you might imagine.

In your example, the following selector will also match your .foo element:

.foo:lang(en)

But the following selectors won't, if it doesn't have its own lang attribute set:

.foo[lang="en"]
.foo[lang|="en"]

As for browser support, the :lang() pseudo-class is supported starting from IE8, so IE7 really is the only browser you will be unable to support by using the pseudo-class over the attribute selector.

Based on this understanding you can then answer the question "which should I use": you should always use the :lang() pseudo-class by default, unless certain quirks (or the need to support IE7) require working around by using an attribute selector instead.

Selectors 4 not only brings enhanced functionality to the :lang() pseudo-class (thereby widening the gap in functionality between it and attribute selectors), but also introduces the :dir() pseudo-class for matching elements based on their directionality. Because directionality is a language-related property, the dir and lang attributes work similarly in HTML, and the difference between :dir() and its corresponding attribute selector is analogous to that between :lang() and its corresponding attribute selector — to the point where the first sentence of the following quotation is in fact a word-for-word copy of the same paragraph in the section describing :lang():

The difference between :dir(C) and ''[dir=C]'' is that ''[dir=C]'' only performs a comparison against a given attribute on the element, while the :dir(C) pseudo-class uses the UAs knowledge of the document’s semantics to perform the comparison. For example, in HTML, the directionality of an element inherits so that a child without a dir attribute will have the same directionality as its closest ancestor with a valid dir attribute. As another example, in HTML, an element that matches ''[dir=auto]'' will match either :dir(ltr) or :dir(rtl) depending on the resolved directionality of the elements as determined by its contents. [HTML5]

What is the difference between html lang= en and html lang= en-US ?

<html lang="en">

<html lang="en-US">

The first lang tag only specifies a language code. The second specifies a language code, followed by a country code.

What other values can follow the dash? According to w3.org "Any
two-letter subcode is understood to be a [ISO3166] country code." so
does that mean any value listed under the alpha-2 code is an accepted
value?

Yes, however the value may or may not have any real meaning.

<html lang="en-US"> essentially means "this page is in the US style of English." In a similar way, <html lang="en-GB"> would mean "this page is in the United Kingdom style of English."

If you really wanted to specify an invalid combination, you could. It wouldn't mean much, but <html lang="en-ES"> is valid according to the specification, as I understand it. However, that language/country combination won't do much since English isn't commonly spoken in Spain.

I mean does this somehow further help the browser to display the page?

It doesn't help the browser to display the page, but it is useful for search engines, screen readers, and other things that might read and try to interpret the page, besides human beings.

selector[lang= en ] vs selector:lang(en-US)

With an attribute selector you could only match the attribute on a specific element. Language information gets inherited.

p:lang(en-US){ color: blue;}

<div lang="en-GB">  <p>Blue is the colour</p></div>
<div lang="en-US">  <p>Blue is the color</p></div>

Why does the :lang selector directly select all its children?

There's nothing counter-intuitive with the :lang pseudo-class. All pseudo classes work this way in that they represent element states - so all elements in that particular state are targeted.

The [lang] attribute selector on the other hand will only select the elements themselves which have the attributes - because attribute selectors check for attributes not state.

Whether the :lang attribute is absolutely necessary or if its functionality could be achieved using other selectors might be debatable, but there's certainly nothing strange with the way :lang works.

Difference between id and name attributes in HTML

The name attribute is used when sending data in a form submission. Different controls respond differently. For example, you may have several radio buttons with different id attributes, but the same name. When submitted, there is just the one value in the response - the radio button you selected.

Of course, there's more to it than that, but it will definitely get you thinking in the right direction.

What's the Difference Between HTML[Lang="En"] and HTML:Lang(En) in CSS