JavaScript-only links in HTML5

Question

I know there are answers to this question all over, but none of them turned out to be satisfying for me.

Is there any official HTML5 way to handle clickable elements that do not have their hrefs?

What I always do is just this:

<a>Link</a>

They might have ID or classes of course, but it doesn't matter for an example. I make them clickable by scripts and don't put any href in them. Some people find it incorrect.

Another options are:

<a href="#">Link</a>
<a href="javascript:void(0);">Link</a>

I hate this approach to be honest, because it makes href attribute containing a garbage.

Even another approach would be to use another tag:

<div>Link</div>

Is there any standarized way to do it? Or, perhaps, any way without proper href is incorrect, because as we all know, links actually should provide proper hrefs for non-js people.

EDIT

Okay, I see the answers are what I expected. To be clear, I know how to make it work and I'm looking for semantically correct way to do it. If you guys think that whatever passes HTML validation is good HTML, then you are wrong.

Answer 1

VALIDITY:

There is no problem with using <a> without href attribute. In HTML5 it is a placeholder hyperlink. And it's completely valid. You can try validating. No errors or warnings.

Example usage:

<a id='mya'>Link</a>

$(function(){
    $('#mya').click( function() {
        alert('Click No href'); 
    });
});

See it running

Semantics and everything else:

Read on here for detailed explanations and reasoning.

Answer 2

I hate this approach to be honest, because it makes href attribute containing a garbage.

Certainly, garbage is try to remove href attribute in a link, because is how it works, and Google and other search engines can't make navigable your web. You can make with the style that you like. I give you examples:

Example 1

With data-* attribute:

 <a data-link="http://newurl.com">link</a>
 <script>
     $('a').each(function() {
         $(this).on('click', function(e)  {
              var ds = $(this).dataset();
              window.location.href = ds.link;
         });
     });
  </script>

Example 2

With an array in js and ids in html

 <a id="newurl">link</a>
 <script>
     var aLinks = [];
     aLinks['newurl'] = "http://newurl.com";
     $('a').each(function() {
         $(this).on('click', function(e)  {
              window.location.href = aLinks[$(this).attr('id')];
         });
     });
  </script>

Depends on your preferences, choose what you like.

Answer 3

JavaScript

function popup1() = {
     alert('Please do this....');
 }

HTML Markup

 <div onclick='popup1'> Do you want to join? </div>

Or use jQuery

HTML Markup

 <div class='popup1'> Do you want to join? </div>

jQuery

 $('.popup1').click(function(){   
    alert('Please do this....');
 });

Or use jQuery even cleaner

^{Cleaner on HTML but crappier in JS - There is a fine balance you need to find}

<div > Do you want to join? </div>
<div > Newsletter? </div>
<div > Cookies? </div>

jQuery

$('div').click(function(){   
       if ($(this).text() == 'Do you want to join?')
           alert('Please do this....');
    if ($(this).text() == 'Newsletter?')
           alert('Please do this....');
    if ($(this).text() == 'Cookies?')
           alert('Please do this....');
     });