What is href="#" and why is it used?

Understanding href="#": The Anatomy of a Placeholder Link

Explore the common uses, implications, and best practices for href="#" in HTML, a seemingly simple yet often misunderstood attribute value for hyperlinks.

In web development, the <a> (anchor) tag is fundamental for creating hyperlinks, allowing users to navigate between pages or to different sections within the same page. The href attribute specifies the destination of the link. While typically href points to a URL like https://example.com or a relative path like /about, you'll frequently encounter href="#". This seemingly innocuous value has specific behaviors and implications that developers should understand to avoid accessibility issues and unexpected user experiences.

What href="#" Does

When a link's href attribute is set to just a hash symbol (#), it instructs the browser to navigate to the top of the current page. This behavior stems from the hash symbol's original purpose in URLs: to denote a fragment identifier, which typically points to an element with a matching id on the page. When no id is specified after the hash, the browser defaults to the top of the document.

flowchart TD
    A[User Clicks Link] --> B{Is href="#"?}
    B -->|Yes| C[Browser Scrolls to Top of Page]
    B -->|No| D{Is href="#id"?}
    D -->|Yes| E[Browser Scrolls to Element with 'id']
    D -->|No| F[Browser Navigates to URL]

Behavior of href attribute based on its value

Common Use Cases for href="#"

Despite its potential pitfalls, href="#" is often used in specific scenarios, primarily when JavaScript is intended to handle the link's action. Here are the most common applications:

1. Placeholder for JavaScript-Driven Actions

This is the most frequent use case. Developers often use href="#" for links that trigger a JavaScript function, such as opening a modal, toggling a menu, or submitting a form via AJAX, without causing a page reload. The JavaScript code typically prevents the default browser behavior (scrolling to the top) using event.preventDefault().

<a href="#" onclick="openModal(event);">Open Modal</a>

<script>
function openModal(event) {
  event.preventDefault(); // Prevents scrolling to top
  document.getElementById('myModal').style.display = 'block';
  console.log('Modal opened!');
}
</script>

Using href="#" with JavaScript to open a modal

2. Temporary Links During Development

During the early stages of development, when the final destination URL for a link is not yet known, href="#" can serve as a temporary placeholder. This allows developers to visually lay out the page and test styling without broken links.

<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">About Us</a></li>
  <li><a href="#">Contact</a></li>
</ul>

Placeholder links during development

3. Scroll-to-Top Button (Less Common Now)

In older web designs, href="#" was sometimes used for a 'back to top' link. However, modern approaches often use JavaScript to smoothly scroll to the top without modifying the URL's hash, providing a better user experience.

Drawbacks and Alternatives

While href="#" has its uses, it comes with several drawbacks, primarily related to accessibility and user experience. Clicking such a link changes the URL in the browser's address bar (appending #), which can interfere with browser history and direct linking. More importantly, it can cause unexpected page jumps for users, especially those relying on assistive technologies.

Recommended Alternatives

For better accessibility and semantic correctness, consider these alternatives:

1. Use <button> elements for actions

If an element performs an action on the current page (e.g., opening a menu, submitting data), a <button> is semantically more appropriate than an <a> tag. Buttons are designed for interaction, and screen readers correctly interpret them as such.

2. Use href="javascript:void(0)"

This is another common technique to prevent the browser from navigating or scrolling. void(0) evaluates to undefined, and javascript: protocol links execute the JavaScript without changing the page's state or URL hash. However, it's still generally better to use a <button> for actions.

3. Use event.preventDefault() with a meaningful href

If you must use an <a> tag for an action, provide a fallback href that points to a functional page (e.g., a page with the modal content directly) and then use event.preventDefault() in your JavaScript to handle the dynamic behavior. This ensures the link is still functional even if JavaScript is disabled.

<!-- Using a button for an action -->
<button type="button" onclick="toggleMenu();">Toggle Menu</button>

<!-- Using javascript:void(0) -->
<a href="javascript:void(0)" onclick="doSomething();">Click Me</a>

<!-- Using a fallback href with preventDefault -->
<a href="/fallback-page.html" onclick="handleAction(event);">Perform Action</a>

<script>
function toggleMenu() {
  console.log('Menu toggled!');
}
function doSomething() {
  console.log('Something done!');
}
function handleAction(event) {
  event.preventDefault();
  console.log('Action handled via JS, fallback prevented.');
}
</script>

Alternatives to href="#" for interactive elements