Search code examples
htmlhyperlinkcss-selectorsanchor

How to generate a hyperlink to specific point on page without an id/name?


Scenario/Request

  • I would like to send a link to someone, to a website which I don't control / can't change
  • As the page is quite long (11 paragraphs), I would like to point users to a specific point on webpage
  • However there are no ID/name attributes in the page, the content is all made-up of either un-named <h2> and <p> tags.

Scenario/Request

Is there anyway I can generate a link to something like a relative CSS anchor (e.g. the 3rd <H2> tag on page, please?


Solution

  • There isn't a cross-browser way to do this yet. There have been two proposals in the last decade with unofficial and/or official implementations, of which one is in active development and may soon be available as a cross-browser standard.

    The first proposal was CSS Selectors as Fragment Identifiers, which would have allowed you to use a CSS selector to link to a specific element in the page via a URL fragment:

    https://example.com/index.html#css(h2:nth-of-type(3))
    

    (This does not actually represent the 3rd h2 on the page. It is not possible to write a CSS selector for that.)

    A draft was written, some discussions were had (that I was personally involved in), and some proofs-of-concept in the form of browser extensions were made, but it never took off. See also CSS selector fragment support

    The second proposal, and the one currently in active development, is Text Fragments, which allows you to link to arbitrary text in a URL fragment:

    https://example.com/index.html#:~:text=Example Heading
    

    The first implementation was by Google themselves in the form of an extension for Google Chrome and Microsoft Edge, but this feature has since actually been shipped in a number of Chromium-based browsers as of 2020. Try searching for a phrase in your question or my answer.