What Is an Anchor Link? Easy-To-Understand Explanation of Usage, Benefits, And Precautions


Share on facebook
Share on twitter
Share on pinterest
Share on whatsapp
anchor link

Are you familiar with the term anchor link?

Many people don’t know about anchor links because they can easily create blogs and websites now.

However, understanding the outline and mechanism of anchor links and being able to use them will be the basic strength for SEO measures.

This time, I will explain the outline of anchor links, how to use them, and the benefits and precautions. Use this article as a reference to set anchor links in the optimal position.

What is an anchor link?

Anchor links are text that take you to a specific location on your home page. Specifically, it is a technology that guides users to articles related to the content they are currently reading.

The reason why anchor links are necessary is that you can devise ways to comfortably obtain information from within the homepage. For first-time visitors, it takes time and effort to search for the same information.

If you install an anchor link to reduce lost time like the one above, you can quickly guide the user to the optimal page, so they can browse the content without stress.

Set up anchor links well and aim to create high-quality content and homepages for users.

How to use anchor links

Anchor links can be broadly classified into the following three methods for specifying link destinations.

attribute feature
href attribute Specify link destination by URL
id attribute You can specify a specific page to link to
target attribute You can specify the link destination in the window that opens

Each tag differs greatly in its characteristics and how to specify the link destination.
Select and install the most suitable anchor link according to the application.

href attribute

The href attribute is an attribute that sets the link of the URI that is the arrival point of the anchor and the reference.
When using an anchor link as the href attribute, you will need to enter the following characters.

<a href="https://sample.com">blog

Enter the domain you want to use as the link destination in the above “https://sample.com” part, and enter the name to be displayed in the link in the “Blog” part.

This series of steps completes the anchor link labeled “Blog”.

id attribute

The id attribute is a uniquely identifiable anchor link. Through identification, you have the advantage of being able to specify a particular page.

Also, by using the id attribute, you can specify and process named elements from CSS, JavaScript, etc., which is very convenient.

As a specific tag, the following input is required.

<a href="# test ">text
<p id="test">text</p>

The upper tag is the departure point, and the lower tag is the arrival point.

Then, enter the name of the anchor link you want to specify in “test” and the text to be displayed in “text”.

target attribute

The target attribute is the anchor link that opens the new tab page. The href attribute is a tag that moves between pages, but the target attribute opens a new page in a separate window, making it more convenient for users to look back at the original page.

The code to be entered is

<a href="Linked URL" target="_blank">New tab</a>


Enter the URL of the page you want to link to in the “Destination URL” section and the link name in the “New Tab” section.

Read Also: What Is the Difference Between URL with and Without Www?

Advantages of using anchor links

Anchor links have the advantage of improving user convenience. Because when a user is reading your content, having the most relevant and relevant anchor links will provide useful information.

A specific example is when you place links to other low calorie dishes at the end of low calorie recipe content. You don’t have to check various pages, and you can see the information you want, so it’s more convenient.

Conversely, without anchor links, users will have to navigate to different pages within the site many times, making it difficult to find the information they are looking for.

And by making the text used for the anchor link simple and easy to understand the content of the link destination, the expectation of SEO effect will increase.

Use anchor links within your content to improve the usability of your site.

3 things to keep in mind when using anchor links

As a precaution when using anchor links,

  • link color blue
  • Use the nofollow attribute if you don’t want to pass link ratings
  • Misalignment occurs when fixed with position:fixed;

It is important to be aware of such things as Keep these three things in mind when using anchor links.

link color blue

Let’s set the link color to blue. This is because blue stands out more than black and is easy for users to understand.

Also, to make the anchor link stand out, it is recommended to use a bright blue even if it is blue. A lot of users don’t notice anchor links because dark blue makes them look the same as black.

In order to aim for a site that is easy for users to understand, let’s also pay attention to the color of the anchor link.

Use the nofollow attribute if you don’t want to pass link ratings

If you don’t want to pass link reputation to other sites, using the nofollow attribute is effective. The reason is that using the nofollow attribute prevents search engine crawlers from recognizing your link as a destination.

If you link to your site on a site with low quality or malicious content, you may receive a bad reputation as well.

To avoid being affected by the above, use the nofollow attribute.

There are two types of tags specifically used: the rel attribute and the content attribute. The rel attribute is a method of applying the nofollow attribute to a specific link, and the content attribute is a method of applying the nofollow attribute to links on the entire page.

・Rel attribute tag

<a href="http://sample.com/" rel="nofollow">Sample text</a>

Enter the URL of the page in the above “http://sample.com” and the name of the anchor link in “Sample text”.

・Content attribute tag

<meta name="robots" content="nofollow">

If you do the above description, the anchor links of the entire page will be set to be excluded from crawling.

Use the nofollow attribute if you don’t want your link reputation to be passed on to other sites.

Misalignment occurs when fixed with position:fixed;

If the anchor link is fixed with position:fixed;, a gap will occur when the page is moved, so it is necessary to deal with it. Because it suffers from fixed headers and positions.

If the above conditions are not resolved, some content such as headings and text will not be visible, which is very inconvenient.

There are actually various ways to deal with it, but as a specific method, this time we will introduce a method that can be adjusted with CSS.

The specific code is as follows.

.sample {
 padding-top: 100px;
#sample {

Enter the height of the header part first. As a sample, I entered “100px” this time. After entering, you need to enter padding-top and margin-top to offset the height.

Specifically, the padding-top is the outer frame of the screen, and the margin-top is the inner frame of the screen. By shrinking the outer frame and pulling up the inner frame, you can set the anchor link at the appropriate position.

If the anchor link is fixed with position:fixed; and a gap occurs when moving the page, use the above method to fix it.


This time, I explained the outline of the anchor link, how to use it, and the advantages and cautions.
Nowadays, many people don’t know about anchor links because it’s easy to paste links when creating personal blogs.

However, if you dig deep and know the basics of anchor links, the scope of SEO measures will expand.

Check the points and precautions introduced in this article and set the anchor link in the optimal position.