Search code examples
csshtmlsemantic-markup

Submenu title, h1 or span/other


I have a pretty standard menu with a title that is not a link, but does display the submenu below on hover. The question is as this is the title for the submenu, should that item be a h1, span or other? Normally I would use an anchor but in this case it doesn't actually link anywhere. I have looked around but can't find a suitable answer.

Examples

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

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

Thanks


Solution

  • Out of the two, I'd personally use a span because h1 is usually used for section headings, and sometimes even recommended to only be used once per document as the main title of the site (though that is debatable).

    Another option I've used before is to not add any extra element at all and make the li itself hoverable:

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