Make A HTML Link That Does Nothing (literally Nothing) - Stack Overflow

Sorry, we no longer support your browser Please upgrade to Microsoft Edge, Google Chrome, or Firefox. Learn more about our browser support.

1. 1. Home
   2. Questions
   3. Tags
   4. Users
   5. Companies
   6. Labs
   7. Jobs
   8. Discussions
   9. Collectives

   10. Communities for your favorite technologies. Explore all Collectives

2. Teams

   Ask questions, find answers and collaborate at work with Stack Overflow for Teams.

   Try Teams for free Explore Teams
3. Teams

4. Ask questions, find answers and collaborate at work with Stack Overflow for Teams. Explore Teams

Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Learn more about Collectives

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Learn more about Teams

Get early access and see previews of new features.

Learn more about Labs Make a HTML link that does nothing (literally nothing) Ask Question Asked 13 years, 1 month ago Modified 2 years, 3 months ago Viewed 183k times 133

I want a link that does nothing. I don't want this:

<a href="#">

because then the URL becomes something.com/whatever/#.

The only reason I want a link is so the user can see that they can click on the text. JavaScript is being used to perform some action so I don't need the link to go anywhere but I need it to look like a link!

I could use some data attribute and tell me CSS to make elements look like links if they have this attribute but it seems a bit overkill.

• html
• css

Share Improve this question Follow edited Dec 28, 2016 at 3:27 Alexander O'Mara 60.4k1919 gold badges170170 silver badges181181 bronze badges asked Nov 24, 2011 at 17:10 aleale 11.8k2727 gold badges9898 silver badges150150 bronze badges 6

• What's wrong with something.com/whatever/# ? – Charles Sprayberry Commented Nov 24, 2011 at 17:11
• 1 you could give it an href of blank and return false in the the javascript. But it's more semantic if you just change the cursor property to pointer in your CSS – JohnP Commented Nov 24, 2011 at 17:11
• 1 @CharlesSprayberry: There are situations that you don't want it. – PeeHaa Commented Nov 24, 2011 at 17:15
• This would be a good question to ask on ux.stackexchange.com as well. – user212218 Commented Nov 24, 2011 at 18:53
• 2 This question is discussed in more depth here: stackoverflow.com/questions/134845/… – DawnPaladin Commented Dec 9, 2014 at 21:05

| Show 1 more comment

13 Answers 13

Sorted by: Reset to default Highest score (default) Trending (recent votes count more) Date modified (newest first) Date created (oldest first) 150

The following will prevent your href from being ran

<a href="#" onclick="return false;">

If you are using jQuery, event.preventDefault() can be used

Share Improve this answer Follow answered Nov 24, 2011 at 17:11 CurtisCurtis 103k6868 gold badges276276 silver badges357357 bronze badges 6

• 3 Causes additional onclick events to be cancelled. – Rauli Rajande Commented Aug 24, 2017 at 14:45
• 18 Causes page to scroll to the top. – David Hempy Commented Dec 6, 2017 at 6:00
• @DavidHempy I don't experience this. Which browser? – Curtis Commented Dec 6, 2017 at 10:01
• 2 @curt Google Chrome Version 63.0.3239.84 (Official Build) (64-bit) (or possibly a slightly-older version two weeks ago) – David Hempy Commented Dec 20, 2017 at 20:43
• This doesnt work for wordpress plugin scroll to id and link will still do something. In this case, it will be buggy thing that will redirect you on the top of the page. – Jiri Otoupal イり オトウパー Commented May 6, 2020 at 14:59

| Show 1 more comment 137

Try this:

<a href="javascript:void(0);">link</a> Share Improve this answer Follow edited Jul 12, 2017 at 0:00 Weston Ganger 6,70266 gold badges4343 silver badges3939 bronze badges answered Nov 24, 2011 at 17:13 alexdetsalexdets 1,57311 gold badge88 silver badges33 bronze badges 7

