What is an Anchor? How can I add Anchors to WordPress?

Chapter index of the page (click on a chapter title to see how anchors work):

Chapter 1: What is an anchor?
Chapter 2: How can I add anchors to WordPress?
Chapter 3: Linking to a specific part of the page from another pag

Chapter 1: What is an anchor?

An anchor is a link which points to a part of the same page the link is added to.

Let’s make an example:
Say you have a page which is full of text and divided into chapters. You want to have an index of the chapters at the top of the page and when someone clicks on a link in that chapter index you want him to be taken directly to the chapter he wanted to read. How can you achieve that? That’s what anchors are good for...

Try it by clicking on the "Chapter index of the page" links.

Chapter 2: How can I add anchors to WordPress?

That’s how you do it:

1. Write the content of the page you want to have Anchors in

2. Now we will make the index of the page. With index I mean the list of all the sections/chapters on the page. This index will be made of links. So if someone clicks on them he will be taken to the part of the page which is of interest. That’s how to do it:

Copy and paste the following code to your post for section 1, 2, 3, 4, ... (of course you can add more)

<a href="http://yourdomain.com/sitename/pagename.html#1" target="_top">Chapter 1</a>
<a href="http://yourdomain.com/sitename/pagename.html#2" target="_top">Chapter 2</a>
<a href="http://yourdomain.com/sitename/pagename.html#3" target="_top">Chapter 3</a>
<a href="http://yourdomain.com/sitename/pagename.html#4" target="_top">Chapter 4</a>

Replacing http://yourdomain.com/sitename/pagename.html with the URL to the page you want to add the anchors to.
Easy way: visit the page on the web and copy the address displaying in your browser.

3. Where the chapter starts, thus where you want people to be pointed to from the index, near the title of the section or chapter (I would recommend you a few lines above the start) add the following code

<a name="label"></a>

Change the parameter “label” with the number of the section

So it will read:
<a name="1"></a> for section 1
<a name="2"></a> for section 2
<a name="3"></a> for section 3
<a name="4"></a> for section 4
and so on...

Of course you can also name the anchors using whatever you like. I used 1 2 3 in the example to make it easier. Just don’t use special characters like à è ä ! ? and replace spaces using _ instead.

Chapter 3: Linking to a specific part of the page from another page

To link to a specific part of the page from another page use the URL of the anchor

http://urlofthepage#NameOrLabelOfTheAnchor

In the example of this page

http://yourdomain.com/sitename/pagename.html#1 for section 1
http://yourdomain.com/sitename/pagename.html#2 for section 2
and so on...

Just as in point 2 of Chapter 2 of the tutorial.