Add Anchor Tags to Jump on a Specific Location in a Page

I am writing this article for beginners who want to add anchor tags to jump within a post/article or page.

The feature is used to jump on a specific keyword or heading in a post.

Suppose you have a large amount of data in your article and you want to jump on a specific keyword or heading within a post then following method will help you to do this.

anchor tags
It’s quite easy to create page jumps in your post.

A page jump has two parts:

  1. The link – This is the link where your readers will click on it.
  2. The anchor – This is the location where you want to jump your readers to.

How to create anchor tags to jump on a specific location?

Step-1: Write everything in your article including title, text, images, headings, tags and categories.

Step-2: Now save your article in draft and click on HTML editing page of your post.

Step-3: There are two ways to link your headings or keywords within a post. You can choose any of them.

New Method   |    Go To Old Method   |    Go To Top

Choose the exact location where you want to add your link to and add a unique id in div tag like below example.

Naming your Target:

<div id="create-unique-id-here-which-you-want-to-call">
Write your content here.

Now Link to Your Anchor Target:

<a href="#create-unique-id-here-which-you-want-to-call">Your Link</a>

If you want to link it on another page then use below code:

<a href="your_complete_page_name.html#create-unique-id-here-which-you-want-to-call">Your Link</a>

Old Method   |    Go To New Method   |     Go To Top

Naming the Target:

Here you have to add “name” instead of “id” in div tag.

<a name="create-unique-name-here-which-you-want-to-call-it">Write your content here</a>

Now Link to Your Target

<a href="#create-unique-name-here-which-you-want-to-call-it">Your Link</a>

Step-4: Now use above codes in your post to help your visitors to jump on a specific topic.

Step-5: By this way you can add anchor tags to jump on a specific location within a page.

You can verify by clicking on below link how they work. It very fast, easy and can be very much helpful to your visitors.

New Method     |    Old Method   |    Go To Top

Share it with your friends, if you liked this article. If you have any query or suggestion, feel free to comment.

Get Free Blogging Tips & Technology updates in your Email !!!

Subscribe via RSS feed

The following two tabs change content below.
Anil Verma
IT Blogger Tips focus on Blogging Tips, SEO Tips, Social Media, SQL Tips, PL/SQL Tips, Oracle DBA, Linux/Unix, Latest Technology, How Tos and Technical Solutions. You can find us on Facebook | Twitter |
Find on Google+

Siteground SALE
60% OFF SiteGround WordPress Hosting – $3.95/month (Exclusive Offer !!!)