How do I link directly to a specific PART of a blog post or online article? (e.g. to a paragraph or heading)

Question

I want to link to some really cool PART of an article, like this blog post announcing the card ageing power-up in Trello, amongst other things.

What can I use, using Google Chrome, or in any browser in general, to produce a URL that when clicked, would link directly into that header? i.e. when a user follows the link, they should see the following:

• 

Answer 1

In HTML, you can link to fragments by appending #FRAGMENT at the URL, where FRAGMENT is the value of an id attribute (on any element) or a name attribute (on an a or area element). The HTML author has to provide these attributes.

A manual way how to find these: Mark the whole content you want to link to, inspect the source code (usually rightclick and then something like "Show source"), and Ctrl+f for id= and name=.

XPointer is a specification that allows to link to any part of a XHTML document, even if the author didn’t provide any fragment identifiers. Currently you’d probably need a browser add-on (and so does the one you want to give the link to) to enable XPointer support.

For old versions of Firefox, there is FXPointer:

How many times have you told a friend or colleague "Go to http://example.com/some/doc and search for XXXX" ? I do it a lot actually. In fact, this becomes increasingly important as the mobile web accelerates and small screens with harder-to-use keyboards become more prevalent. I would like to start creating links in my documents and blog posts that point exactly to some paragraph on the page. I hope the FXPointer Firefox extension will help.

Answer 2

You can't (on this specific page). Linking to a particular subsection (such that a user's browser automatically scrolls to it) requires the use of HTML Anchors for each section, which that page does not have. More specifically, the heading would need to either contain or have nearby:

• An A (anchor) tag
• With an id or name property

If those criteria are met, then you can link to

http://example.com/webpage.html#anchorName

where anchorName is the value of the name or id property.

That Trello page just has a header though:

<h2>Card Aging</h2>

So it can't be linked to. If they had used instead:

<h2><a name="aging">Card Aging</a></h2>

then you could link to it like such:

http://blog.trello.com/introducing-power-ups-calendar-card-aging-and-more/#aging

Answer 3

In modern versions of Chrome, you can use this special anchor: #:~:text=ENCODED_TEXT_YOU_WANT_TO_LINK.

https://www.howtogeek.com/658842/how-to-use-google-chromes-new-deep-linking-feature/