How to Create Named Attribution Jumps

How to Create 
Named Attribution Jumps

What You Will Learn

Have you ever gone to a FAQ page and it has a bunch of questions that are links at the top of the page. If you click on them they bring you to a section of the same page further down. Sound familiar?

Check out my newly designed Review Index for an example. I have the alphabet listed at the top of the page and if you click on one of the letters you will be brought to the section of my review list that begins with that letter. Try it out. See how that works? That’s what you’ll be learning how to do here. 

Click to make larger

 The "named attribution" has to do with how you write your code. The "jump" is because you are clicking a link in order to "jump" to another part of the same page.

Let's Do This!

We are going to use the HTML Editor for this exercise.

Click to make larger

Step 1: The Link

Identify your anchor text:

First you need to decide what you want your readers to click on. This is the link you will create (also known as “anchor text”). For a FAQ page, this would be the question. In the example of my Review Index, the links are the letters of the alphabet at the top of my page.  

Make the link: 

<a href="#C">C</a>

Copy and paste that code. 

The RED letter C is the anchor text. These are the words your readers will see on your page. In my example, I am making a link for my readers to jump to the “C” section of my Review Index and so the text they will click on is the letter C.

The BLUE letter C is the name of the link I am referencing. This is your "named attribution." You can name this anything you want, but I suggest you pick something short and specific. The name won’t affect the code in any way, but making it something relevant will help you remember and later identify your code.

In my example, since I am referencing a link to books beginning with the letter C I’m simply going to title this link “C”

Here is another example for a FAQ question:

<a href="#genres">What genres will I accept for review?</a>

In this example, the question readers will see is “What genres will I accept for review?” I have made my link name “genres” because it is both relevant and short.

Step 2: Link destination

Identify your anchor text:

This is the part of the page the link leads to. In my Review Index example, when a reader clicks on the letter C in my alphabet list, they will be brought to the section of my Review Index that lists all of the books that begin with the letter C. Notice how each section of my reviews begins with the appropriate letter (each letter is blue and italicized). Those letters are my anchor text for my link destinations.

Click to make larger

Make the link: 

 <a name="C">C</a>

Copy and paste the code.

The part in RED is your anchor text. This is what your readers will see and this is what the link will jump to. In my Review Index example this is the blue italicized letters of the alphabet.

The part in BLUE is the name attribution. It is VERY IMPORTANT that you use the same name you used in the first code. If you don’t use the same name, then your links will not work. Note that in the first code, you use the pound symbol (#) but in this second code you DO NOT use the pound symbol (#).

Here is what it would look like for the FAQ example from above:

<a name="genres">What genres will I accept for review?</a> 

Step 3: To the top

If you want to make a “To the top” link you do the same thing. You will use the code WITH the pound symbol (#) for the anchor text “To the top” and you will use the code WITHOUT the pound symbol (#) for whatever text you choose to be the link destination.

A note on this:


For some reason Blogger always corrupts my code for these jumps every time I edit my post. This is very annoying and I don't know why Blogger does it or how it can be stopped. My work-around is that I have copied my code and save it in a Word document. Then I just repaste it in every time I need to update my post. It's annoying, but it works and requires minimal effort. 


Example of what I have saved:


<span style="font-size: large;"><a href="#A">A</a> <a href="#B">B</a> <a href="#C">C</a> <a href="#D">D</a> <a href="#E">E</a> <a href="#F">F</a> <a href="#G">G</a> <a href="#H">H</a> <a href="#I">I</a> <a href="#J">J</a> <a href="#K">K</a> <a href="#L">L</a> <a href="#M">M</a> <a href="#N">N</a> <a href="#O">O</a> <a href="#P">P</a> <a href="#Q">Q</a> <a href="#R">R</a> <a href="#S">S</a> <a href="#T">T</a> <a href="#U">U</a> <a href="#V">V</a> <a href="#W">W</a> <a href="#X">X</a> <a href="#Y">Y</a> <a href="#Z">Z</a> <a href="##">#</a></span></div>

Click here to make a request for a future How To post.

The form is anonymous, so please don't feel shy at all!

I'm certainly not an expert, but I'll try my hardest to explain what I do know and research what I don't know.

Click here to read previous How To Posts 

Tweet