How to use the name attribute of anchor tags to redirect links to a location on a different page?

| | 1 min read

We had encountered a situation on one of our Drupal sites where we had to create HTML links which on clicking should point to different locations on a different page. We solved this problem by making use of the 'name' attribute of anchor tags. If you are facing the same scenario in your Drupal site and would like to know how to use the 'name' attribute of anchor tags to redirect links to a location on a different page then read on to find out more.

Here is how to do it.

Suppose we have two tags on the target page say Page 2 - 'List of Content 1' and 'List of Content 2'. We need to link the Content 1 and Content 2 of Page 1 to List of content 1 and List of content 2 on Page 2.

  • Create the 'name' attribute for List of Content 1 and List of Content 2.
     <a name="ListofContent1">List of Content 1</a>
      <a name="ListofContent2">List of Content 2</a>
  • Include a '#' followed by 'name' attributes in 'a href' tag.
    <a href = 'www.example.com/page2#List of Content1'> Content 1</a>
    <a href = 'www.example.com/page2#List of Content2'> Content 2</a><li>

The above code does the following. On clicking the Content 1 and Content 2 of Page 1, it will take you to 'www.example.com/page2' and it will point you to the List of Content 1 and List of Content 2.