16

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

Jasiu
  • 2,674
  • 2
  • 27
  • 27
  • If you leave href blank, it will reload current page, that is why there is #... – Dejan Marjanović Jul 04 '11 at 14:06
  • 2
    @webardo - true, but it's more complex than that. with the hash, it'll jump to the top of the page, which is also not likely to be wanted. These things are usually done in conjuntion with the javascript returning false, which stops the `href` action from being performed. The hash is still better than an empty string, because if the user disables Javascript and then clicks on the link, it will have fewer unintended consequences. – Spudley Jul 04 '11 at 14:34
  • Also found this eye-opening: https://stackoverflow.com/questions/5637969/is-an-empty-href-valid – Leo Sep 09 '16 at 13:46

5 Answers5

16

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.

Felix Kling
  • 795,719
  • 175
  • 1,089
  • 1,143
  • 1
    I would prefer that the `href` activated some server-side action, with the `onclick` having a `return false` at the end so that js-enabled browsers would not additionally do the server-side action. – Emyr Jul 04 '11 at 14:15
  • 1
    @Emyr: That's actually what I meant :) – Felix Kling Jul 04 '11 at 14:17
10

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.

Spudley
  • 166,037
  • 39
  • 233
  • 307
2

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.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • The inclusion into focus order seems to be a very good reason. Is there any other way to include some element in the focus order? – Jasiu Jul 04 '11 at 20:19
  • `tabindex` in some browsers, but that's a poor substitute for having a link or submit button with a sensible fallback. – Quentin Jul 04 '11 at 20:41
0

Because you want the browser to style this link the same as all other links, and without having to specify (e.g. with a class) that "you know, I want this to look like a link even though it's technically not". That's really not good for maintainability.

Jon
  • 428,835
  • 81
  • 738
  • 806
0

Because:

  • the styling is done for you;
  • the link is semantically still a link, even if it starts off with a no-op href.

Rhetorical question:
Can you explain why you think a span is more appropriate than a for a link?

Addendum:
Something like a button or another dynamic element may be better suited here, but taking a non-link span of text and pretending that it's a link is worse.

Lightness Races in Orbit
  • 378,754
  • 76
  • 643
  • 1,055