How to Link to Specific Section of the Same or Different Web Page


Links do more than just connect two different pages. You can use them to create a user friendly navigation within the same page.

For instance,

When you have a long article, you can subdivide it into different sections and create a menu at the beginning for users to jump to the section that interest them most.

You can also use these links to refer someone to a specific section of a different article so that they do not have to scroll up and down trying to find the information. 

It makes work easy and improves site usability.

Here is how to link to a specific section of a web page

For this kind of linking to work, you need an opening anchor link tag and a pointer link tag to take you to the section.

Don’t worry about those tags if you don’t know anything about coding. Just follow these steps religiously and you will be home and dry.

Step one

Coin an interesting name / phrase for the object / section you want to link to. I advise that you should use a name or phrase that is relatable to the object / section.

This name will make the section unique since the source and destination of the link are on the same URL.

In case you use a phrase, do not leave any blank spaces. Use underscores (not hyphens) to fill the spaces.

For example, if I want to jump to step four of this guide, I can use the phrase: step_four

Step two

Put the name you chose in step one above into the opening HTML link tag like this:


<a id="target_anchor_link_name"> (in our case, <a id="step_four">)

To see this code in action, click here to skip to step four.

Step three

Wrap the target section head / object you want to link to into opening <a> and closing </a> tags.

For example, in our case, we should wrap #step_four in the opening and closing tags. Our anchor tag thus becomes: 


<a id="step_four">Step four</a>

This tag will act as a beacon for the incoming / pointer link, which we are going to learn how to create in step four.

Step four

Now create the link to take you to the specific section you want to skip to.

Here, you create a link the normal way but instead of putting the URL, you put the name that we created in step one. Add a hash sign (#) just before the name.

In our case, our link should look something like this: 


<a href="destination_page_url#step_four">Skip to step four</a>

Congratulations, you just created a hyperlink within the same page.

You can click here to go back to the top of the page to confirm that it works.

Please note:

If you are linking to a specific section of a different page, include the URL of the new page before the #key_word tag.

For example, clicking here will take you to the section just below the infographic on the target page.

I first added the anchor tag on the target page as follows:

<a id="choose_bluetooth_headset>my target text</a>.

After inserting that code in the target page, I came back here and created the link targeting that specific section as follows: 

<a href="destination_page_url#choose_bluetooth_headset">clicking here</a>.

I hope this helps you create links within your page. 

If you have any issue, please let me know in the comments.

Related

Hacks 5692880400084621869

Post a Comment Default Comments

emo-but-icon

Try Amazon Fresh

Video of the day

item