How To Link Different Parts Of Same Web Page [Anchors]

If you want to link within the same the web page, like this:

Target 1 [Click to go to Target 2]

To link within the same web page, use this code:

Use this code to create the clickable link:
<a href="#ANCHOR-TEXT">Linking Text</a>

Use this code in the target area.
<a name="ANCHOR-TEXT"/>

Now whenever a visitor clicks on the hyper linked "Linking text", in the above code
then the visitor will reach the Anchor text code.

Target 2 [Click it to go back to Target 1]

These are called HTML anchors !

ProBlogger - Inspiring Others Realize Their Dreams!

Share this

Related Posts

Previous
Next Post »

16 comments

Write comments
February 22, 2010 12:48 AM delete

This is a good advice on the anchor text, thanks for your info. I would also suggest to put the target - blank option, so it opens in a new window ;)

Reply
avatar
February 22, 2010 2:39 AM delete

While target=_blank helps when linking a new page, but I don't prefer it while linking within the same page, otherwise so many new windows/tabs will open with the same page in it and it may annoy the visitors.

Reply
avatar
March 01, 2010 11:17 AM delete

Hi Say,

Again a huge thanks for all your tips and advise you share on this site. As a newbie, I read almost all your posts and implement much in my blog (that I try to set up as a website!)

This item gave rise to a number of fundamental questions, especially on Search Enigine Optimalisation. It would be great if you would like to help me resolve the following four:

1. Is it better for SEO to write several posts (read: multiple url’s) on a given subject and subsequently link them to one another? Or should I better write one long content rich post and then create a menu using these target-links to direct the reader to various specific subtopics? What is preferable: (a) a single page which is very rich in content and hopefully in backlinks, or (b) multiple url-pages with subtopics subsequently linked together?
2. What is the consequence of using target-links when you want to link from a remote website? Can you then link directly to a specific "target position" on the page?
3. If the former (question 2) link is possible: will other webmasters who link to my site also understand that they can direct to a specific "target" position? Or is there a way to alert them, to do this?
4. If I write a long post, the reader has to scroll down. Is it possible that the widgets in the column on the right of the blog start ‘floating’, in order to stay permanently visible on the screen?

Hopefully you are willing an able to answer my questions.
Kind regards!

Reply
avatar
March 02, 2010 2:32 AM delete

I made a page/post like i described in the previous comment:

http://www.iquitnow.org/2010/02/nicotine-patch-smoking-cessation.html

2 things:
- blogger warns me that I have to close the second html, likt this
- after publishing blogger automatically changes the html, after which a automated long url is added to the html code.
So it only works when I use this code:

linking text

Reply
avatar
March 07, 2010 4:25 PM delete

Just checked your blog-post, and the links are working correctly. I hope you got the point, that once you place the links #1 or #2 etc. you should not go to the "Compose" zone, simply place the links in the "Edit HTML" zone and publish the post.
I'll answer your ealier Qs a little later.

Reply
avatar
March 07, 2010 4:43 PM delete

Okay, so to ans your other Qns:

1. Well SEO is all about making SEs happy and that means making Readers happy. So usually readers do not prefer reading too big articles and also they hate to turn/go to new pages just after reading a small paragraph.
So if your article is too big (500 words+), only then break it in new posts and link them together (below every related posts, you can put links like "Prev" and "Next")

2. Yes you can link to specific targets within page-A from page-B. WRT SEO, no specific loss/profit is there, the usual link-juice will be passed to the linked page.

3. Yes other bloggers/webmasters can do this too, but they should know that you have placed the anchors in your blog, just as you did in that post, place a small index in the top-region of the post, (just as done by wikipedia - in its index in every article)
For eg.
See this link: Wikipedia HTML-History

4. Yes floating content is possible, if you want to do this only to some of your widgets, then you can use a similar appraoch as done in this tutorial:
http://bloggerstop.net/2009/01/add-floating-back-to-top-buttonimage-in.html

