When you're creating
The problem here is that if you create a link without an
href attribute the link won't show typical link behavior. So this:
<a>Link without an href attribute</a> | <a href="#0">Link with href</a> |
renders to the following with the default browser styling:
Notice that the 'link-less' link renders without link styling. So when using dynamic navigation via event handlers or jQuery etc. you need to make sure that you explicitly specifiy some sort of link in the href attribute.
If you're using a UI framework like BootStrap it will still style missing
href links properly. But the default HTML styles render anchors without
href with link styling that doesn't trigger the
The Short Answer:
I've been using various approaches over the years, but probably the cleanest and least visually offensive solution is to use a hash to a non-existing name reference in a page.
So this is what I've settled on:
<a href="#0">Fly, fly, fly away</a>
I like this because:
- It doesn't navigate
- It makes it obvious that this it's a do-nothing navigation
- Link looks reasonable on the status bar
- It doesn't flag security scanners
I actually found out that this works only recently and previously I had been using a slew of other approaches, which is what prompted me to write this up.
For a little more background lets take a look.
Empty HREF Link Navigation
Ok, so what options are there? There quite a few actually, some better than others. I would argue some of these aren't an option, but I'll list them anyway:
<a href="#" onclick="return false;" />
- Use a styled
Until recently I've been using #5, but just recently discovered that #6 is actually possible and which to me is preferrable.
Here's a little HTML you can experiment with (CodePen):
<li><a href="https://weblog.west-wind.com">Normal Web link</a></li>
<li><a>Link without an href attribute</a></li>
<li><a href="">Link with empty href attribute</a></li>
<li><a href="#0">Link with href and `#0`</a></li>
Don't use an empty HREF
Empty HREF links might be tempting but they are problematic as they basically mean re-navigate the current page. It's like a Refresh operation which resubmits to the server.
Notice that an empty HREF renders as a link with a target URL pointing back to the current page:
This can be deceiving on small pages as you may not actually notice the page is navigating.
Empty HREF links are useful for a few things, just not for dynamic navigation scenarios. It's a good choice for Refresh this Page style links, or for
<form href="" method="POST"> form submissions which posts back to the same URL.
# by itself
As it turns out the second choice is the most commonly used in examples and demonstrations, but this is usually not a good choice because this syntax:
<a href="#">Link Text</a>
actually is not a
do-nothing navigation. It causes navigation to the the top of the page. Unless your page is small enough to fit into a single Viewport screen, or every handled link actually explicitly aborts navigation (more on that below), you don't want to use this option.
onclick and Returning false
One way you can prevent navigation is to implement an
return false from it. Alternately you can use
event.preventDefault() inside the click event's event object passed into the handler too.
These all function just fine, but they show some nasty looking links in the status bar as the
The links and text are harmless as they literally do nothing, but it's ugly, and to the average non-Web savvy person probably a bit scary.
Note that strict security standards - specifically Content Security Policy (CSP) - don't permit
Use a Button
The problem is that buttons are... well buttons, and by default they may not be the look that you are going for.
Buttons != Links
Now some frameworks like Bootstrap and Material Design provide custom styling for buttons so that buttons can be styled as links.
For example in bootstrap you can use:
<button class="btn btn-link btn-sm" id="btnGo">Go</button>
which looks just like a link (mostly - there are differences like the background boxing).
If you're not using a framework, it takes a little more effort to actually style a button to not behave like a button. Default user-agent styling has a lot of behavior associated with buttons and you have to unset most of that behavior.
If you want to manually use a style, try this:
<button>A real button</button>
<button class="link" id="btnWishyWashy">I wish I was a link</button>
which gives you:
Not bad, but still doesn't quite behave like a link. You won't get
:visited behavior, and of course it won't respect custom
a CSS rules if applied globally - you'll have to add those explicitly to the styling as well.
And the Winner is:
The best solution to me is
href="#0". Mainly because it does nothing, uses simple text and shows no scary looking link in the status bar unlike the
This approach works by using a non existing hash link. Unless you have a named link or an ID named
0 - which is unlikely - the navigation fails, which effectively does nothing. No navigation and no scrolling.
If for some strange reason you have an ID or named link called
0 use a different non-existing value for the hash:
#foo123 works too 😃
Most Frameworks handle this automatically
So if you're using these frameworks you usually don't set the
href attribute at all and let the framework handle that for you, both in terms of styling and the navigation.
This is pretty basic stuff, but it's easy to forget which choices work and which sort of work or provide ugly results. I know I've gone back and forth on this many times in the past before I recently settled on:
<a href="#0">Dynamic Navigation</a>
which seems the cleanest solution.
Other Posts you might also like