headers 当前页面部分链接的语义 HTML 标记

Question

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

我使用的标签名称在语义上是否合适？ structure/hierarchy 正确吗？我的标记是否需要 optimized/changed 以便于 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>

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

Answer 1

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

徽标图片应该是 - alt 标签很重要。例如你的网站是 "Basketball forum" 相关的..你可以像这样把 alt="" 放在里面 alt="Basketball forum Logo" 然后尝试你网站上的所有图片，你必须写一个 alt 标签关键字相关 page/topic.

然后是元素 - 你必须在上面写一个标题，这样人们或搜索引擎才能看到 link 的标题。

示例：

<a href="/basketball_player_names" title="Basketball Player Names">link</a>

SEO 真的非常庞大。更多信息遵循下面的 link.. 来自 google https://developers.google.com/search/

Answer 2

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

对于站点范围的导航，nav 应该在 body 部分根元素中（因为它代表整个页面）。
对于 table 的内容（如维基百科文章），nav 应该在 section/article 部分内容中代表目录内容的元素。

（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，如果你愿意的话。）

headers 当前页面部分链接的语义 HTML 标记

Semantic HTML markup for links to sections of current page in headers

html

nav

semantic-markup