The answer: don’t href, use <a name=”foo”> instead
Today I was making lefthand navigation for my current project. I wanted to make a collapsing side menu (an accordion like this one. The menu is basically a list within a list, structured like so:
It was surprisingly challenging to translate this to HTML though. The trouble was mainly that, in my initial html, I didn’t know what tags to wrap the Submenus in: they aren’t active links. I considered headers, but headers can’t exhibit the behavior of links (<a> tags), at least as far as I know. It’s common to put <a href=”#”> as a placeholder for a link that doesn’t go anywhere, but when I did that the link ended up redirecting to the root directory of my site. Besides, using an <a href> for a link that doesn’t actually go anywhere didn’t seem particularly semantic. So what to do?
My solution was to simply make the Submenu <a href> tags, <a name> tags instead. <a name> tags are meant to provide hooks into the html– a way to link to a location on the same page. They’re often used for indices that appear at the top of a web page. Using an <a name> tag works because the tag is not meant to link to another page. It behaves like an <a href> tag and can be styled as one, but it doesn’t redirect the user to another page.
In the end, my html looked like this:
<div id="sideNav"> <ul id="sideMenu"> <!-- first submenu --> <li> <a name="MenuHeader1">Menu Category 1</a> <ul> <li> <a href = http://site.com/1 >Topic 1</a> </li> <li> <a href = http://site.com/2 >Topic 2</a> </li> <li> <a href = http://site.com/3 >Topic 3</a> </li> </ul> </li> <!-- second submenu --> <li> <a name="MenuHeader2">Menu Category 2</a> <ul> <li> <a href = http://site.com/10 >Topic 10</a> </li> <li> <a href = http://site.com/20 >Topic 20</a> </li> <li> <a href = http://site.com/30 >Topic 30</a> </li> </ul> </li> </ul> </div>