标签的 lang 属性是否向下级联该节点树？

Question

我有一个将 lang="en" 添加到 html 元素的 CMS 模板，因为大多数页面和模板都是英文的，但用户可以创建一个页面（实际上只是主要内容区域的内容）和指定另一种语言。因此，带有header/navigation/footer的模板仍然是英文的，但主页内容可以是另一种语言。

如果我设置 <div id="main-content" lang="es">…</div>，该 lang 属性是否会级联到该 div 中的所有子元素，或者每个子元素是否也需要该 lang 属性？是否因屏幕而异 reader？

另一种方法是设置 <html lang="es"> 并为所有非用户可编辑的模板元素添加 lang="en"，例如 header/nav/footer，但这会变得相当麻烦。

我发现的所有 lang 内容都是针对顶级元素 <span lang="en">only some text and no other tags</span> 而不是 address/mention 整棵树。

Answer 1

是的，它向下层叠。

https://www.w3.org/TR/html53/dom.html#the-lang-and-xmllang-attributes

The lang attribute (in no namespace) specifies the primary language for the element’s contents (my emphasis)...

"element's contents" 可以是嵌套在其下的任何元素。

然后说，

If these attributes are omitted from an element, then the language of this element is the same as the language of its parent element, if any.

这基本上解决了 "whole tree"。

它派上用场，您可以设置整个页面的语言，然后如果您有使用另一种语言的小片段，每个小片段都可以有自己的 lang 属性和屏幕 reader 将切换方言和口音并以本地方式阅读单词（或像计算机语音一样本地化）。

要查看示例，请转至 UPS 的全球页面 https://www.ups.com/us/en/global.page。如果您扩展到欧洲，查看每个选项的源代码，您会看到到处都是 lang 属性。

<li lang="nl">
  <a href="http://www.ups.com/be/nl/Home.page" ...>België - Nederlands</a>
</li>
<li lang="fr">
  <a href="http://www.ups.com/be/fr/Home.page" ...>Belgique - Français</a>
</li>

标签的 lang 属性是否向下级联该节点树？

Does a tag's lang attribute cascade down that node tree?

html

screen-readers

lang