Specifying locations in web pages

Locations within web pages can be marked for direct access by links on:

• The same page.
• The same website.

Keep these considerations in mind when adding links to web pages:

• Several short pages may present information more conveniently for readers than one long page with internal links.
• Links within large pages work nicely for quick access to directories, tables of contents, and glossaries.
• Intra document linking works best on your own website, where you can create and control the markup.

When you link to spots on someone else’s website, you’re at its manager’s mercy because that person controls linkable spots. Your links will break if a site designer removes or renames a spot to which you link. 

Naming link locations

To identify and create a location within a page for direct access from other links, use an empty anchor element with the name attribute, like this:

<a name="top"></a>

The id attribute also works as an anchor element. It’s often cleaner to use this method depending on your page design approach. (If you use id attributes for CSS, it may be easier to remember and more consistent overall). The anchor element that marks the spot doesn’t affect the appearance of any surrounding content. You can mark spots wherever you need them without worrying about how your pages look (or change) as a result.

Linking within the same page

Links can help users navigate a single web page. Intra document hyperlinks include such familiar features as:

• Back to Top links.
• Tables of contents.

An intra document hyperlink, also known as a named document link, uses a URL like this:

<a href="#top">Back to top</a>

The hash sign (#) indicates that you’re pointing to a spot on the same page, not on another page.

The following code shows how two anchor elements combine to link to a spot on the same page. (Documents that use intra document links are usually longer. This document is short so you can easily see how to use the top anchor element)

.https://stackblitz.com/edit/web-platform-qq2xjc?embed=1&file=index.html&hideDevTools=1&hideExplorer=1&hideNavigation=1

We can see how this HTML markup appears in a web browser. If the user clicks the Back to Top link, the browser jumps back to the top spot — marked by <a name=”top”></a>. The text for this example is short, but you can see how it works by resizing your browser window (making it tall and narrow) to display only two or three words per line of text.

Linking within the same website

You can combine intra document and inter document links to send visitors to a spot on a different web page on your site. Thus, to link to a spot named descriptions on a page named home.html on your site, use this markup:

<p>Review the <a href="home.html#descriptions">document descriptions</a>
to find the documentation for your particular product.</p>

Linking on other websites

If you know that a page on another site has spots marked, you can use an absolute URL to point to a particular spot on that page, like this:

<p>Find out how to
<a href="http://www.yourcompany.com/training/online.htm#register">
register</a> for upcoming training courses led by our instructors.</p>

Be sure to check all links regularly to catch and fix the broken ones.

---