<a> script links without href="#"

Question

My web application uses a lot of <a href="#">Perform client script action</a> anchor links which are used for scripting (a habit I picked-up from my days as a Dreamweaver user well over 10 years ago) and now I'm beginning to question if this is necessary.

I don't actually know why <a href="#"> is used in the first place - my guess is the presence of the href attribute causes browsers to apply the :link and :visited psuedo-classes which simplifies stylesheets. It also makes the browser implicitly apply the cursor: pointer property which may be desirable.

I use jQuery (after a brief stint with MooTools) and the links work just as well without the href="#" attribute and value, so should I just remove the attribute entirely and modify my stylesheet to compensate for the removal of the :link psuedo-class? Is there anything else I might be missing, any kind of semi-documented voodoo that the href attribute imbues the anchor element?

Answer 1

<a> stands for anchor

If you include the [href] attribute on an <a> element, it is an anchor that points to a location, which means that you could go to a new page, a particular fragment of the current page (hence the # being called the fragment identifier), or a particular fragment of a new page.

<a> elements without an [href] attribute were historically assigned a [name] attribute, which could be used as the destination of the fragment identifier. Browsers later added support for linking to any item's [id] attribute, and this is now the preferred method for linking to a document fragment.

What does this mean for standalone <a> elements?

An a[href] element is a link (which is why they are matched with :link in css). links are clickable. An a element without the [href] attribute is otherwise just a placeholder for where a link might otherwise have been placed , and not clickable, nor are they in the tabbing order of the page.

If you want your links to be keyboard navigable which is important for accessibility ( WAI-ARIA ), you'll need to do one of the following:

• change the element to <button type="button">
• keep the [href] attribute
• add [tabindex="0"] and one of [role="button"] or [role="link"] (and possibly some styling)

More information about the [role] attribute can be found in the Roles Model section of the WAI-ARIA docs .

Changing the markup

If you don't have a reason to keep the [href] attribute, you might as well be using a <button> element:

<button type="button">
        ^^^^^^^^^^^^^

The [type] attribute is used to make the element a generic button, otherwise <button> will default to [type="submit"] , which may not be desirable as it could trigger form submission.

If you can't use a <button> (usually occurs when the inner markup must contain a <div> ) you can fake a <button> using:

<div role="button" tabindex="0">Some clickable text</div>

You'll need to listen for keypress events and trigger click events for Enter and Space .

Keeping the markup

If you're keeping the <a> element and its [href] attribute, there are a number of options for its value.

A real link

Ex

• <a href="/some/location/for/users/without/js">
• <a href="#document-fragment">

If you need to provide support for users with JS disabled, you might as well direct them to a page that performs equivalent functionality without JS.

By extension, this also includes providing document fragment links to link to the content within the same document. For example, a toggleable region may be marked up as:

<a href="#more" class="toggleable">Read More</a>
<div id="more">Lorem ipsum dolor sit amet</div>

So that with JS the region can be collapsed and expanded, and without JS the link will take the user to the appropriate content on the page.

A dud href

Ex

• <a href="#">
• <a href="javascript:void(0)">
• <a href="about:blank">

If you're preventing the default behavior behind-the-scenes in JavaScript, and you're not supporting users with JS disabled, you can use a "dud" href value to keep the link in the tabbing order and automatically enable Enter to trigger the click event. You should add [role="button"] as semantically the <a> tag is no longer being used as a link, but as a button.

<a href="#" role="button">Some clickable text</a>

Answer 2

Personally I prefer to use href="javascript:void(null);" , to give the browser an href that won't mess up any other use of hashes.

The only difference I've noticed about href-less links is that the browser will not underline them by default, so just add that style in and you should be good.

Answer 3

I was implementing a HTML, CSS, JS template to React and this line of code works for me perfectly:

<a href={() => false}> Link </a>

Answer 4

I got the same issue with react js.

Line 273:  Links must not point to "#". Use a more descriptive href or use a button instead  jsx-a11y/href-no-hash

like this to remove the error I have used the

before:

 <a 
      href="#"
      className="banner-signup signup-btn envy-font-sans-bold"
      onClick={(e) => this.gonext()}
    >
     NEXT
    </a>

used the href="#/" on the place of href="#"

 <a 
      href="#/"
      className="banner-signup signup-btn envy-font-sans-bold"
      onClick={(e) => this.gonext()}
    >
     NEXT
    </a>

Answer 5

use in html

<a id="calendar" href="javascript:void(0)">
        <div class="icon-w">
          <div class="fa fa-calendar"></div>
        </div>
     <span>Calendar</span>
</a> 

Answer 6

Not aware of any voodoo but if you have many links on the page and you pull the href then you will have to add a class name to give you the blue and underline on each. In other words why introduce more work when the browser will all ready take care or it. So in short stick with what you know and I suspect that if you remove the href the page will not validate http://validator.w3.org/

Answer 7

I had this issue, specifically needing an accordion title to be an <a> so that it could be tabbed but not clicked. This will not work without an href, so I put text of an id after the "#" in the href and it appears to work. It makes the links accessible for tabbing, but not able to be clicked.

<a href="#${accordionGroup.id}"> Title </a>

which outputs as:

<a href="#acc234923"> Title </a>