我应该使用Div、Span、Nav还是header标签

Question

http://websterglasssandiego.com/

https://github.com/GaretWebster/WebsterGlass/issues/1

我有一个导航窗格，我以前有一个H2标签，但我决定把它改成div标签，因为我不想在主页和关于之类的词上浪费SEO机会。我目前在同一个元素周围使用2个div，NavDiv标记创建背景图像，NavTextdiv包含Nav文本，该文本以css为中心。使用跨度标签或导航标签会更好吗？

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

任何对我的代码的批评都将不胜感激，因为这是我的第一个网站，我正在努力练习更好的编码。

Answer 1

HTML5有一个特定于导航（nav）的标记。你可以在这里阅读：http://html5doctor.com/nav-element/

在这个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>

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

希望这有帮助：）

Answer 2

使用列表进行导航比使用锚点标记的div更具语义。它也被证明对屏幕阅读器和其他用户更好地理解你的内容。请参阅此处

Answer 3

<nav>

对于导航，请使用<nav>标记，因为这更具语义。

HTML导航元素（<nav>）表示页面的一部分链接到其他页面或页面中的部分：包含导航链接。通过MDN

<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>

<span>

HTML <span>元素是用于措辞的通用inline容器内容，它本身并不代表任何东西。"通过MDN

<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>

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

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

您可能还想研究ARIA角色，这些角色允许增强可访问性元数据。通过MDN