Is an anchor tag without the href attribute safe?

html

placeholder

accessibility

progressive-enhancement

byNikita Barsukov·Aug 19, 2024

Non-hyperlink <a> tags lack the navigational intent and can negatively affect accessibility or SEO. Use <button> for on-click actions and href="#" along with JavaScript's preventDefault for anchors without a page refresh. Incorporate the role="button" attribute for a11y (accessibility) when using <a> devoid of href.

<!-- Use button for actions -->
<button onclick="doAction()">Act like there's no tomorrow</button>

<!-- Use a with href and preventDefault for cool JS actions -->
<a href="#" onclick="doAction(); event.preventDefault()">Act, don't procract</a>

Placeholder hyperlinks explained

An <a> tag sans href—commonly known as a "placeholder hyperlink"—can indicate the current page in a navigation menu or act as a bridge for setting the link destination dynamically via JavaScript.

How and why use them?

Modern dynamic web apps

These apps thrive on user interaction, setting link destinations on-the-go. In this context, <a> elements without href are the naval commandos, maintaining a neatly structured and uniformly styled content.

Fallback Links for all! Even for JS

Implementing placeholder hyperlinks as fallback links serves as a great use case that embodies the philosophy of progressive enhancement. This principle makes your website more resilient to JavaScript glitches or even its absence.

Accessibility Tips & Tricks

It's crucial that your interactive elements are keyboard-accessible. Assign tabindex or introduce a href attribute with JavaScript to such <a> tags to enhance a11y.

Semantic Web & SEO considerations

A <a> tag without href is an anchor not a link. This can upset search engines that use links to comprehend and classify content.

Adding the Interactivity Potion

A sprinkle of JavaScript can anoint these placeholder hyperlinks and transform them into interactive elements. Particularly, when you dynamically provide href, you get a clickable element that listens and reacts to user events with zero page reloading. Older browsers? Use javascript:void(0) to prevent default navigation and avoid unexpected page jumps.

Practical applications and alternatives to the rescue

Current page indicator: Use in navigation menus to avoid unwanted page reloads when clicking the current page.
On-demand triggers: Tie these placeholder links to event listeners for creating complex interactions.
Semantic placeholders: An <a id="section"> can target in-page navigation even without an outbound link.

Alternative HTML elements like <span> or <div> with appropriate ARIA roles, or a <button> for actions can replace an <a> tag without href.

VP of User Experience speaks!

This is where the idea of unobtrusive JavaScript comes handy! It enables you to create user interfaces that work beautifully with or without JavaScript. Creation of dynamically assigned URLs to placeholder links should never compromise the smooth user experience.

A spoonful of robustness

Security-wise, it's crucial to have backstop mechanisms to handle cases where JavaScript may be unavailable or malfunctioning. A simple href can save your day in such scenarios.

All about the ID in anchors

An <a> tag with an ID can be an anchor for in-page references even without a link to another page. It's a monologue rather than a dialogue, yet it is a valid hyperlink in the semantic landscapes.

explain-codes / Html / Is an anchor tag without the href attribute safe?

Linked

What is it when a link has a pound "#" sign in it



Javascript - href vs onclick for callback function on Hyperlink



Span inside anchor or anchor inside span or doesn't matter?



How to mix links ( <a> tag ) and headings ( <h1> tag ) in web standard?



How to make an HTML back link?