Reply
avatar
March 08, 2010 7:57 AM delete

Thanks for your reply. I know that my html anchors are working now. To do this i used code from another website. I think there is still a problem with your code, namely: blogger wants you to close the code in the target area: (/a).

Secondly I found out that there is a problem using target links when a page is viewed in IE8. While it will work in other browsers, the links will not work in IE8. This is due to a known bug, wich apperantly isn't fixed yet. There is way to work around this problem: never use the (target area) code without visuable text. Then it will not work in IE8. When you do want to use it without text, press 'space':

(a name="example" ) (/a)
instead of
(a name="example")(/a)

N.b. changed the < to (, to make it visuable

Reply
avatar
March 08, 2010 8:04 AM delete

Well it converted the html in previous comment. Try again. Space in html is
& n b s p ; So you have to use as target code:

(a name="example" )& nbps ;(/a) in your HTML and leave out the space between the letters.

Still get it?

Reply
avatar
March 08, 2010 9:00 AM delete

Well, as you can see the example in this post (target 1 <-> target 2), it also works in IE8.
Actually that space is not required, I forgot to add a closing slash "/" in the second code, thanks to you that I have just updated the tutorial, you can try this code, and I'm sure you won't face problem in it now.

Reply
avatar
July 22, 2010 5:22 AM delete

I've put links like this into posts before on blogspot, but today I'm having trouble. I was in edit html and used the code you offer. (I don't know how to write the code so it doesn't convert it into a link so I can't post it here).





But then I looked at it in Compose and went back to edit html and it had changed it automatically to a much longer code which takes you to my edit the post page.

Suggestions?

Reply
avatar
July 22, 2010 10:19 AM delete

I got your problem, Steve.
While doing this linking thing in the same post, you MUST publish the post only in the EDIT HTML mode. That is because in the "COMPOSE" mode, when we use # with href in the a tag, it automatically add the url from the address bar to that #. And because while editing the post, the url displayed in the browser is that of the edit page, so that link will go into that code.
So, what you have to do is from the COMPOSE mode go back to EDIT HTML mode (just before publishing the post). Then wherever your code is present, in the code href="*********#ANCHOR-TEXT" remove all those stars (in your post, it will be a url with many numbers) (leaving that # tag).
So it will simply look like this:
<a href="#ANCHOR-TEXT">

Reply
avatar
July 23, 2010 1:21 AM delete

Sai, Thank you! It's working, but there was still one more Blogspot glitch. I stayed in Edit HTML, but when I hit the post button, it wouldn't post and gave me this message:

Your HTML cannot be accepted: Tag is not closed: A

The Anchor part starts with an <a but doesn't have an a in the close. So I just hit the ignore this box and posted it and it works.

Again, thanks. This is a problem that wasn't in the earlier version. Do notify blogspot about these things or should I do that?

Steve

Reply
avatar
July 23, 2010 9:41 AM delete

You are welcome Steve,
BTW instead of ignoring the error, simply put the closing slash "/" in the same a tag (as shown in the post):
<a name="ANCHOR-TEXT" />

Reply
avatar
July 23, 2010 11:32 PM delete

I'm pretty sure I did that since I cut and pasted it in. The message said the a wasn't closed. Does it NOT need an a to close the a?

Reply
avatar
July 24, 2010 12:25 AM delete

both of these are correct:
1. <a name="ANCHOR-TEXT" />
2. <a name="ANCHOR-TEXT" > </a>

but this is the code that will give you an error:
<a name="ANCHOR-TEXT" >

Notice the missing "/" in the third code.

Reply
avatar
Anonymous
July 25, 2012 7:09 AM delete

Thanks, worked great, just what i was looking for.

Reply
avatar

Comments are moderated on this blog

Allowed HTML tags: <b>, <i> and <a>

Comment Like This! and Optimize your blog EmoticonEmoticon