If you’ve ever clicked a link and received a pop-up box, such as an alert dialog, then you’ve potentially seen this function in action.
So, you might have:
In this case, though, we aren’t using buttons. We’re using a hyperlink. A hyperlink is the basic foundation of the internet. You know it as any link that generally shows up as blue and underlined: a connection to another page.
A hyperlink, in HTML, is written as follows:
<a href= “http://www.google.com”>Google Web Search</a>
In the above, the <A> tag is the beginning of the link. The HREF attribute is where the link goes. And then the </A> closes the tag.
But the HREF attribute doesn’t have to include a URL. Far from it.
Developers often use “A” links in this way because it’s just very easy. It’s an easy way to setup a user-controlled interface — users are used to clicking on links and the developer doesn’t have to scan for any specific action from the user.
Unfortunately, though it’s a pretty easy technique, it’s also considered deprecated.
HREF is meant to act as an identifier — a reference — rather than an action. So, if you use your HREF attribute in this way, you’re using it in a way that goes against the original intent of the attribute. While it works, this makes it “messy” and unintuitive.
In other words, it’s sort of like it’s against the “grammar” of the programming language. It gets the message across, but it does so in a way that’s not generally documented or supported.
Most people will tell you that you should use the following code instead:
But this actually isn’t ideal either. Your HREF shouldn’t be “#” because that causes navigation to the top of the page. Many people don’t realize this because they’re testing their code on a very small page. If your code is only a single page long, “#” isn’t going to do anything at all.
But “#” is actually used to designate positions within a page. For instance, “#tos” might link to your “Terms of Service” header, or “#social” might link to your social media links. When you have a blank “#”, it just assumes you want to go to the top of the page, because it can’t find any other explicit references.
Instead, you should explicitly state, within the HREF, that the HREF reference (the page to navigate to) doesn’t exist:
Using a Blank HREF on an A Tag
Another thing that we should note is that having the HREF attribute altogether isn’t strictly necessary. You can create an a link as simply as:
<a>This is a link.</a>
However, this isn’t wise. When you have a blank HREF tag, it usually reloads the page, which can confuse the user. And if you reload the page on a user unexpectedly, it’s always possible that you could lose some of their work.
As mentioned, you can always use the onClick method:
- MouseDown. This is when the user actually pushes the button, rather than when the user releases it.
- Hover. This is when the user moves their cursor across a given element, rather than clicking on it.
- MouseUp. This is when the user does release the button, after having clicked on it.
For instance, you could globally listen for an OnMouseDown event in your HEAD area, like so:
The Event Listener can listen for many types of events, such as keypresses and scrolling.
Frequently Asked Questions:
What happens if HREF is empty?
If a HREF attribute in an A link is empty, the A tag will usually reload the page. This can be an issue because a page reload could lose user data. There are alternatives. Using a # sign instead of a link will redirect the user to the top of the page. Other options are OnClick functions or JQuery event functions.
Empower your team. Lead the industry.
Get a subscription to a library of online courses and digital learning tools for your organization with Udemy Business.