Css 我应该使用Div、Span、Nav或header标记吗

我有一个导航窗格，我曾经有一个H2标签，但我决定把它改成一个div标签，因为我不想浪费一个搜索引擎优化的机会在像Home和About这样的词上。 我目前在同一个元素周围使用了2个div，NavDiv标记创建背景图像，NavText div包含由css居中的Nav文本。使用span或nav标签会更好吗

我还应该把这些导航元素放在列表中吗？这样做的优点和缺点是什么

---

如果您对我的代码有任何评论，我将不胜感激，因为这是我的第一个站点，我正在尝试更好地进行编码。

使用列表进行导航比使用带有锚定标记的div更具语义。它也被证明是更好的屏幕阅读器和其他用户了解您的内容。请参见HTML5有一个特定于导航的标记（

nav

）。您可以在此处阅读：

在这个

nav

标签中，你会有一个无序的菜单项列表

因此，您的HTML将是：

<nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Portfolio</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Quote</a></li>
    </ul>
</nav>

理想情况下，这将是进行导航的最佳方式

希望这有帮助：）

对于导航，请使用

标记，因为这更具语义

HTML导航元素（

）表示页面的一部分 链接到其他页面或页面内的部分：带有 导航链接。通过

HTML

元素是一个通用的内联语法容器 内容本身并不代表任何东西。”via

以下是段落标记中的内联文本示例。它可以在块级元素中使用，而不会中断流

HTML元素（或HTML文档分割元素）是 用于流内容的通用容器，它本身并不 代表任何事情，通过

标题
这里有什么东西吗

您可能还想研究，它允许增强可访问性元数据

<nav>
  <ul>
    <li><a href='#'>Nav Item 1</a></li>
    <li><a href='#'>Nav Item 2</a></li>
    <li><a href='#'>Nav Item 3</a></li>
  </ul>
</nav>

<p>Here is an example of <span>inline-text</span> in a paragraph tag. It can be used in a block-level element without disrupting flow.</p>

<div>
  <h3>Title</h3>
  <p>Anything goes in here</p>
</div>