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

html

responsive-design

performance

best-practices

byNikita Barsukov·Dec 12, 2024

The use of href="#" in an anchor tag (<a>) signifies a placeholder when the corresponding URL is unavailable or is to be dynamically defined using JavaScript. Traditionally, when this element is clicked, the page scrolls up to the top. However, you can avoid this with the help of event.preventDefault() in an onclick event handler.

Here's an example:

<a href="#" onclick="event.preventDefault();">No Scroll Link</a> <!-- What does a 'No Scroll Link' do at a party? It doesn't roll! 😄 -->

Anchor tags, href attributes, and your day-to-day

Anchor tags (<a>) partnered with the href attribute allow uninterrupted website navigation. The <a href="#"> essentially works as a self-link, with a click leading users back to the start of the page. But this conventional usage has evolved over time, thanks to JavaScript, allowing enhanced user experiences while preserving the page URL.

The magic of in-page commits

For on-page navigation, href="#some-id" works flawlessly by commanding the webpage to smooth scroll to a specific element with the matching id.

<a href="#section2">Jump to Section 2</a> 
<div id="section2">Welcome to Section 2. Still with me? 😄</div>

This inline function enhances the usability and accessibility of a comprehensive webpage by sparing users from scrolling fatigue.

Placeholder, style, and user expectations

Interestingly, the href attribute has its prominence in controlling browser style and interactions as well. A missing href could warp the default browser styles applied to non-interactive elements. Consequently, this may also change the cursor to a default instead of a pointer, indicating the lack of interactability to the users. Hence, even if you want to halt the default action, it is good practice to specify href="#" and handle the interaction with JavaScript.

The fusion of href and JavaScript

In the combined effect of JavaScript or jQuery, href="#" serves as a tool triggering page scripts rather than redirecting users. You can use either javascript:void(0); in the href attribute or event.preventDefault() within an onclick handler to prevent the page from jumping to the top.

<a href="#" onclick="javascript:void(0); performMagic();">Trigger Script</a> <!-- No wands necessary for this magic! 😄 -->

Going beyond typical jumps, href="#" can fabricate interactive user interfaces, control content unveiling, initiate pop-up windows, or activate dropdown menus in navigation.

<a href="#"> in navigation menus permit CSS styling for hover and active states. This practices ensures the perception of interactability, even when it works merely as a placeholder.

<ul class="menu">
  <li><a href="#" onclick="showMenu(); return false;">Menu Item</a></li> <!-- No secrets here, just open sesame! 😄 -->
</ul>

Optimizing SEO with href="#"

Though href="#" doesn't directly influence SEO, its smart application can enhance the structure and navigation of the webpage. For instance, anchor texts that accurately describe the linked content and add value to the user journey can reap SEO benefits.

Boosting performance

Improper or excessive usage of href="#" can hinder your site’s performance by causing unnecessary scrolls to the top of the page. Counsel your website to abstain from unwelcome page refreshes and maintain a smooth user experience by using event handlers judiciously.

explain-codes / Html / What is href="#" and why is it used?

Linked

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



What is the difference between the different methods of putting JavaScript code in an ``?



How do I stop a web page from scrolling to the top when a link is clicked that triggers JavaScript?



In Markdown, what is the best way to link to a fragment of a page, i.e. #some_id?



Should I make HTML Anchors with 'name' or 'id'?

