子菜单标题，h1 或 span/other

Question

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

例子

有跨度

<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

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

Answer 2

我建议不要使用 <h1> 作为技术上的“the most important”header 标签（范围从 1-6）。我认为 header 是合适的，但更小的东西会更有意义。有关更多信息，请查找语义 HTML。这很重要，因为它会影响您的搜索引擎优化和屏幕阅读器的可用性。

Answer 3

在这两者中，我个人会使用 span，因为 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>

子菜单标题，h1 或 span/other

Submenu title, h1 or span/other

css

html

semantic-markup