Should I make Anchors with ‘name’ or ‘id’ in HTML ?

Last Updated : 26 Apr, 2023

Anchor tags are used to provide quick navigation to some other part of the same website page or to a part of a different website page. Anchor tags can be of two types one is implemented with id and the other is implemented using the name attribute. In terms of functionality, both work correctly with the anchor tag and almost the same type of results can be achieved with both of them.

Anchors with ‘name’: When the anchor is used with the help of the ‘name’ attribute, two anchors are needed to be used. The first anchor will be the main anchor link which will be used as the link to navigate to any section and it will contain the href attribute which will contain the name of the section to which it needs to refer to. The other one will be enclosed with the section element itself and it will contain the name attribute.

Syntax:

// Main Anchor link
<a href="#section">Jump to Section</a>

// This is the section the above link will navigate to
<h3><a name="section">Main section</a></h3>

Example 1: The code below demonstrates how we can implement an anchor link with a name attribute:

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <style> 
        h3 { 
            padding: 0px 15px; 
        } 
  
        p { 
            padding: 0px 15px; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color: green; margin: 2rem"> 
        GeeksforGeeks 
    </h1> 
  
    <h4 style="margin: 2rem; margin-top: -1.5rem"> 
        Should I make Anchors with 'name' or 'id'? 
    </h4> 
      
    <h3><a name="menu">Menu</a></h3> 
      
    <ul> 
        <li><a href="#ds"> 
            Jump to DS Section 
        </a></li> 
          
        <li><a href="#cpp"> 
            Jump to C++ Section 
        </a></li> 
          
        <li><a href="#bs"> 
            Jump to Bootstrap Section 
        </a></li> 
          
        <li><a href="#js"> 
            Jump to JavaScript Section 
        </a></li> 
    </ul> 
    <hr> 
  
    <h3><a name="ds">Data Structures</a></h3> 
    <p> 
        A data structure is not only used for  
        organizing the data. It is also used  
        for processing, retrieving, and storing 
        data. There are different basic and  
        advanced types of data structures that  
        are used in almost every program or  
        software system that has been developed. 
    </p> 
  
    <p><a href="#menu">Jump to Menu</a></p> 
  
    <h3><a name="cpp">C++</a></h3> 
    <p>  
        C++ is a general-purpose programming  
        language and is widely used nowadays  
        for competitive programming. It has  
        imperative, object-oriented and generic  
        programming features. 
    </p> 
  
    <p><a href="#menu">Jump to Menu</a></p> 
  
    <h3><a name="bs">Bootstrap</a></h3> 
    <p> 
        Bootstrap is a free and open-source  
        collection of CSS and JavaScript/jQuery  
        code used for creating dynamic websites 
        layout and web applications. 
    </p> 
  
    <p><a href="#menu">Jump to Menu</a></p> 
  
    <h3><a name="js">JavaScript</a></h3> 
    <p> 
        JavaScript (JS) is the most popular  
        lightweight, interpreted compiled  
        programming language. It can be used  
        for both Client-side as well as  
        Server-side developments. 
    </p> 
  
    <p><a href="#menu">Jump to Menu</a></p> 
</body> 
  
</html>

Output:

Anchor with ‘id’: When the anchor is used with the help of id, only one anchor is needed to be used. The main anchor will be used as the link to navigate to any section and it will contain the href attribute which will contain the id of the section to which it needs to refer to.

Syntax:

// Anchor link
<a href="#section">Jump to Section</a>

// This is the section the above link will navigate to
<h3 id="section">Section</h3>

Example 2: The code below demonstrates how we can implement an anchor link with the id:

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <style> 
        h3 { 
            padding: 0px 15px; 
        } 
  
        p { 
            padding: 0px 15px; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color: green; margin: 1rem"> 
        GeeksforGeeks 
    </h1> 
  
    <h4 style="margin: 1rem; margin-top: -1rem"> 
        Should I make Anchors with 'name' or 'id'? 
    </h4> 
      
    <h3 id="menu">Menu</h3> 
      
    <ul> 
        <li><a href="#js"> 
            Jump to JavaScript Section 
        </a></li> 
          
        <li><a href="#cpp"> 
            Jump to C++ Section 
        </a></li> 
          
        <li><a href="#ds"> 
            Jump to DS Section 
        </a></li> 
          
        <li><a href="#bs"> 
            Jump to Bootstrap Section 
        </a></li> 
    </ul> 
  
    <hr> 
  
    <h3><a id="js">JavaScript</a></h3> 
    <p> 
        JavaScript (JS) is the most popular  
        lightweight, interpreted compiled  
        programming language. It can be used  
        for both Client-side as well as 
        Server-side developments. 
    </p> 
    <p><a href="#menu">Jump to Menu</a></p> 
  
    <h3><a id="cpp">C++</a></h3> 
    <p> 
        C++ is a general-purpose programming  
        language and is widely used nowadays  
        for competitive programming. It has  
        imperative, object-oriented and generic 
        programming features. 
    </p> 
    <p><a href="#menu">Jump to Menu</a></p> 
  
    <h3><a id="ds">Data Structures</a></h3> 
    <p> 
        A data structure is not only used for  
        organizing the data. It is also used  
        for processing, retrieving, and storing  
        data. There are different basic and  
        advanced types of data structures that  
        are used in almost every program or  
        software system that has been developed. 
    </p> 
    <p><a href="#menu">Jump to Menu</a></p> 
  
    <h3><a id="bs">Bootstrap</a></h3> 
    <p> 
        Bootstrap is a free and open-source  
        collection of CSS and JavaScript/jQuery  
        code used for creating dynamic websites  
        layout and web applications. 
    </p> 
      
    <p><a href="#menu">Jump to Menu</a></p> 
</body> 
  
</html>

Output:

Which one of these ways is preferred?

There are some advantages to using both ways of implementing the anchors. These special features of each of the implementations let the user determine which one to use in which case, the main issues which influence the choice of the way are:

The use of the “name” attribute gives the user liberty to choose more complex anchor names where even entities can be added.
The use of the “name” attribute is supported by all the old agents of the old browsers which are not in the case of id.
When using id as the anchor name it can be used for other purposes too like adding styles or easily adding some functionality with JavaScript.

So when the case is that you know a webpage will mainly be opened with modern browsers you can do with the id anchor name approach because it gives the flexibility to style the element at the same time.

If the case is that you don’t need to add any style or functionality then it is advised to do with the “name” attribute as an anchor name approach. In doing that you are ensuring that the anchor works for all the browsers.

Tip: When the same anchor tag is implemented with the id anchor name approach and the “name” attribute as an anchor name approach the first one gets more preference.

Suggest improvement

How to use anchor tag to open links in HTML ?

Share your thoughts in the comments

Should I make Anchors with ‘name’ or ‘id’ in HTML ?

HTML

HTML

Please Login to comment...

Similar Reads

What kind of Experience do you want to share?