I have seen the following href used in webpages from time to time. However, I don’t understand what this is trying to do or the technique. Can someone elaborate please?
<a href="javascript:;"></a>
I have seen the following href used in webpages from time to time. However, I don’t understand what this is trying to do or the technique. Can someone elaborate please?
<a href="javascript:;"></a>
is just shorthand for:
basically instead of using the link to move pages (or anchors), using this method launches a javascript function(s)
clicking the link will fire the alert.
javascript:
tells the browser going to write javascript codeRefer to this:
Old thread but thought I’d just add that the reason developers use this construct is not to create a dead link, but because javascript URLs for some reason do not pass references to the active html element correctly.
e.g.
handler_function(this.id)
works asonClick
but not as a javascript URL.Thus it’s a choice between writing pedantically standards-compliant code that involves you in having to manually adjust the call for each hyperlink, or slightly non-standard code which can be written once and used everywhere.
An
<a>
element is invalid HTML unless it has either anhref
orname
attribute.If you want it to render correctly as a link (ie underlined, hand pointer, etc), then it will only do so if it has a
href
attribute.Code like this is therefore sometimes used as a way of making a link, but without having to provide an actual URL in the
href
attribute. The developer obviously wanted the link itself not to do anything, and this was the easiest way he knew.He probably has some javascript event code elsewhere which is triggered when the link is clicked, and that will be what he wants to actually happen, but he wants it to look like a normal
<a>
tag link.Some developers use
href='#'
for the same purpose, but this causes the browser to jump to the top of the page, which may not be wanted. And he couldn’t simply leave the href blank, becausehref=''
is a link back to the current page (ie it causes a page refresh).There are ways around these things. Using an empty bit of Javascript code in the
href
is one of them, and although it isn’t the best solution, it does work.It’s used to write js codes inside of
href
instead of event listeners likeonclick
and avoiding#
links inhref
to makea
tags valid for HTML.Intresting fact
I had a research on how to use
javascript:
inside ofhref
attribute and got the result that I can write multiple lines in it!Tested in chrome Version 68.0.3440.106 (Official Build) (64-bit)
Tested in Firefox Quantom 61.0.1 (64-bit)
The best way to always render a link properly is with the css as follows:
One should avoid to follow un-necessary things like mentioned in the thread.
It is a way of making a link do absolutely nothing when clicked (unless Javascript events are bound to it).
It is a way of running Javascript instead of following a link:
When there isn’t actually javascript to run (like your example) it does nothing.
There are several mechanisms to avoid a link to reach its destination. The one from the question is not much intuitive.
A cleaner option is to use
href="#no"
where#no
is a non-defined anchor in the document.You can use a more semantic name such as #disable, or #action to increase readability.
Benefits of the approach:
Drawbacks:
Since the
<a>
element is not acting as a link, the best option in these cases is not using an<a>
element but a<div>
and provide the desired link-like style.