Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

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

  • Last Updated : 27 Apr, 2020

Many of us may have observed the pound(#) sign in the URL while inspecting some web sites. It is not a simple regular character but has a special function. So first of all, it is called a named anchor or sometimes as a fragment. Named anchor or fragment is used to link to the part of the same web –page. We generally link one page to the other, but what if we have to link to some heading which is on the same web-page? Then, named anchor (#) comes into play.

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

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

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

Example: For example, you have a very long web page with several headings to navigate into those heading directly this will be helpful. Then for pointing the user to that specific heading with the link, the link must include. So, basically to point the user to some specific heading we use the pound sign with the name of that heading in the anchor tag. When used empty with no other dub heading, the same link points to the top of the same page.

Note: Blank # sign will bring you nowhere, cause it is not linked to any id attribute.

  • Program:




    <!DOCTYPE html>
    <html>
      
    <head>
        <title>link has a pound “#” sign</title>
        <style>
              
            h1 {
                color: green;
            }
              
            li {
                font-size: 16px;
                color: blue;
            }
        </style>
    </head>
      
    <body>
        <h1>GeeksforGeeks</h1>
        <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:



My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!