3

Everyone. I don't know much about programming and languages, I only have a few basics on HTML, so I hope someone could help me understanding the difference between the following two lines:

<a onclick="window.location.href='http://www.example.com'">Click here</a>

<a href="http://www.example.com">Click here</a>

Both seem to do the exact same thing, but I'm not sure if this is not true in all cases, i.e. using different browsers, HTML/HTML5, etc.

Any help would be appreciated. Thanks.

tmthydvnprt
  • 10,398
  • 8
  • 52
  • 72
Jesús Rosas
  • 31
  • 2
  • Possible duplicate of [What is the Difference between onclick and href="javascript:function name?](http://stackoverflow.com/questions/2579379/what-is-the-difference-between-onclick-and-href-javascriptfunction-name) – Starfish May 22 '16 at 01:19
  • I'm not sure if I understand that thread because it talks about Java and CSS, my question is about performance just in HTML. – Jesús Rosas May 22 '16 at 01:23
  • 1
    You're using `window.location.href` which is javascript. If you just want to link to another page you should use `href=`. – Starfish May 22 '16 at 01:26
  • Without getting very technical, the onclick handler is not needed. It just makes your code redundant. Once you put the address inside an anchor tag you've done your job. The user seeing the link click the hyper link and is directed to the address inside the anchor tag. – swydell May 22 '16 at 01:33
  • Thank you, @Patrick2607 and swydell. As you can see, I didn't know I was using javascript. I'll stick with href then. I appreciate the help. – Jesús Rosas May 22 '16 at 01:44

3 Answers3

4

the difference between the following two lines

The only difference is that you are using JavaScript to redirect rather than the built-in browser functionality.

See the W3C Specification for links

ddavison
  • 28,221
  • 15
  • 85
  • 110
  • Thank you, sircapsalot. I don't know much about JavaScript, I know JavaScript is not always enabled, so better stick with the built-in browser, and I'm assuming that's the href function (I don't know much about coding). And THANK YOU for the W3C Specification link it is going to help me a lot as a reference. – Jesús Rosas May 22 '16 at 01:38
1

There many differences. Some of them relate to accessibility, some of them related to UX.

  • Without the href the browser will not style the link to look like a link (because it is not a link).
  • Without the href a link is not in the tab order of the page (for those who use keyboard to quickly traverse a page).
  • Without the href you are relying on JavaScript, which if there are errors elsewhere can become a problem.
  • It promotes using the <a> as a handler for something other than navigation, such as hiding/showing bits of the page, where a <button> would be more appropriate.
  • <a href> is supported by all browsers in all circumstances.
  • A screen reader may not announce a link without an href attribute, essentially making it unusable to many users (which has legal implications too).

Just use href as it will work everywhere and gets you accessibility for free.

aardrian
  • 8,581
  • 30
  • 40
  • You can also hear how those are announced in different screen readers via this example page: [http://thepaciellogroup.github.io/AT-browser-tests/](http://thepaciellogroup.github.io/AT-browser-tests/) – aardrian May 22 '16 at 18:33
0
1)<a onclick="window.location.href='http://www.example.com'">Click here</a>

2)<a href="http://www.example.com">Click here</a>

In this case there is not difference between the two provided the browser supports javascript and there is no JS errors on the page and in browser. But with onclick you can do something different with click. Example:

2)<a href="http://www.example.com" onclick="return doSomething(this)">Click here</a>
...
function doSomething(elem){
//do something with url
return false;//do not open url
}
Alex Kudryashev
  • 9,120
  • 3
  • 27
  • 36