Question

我为带有不同页面链接以及当前页面各部分的标题编写了标记，我想了解以下内容：

我在语义上使用的标记名称是否适当？结构/层次结构正确吗？为了简化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相关...我们称它为Meta标签。

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

然后是元素-您必须在其上写标题，以便人们或搜索引擎可以看到链接的标题。

示例：

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

SEO确实非常庞大。更多信息请点击下面的链接。 https://developers.google.com/search/

Answer 2

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

对于网站范围的导航，nav应该位于body部分的根元素中（因为它代表整个页面）。
对于目录（如Wikipedia文章中的目录），nav应位于section / article分区content元素中，该元素代表ToC所要包含的内容

（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（如果需要）。

语义HTML标记，用于链接到标题中当前页面的各个部分

2 个答案: