How do I link to part of a page? (hash?)

Question

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

score 372 · Accepted Answer · edited Dec 02 '20 at 04:10

372

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.

edited Dec 02 '20 at 04:10

McFizz

3,013
3
18
26

answered May 14 '10 at 15:01

Daniel DiPaolo

55,313
14
116
115

1

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
1

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
How to apply this in react ?? – ZebraCoder Sep 19 '22 at 05:23

score 54 · Answer 2 · answered May 14 '10 at 15:02

54

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>

answered May 14 '10 at 15:02

Michael Aaron Safyan

93,612
16
138
200

15

The broser will also jump to any element with the id `name_of_target`. You need not use an `` tag as the target. So another target could be `
Content
`. – Cyrille Oct 16 '14 at 21:52
14

Note this is now obsolete in HTML5. – Tim Jun 12 '16 at 11:53
6

Just to clarify Tim's comment, fragment links and empty "a" tags are still current in HTML5. Using the "name" tag is deprecated, replaced by "id." https://html.spec.whatwg.org/multipage/browsing-the-web.html#navigate – melds Jul 26 '21 at 21:18

Abderrahmane TAHRI JOUTI · Answer 3 · 2022-05-14T20:00:30.613

45

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

edited May 14 '22 at 20:00

answered May 09 '20 at 19:12

Abderrahmane TAHRI JOUTI

3,514
2
26
43

I just tried this in Firefox and it highlighted text, unless the text was in my
tag, but this didn't scroll down to the text in the page like in Chrome or as an anchor would. Also, reloading that URL doesn't seem do do anything, even after scrolling to a different place on the page, but going off the page and going back to the URL with that parameter works again (in Chrome). I wish this was more consistent... Do you have a link to this logic and related? – DanielT Feb 06 '23 at 21:18
It is a Chromium-based only feature. I found this site with more on it: https://mgearon.com/html/text-fragments/ – DanielT Feb 06 '23 at 21:29
1

Check [**Can I Use**](https://caniuse.com/?search=text%20fragments) for the current state of browser support – Brett Donald Feb 14 '23 at 06:56

score 41 · Answer 4 · answered May 14 '10 at 15:03

41

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>

answered May 14 '10 at 15:03

Felix Kling

795,719
175
1,089
1,143

Sarfraz · Answer 5 · 2010-05-14T15:07:41.410

25

Here is how:

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

<div id="go_middle">Hello There</div>

edited May 14 '10 at 15:07

answered May 14 '10 at 15:02

Sarfraz

377,238
77
533
578

score 15 · Answer 6 · answered May 14 '10 at 15:02

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>

score 0 · Answer 7 · answered Jul 27 '20 at 07:07

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.

score 0 · Answer 8 · answered Jul 05 '23 at 00:20

0

also, you can use this in frame or iframe src property.

So

<iframe src="page.html#content">

will take the page to that point, if that id exits in the document.

answered Jul 05 '23 at 00:20

tanaydin

5,171
28
45

How do I link to part of a page? (hash?)

8 Answers8

Content

Linked

Related