• 6 +1 but quick question: is there a difference between javascript:void and javascript:void(0)? – Adam Rackis Commented Nov 24, 2011 at 17:21
• 4 If you will try use javascript:void(0) without param you will have SyntaxError and all your scripts will be failed. – alexdets Commented Nov 25, 2011 at 1:55
• 3 @alexdets javascript:void() will be SyntaxError, but javascript:void just returns undefined - same as void(0). Adam, as far as I can tell, void and void(0) are functionally equivalent for this use. --- edit: although i see other comments that hint it might reload the page.. – andytuba Commented Feb 27, 2013 at 21:39
• 3 Does it matter how you capitalize javaScript/javascript/JavaScript/Javascript ? – Timothy Commented Apr 22, 2016 at 5:19
• 4 This yields warnings, if your application uses CSP Directives that block inline script execution. Additionally, it's better to just write javascript:;, which has the same effect as your solution, but requires less characters to type. – Pawel Dobierski Commented Sep 18, 2019 at 22:13

| Show 2 more comments 60

In HTML5, this is very simple. Just omit the href attribute.

<a>Do Nothing</a>

From MDN on the a tag href attribute:

href

This was the single required attribute for anchors defining a hypertext source link, but is no longer required in HTML5.

What about the hand cursor on hover?

The default styles for a browser may not change the cursor to a pointer, for a tags with no href. You can universally change this with the following CSS.

a { cursor: pointer; } <a>Do Nothing</a>

However it's probably better to be more-selective about it, and apply it to only the elements you intend to add event handlers to.

What about making it tab-focusable?

Just add tabindex="0" to the element.

<a tabindex="0">Do Nothing</a>

Does it makes sense to use an a tag without a link?

Usually no, it's probably better to use a button element instead, and style it with CSS. But whatever you use, avoid using an arbitrary element like div when possible, as this is not semantic at all.

Share Improve this answer Follow answered Apr 2, 2016 at 19:32 Alexander O'MaraAlexander O'Mara 60.4k1919 gold badges170170 silver badges181181 bronze badges 4

• 1 With bootstrap 4, links that don't have an href don't get styled as links. – user3413723 Commented Jul 17, 2019 at 16:30
• If you need to retain formatting due to some css definitions you can't fix or don't want to mess with, the href attribute maybe needed. The void(0) solution is better in that case. – Steve Horvath Commented Jun 21, 2021 at 1:15
• 1 Something really random to note: if you're worried about WCAG compliance, this approach won't satisfy their requirements – Dortimer Commented Aug 19, 2022 at 17:59
• @Dortimer not random at all, the internet should be accessible. – lacy Commented Jan 2 at 17:13

Add a comment | 15

Proper:

<a href="#;">Link</a> Share Improve this answer Follow answered Mar 20, 2021 at 2:29 Michael FeverMichael Fever 86522 gold badges88 silver badges2828 bronze badges 3

• 3 Yes, '#' is defined as the top of the page, but any fragment string that doesn't match the id or name of an element in the document will do. html.spec.whatwg.org/multipage/… – Chris Kerlin Commented May 26, 2022 at 22:56
• 2 This is the only answer that works when you want to specify a no-action link in markdown. For example, when you have a project on GitHub and you want to use GitHub badges in your README.md, as I am doing here: github.com/mikenakis/Bathyscaphe, and you want some of the badges to not link to anything when clicked. All other solutions will either take you to the top of the page, or take you to another page that shows just the badge. This is the only solution that really does nothing. – Mike Nakis Commented May 29, 2022 at 11:42
• @MikeNakis The badges don't need to be wrapped in a link. – Alexander O'Mara Commented Jan 5 at 4:45

Add a comment | 13

Don't make it a link (although it is prefered to do it) and style it with CSS so that it looks like a link:

p.not-a-link { text-decoration: underline; cursor: pointer }

Or even better just make it a link and let the javascript function which is used e.preventDefault() to prevent the link.

Also add the link to the href so that users without JS enabled will still be able to use it (as a fallback).

Share Improve this answer Follow edited Feb 27, 2013 at 21:28 answered Nov 24, 2011 at 17:13 PeeHaaPeeHaa 72.6k6060 gold badges194194 silver badges264264 bronze badges 2

