How to Link to a Specific Part of a Page HTML

Well, linking to another page on the Internet is pretty much a standard part of designing a website. So much so that it is also included as a basic skill in any course on creating a website actually. Whenever someone taps on a link on your site, the browser normally takes that person to the top of the new document actually. That is normal and expected behavior. Let’s now discuss How to Link to a Specific Part of a Page HTML. Let’s start!

However, what if you guys wanted to link to a specific paragraph or line within a page? Such as my Frequently Asked Questions (“FAQ”) page for thesitewizard.com’s Feedback Form the Wizard links from the questions to the specific paragraphs along with the answers. This article basically describes how you can do this via straightforward HTML.

How to Link to a Specific Part of a Page HTML

Whenever you tap on a URL, the browser then opens it in a new tab and then takes you to the top of the web page. However, what if, you want to go to a specific part of a webpage. Just like the childhood entry Steve Jobs on Wikipedia or a specific Facebook post or a question on Stack Exchange. This way your audience does not really have to waste time navigating the website.

Native Method

Just say that you are writing an article, where you are linking to a particular answer from StackOverflow. Unlike Reddit, there is actually no permalink in StackOverflow, so you will now have to manually edit the HTML code. Thankfully most of the browsers have the ability in order to Inspect Elements.

  • Just simply go to that answer that you want to link to and Right-tap on the area near it. From the right-click menu just select the Inspect Element option.

how to link to a specific part of a page html

  • It will then show you HTML code, look for an ID tag or Value option. When you find it, then copy it on your clipboard.
  • Next, you have to take the URL of the web page and append the #ID at the end of it as well.

Also, 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 basically become –
http://stackoverflow.com/questions/214741/what-is-a-stackoverflowerror#29279234

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

Chrome Extension

Now in the recent Chrome update, Google search now highlights the searched text on the webpages in order to make it easier for the reader. Thus, for web developers, to make it easier in order to link to a specific text on a webpage. Google also launched the Link to Text Fragment Chrome extension.

When you have the extension installed, you can then create links to a specific portion of the webpage. Just choose a portion of the text on the webpage, right-tap and then tap on “Copy Link to Selected Text”. It will then generate a link and also automatically copy it on the clipboard.

Download – Link to Text Fragment

how to link to a specific part of a page html

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

Facebook, Twitter & Social Media

Well, in order to link to a specific post on famous sites such as Facebook, Twitter, or even Stack Exchange, etc. Then look for the post’s time-stamps. When you find it, right-tap on it and copy its URL. Now, if you guys paste the URL in a new tab, then you will only see that particular post. This basically works for most websites that use timestamps.

Wikipedia

If you guys link often to a link wiki page, Wikipedia has also a native option. Navigate to the Contents section of the wiki page and then you will find jump points already created actually. You guys can easily link the section through copying the links of the jump point in the content section as well.

How can you create a Twitter intent link?

A Twitter intent link basically encourages a reader in order to share a specific line of text to Twitter. Such as, a Pew Research report page also includes four separate sections of text along with Twitter intent links. That is indicated not only by a hyperlink, however, also along with a small Twitter icon.

Whenever a reader along with a signed-in Twitter account that actually follows any of these. The selected text auto-basically populates a tweet along with a link to the source article (Figure G). You guys may add these links either via following the Twitter intent format or via using an online generator.

Conclusion

You are good to go. If you have any queries and issues related to this “how to link to a specific part of a page HTML” article. Then let us know in the comments section below.

Also See: Fix The Error in Google Chrome “Your Connection Is Not Private”

Leave a Reply

Your email address will not be published. Required fields are marked *