Valid to Use <A> (Anchor Tag) Without Href Attribute

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.

HTML a tag without href attribute, what happens when clicked

This is a guess (without seeing the codebase) but: most probably the event is delegated to a parent or ancestor element, which could make it quite hard to find in the code.

Say the element .confirm-modal-trigger has a parent, a div with ID "foo". The event may well be bound like so:

$('#foo').on('click', '*', function() {});

or

$('#foo').on('click', '> *', function() {});

or

$('#foo').on('click', 'a', function() {});

...the list of possibilities is potentially endless.

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>

a script links without href= #

<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

E.x.

• <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

E.x.

• <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>

Disabled href tag

There is no disabled attribute for hyperlinks. If you don't want something to be linked then you'll need to remove the <a> tag altogether.

Alternatively you can remove its href attribute - though this has other UX and Accessibility issues as noted in the comments below so is not recommended.

How to remove `href` attribute from link with Svelte? Should this be enough?

The docs say

Boolean attributes are included on the element if their value is truthy and excluded if it's falsy.

All other attributes are included unless their value is nullish (null or undefined).

href= is no boolean attribute, so false doesn't work, use null/undefined instead

<a href={null}>linkText</a>
<a href={undefined} >linkText</a>

---

Related Topics