CODEWITHSUNDEEP
htmlhyperlink
mandelbug
mandelbug

Reputation: 1798

Link to a section of a webpage

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?

Upvotes: 107

Views: 258879

Answers (6)

Flimm
Flimm

Reputation: 150573

There are multiple ways to do this.

1. Using the id attribute

You can add the id attribute to any target element, giving it a name:

<h1 id="introduction">Introduction</h1>

You can link to this element using the fragment identifier of a URL (the part after #), like this: http://example.com/example.html#introduction Browsers strip the fragment identifier from the URL when posting a request to the server, and then use the fragment identifier to scroll to the targetted element in the document.

id attributes must be unique across the whole document.

2. Using the name attribute on a <a> element

The <a> element has two purposes. It's well-known for its first purpose of acting as a link using the href attribute. However, it can also act as a target, using the name attribute, like this:

<a name="introduction">Introduction</a>

You can link to this place in the document using the fragment identifier of a URL, like this: http://example.com/example.com#introduction

Unlink the id attribute, only the <a> element can use a name attribute for this purpose. If there are two elements with the same id or name values, I don't know which one will take precedence. MDN says using the name attribute on <a> like this is deprecated, and encourages the use of id attributes instead.

3. Using text fragments

In some browsers, but not all (notably, not Firefox), you can use text fragments to target a particular piece of text in a document, even if it does not have an id or name attribute. The fragment identifier of the URL must begin with :~: and then contain one or more directives. Quoting from MDN:

https://example.com#:~:text=[prefix-,]textStart[,textEnd][,-suffix]

The key parts to understand are as follows:

:~:

  • Otherwise known as the fragment directive, this sequence of characters tells the browser that what comes next is one or more user-agent instructions, which are stripped from the URL during loading so that author scripts cannot directly interact with them. User-agent instructions are also called directives.

text=

  • A text directive. This provides a text fragment to the browser, defining what text is to be linked to in the linked document.

textStart

  • A text string specifying the start of the linked text.

textEnd Optional

  • A text string specifying the end of the linked text.

prefix- Optional

  • A text string followed by a hyphen specifying what text should immediately precede the linked text, only allowing for whitespace in between. This helps the browser to select the correct linked text, in cases where there are multiple matches.

-suffix Optional

  • A hyphen followed by a text string specifying what text should immediately follow the linked text, only allowing for whitespace in between. This helps the browser to select the correct linked text, in cases where there are multiple matches.

Supporting browsers will scroll to and highlight the first text fragment in the linked document that matches the specified directive. Note that it is possible to specify multiple text fragments to highlight in the same URL by separating them with ampersand (&) characters.

For security reasons, the feature requires links to be opened in a noopener context — you need to add rel="noopener" to your <a> elements, and add noopener to your window.open() calls when using this feature.

Upvotes: 3

john c. j.
john c. j.

Reputation: 1175

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

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

Upvotes: 8

bozdoz
bozdoz

Reputation: 12860

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

Upvotes: 35

Marc D
Marc D

Reputation: 98

Simple:

Use <section>.

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

w3school.com/html_links

Upvotes: 2

Kevin M
Kevin M

Reputation: 1574

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>

Upvotes: 14

Daniel Hunter
Daniel Hunter

Reputation: 2866

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

Upvotes: 126

Related Questions