Is an Anchor Tag Without the Href Attribute Safe

Valid to use a (anchor tag) without href attribute?

The <a>nchor element is simply an anchor to or from some content. Originally the HTML specification allowed for named anchors (<a name="foo">) and linked anchors (<a href="#foo">).

The named anchor format is less commonly used, as the fragment identifier is now used to specify an [id] attribute (although for backwards compatibility you can still specify [name] attributes). An <a> element without an [href] attribute is still valid.

As far as semantics and styling is concerned, the <a> element isn't a link (:link) unless it has an [href] attribute. A side-effect of this is that an <a> element without [href] won't be in the tabbing order by default.

The real question is whether the <a> element alone is an appropriate representation of a <button>. On a semantic level, there is a distinct difference between a link and a button.

A button is something that when clicked causes an action to occur.

A link is a button that causes a change in navigation in the current document. The navigation that occurs could be moving within the document in the case of fragment identifiers (#foo) or moving to a new document in the case of urls (/bar).

As links are a special type of button, they have often had their actions overridden to perform alternative functions. Continuing to use an anchor as a button is ok from a consistency standpoint, although it's not quite accurate semantically.

If you're concerned about the semantics and accessibility of using an <a> element (or <span>, or <div>) as a button, you should add the following attributes:

<a role="button" tabindex="0" ...>...</a>

The button role tells the user that the particular element is being treated as a button as an override for whatever semantics the underlying element may have had.

For <span> and <div> elements, you may want to add JavaScript key listeners for Space or Enter to trigger the click event. <a href> and <button> elements do this by default, but non-button elements do not. Sometimes it makes more sense to bind the click trigger to a different key. For example, a "help" button in a web app might be bound to F1.

Is it valid HTML to have an anchor tag without href and without name?

Yes it's valid, the HTML spec says:

If the a element has no href attribute, then the element represents a placeholder for where a link might otherwise have been placed, if it had been relevant, consisting of just the element's contents.

Why would you want an anchor tag that is not a link? (no href attribute?)

That can be used for in-page targeting of elements (e.g. to scroll to a certain point):

<a name="table-of-contents"></a>
<h1>Table of Contents</h1>
...
<a href="#table-of-contents">Table of Contents</a>

Though, this is often redundant (and may also take up white space) because elements with IDs can be targeted directly:

<h1 id="table-of-contents">Table of Contents</h1>
...
<a href="#table-of-contents">Table of Contents</a>

Preserve anchor style if it doesn't have href attribute

Try using this: <a href="javascript:void(0);></a>

Is href required on links?

Is href required on links?

Yes. Anchors without href attributes are not links.

I'm asking this because I have some links that act like buttons that pull out content trough ajax

If you are doing that, then do it right. Use Unobtrusive JavaScript and pushState.

"Links" that only work if you are using a pointing device and have JS turned on are not good links.

I'm asking this from the SEO perspective

Search engines won't execute your JavaScript, so the pseudo-links (which depend on JS) are just black holes of nothingness as far as they are concerned).

How to prevent an a tag from redirecting user, while keeping its href attribute?

This will keep your href intact and prevent the page from redirecting there when clicked:

import React from "react";
import "./styles.css";

export default function App() {
  const [content, setContent] = React.useState(null);

  const handleClick = (e) => {
    e.preventDefault();
    setContent("New Content");
  };

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>

      <a href="somepage.html" onClick={handleClick}>
        clcik here
      </a>
      <hr />
      {content ? <div>{content}</div> : null}
    </div>
  );
}

Sandbox: https://codesandbox.io/s/practical-bush-mmpvo?file=/src/App.js

---

Related Topics