Sweating the details: empty href

Looking at my previous post about the responsive menu I've added to this site one of the things that was bothering me was the menu button itself:

    menu

    

I vaguely recall reading that href="#" wasn't ideal but as this button was only viewable if the user had javascript I wasn't sure if it mattered. Anyway I thought I'd do a little reading and check the validity of it against w3c html5 spec and it turns out:

The href attribute on a and area elements must have a value that is a valid URL potentially surrounded by spaces.

OK, so is # a valid url? From what I can tell from the rabbit warren that is the HTML5 spec, it is. However, it has the unwanted effect of adding to the browsers history. This means if the user hits back after clicking the menu they don't see any change (you could argue that the menu could react by closing but in my opinion that wouldn't be the intended action of the user). Reading further I decided that the menu button could just be an a element without an href at all, the w3c definition of doing such is:

If the a element has no href attribute, then the element represents a placeholder for where a link might otherwise have been placed, if it had been relevant.

The best example of the intention of this description would be for how to present the current page in a menu as per the example in the spec:

This isn't exactly the scenario with my menu button but I'm happy to interpret the description to suit my purposes, as I may want to put a hyperlink into my menu button at some point "if it is relevant".

So in summary, my interpretation of the html5 spec for an interactive button realised by an a element is:

    menu

    

So we no longer have pointless entries in the browser history and I've removed some irrelevant code from the html. But this will lose the hand pointer which is easily solved by css:

    
  cursor: pointer;

    

There you go, an entire post on removing href from a link...