• 1 +1 With the IE5.5 debate concluded, would a span be better than a p? – amelvin Commented Nov 24, 2011 at 22:49
• 2 I prefer span. P could make a new row, while span doesnt – Ronnie Oosting Commented Sep 29, 2017 at 6:17

Add a comment | 11

<a href="javascript:;">Link text</a> - that's what I usually use

Share Improve this answer Follow edited Nov 24, 2011 at 17:23 answered Nov 24, 2011 at 17:11 user527892user527892 6

• 6 Won't this reload the page with some browsers? – Curtis Commented Nov 24, 2011 at 17:12
• @Curt: You;re right, mis-read the question. You've got a comment upvote out of it :-) – user527892 Commented Nov 24, 2011 at 17:15
• ... and I've got 2 downvotes, including one after editing it! Harsh! – user527892 Commented Nov 24, 2011 at 17:17
• Remove the first code, then I'll be allowed to remove my down vote :) It wont let me remove the downvote, its "locked" – Curtis Commented Nov 24, 2011 at 17:23
• 1 Which browsers does this affect, is it still an issue anymore? This would be preferred over void(0), because it's surfaced in the status bar. I say that because I've users flag it as a bug/error (which it obviously isn't), so I think having it t is confusing to them. – patricknelson Commented May 3, 2018 at 2:08

| Show 1 more comment 7

We can achieve that using javascript void which normally involves evaluation of an expression and returning undefined, which includes adding javascript:void(0); on the href.

The void operator is usually used merely to obtain an undefined primitive value, usually using “void(0)” (which is equivalent to “void 0”). In these cases, the global variable undefined can be used instead (assuming it has not been assigned to a non-default value).

a { text-decoration: initial; } <a href="javascript:void(0);"> This link actually does nothing when clicked</a>

Share Improve this answer Follow answered Aug 1, 2018 at 12:50 Krafty CoderKrafty Coder 12111 silver badge55 bronze badges Add a comment | 2

@Curt's answer will work, but you can use a cursor style in css to make it look like a link without the bother of generated a bogus link. Use hand or pointer depending on browser conformance.

Cross browser conformant pointer css (from cursor style guide):

element { cursor: pointer; cursor: hand; } Share Improve this answer Follow answered Nov 24, 2011 at 17:16 amelvinamelvin 9,03144 gold badges3939 silver badges5959 bronze badges 2

• @PeeHaa Just use pointer only if you don't want it to work in IE5.5 and earlier! – amelvin Commented Nov 24, 2011 at 17:20
• 3 That's what I said! Please don't mention IE5.5 :P On a more serious note IE5.5 share is 0.17%. If people still are on that version they don't deserve to browse the web – PeeHaa Commented Nov 24, 2011 at 17:23

Add a comment | 2

one way which no one has mentioned is to point the href to an empty local file location like so

<a href='\\'>my dead link</a>

why? If you use a framework such as react or angular, the compiler will spit out some warnings which can make your log or console dirty. This technique will also prevent robots or spiders from incorrectly linking things.

Share Improve this answer Follow answered Sep 29, 2017 at 6:14 1-14x0r1-14x0r 1,71511 gold badge1616 silver badges2020 bronze badges Add a comment | 0

What if you use only css?

pointer-events: none;

span, a { color: black; cursor: default; pointer-events: none; text-decoration: none; } <span>Normal text --> <a href="https://google.com">Link to google click me</a> <-- another text</span>

Share Improve this answer Follow answered Jan 24, 2022 at 1:56 mandel99mandel99 12411 silver badge1010 bronze badges Add a comment | -1

just remove the href attribute. it's not necessary.

<a> a link </a> Share Improve this answer Follow answered May 31, 2021 at 2:08 Amir KeramatAmir Keramat 39455 silver badges1111 bronze badges Add a comment | -1

Text goes here When clicked this link will do nothing except display a little javascript:void(0) in the corner

Share Improve this answer Follow answered Aug 26, 2022 at 22:59 ME MEME ME 11 1

• 1 As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Community Bot Commented Aug 31, 2022 at 15:12

Add a comment | -3

DONT USE <a>... instead use <span class='style-like-link'> and then use the class to style it however you want.

Share Improve this answer Follow answered May 18, 2017 at 23:05 BryceBryce 1,0581010 silver badges1616 bronze badges 3

• There's nothing wrong with using an anchor tag without a link itself, not to mention that there are many cases where it would make a lot more sense to do so, rather than replace it with a pseudo-anchor tag. Not to mention styling one element to look like another but be implemented differently is bound to cause maintanence issues in the future – Tim Commented Dec 8, 2019 at 23:59
• Agreed. It entirely depends on the use-case and what you're trying to accomplish. I merely provided this as an answer to help others know that this is AN option. – Bryce Commented Dec 10, 2019 at 0:05
• If that's the case, I would suggest editing it to use language that shows it's a possible alternative, rather than stating in caps not to use a standard anchor tag for this, when it's perfectly valid to do so – Tim Commented Feb 5, 2020 at 2:19

Add a comment |

Your Answer

Reminder: Answers generated by artificial intelligence tools are not allowed on Stack Overflow. Learn more

Thanks for contributing an answer to Stack Overflow!

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.
• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Draft saved Draft discarded

Sign up or log in

Sign up using Google Sign up using Email and Password Submit

Post as a guest

Name Email

Required, but never shown

Post Your Answer Discard

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged

• html
• css

or ask your own question.

• The Overflow Blog
• Why do developers love clean code but hate writing documentation?
• This developer tool is 40 years old: can it be improved?
• Featured on Meta
• The December 2024 Community Asks Sprint has been moved to March 2025 (and...
• Stack Overflow Jobs is expanding to more countries

Linked

4450 Which "href" value should I use for JavaScript links, "#" or "javascript:void(0)"? 3 How to get a link that do nothing 0 jQuery closest selector is not working and scroll & focus to a class 1 attempting to return a Clickable image in javascript but onclick causes page refresh 0 How to make HREF link to Nothing while having target _blank without JS inside Modal?

Related

0 How to create a link on an empty DIV? 3 Creating a null hyperlink 72 How do I make a link that goes nowhere? 0 How to declare a link without any content? 6 How do I make an HTML link that doesn't highlight? 0 Link with only background 0 HTML linking to CSS 3 How can I create link that does nothing? 0 HTML creating <a href...> with style 1 How to turn CSS off with links?

Hot Network Questions

• What is the difference between quantum field theory (QFT) and relativistic quantum theory?
• Is the word "boy" racist in the following situation?
• Is the atmosphere of a planet considered an integral part of the planet?
• How did 1977's Car Polo arcade game by Exidy perform hitbox detection, and rigid body collision and movement on the ball?
• MotW: Which bonuses stack?
• Writing rhythm/slash notation on a single line staff?
• Why do some installers insist on not doing a full frame window replacement?
• Errors while starting vite + react
• Is it possible to symbolically solve this polynomial system of equations and inequalities with Mathematica?
• Why is it considered terrorism to murder a CEO?
• Can we live life without "beliefs" or "leaps of faith"?
• Quartz crystals: Is it "load capacitance" or "loading capacitance"?
• Merits of `cd && pwd` versus `dirname`
• Dehn-twist on punctured 3-manifold
• Help in identifying this dot-sized insect crawling on my bed
• What is the overlap between philosophy and physics?
• Why does each page of Talmud end with the first word of the next page?
• 2010s-era Analog story referring to something like the "bouba/kiki" effect
• Factorization of maps between locally compact Hausdorff space
• Disk galaxy definition
• Shakespeare and his syntax: "we hunt not, we"
• Short story about a city enclosed in an electromagnetic field
• Can not load shapefiles in QGIS 3.34.13-Prizren using MacBook Pro
• C++ code reading from a text file, storing value in int, and outputting properly rounded float

more hot questions Question feed Subscribe to RSS Question feed

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

lang-html