November 7, 2008

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 !


16 comments:

Riley Smith Fan Site said...

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 ;)

Sai @ Blogger Help said...

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.

Madijkie said...

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!

Madijkie said...

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

Sai - Blogger Help said...

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.

Sai - Blogger Help said...

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

Madijkie said...

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

Madijkie said...

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?

Divya Sai said...

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.

Steve said...

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?

Sai - Blogger Help said...

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">

Steve said...

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

Sai - BloggerStop.Net said...

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" />

Steve said...

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?

Sai - Blogger Help said...

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.

Anonymous said...

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

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

comment on this post Share Your Views

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

Join and share your views with other bloggers at BloggerStop Community

Comment Like This! and Optimize your blog...

SPAMMER OF THE MONTH: www[.]TopRankLinks[.]com

Next Post Homepage Previous Post

Regular Readers


What They Say...

Divya Sai is the ingenious webmaster of Bloggerstop.Net. Divya is extremely patient, knowledgeable and responsive... Bloggerstop.net has an abundance of articles on creating widgets, templates, hacks and ways to make your blog search engine friendly.
- Stacey @Pets With Allergies
I stumbled onto a great site. Sai, over at Bloggerstop.net has helped me tremendously and with great patience...for any and all questions regarding computer issues. And again, THANK YOU Sai.
- Cheryl @Cmash Loves To Read

More Here...

Popular Posts

Get this widget

| © 2010 BloggerStop.net | Blogger Widgets | Template by Dicas Blogger | Enhanced By Divya Sai | Privacy Policy