Question

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

我有一个导航窗格，我过去常常使用H2标签，但我决定将其更改为div标签，因为我不想在Home和About等词语上浪费SEO机会。我目前在同一元素周围使用2个Div，NavDiv标签创建背景图像，NavText div包含导航文本，该文本以css为中心。使用span或nav标签会更好吗？

我还应该将这些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更具语义。它也被证明对于屏幕阅读器和其他用户更好地理解您的内容。见here

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>元素是用于措辞的通用内嵌容器内容，本身并不代表任何内容。“通过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 roles ，它们允许增强的辅助功能元数据。通过MDN

我应该使用Div，Span，Nav还是标头标签

3 个答案: