Question

我有一个非常标准的菜单，其标题不是链接，但会在悬停时显示下面的子菜单。问题是这是子菜单的标题，该项目应该是h1，span还是其他？通常我会使用一个锚，但在这种情况下，它实际上并没有链接到任何地方。我环顾四周但找不到合适的答案。

实施例

有跨度

<nav>
  <ul>
    <li>
      <span class="hover-me-for-submenu">Submenu Title</span>
      <ul class="submenu">
        <li><a>Link One</a></li>
        <li><a>Link Two</a></li>
        <li><a>Link Three</a></li>
      </ul>
    </li>
  </ul>
</nav>

用h1

<nav>
  <ul>
    <li>
      <h1 class="hover-me-for-submenu">Submenu Title</h1>
      <ul class="submenu">
        <li><a>Link One</a></li>
        <li><a>Link Two</a></li>
        <li><a>Link Three</a></li>
      </ul>
    </li>
  </ul>
</nav>

由于

Answer 1

我建议不要在技术上使用<h1>＆＃34; the most important＆＃34;标题标记（范围从1-6）。我认为标题是合适的，但更小的东西会更有意义。有关更多信息，请查找语义HTML。它很重要，因为它会影响您的SEO和屏幕阅读器的可用性。

Answer 2

在这两者中，我个人使用了一个范围，因为h1通常用于章节标题，有时甚至建议每个文档只使用一次作为网站的主标题（尽管这是有争议的。）

我之前使用的另一个选项是根本不添加任何额外的元素，并使li本身可以恢复：

<nav>
  <ul>
    <li class="hover-me-for-submenu">
      Submenu Title
      <ul class="submenu">
        <li><a>Link One</a></li>
        <li><a>Link Two</a></li>
        <li><a>Link Three</a></li>
      </ul>
    </li>
  </ul>
</nav>

Answer 3

我认为使用span是推荐的，因为span被认为是Inline。使用h1也没问题

子菜单标题，h1或span / other

3 个答案: