CODEWITHSUNDEEP
javascripthtml
Gajus
Gajus

Reputation: 73888

the right element to bind an event

I have element <a href="javascript: void(0)" id="bar">foo</a>. #bar has a click event. I am telling freelancer that instead it would be better to use <div /> (with style cursor: pointer; if needed) rather than hyperlink, since the actual href="" is not utilized anyway and there is no fallback (and can't be in this case) for JS-less version.

However, this comes from my rational-thinking & my experience. Thus, could anyone tell me whether I am right saying the latter and, if possible, provide a reference to a resource discussing this in more depth?

Upvotes: 3

Views: 65

Answers (2)

Alex Peattie
Alex Peattie

Reputation: 27677

You're right in saying that you should not use a link that doesn't link anywhere - that's definitely bad semantics.

But think about using something a bit more meaningful than <div> (a division/section of the page). Is it a button that you're clicking? Use <button>. Maybe it's more of a menu option? Use <menu> and <command> (http://www.w3.org/TR/html5/interactive-elements.html#the-command-element). This is a good resource for finding the best element to match your needs:

http://joshduck.com/periodic-table.html

Upvotes: 2

Madara&#39;s Ghost
Madara&#39;s Ghost

Reputation: 174997

That's a very good phillosophical question.

However, I'd recommend the use of a button. Rather then a clickable div.

The rationale behind this is that a <div> is meant to be a semanticless container, where a button is mean to "do something on the page", which much better describes what you are trying to achieve.

As a general rule, any <a href="javascriot:void(0)"> or <a href="#"> could probably be replaced with a <button>.

Upvotes: 3

Related Questions