语言切换导航的正确语义是什么？答案

【问题标题】：What is the correct semantics for language switching navigation?语言切换导航的正确语义是什么？
【发布时间】：2013-01-10 14:27:06
【问题描述】：

我正在编写一个多语言网站，我有以下导航：

 <nav id="language">
    <ul>
      <li><a href="/en/" hreflang="en">en</a></li>
      <li><a href="/de/" hreflang="de">de</a></li>
      <li>fr</li>
    </ul>
    </nav>

我可以改进语义吗？ 使用微数据或标签属性，例如

【问题讨论】：

我会使用带有<kbd>的链接。至于微数据，请尝试在schema.org上搜索合适的内容
我根本不会使用
，因为其中包含的链接并不是真正的“主要导航”，但更适合元素，可惜不完全支持。跨度>
@OneTrickPony：你到底为什么要在这里使用kbd？
@IanDevlin：请注意，这个关于“主要导航”的注释只是一个注释。我认为在这里使用nav 完全没问题（而且很有用！）。它与“链接到其他页面或页面内部分的页面部分”的定义相匹配，我认为它也是主要的，因为这是导航到翻译的主要/唯一方式。

标签： html semantic-web semantic-markup nav microdata

【解决方案1】：

`abbr`元素

你应该添加abbr，给出相应语言的完整语言名称：

<nav id="language">
  <ul>
    <li><a href="/en/" hreflang="en"><abbr lang="en" title="English">en</abbr></a></li>
    <li><a href="/de/" hreflang="de"><abbr lang="de" title="Deutsch">de</abbr></a></li>
    <li><abbr lang="fr" title="Français">fr</abbr></li>
  </ul>
</nav>

`title` 属性为 `a`

您可以将title 属性添加到a，其内容如下：“切换到此页面的英文翻译”

前往`nav`

您可以为此nav 部分指定一个标题，例如“此页面的翻译”（针对英文页面）。

如果您不希望它在页面上可见，请将其隐藏起来，以便屏幕阅读器用户仍能阅读它（例如，使用 clip 方法）。

（如果您提供这样的标题，您可能不再需要a 上的title 属性。）

另外：`link` 元素（在`head` 中）

对于机器人，您可以将翻译与您页面的 head 中的 link 元素链接：

<link rel="alternate" href="/de/" hreflang="de" />
<link rel="alternate" href="/en/" hreflang="en" />

【讨论】：

请注意，您可以简单地提交站点地图，而不是放置链接元素。 support.google.com/webmasters/answer/189077?hl=en

【解决方案2】：

我认为将en 更改为Change site language to English 可能会改善语义。就目前而言，en 在没有上下文的情况下非常神秘。

【讨论】：

【解决方案3】：

您应该在链接上添加lang 和hreflang 属性，并以IETF language tag (bcp47) 作为目标值，参见例如维基百科关于 water 的文章中指向其他语言的相同项目的链接：

<a lang="de" hreflang="de" title="Wasser" href="//de.wikipedia.org/wiki/Wasser">Deutsch</a>

注意：lang 属性不是链接特定的。它指定标签内容的语言（维基百科也将它放在<html>- 标签和<h1> 标题标签上。），而hreflang 指定您链接到的页面的语言。

【讨论】：

abbr元素

title 属性为 a

前往nav

另外：link 元素（在head 中）

`abbr`元素

`title` 属性为 `a`

前往`nav`

另外：`link` 元素（在`head` 中）