Home » Internet » How to Link to a Specific Part Of A Webpage & Share it

How to Link to a Specific Part Of A Webpage & Share it

by Mrinal Saha
chrome developer tools

When you click a URL, the browser opens it in a new tab and takes you to the top of the web page. But what if, you want to go to a specific part of a webpage. Like the childhood entry Steve Jobs on Wikipedia or a particular Facebook post or a question on Stack Exchange. This way your audience doesn’t have to waste time navigating the website.

1. Native Method

Say you are writing an article, where you are linking to a specific answer from StackOverflow. Unlike Reddit, there is no permalink in StackOverflow, so you’ll have to manually edit the HTML code. Thankfully most browsers have the ability to Inspect Elements.

Simply go to that answer you want to link to and Right-Click on the area near it. From the right-click menu choose the Inspect Element option.

Inspect-Elements-in-chrome

It’ll show you HTML code, look for an ID tag or Value option. Once you find it, copy it on your clipboard.

find-out-ID-tag-from-souce-code

Next, take the URL of the web page and append the #ID at the end of it.

For instance, if the URL of the page is —

http://stackoverflow.com/questions/214741/what-is-a-stackoverflowerror

and its ID is “29279234“, then the jump URL will become –

http://stackoverflow.com/questions/214741/what-is-a-stackoverflowerror#29279234

And that’s it when someone clicks that link, it will take them directly to that specific part of the webpage.

2. Chrome Extension

In the recent chrome update, Google search now highlights the searched text on the webpages to make it easier for the reader. Hence, for web developers, to make it easier to link to a specific text on a webpage, Google launched the Link to Text Fragment Chrome extension.

Once you have the extension installed, you can create links to a specific portion of the webpage. Select a portion of the text on the webpage, right-click and click on “Copy Link to Selected Text”. It will generate a link and automatically copy it on the clipboard.

Download Link to Text Fragment

The extension is pretty new and has a couple of bugs. In case your selected portion of text contains a hyperlink or an image, basically non-text element, it generates an error saying – “Couldn’t create a unique link, please select a longer sequence of words”. The error message is totally wrong. The problem is the extension fails when you have a hyperlink or non-text elements within the selected text.

3. Facebook, Twitter & Social Media

To link to a specific post on popular sites like Facebook, Twitter, or even Stack Exchange, etc, look for the post’s time-stamps. Once you find it, right-click it and copy its URL. Now, if you paste the URL in a new tab, you’ll only see that particular post. This works for most websites that use timestamps.

Link-to-a-Specific-Post-on-facebook-with-time-stamp

4. Wikipedia

If you link often link wiki page, Wikipedia has a native option. Navigate to the Contents section of the wiki page and you will find jumpoints already created. You can easily link the section by copying the links of the jumpoint in the content section.

Closing Words

I mostly use the “Link to Text Fragment” extension. For social media sites like Facebook, Twitter, and even Wikipedia, the native method works quite well. For more issues or queries, let me know in the comments below.

You may also like

Leave a Comment