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