84

I want to make a link that when clicked, sends you to a certain line on the page (or another page). I know this is possible, but how do I do it?

6
  • 2
    use anchors. Using an anchor tag with #something as the href will cause the page to go to whatever element has that id (in this case "something") in your document. Dec 8, 2011 at 0:50
  • joseph - why did you type that as a comment? that's pretty much the answer and I will plus it if you convert it to one.
    – Kai Qing
    Dec 8, 2011 at 0:52
  • 2
    so... if I have a <div> tag with the id something and have a link that looks something like "<a href="#something">text</a>" it will take you there?
    – mandelbug
    Dec 8, 2011 at 0:53
  • one more question on that. How do I do that when going from page1.html to a div tag on page2.html? (asked the same question below)
    – mandelbug
    Dec 8, 2011 at 0:57
  • see bozdoz's answer. notice the #answers addition to the end of the url.
    – Kai Qing
    Dec 8, 2011 at 1:10

5 Answers 5

97

your jump link looks like this

<a href="#div_id">jump link</a>

Then make

<div id="div_id"></div>

the jump link will take you to that div

3
  • 1
    one more question on that. How do I do that when going from page1.html to a div tag on page2.html?
    – mandelbug
    Dec 8, 2011 at 0:55
  • 5
    Your jump link would be (URL or path)page.html#div_id
    – Dallas
    Dec 8, 2011 at 1:11
  • can we avoid amending the URL? Jan 5, 2019 at 22:51
32

Hashtags at the end of the URL bring a visitor to the element with the ID: e.g.

http://stackoverflow.com/questions/8424785/link-to-a-section-of-a-webpage#answers 

Would bring you to where the DIV with the ID 'answers' begins. Also, you can use the name attribute in anchor tags, to create the same effect.

Resource

4
  • 2
    What if the section where I want to go has no id, but only class? Jan 29, 2016 at 7:16
  • There is no built-in way to scroll to a class via the URL address bar
    – bozdoz
    Jul 20, 2016 at 18:14
  • 2
    A hashtag is a means of indicating that a term, in plain text, should be hyperlinked to a search engine on social media networks. It gets the name because it it uses a hash character to prefix it. Please don’t confuse other uses of the hash character with hashtags.
    – Quentin
    Jan 19, 2017 at 7:47
  • Sorry, should have called it "jump link" :P
    – bozdoz
    Jan 19, 2017 at 17:31
12

The fragment identifier (also known as: Fragment IDs, Anchor Identifiers, Named Anchors) introduced by a hash mark # is the optional last part of a URL for a document. It is typically used to identify a portion of that document.

<a href="http://www.someuri.com/page#fragment">Link to fragment identifier</a>

Syntax for URIs also allows an optional query part introduced by a question mark ?. In URIs with a query and a fragment the fragment follows the query.

<a href="http://www.someuri.com/page?query=1#fragment">Link to fragment with a query</a>

When a Web browser requests a resource from a Web server, the agent sends the URI to the server, but does not send the fragment. Instead, the agent waits for the server to send the resource, and then the agent (Web browser) processes the resource according to the document type and fragment value.

Named Anchors <a name="fragment"> are deprecated in XHTML 1.0, the ID attribute is the suggested replacement. <div id="fragment"></div>

3

If you are a user and not a site developer, you can do it as follows:

https://example.com/index.html#:~:text=foo
1

Simple:

Use <section>.

and use <a href="page.html#tips">Visit the Useful Tips Section</a>

w3school.com/html_links

2
  • 4
    It is not limited to sections, and the other answers (from 5 years ago) are already correct.
    – fishinear
    Jan 6, 2017 at 13:07
  • This example is incomplete. Please include how the "tips" name would be defined. Jan 13, 2021 at 15:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.