Website Tips for Editorial Pros: Using Jump-to Instructions

Jump-to coding is handy for when you have a webpage with a lot of information on it and you want your readers to be able to jump to key headings with ease.

An example is my academic proofreading portfolio page. While I’ve taken care to ensure all the information on my homepage is above the fold, the academic portfolio page is a different story. It lists all the academic projects I’ve worked on to date. I want to be able to show potential clients the breadth of my experience, but there are nearly 200 book titles on display. That’s a lot of text to take in – and it’s likely to bore readers to tears unless I help them to navigate the page with ease. That’s why I've used the jump-to html code.

Jump-to code is really easy to incorporate even if you’ve no experience of coding. To see how it works in real time, click on the picture below.

---

Most of the popular DIY website builders such as WordPress and Weebly include html boxes that you can write your code in. Here’s the code you’ll need if you want to incorporate jump-to instructions:

---

Simplified example 
You have three headed areas on a page you want your readers to be able to jump to: Training, Qualifications, and Recent Clients.

Here is the code you could place in your html box at the top of your page:

Jump to <a href="#train">Training</a> ● <a href="#quals">Qualifications</a> ● <a href="#rc">Recent Clients</a>

This would appear as:

Jump to Training ● Qualifications ● Recent Clients

If you don’t want to use the words “Jump to” you can change them to whatever you want. The same applies to the bullet points. For example, you could use the following code instead:

For more information click on the following: <a href="#train">Training</a> | <a href="#quals">Qualifications</a> | <a href="#rc">Recent Clients</a>.

This would appear as:

For more information click on the following: Training | Qualifications | Recent Clients.

Now place the following code in an html box just above the section of the page with training information:

<a name="train"></a>

Then you would place the remaining two html boxes (with the amended code) just above their respective sections:

<a name="quals"></a>
<a name="rc"></a>

In the above example "#quals" could be rendered in any way you wish ("#q", "#qualifications", "#qu") as long as you ensure the abbreviated version in the above-heading code is the same (<a name="q"></a>, <a name="qualifications"></a> ,<a name="qu"></a>).

---

Some of you may have websites that allow you to do this automatically, without going through the rigmarole of coding yourself. However, if you do have to embed your own code then I hope the above example demonstrates that you don't need to be an html whizz to get the desired results.

<< Go to the blog homepage    << Search this blog    << More website tips