href attribute 'do nothing' trick

I learned this trick from Chris Coyier was speaking at Event Apart Seattle 2017.

It's a common practice to set the anchor element's href to #, when you don't want anything to happen when user click on the link.

<a href="#">Click here</a>

However, some browsers may jump (usually to the top of the page), when users click on it.

So, here is a cool trick...use #0 instead.

<a href="#0">Click here</a>

Since IDs almost never start with a 0, it just safely fails and do nothing...which is the desired behavior.

But, here is the catch...

What Chris said was that an ID cannot start with a number in most cases. The exception that he gave was related to unicode (which I won't elaborate on).

After digging a little bit, it turn out that HTML4 specs prevent IDs from starting with a number.

BUT... HTML5 specs are cool with an ID starting with a number. BUT TO THE BUT... it's really not a common practice.

#So I think #0 is just fine, and actually pretty cool. ;)


#Other variations:

  • <a href="#!">Click here</a>
  • <a href="#void">Click here</a>
  • Came across using javascript:void(0) in Stackoverflow, but that is some ugly code. I don't wanna use it.

Latest Posts