语义HTML标记，用于指向标题中当前页面部分的链接

问题描述 投票：1回答：2

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

我在语义上使用的标签名称是否合适？结构/层次结构是否正确？我的标记是否需要优化/更改以便于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>

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

html nav semantic-markup
2个回答
1
投票

nav元素代表它所在部分的导航：

  • 对于站点范围的导航，nav应该在body分区根元素中（因为这代表整个页面）。
  • 对于目录（如维基百科文章中所述），nav应位于section / article分区内容元素中，该元素表示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。）

1
投票

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

它应该是徽标图像 - alt标签很重要。你的网站示例是“篮球论坛”相关..你可以把里面的alt =“”像这样alt =“篮球论坛标志”然后尝试你网站上的所有图片，你必须写一个alt标签关键词相关页面/主题。

然后元素 - 你必须在上面写一个标题，这样人们或搜索引擎就可以看到链接的前进方向。

例：

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

SEO确实非常庞大。更多信息请点击以下链接..来自谷歌qazxsw poi

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.