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 !

17 thoughts on “How To Link Different Parts Of Same Web Page [Anchors]

  1. 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.

  2. 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!

  3. 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.

  4. 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:
    https://bloggerstop.net/2009/01/add-floating-back-to-top-buttonimage-in.html

  5. 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

  6. 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?

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

  8. 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?

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

  10. 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

  11. 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.

  12. Thank you so much! This was very helpful. At first I wrote all of that code down and I kept going back and forth between compose and html to work on my post and when I hit publish none of the links worked! I was devastated, so I found your article and I found out that I had to publish from html with the code correct so that it doesn't get messed up. Thank you so much! I thought that might have been the case, and you confirmed my suspicions. Thank you again! 😀

Leave a Reply

Your email address will not be published. Required fields are marked *