Open In App

What is the use of “#” symbol in link URL?

Last Updated : 12 Jul, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

The "#" symbol in a URL is known as a named anchor or fragment identifier. It has a special function beyond being a regular character. Named anchors are used to link to a specific part of the same webpage. Typically, we link from one page to another, but when we need to link to a specific section or heading within the same page, the "#" symbol allows us to do so. This feature enhances navigation and user experience by directly jumping to the relevant part of the content.

Syntax:

It will just point to the top of the same page because that anchor tag is not given any link.

<a href="#">Click me</a>

Note: For direct navigation to specific headings on a long webpage, the "#" symbol followed by the heading name in a link can be used. If the "#" is used alone, it points to the top of the page.

Approach

  • The HTML document contains a simple webpage with a title and basic styling for headings and list items.
  • A navigation menu with links is created, using the "#" symbol to link to specific sections within the same page.
  • Each link in the list points to a section with the corresponding id attribute, such as "#learn", "#contribute", and "#explore".
  • Clicking on any link scrolls the page to the respective section, demonstrating the use of the "#" symbol for internal navigation.
  • The sections "Learn", "Contribute", and "Explore" are defined using <div> elements with matching id attributes and include a heading and descriptive text.

Example: The example shows the use of “#” symbol in link URL

HTML
<!DOCTYPE html>
<html>

<head>
    <title>link has a pound “#” sign</title>
    <style>
        
        h1 {
            color: green;
        }
        
        li {
            font-size: 16px;
            color: blue;
        }
    </style>
</head>

<body>
    <b>A Computer Science Portal for Geeks</b>
    <ul>
        <li><a href="#learn">Learn</a></li>
        <li><a href="#contribute">Contribute</a></li>
        <li><a href="#explore">Explore</a></li>
    </ul>
    <div id="learn">
        <h4>Learn</h4>
        <p>
         A Computer Science portal for geeks. 
         It contains well written, well thought 
         and well explained computer science and 
         programming articles, quizzes and many more.
        </p>
    </div>
    <div id="contribute">
        <h4>Contribute</h4>
        <p>
         A Computer Science portal for geeks. 
         It contains well written, well thought 
         and well explained computer science and 
         programming articles, quizzes and many more.
        </p>
    </div>
    <div id="explore">
        <h4>Explore</h4>
        <p>
         A Computer Science portal for geeks. 
         It contains well written, well thought 
         and well explained computer science and 
         programming articles, quizzes and many more.
        </p>
    </div>
</body>

</html>

Output:

1

Similar Reads