How to: use “id”s with your header tags to link to sub-sections

Aug 14th, 2018

If you’re writing in-depth articles or how-to blogs, it’s sometimes a good idea to give readers a way to skip between sections – while a 3000 word article may seem overwhelming (look how small the scroll bar is!), an easily navigable five section piece could prevent that “bounce” back to the SERP


Sections

  1. Introduction
  2. Adding an “id” to a tag
  3. Adding the shortcut
  4. Where to position your shortcuts

You will have seen these links in various places – the return to the top link and various other types of internal page navigation – but may not have used them to avoid the complication of adding the code to your content, but the process is surprisingly easy.

While it’s possible to use JS to scroll to sections, the HTML counterpart is less complicated and serves the purpose just as well – quicker depending on your site-speed. For that reason, we’re just going to give you the HTML method in this blog.

Adding an “id” to a tag

The first step in the process is to add an “id” to the section of your content that you would like to link to – this is generally added to one of your h tags. For each subsection of your content, you should be using a header tag (for more information on these header tags, you can take a look at our SEO Uncovered guide to Technical SEO). These are the < h1 >, < h2 >, < h3 >, etc that you use to title and subtitle pieces of content – you can also add it to a standard paragraph tag if needs be (as with the intro text to this blog).

When I mention adding an “id” to these tags, the process is quite simple. Within the angle brackets, you simply add the “id” after a space, so within the tag it would look like this:

h2 id=”yourID”

The only advice I’d give here is to keep the name of the “id” short – just to avoid complicating the shortcut unnecessarily.

Return to the top

Adding the shortcut

Your shortcut is done in the same way you would link to any content internal or external – using the < a > tag. The only difference is that you will use the URL of the page you’re writing, with the addition of your “id” to denote a specific subsection. This is done by adding a hash to the end of the URL, followed by the “id” you have specified in the previous step.

a href=”https://www.yoursite.com/subfolder/your-content#yourID”

Return to the top

Where to position your shortcuts

In longer pieces (you’ll see them in this blog, but they’re not really necessary), your best bet is to allow navigation to all other sections prior to or at the end of each section – or to offer a ‘return to top’ link. This way, users can switch between the sections they need as and when they need them.

The main advice is to think like a reader – your content may answer a number of questions, so traffic may come for any number of queries. Allowing your reader the ability to skip straight to the pertinent section of the content can help to lower the bounce rate of longer content that may seem a little overwhelming at first glance.

Return to the top


Click Consult are committed to making your life easier through knowledge sharing. Sign up to our blog to stay up to date, or check out our resources for more actionable insights.

Facebook Twitter Instagram Linkedin Youtube