Hrefs vs JavaScript onclick (with regard to Unobtrusive JavaScript)

Question

What is best practice with regard to using links/<a> tags with explicit hrefs to other pages in your site (i.e. href="/blah/blah/blah.html) vs having hrefs/divs/etc. that don't have an explicit href and have their onclick set within the document ready handler with JavaScript in say a main.js file.

I'm not an expert when it comes to web development, but I'm enjoying learning jQuery and such and find myself subscribing to the notion of Unobtrusive JavaScript. While both options above don't break the "don't have JavaScript within the HTML" part of that mentality, I suppose I'm hung up on the "Separation of structure and presentation from behavior". While it's admittedly more natural for me to put an <a> tag in there and explicitly set the href, I find myself thinking that this is really behavior and thus should be set within the JS.

Is that going to far, or am I just not used to it? The other side of me sees the benefit of putting it in the JS, b/c now I have the ability to completely control the behavior of that link without having to change anything within the HTML. I guess you'd say I'm on the proverbial fence. Please help get me down. =)

(One note: The site uses JavaScript heavily, so the notion of providing functionality with JS turned off isn't really a concern as most of the site will not function without it.)

Answer 1

Normal users won't really know the difference. However, search engines and SEO practices would require you to use the href="" to link to your other pages if you want the spiders to follow them. Same with if the visitor was using some screen reader or had some special accessibility needs. Many of those read the source code and not the DOM.

In general if you are linking to pages and actions use the href.

If you need to attach additional functionality or not really go to another page or action then use javascript onclick style, or use jQuery to attach events.

Answer 2

That really is going too far for a multitude of reasons.

1. It is mostly tricky code, which should be avoided.
2. It provides no tangible benefit to your website.
3. Doesn't have an eloquent fallback for no-js.
4. It has negative effect on SEO. Specifically, bots wont run your script, and thus wont see the links and will ultimately not index your site properly.
5. Probably most importantly, this effect can severely impact UX for screen readers or users with JS disabled (for instance, many mobile phone browsers disable JS)

In the end, unless you have explicit need to break the mold (e.g. legacy support) you should try your best to follow unobtrusive design, and this is very obtrusive in the sense that you are using JavaScript to create a static structure, something that is far better to be done with HTML.

Answer 3

Agree with other posters. I'd add that if the href is static -- that is interactions on that page don't change it's value -- then you can consider it part of the page's "structure and presentation". In the unusual cases where it is dynamic and some action on the page changes its value -- that's when it becomes "behavior" -- and only then would it be appropriate to let the JS handle it.

On the other hand though if the existing code already had a 9 dynamically set hrefs and you're just adding one static href, I'd probably follow the previous developer's lead for readability.

Answer 4

The jquery history plugin is pretty nice, it allows you to set href='#/url" this way you can have real urls, real back buttons, but your handers just listen for events bound to history.url.

http://tkyk.github.com/jquery-history-plugin/

Not using tags could probably also have some sort of usability problems for visually impaired users with screen readers.

Answer 5

Links are not behavior — they represent links between one document and another. Web browsers offer the behavior of navigating to the linked page when you click on links, but this is the browser's behavior, and each browser has its own conventions for how best to do this — for example, primary click might open the page in the current tab, middle-click might open in a new tab, and M4 might open the link in a new page. Replacing this raw information with behavior breaks the browser's ability to offer this kind of choice.

And there are other clients that would be affected as well. Spiders and other bots will read your page for the information in your anchor tags to determine what the page is linked to. If you instead use "behavior," you're stripping this meaningful information from the page.