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

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.

2 thoughts on “Add Anchor Tags to Jump on a Specific Location in a Page”

  1. Uchendu

    Thanks man…..I’ve been searching for this

Leave a Comment

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

Scroll to Top
Scroll to Top