Sole hash in anchor href?

Question

In the project I work on I've recently moved from developing backend (i.e. non-web) servers to web-related things. In the HTML code I've found the following thing all over the place:

<a href='#'>some link</a>

Then some JS is attached to the click event of <a> element.

Does this sole hash has any special meaning? I understand how the href='#some_id' tells the browser to scroll to element with ID = some_id. But href='#' doesn't work that way, right? If it's all about creating a clickable piece of text, why not simply use a <span>?

Answer 1

Exactly. What you see here is somehow bad design (although it is quite common to use href="#").

What it actually will do is jumping to the top of the page if the default action is not prevented.

Much better would be to

• use a <button> and style it accordingly (maybe even only inserted via JavaScript)
• or let the link point to some real resource (that triggers some action on the server side) and attach the JavaScript event handler to do this (or similar) action on the client and prevent following the link (keyword: unobtrusive JavaScript).

It also depends on whether the site is meant to run with disabled JavaScript. If yes, then such a link (but also a button) will not work.

But in any case, from a semantic point of view, using a link solely to have something "clickable" is wrong.

Answer 2

A hash on its own links to the top of the page.

This is sometimes used for exactly this purpose -- ie a "Back to top" link, but more typically this kind of link is used in conjunction with a Javascript click even which returns false, and thus negates the action of the href.

In this context, it is used in this way for the following reasons:

• An <a> tag may be semantically correct -- ie the item to be clicked on is acting as a link; ie to load more content, or open a popup, etc, even though it is using Javascript for it's functionality.

• Using an <a> tag also means that the element will be styled in the same way as other <a> tags on the site. This includes :hover effect styles, etc. Note that IE6 only supports :hover on <a> elements, and nothing else, meaning that if the site was designed to work in IE6 or still needs to support it, then you can't replicate this functionality with other tags. This was a very good reason to use <a> tags for this feature in the past, even if it wasn't appropriate semantically. These days it's less of an issue. Even in modern browsers, using <a> for these items is still useful for cutting down on replicated stylesheets if you want them to look the same as other links. Links also have a few other special features which may be difficult to replicate with other elements, such as being in the tab index sequence, etc.

• HTML requires that an <a> tag has a href attribute in order for the element to be rendered as a link, so the hash is used as a minimal value for this. In addition, having a hash in the href attribute means that the link won't cause any nasty unexpected consequenses if the user turns off Javascript or if the developer forgets to return false;. By contrast, having an empty string would cause it to reload the page, which is unlikely to be what you want if you have just run some javascript. It is however also common to have the link point to a valid URL, which would be run if Javascript was switched off; this is a good way to have a fall-back mechanism for your site. But it isn't always appropriate, and clearly isn't the intention here.

Given that the item is just triggering a click event in Javascript, there's no reason why you couldn't use any other element for this. You could very easily use a <span> (or even better, a <button>) instead, but the above points should show that there's nothing wrong with using an <a> tag.

Hope that helps.

Answer 3

Does this sole hash has any special meaning?

It links to the top of the page

Why not simply use a <span>?

• It won't be in the focus order
• It won't take on the default styles of something that should be clicked

A <button> would be better than a span. Something built on top of a server side alternative would be best.