Is there any reason to use for javascript actions?

Question

Wherever I have a Javascript action to trigger, I've always blindly put a <a href="#">, and the onclick listener on the anchor:

<ul>
    <li><a href="#">Tab 1</a></li>
    <li><a href="#">Tab 2</a></li>
    <li><a href="#">Tab 3</a></li>
</ul>

<script>
    $('li a').click(function(e) {
        e.preventDefault();

        // ...
    });
</script>

However, I realize now that I was just doing it mechanically, and that this is much cleaner and simpler:

<ul>
    <li>Tab 1</li>
    <li>Tab 2</li>
    <li>Tab 3</li>
</ul>

<script>
    $('li').click(function(e) {
        // ...
    });
</script>

Is there any drawback to the second approach, or is it definitely the way to go when the javascript action is not tied to a URL?

Note: I've read this similar question, but the poster was asking about removing the href attribute, still keeping the <a>.

The practice, I believe, began as a way to maintain the appearance of a link, including the "pointer" cursor. — Shmiddty, Sep 11 '12 at 18:53
Ok, so according to you all, it looks like a styling matter only. If the styling is managed anyway (including the `cursor`), then there is no behavioural difference between the two approaches. — BenMorel, Sep 11 '12 at 18:55
Yes, as @JeremyJStarcher mentioned, it does provide structural context, indicating that the item is somehow related to other content. But without a specific reference to that content, the tag is more or less pointless. — Shmiddty, Sep 11 '12 at 18:58

score 4 · Accepted Answer · answered Sep 11 '12 at 18:56

4

I think one possible reason to use anchor tags is that it is more accessible to users who cannot use a mouse (either due to disability or due to their hardware configuration). When a user tabs through a web page using the keyboard, the browsers tend to jump from one anchor to the next, and might not stop on li tags even if you attach a JS event handler to it.

answered Sep 11 '12 at 18:56

andi

6,442
1
18
43

This is a valid consideration, I was forgetting the `tab`, that I don't use much myself. – BenMorel Sep 11 '12 at 19:00
While this is true for legacy browsers, modern browsers will tab over any element with a `tabindex` as demonstrated here: http://jsfiddle.net/R94qQ/1/ – Shmiddty Sep 11 '12 at 19:01
I forgot about that too! But if you want the li's to be tabbed to according to the normal flow of the page, would you have to add a tabindex to every anchor on the page? or is there a better way of doing that? – andi Sep 11 '12 at 19:44

score 2 · Answer 2 · answered Sep 11 '12 at 18:50

2

I believe without the href you're going to lose some of the styling that a hyperlink would normally give you.

answered Sep 11 '12 at 18:50

Joseph

12,678
19
76
115

I think it is the point- if you're going to be using an onclick, throwing the `href` is going to cue the user that they should click it. Without the `href`, you can style it manually or the user isn't going to have the inherent familiarity with clicking it. – Joseph Sep 11 '12 at 18:52
1

HTML is used to structure the document. CSS is used to style it. It is bad practice to use an anchor tag just to indicate something that can be clicked on. Anchors indicate redirecting to another URL, not clickable actions in general. – CalMlynarczyk Sep 11 '12 at 18:55
@CalMlynarczykless I agree with you! – BenMorel Sep 11 '12 at 18:57

score 1 · Answer 3 · answered Sep 11 '12 at 18:51

1

Depending on context -- and that is the big phrase --

Depending on context, somethings using the a element has advantages, in that it styles like a link. It has an automatic cursor change when the user mouses over. In addition, again, depending on context, the href can point to something useful -- a fallback for non JS enabled visitors (like Google).

Without doing something to make your li look clickable, it might be overlooked.

answered Sep 11 '12 at 18:51

Jeremy J Starcher

23,369
6
54
74

I've failed to mention that styling is not an issue. In that case, I would obviously manage the `cursor` in CSS. – BenMorel Sep 11 '12 at 18:52

score 1 · Answer 4 · answered Sep 11 '12 at 18:57

One major drawback to the second approach is that your site will not be accessible to users who have JavaScript disabled in their browsers. Of course, if your site is not accessible to these users anyway, that's not a valid consideration.

In addition to that, there is some CSS work involved in making the li element appear like a real link, e.g. you have to use cursor: pointer, which is already the default with real links.

On a more abstract level, in the name of semantically correct markup it's more sensible to generate links (or link-like page elements) with the HTML element that is specifically designed for them, unless you have a good reason to avoid that.

After all, a list of bullet points and a tab-based navigation are not semantically the same thing, strictly speaking.

Is there any reason to use for javascript actions?

4 Answers4