用于链接到标题中当前页面部分的语义 HTML 标记答案

【问题标题】：Semantic HTML markup for links to sections of current page in headers用于链接到标题中当前页面部分的语义 HTML 标记
【发布时间】：2019-02-13 07:22:27
【问题描述】：

我已经为包含指向不同页面以及当前页面部分的链接的标题编写了标记，我想知道以下内容：

我使用的标签名称在语义上是否合适？结构/层次结构是否正确？是否需要优化/更改我的标记以简化 CSS 样式？

<header>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Setting</a></li>
            <li><a href="#">Progress</a></li>
            <li><a href="#">Learn</a></li>
        </ul>
    </nav>
    <ul>
        <li><a href="#">Section 1</a></li>
        <li><a href="#">Section 2</a></li>
        <li><a href="#">Section 3</a></li>
        <li><a href="#">Section 4</a></li>
        <li><a href="#">Section 5</a></li>
    </ul>
</header>

我希望此标记尽可能标准化，并准备好以任何可能的方式设置样式，而无需返回标记并对其进行更改。

【问题讨论】：

请注意，在这里寻求 SEO 建议是题外话。您可以询问基于 HTML 规范的语义标记是什么，但不能询问搜索引擎是否使用它。

标签： html nav semantic-markup

【解决方案1】：

nav 元素表示其所在部分的导航：

对于站点范围的导航，nav 应位于 body 分段根元素中（因为这代表整个页面）。

（the nav spec 中的示例 9 正是这种情况。）

所以，你最好使用这样的东西（假设它是某种文章）：

<body>

<h1>Site title</h1>

<nav>
  <!-- the nav for the site-wide navigation -->
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Setting</a></li>
    <li><a href="#">Progress</a></li>
    <li><a href="#">Learn</a></li>
  </ul>
</nav>

<article>
  <h2>Article title</h2>

  <nav>
    <!-- the nav for the article -->
    <ul>
      <li><a href="#">Section 1</a></li>
      <li><a href="#">Section 2</a></li>
      <li><a href="#">Section 3</a></li>
      <li><a href="#">Section 4</a></li>
      <li><a href="#">Section 5</a></li>
    </ul>
  </nav>

</article>

</body>

（每个部分都可以有自己的header，因此您可以将第一个nav 放在body-header 中，将第二个nav 放在article-header 中，如果您想要。）

【讨论】：

在使用 CSS 将它们都放在标题上时，这不会成为问题吗？我正在考虑有一排指向我网站不同页面的大链接，并在其下方另一排带有较小链接的小链接滚动到当前页面上的不同部分，并且这两行都被认为位于固定标题上。
@S.Goody：是的，有时由于 CSS 限制，无法使用理想的 HTML。当然，这取决于 - 所以在你的情况下可能是可能的。你可以问一个单独的问题，显示你想要使用的 HTML 和你想要实现的布局。

【解决方案2】：

我会说 SEO 相关...我们称之为元标签。

它应该是徽标图像 - alt 标签很重要。例如，您的网站与“篮球论坛”相关..您可以像 alt="Basketball forum Logo" 那样放入 alt="" 然后尝试您网站中的所有图片，您必须编写一个alt 标签关键字相关页面/主题。

然后是元素——你必须在上面写一个标题，这样人们或搜索引擎才能看到链接指向的位置。

例子：

&lt;a href="/basketball_player_names" title="Basketball Player Names"&gt;link&lt;/a&gt;

搜索引擎优化确实非常庞大。更多信息跟随下面的链接..它来自谷歌 https://developers.google.com/search/

【讨论】：

谢谢，alt 标签对我们来说绝对重要（虽然我知道很多），但我更希望了解节点/元素结构和标签名称。似乎我对我的问题的描述性不够。对不起。
还有一种我们称之为 Rich Snippet 的搜索引擎技术，可以帮助定义更多您的网站内容，即上面的链接 :) 学习很有趣..