264

How do you link (with <a>) so that the browser goes to certain subheading on the target page as opposed to the top?

hippietrail
  • 14,735
  • 16
  • 96
  • 147
Haroldo
  • 34,957
  • 46
  • 126
  • 166

7 Answers7

334

If there is any tag with an id (e.g., <div id="foo">), then you can simply append #foo to the URL. Otherwise, you can't arbitrarily link to portions of a page.

Here's a complete example: <a href="http://example.com/page.html#foo">Jump to #foo on page.html</a>

Linking content on the same page example: <a href="#foo">Jump to #foo on same page</a>

It is called a URI fragment.

McFizz
  • 2,801
  • 3
  • 15
  • 25
Daniel DiPaolo
  • 53,439
  • 13
  • 112
  • 113
  • so do you use the complete example or the same page example? isn't the complete example the same thing? – akantoword May 19 '16 at 21:02
  • 2
    if we had a restful page with url like : `domain.com/#home?page=1` how to use an id in href? – iraj jelodari Sep 14 '16 at 08:15
  • 1
    @irajjelodari You'd put the hash at the end: `domain.com/?page=1#home` – tomsmeding Nov 15 '16 at 15:53
  • i had to use 2 hashtags in the url like : `example.com/#RouteName?page=1#ID`. one for routing and one for navigation inside of current page. finally i used html5 mode of URL in order to removing route hashtags ;) @tomsmeding – iraj jelodari Nov 19 '16 at 15:20
  • @Daniel sir ,I am having a similar situation, What to do if the `#foo` element is in hidden condition? –  Apr 13 '19 at 08:32
  • is there a way to do this with a class that is only used once? – Chagai Friedlander Dec 23 '19 at 22:36
  • The blog platform Medium.com seems to ignore the hash, but it works with a slash before the hash. (n=1, but I have no reason to think it will be different for other posts/blogs on the same platform.) – Elias Hasle Jun 04 '21 at 10:39
49

You use an anchor and a hash. For example:

Target of the Link:

 <a name="name_of_target">Content</a>

Link to the Target:

 <a href="#name_of_target">Link Text</a>

Or, if linking from a different page:

 <a href="http://path/to/page/#name_of_target">Link Text</a>
Michael Aaron Safyan
  • 90,931
  • 15
  • 133
  • 196
36

Just append a hash with an ID of an element to the URL. E.g.

<div id="about"></div>

and

http://mysite.com/#about

So the link would look like:

<a href="http://mysite.com/#about">About</a>

or just

<a href="#about">About</a>
Felix Kling
  • 756,363
  • 169
  • 1,062
  • 1,111
27

On 12 March 2020, a draft has been added by WICG for Text Fragments, and now you can link to text on a page as if you were searching for it by adding the following to the hash

#:~:text=<Text To Link to>

Working example on Chrome Version 81.0.4044.138:

Click on this link Should reload the page and highlight the link's text

Abderrahmane TAHRI JOUTI
  • 2,704
  • 1
  • 24
  • 40
23

Here is how:

<a href="#go_middle">Go Middle</a>

<div id="go_middle">Hello There</div>
Sarfraz
  • 367,681
  • 72
  • 526
  • 573
14

You have two options:

You can either put an anchor in your document as follows:

<a name="ref"></a>

Or else you give an id to a any HTML element:

<h1 id="ref">Heading</h1>

Then simply append the hash #ref to the URL of your link to jump to the desired reference. Example:

<a href="document.html#ref">Jump to ref in document.html</a>
Daniel Vassallo
  • 326,724
  • 71
  • 495
  • 436
0

Provided that any element has the id attribute on a webpage. One could simply link/jump to the element that is referenced by the tag.

Within the same page:

<div id="markOne"> ..... </div> 
   ......
<a href="#markOne">Jump to markOne</a>

Other page:

<div id="http://randomwebsite.com/mypage.html#markOne"> 
  Jumps to the markOne element in the mypage of the linked website
</div>

The targets don't necessarily have an anchor element.

You can go check this fiddle out.

Digdarshan Kunwar
  • 19
  • 2