javascripthtmldom-eventsunobtrusive-javascript

Hrefs vs JavaScript onclick (with regard to Unobtrusive JavaScript)

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.)

Solution

  • 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.