Linking Directly to Specific Parts of a Page

Ever been on a website, clicked a link, and it took you to a specific part of the same page, or the most relevant section of a different page? It’s super handy to jump to a specific part of a page, right? It allows you to skip the scrolling and get right to reading and getting what you came for. On the Internet, this is super easy to do as long as you have HTML access to your document.

If you’re using WordPress, that’s the Edit as HTML option available for Blocks (or the Text tab if you’re in the Classic Editor).

To understand how links like this work, you first need to understand a little bit of HTML.

A Tiny Introduction to HTML

HTML Tags

HTML stands for Hyper Text Markup Language and it’s the language of the web. It’s what makes the words and boxes and link appear on any online document or page. Within HTML each element is wrapped in something called tags. For example, this paragraph is one element, and it’s wrapped in <p> and </p> like so:

<p> This is my paragraph </p>

You begin with the element identifier (p) surrounded by angle brackets, then add your content, and then signify the end of the element by adding the same angle brackets with a slash and the element identifier (p) in between.

HTML IDs

In HTML, you can add different types of attributes to an HTML element. One of the attributes available is setting a unique identifier (aka label or name) for each element by adding it to the the starting tag, called an ID. The ID should be unique and only appear once on any given page. Setting an ID is very easy, you simply include id="identifier" in the starting tag of the element:

<p id="unique-explanation"> This is my paragraph </p>

The following rules need to be followed for an ID to be successful:

  1. No spaces. An ID cannot have any spaces, use dashes or underscores to separate words.
  2. Do not use periods (.), hashtags (#), or colons (:) in your ID. These characters have special meaning in HTML.
  3. Stick to using lowercase letters and numbers, unless you absolutely need to use uppercase letters.

HTML Links

A regular link on the web is composed of two aspects:

  1. A (hyper) link. This is where the link goes, the URL.
  2. Anchor text. This is what you click to go to the link referenced.

Here’s what a link looks like in HTML:

<a href="https://westartwithgood.co">Homepage</a>

The HTML tag is a which stands for anchor. In the starting tag there is an attribute called href, which stands for hypertext reference, also known as a URL or link. You can refer to URLs and IDs in the href. Linking to an ID starts with the hashtag (#).

If you were linking to an ID called unique-explanation on the same page as the link, you would create a link like this:

<a href="#unique-explanation">Link to the special Paragraph</a>

So the URL is #unique-explanation.

When someone clicks this link, the browser will immediately jump down (or up) to the paragraph with the unique-explanation ID.

If you were linking to an ID called unique-explanation on a different page with the URL, https://westartwithgood.co/awesome, you would create a link like this:

<a href="https://westartwithgood.co/awesome#unique-explanation">Special Paragraph on the Page Awesome</a>

So the URL is https://westartwithgood.co/awesome#unique-explanation. It’s the page URL with the hashtag and ID appended to the end.

Both these links will allow readers to jump to a specific part of a page now.

Creating and linking to IDs

Let’s say you have an About page on your website and the last section of your About page is the Careers section, which links to available jobs in your company. When you mention that you’re hiring in a blog post, you want to link directly to the Careers section so folks don’t have to scroll to find it. Here’s how you would do that:

Add an ID to the Careers heading tag

If you’re using the regular editor (Gutenberg) in WordPress, here is how you add an ID to a heading tag (and most common blocks):

  1. Select the appropriate Block, in this case the Heading block that says Careers.
  2. In Block Inspector for the Heading block, expand the Advanced section, and look for the field, HTML Anchor. Add your ID there.
Adding an HTML anchor to a heading in Gutenberg to let you jump to a specific part of a page

If the block you’re trying to use does NOT have the HTML Anchor option, here’s how you’ll add it instead:

  1. Select the appropriate Block, in this case the Heading block that says Careers.
  2. Click the More button in the floating toolbar, and select Edit as HTML
  3. Add the ID code id="careers" inside the starting tag< <h2>/li>
Adding an ID to a heading in HTML to let you jump to a specific part of a page

And if you’re using the Classic Editor, simply switch to the Text tab, and add the code shown above in the same way.

Link to your ID on the About Page

If you’re using the new editor’s link adding functionality, you’ll simply add the URL: https://mysite.com/about#careers:

Adding a link that lets you jump to a specific part of a page in Gutenberg

If your block uses the older link-adding functionality or you’re using the Classic Editor, it’ll look like this:

Adding a link in the Classic Editor that lets you jump to a specific part of a page

Ta da! You’ve added a link that lets readers jump to a specific part of a page. Go forth and link away!

Get More Awesome Tips

We love sharing tips like this with you to make your content-creating experience more awesome! Sign up and we’ll send you tips when we publish them. 🙂

Yay! Look for awesome emails in your box intermittently!

It looks like you're already subscribed. Yay!