HTML Fragment Links

Understanding HTML Fragment Links

A fragment link points to a specific location within a webpage rather than simply opening the page at the top. Fragment links use an element's id value to identify the destination.

They are useful for tables of contents, long documents, FAQ pages, navigation menus, and any page where visitors may want to move directly to a particular section.

Fragment Link Syntax

A fragment link uses a number sign (#) followed by the id of the element that should become the destination.

<a href="#contact">Jump to Contact Information</a>

In this example, the browser looks for an element whose id value is contact.

Creating a Fragment Target

The destination element needs an id that matches the fragment identifier used by the link.

<h2 id="contact">Contact Information</h2>

The id value is written without the number sign in the HTML attribute. The number sign is added to the href value when creating the fragment link.

<a href="#contact">Jump to Contact Information</a>

Linking Within the Same Page

When the link and destination are on the same page, the href value can contain only the fragment identifier.

<a href="#services">View Services</a>

...

<h2 id="services">Services</h2>

When the visitor selects the link, the browser navigates to the element with id="services". If the target is farther down the document, the browser normally scrolls it into view.

Linking to a Fragment on Another Page

A fragment identifier can be added to a URL that points to another page. The browser loads the destination page and then navigates to the element identified by the fragment.

<a href="contact.html#hours">View Business Hours</a>

The destination page would contain an element with the matching id:

<h2 id="hours">Business Hours</h2>

The page portion of the URL can be relative, root-relative, or absolute depending on the location of the destination.

Fragment Identifiers in URLs

The fragment identifier appears at the end of a URL and begins with a number sign. It identifies a location within the resource addressed by the rest of the URL.

https://www.example-web.site/jump-links.html#example-jump-link

In this example, https://www.example-web.site/jump-links.html identifies the webpage and #example-jump-link identifies the target within that page.

The fragment is handled by the browser and is not normally sent to the web server as part of the HTTP request for the resource.

HTML Fragment Link Example

The following example demonstrates links to sections within the same document.

<h2>Page Contents</h2>

<p><a href="#about">About</a></p>
<p><a href="#services">Services</a></p>
<p><a href="#contact">Contact</a></p>

<h2 id="about">About</h2>
<p>Information about the website.</p>

<h2 id="services">Services</h2>
<p>Information about available services.</p>

<h2 id="contact">Contact</h2>
<p>Contact information for the website.</p>

Try the links in the editor to see how the browser moves directly to the element whose id matches the fragment identifier.

Text Fragment Links

A text fragment link can navigate directly to specific text on a webpage without requiring an id attribute on the destination element. Supporting browsers scroll to the matching text and typically highlight it.

Text fragments use the #:~:text= directive followed by the text to locate.

https://www.example-web.site/jump-links.html#:~:text=WEB%20DESIGN%20STARTED%20WITH%20TEXT-BASED%20HTML

The text can also identify a range by providing starting and ending text.

#:~:text=textStart,textEnd

For more precise matching, optional prefix and suffix text can provide additional context.

#:~:text=[prefix-,]textStart[,textEnd][,-suffix]

Because text fragments depend on matching the page's text, a link may stop working if the destination content is rewritten. Traditional fragment links using an id are generally more reliable when you control the destination page.

Fragment Link Best Practices

• Give the destination element a unique and descriptive id.
• Use the number sign (#) before the target id in the link's href value.
• Make sure the fragment identifier exactly matches the destination element's id.
• Use descriptive link text so visitors understand where the link will take them.
• Keep id values short, meaningful, and stable so existing links do not break unnecessarily.
• Test fragment links to make sure the intended destination is clearly visible after navigation.

Summary

HTML fragment links use a number sign followed by an element's id to navigate directly to a specific location within a webpage. They can link to a target on the current page or be combined with a URL to navigate directly to a section on another page.