Multiple Inline Comments For Html

Question

I am trying to comment the following html so that it shouldn't go to hyperlink.

Solution 1:

You can't have HTML comments inside an HTML tag, as the comment is a tag itself.

You can return false from the event handler to keep the browser from following the link:

<a href="http://www.google.com" target="_blank" onclick="javascript:alert('Navigation Prevented');return false;">CLICK HERE FOR GOOGLE</a>

Solution 2:

You cannot have comment tags inside the attribute value of an element.

Instead of commenting, you can do this way, by adding a return false;. This prevents the browser from following the link:

<a href="http://www.google.com" target="_blank"
   onclick="javascript:alert('Navigation Prevented'); return false;">CLICK HERE FOR GOOGLE</a>

Fiddle: http://jsfiddle.net/rBmjs/

Solution 3:

After seeing other users say that comments can't be included within element attributes, I started to wonder why. Certainly it's a bad practice, but why shouldn't it work?

I checked the specs for HTML5 comments and HTML4.01 comments, and the answer was in the 4.01 spec:

Note that comments are markup

The <! part of a comment merely opens a declaration, and > closes it. It's the -- string that identifies the declaration as a comment. This becomes obvious when comparing comment syntax to doctype declarations and CDATA sections.

Because you can't put declarations inside attribute values (I wasn't able to find this explicitly stated in the spec, but it seems obvious), comments can't be included in attribute values.

Interestingly, the HTML5 comments section doesn't mention the 'comments are markup' note. However, I feel sure the same rules still hold.

If any of this is wrong, please feel free to post corrections.

Solution 4:

<a href="google.com" target="_blank" onclick="javascript:alert('Navigation Prevented');return false;">CLICK HERE FOR GOOGLE</a>

The important part of this is the return false; on the onclick attribute. This instructs the browser to immediately cancel this link after clicking. So what will happen is the javascript will be executed, but the link will not be followed.